ChromeOS Gaia: SAML password confirmation dialog

chrome/browser/resources/chromeos/login/saml_confirm_password.html

+<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">
+    <gaia-core-icon-button id="closeButton" icon="close" on-tap="{{onClose}}">
+    </gaia-core-icon-button>
+    <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>
+  </template>
+</polymer-element>