chrome/browser/resources/chromeos/login/gaia_password_changed.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/icons.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-styles/color.html">

<!--
  Password changed UI for the New Gaia flow.
  Contains two cards with a fade transition between them:
    1. Old password input form.
    2. Warning about data loss
    3. Spinner with notice "Please wait";

  Example:
    <gaia-password-changed id="gaia-password-changed" hidden>
    </gaia-password-changed>

  Attributes:
   'email' - displayed email in header.

  Events:
    'passwordEnter' - fired when user enters password. Fires with an argument
                     |password|.
    'proceedAnyway' - fired when user decides to skip old password and
                      lose all the data in cryptohome.
    'cancel'        - fired when user press X-button.

  Methods:
    'invalidate' - mark password input as invalid.
    'reset'      - reset element, sets in on the first screen and enables
                   buttons.
    'focus'      - if current card is the first one it focuses password input.

-->
<dom-module id="gaia-password-changed">
  <link rel="stylesheet" href="gaia_password_changed.css">
  <link rel="stylesheet" href="oobe_flex_layout.css">
  <link rel="stylesheet" href="gaia_card_parameters.css">

  <template>
    <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="oldPasswordCard" class="fit">
          <gaia-header slot="header" email="[[email]]">
          </gaia-header>
          <div slot="footer" class="gaia-body-text"
              class="horizontal layout center">
            <p i18n-content="passwordChangedTitle">
            </p>
          </div>
          <gaia-input-form slot="footer" id="oldPasswordInputForm"
              disabled="[[disabled]]" on-submit="onPasswordSubmitted_"
              i18n-values="button-text:nextButtonText">
            <gaia-input slot="inputs" id="oldPasswordInput" type="password"
                required>
              <div slot="label" i18n-content="oldPasswordHint"></div>
              <div slot="error" i18n-content="oldPasswordIncorrect"></div>
            </gaia-input>
            <gaia-button type="link" on-tap="onForgotPasswordClicked_"
                i18n-content="forgotOldPasswordButtonText">
            </gaia-button>
          </gaia-input-form>
        </gaia-card>
      </neon-animatable>
      <neon-animatable class="fit">
        <gaia-card class="fit">
          <gaia-header slot="header" email="[[email]]">
          </gaia-header>
          <div slot="footer">
            <div class="gaia-body-text horizontal layout center">
              <iron-icon icon="cr:warning"></iron-icon>
              <p i18n-content="passwordChangedProceedAnywayTitle" class="flex">
              </p>
            </div>
            <div class="horizontal layout justified center">
              <gaia-button type="link" on-tap="onTryAgainClicked_"
                  i18n-content="passwordChangedTryAgain">
              </gaia-button>
              <gaia-button id="proceedAnywayBtn" on-tap="onProceedClicked_"
                  i18n-content="proceedAnywayButton">
              </gaia-button>
            </div>
          </div>
        </gaia-card>
      </neon-animatable>
      <neon-animatable class="fit">
        <throbber-notice class="fit" i18n-values="text:gaiaLoading">
        </throbber-notice>
      </neon-animatable>
    </neon-animated-pages>
    <navigation-bar id="navigation" disabled="[[disabled]]" close-visible
        on-close="onClose_">
    </navigation-bar>
  </template>
</dom-module>