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

<!-- Copyright 2015 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/web-animations.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.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.
-->
<dom-module id="saml-confirm-password">
  <link rel="stylesheet" href="oobe_flex_layout.css">
  <link rel="stylesheet" href="saml_confirm_password.css">
  <link rel="stylesheet" href="gaia_card_parameters.css">

  <template>
    <style include="cr-shared-style"></style>
    <neon-animated-pages id="animatedPages" class="fit"
        entry-animation="fade-in-animation" exit-animation="fade-out-animation"
        on-neon-animation-finish="onAnimationFinish_" selected="0">
      <neon-animatable class="fit">
        <gaia-card id="confirmPasswordCard" class="fit">
          <gaia-header slot="header" class="flex" email="[[email]]">
          </gaia-header>
          <div slot="footer" class="gaia-body-text horizontal layout center">
            <p id="title"></p>
          </div>
          <gaia-input-form id="inputForm" slot="footer"
              on-submit="onPasswordSubmitted_" disabled="[[disabled]]"
              i18n-values="button-text:nextButtonText">
            <gaia-input slot="inputs" id="passwordInput" type="password"
                required>
            </gaia-input>
            <template is="dom-if" if="[[manualInput]]">
              <gaia-input slot="inputs" id="confirmPasswordInput"
                  type="password" required>
                <div slot="label">[[getConfirmPasswordInputLabel_()]]</div>
                <div slot="error">[[getConfirmPasswordInputError_()]]</div>
              </gaia-input>
            </template>
          </gaia-input-form>
        </gaia-card>
      </neon-animatable>
      <neon-animatable class="fit">
        <throbber-notice i18n-values="text:gaiaLoading" class="fit">
        </throbber-notice>
      </neon-animatable>
    </neon-animated-pages>

    <navigation-bar id="navigation" close-visible on-close="onClose_"
        disabled="[[disabled]]">
    </navigation-bar>

    <cr-dialog id="cancelConfirmDlg"
        on-close="onDialogOverlayClosed_">
      <div slot="body"
          i18n-content="accountSetupCancelDialogTitle"></div>
      <div slot="button-container">
        <paper-button class="action-button"
            i18n-content="accountSetupCancelDialogNo" on-tap="onCancelNo_">
        </paper-button>
        <paper-button class="cancel-button"
            i18n-content="accountSetupCancelDialogYes" on-tap="onCancelYes_">
        </paper-button>
      </div>
    </cr-dialog>

  </template>
</dom-module>