summaryrefslogtreecommitdiff
path: root/chromium/chrome/browser/resources/chromeos/login/saml_confirm_password.html
blob: 47800e2600f369d1f47935fa1f44bd8e42cccbed (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/polymer/layout.html">
<link rel="import" href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html">
<link rel="import" href="chrome://resources/polymer/core-animated-pages/transitions/cross-fade.html">

<!--
  SAML password confirmation UI for the New Gaia flow.
  Contains two cards with a fade transition between them:
    1. Password input form.
    2. Spinner with notice "Please wait";

  Example:
    <saml-confirm-password id="saml-confirm-password" hidden>
    </saml-confirm-password>

  Attributes:
   'email' - Displayed email in header.

  Events:
    'passwordEnter' - Fired when user enters password. Fires with an argument
                      |password|.
    'cancel'        - Fired when user presses the X-button and then presses YES
                      in the cancel confirmation dialog.

  Methods:
    'invalidate' - Mark password input as invalid.
    'reset'      - Reset element, switches to the first screen, closes
                   the confirm dialog, displays the close button,
                   empties password field and enables buttons.
    'focus'      - If the current card is the first one, focuses password input.
-->
<polymer-element name="saml-confirm-password" vertical layout
    attributes="email">
  <template>
    <link rel="stylesheet" href="saml_confirm_password.css">
    <core-animated-pages id="animatedPages" transitions="cross-fade-all" flex
        on-core-animated-pages-transition-end="{{onTransitionEnd}}">
      <section flex>
        <gaia-card id="confirmPasswordCard">
          <gaia-header class="header" email="{{email}}">
          </gaia-header>
          <div horizontal layout center class="footer gaia-body-text">
            <p i18n-content="confirmPasswordTitle">
            </p>
          </div>
          <gaia-input-form id="inputForm" class="footer"
              on-submit="{{onPasswordSubmitted}}"
              i18n-values="buttonText:nextButtonText">
            <gaia-input id="passwordInput" type="password" required
              i18n-values="error:confirmPasswordIncorrectPassword;
                           label:confirmPasswordLabel;">
            </gaia-input>
          </gaia-input-form>
          <paper-action-dialog class="footer" id="cancelConfirmDlg"
              layered="false">
            <p i18n-content="accountSetupCancelDialogTitle"></p>
            <gaia-paper-button class="dialog-action-button" affirmative
                autofocus i18n-content="accountSetupCancelDialogNo">
            </gaia-paper-button>
            <gaia-paper-button id="confirmCancel" on-tap="{{onConfirmCancel}}"
                class="dialog-action-button" affirmative
                i18n-content="accountSetupCancelDialogYes">
            </gaia-paper-button>
          </paper-action-dialog>
        </gaia-card>
      </section>
      <section flex vertical layout center-justified>
        <throbber-notice i18n-values="text:gaiaLoadingNewGaia" self-center>
        </throbber-notice>
      </section>
    </core-animated-pages>
    <button id="closeButton" is="gaia-icon-button" icon="close"
        on-click="{{onClose}}" i18n-values="aria-label:closeButton"
        tabindex="0">
    </button>
  </template>
</polymer-element>