Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / chrome / browser / resources / chromeos / login / gaia_password_changed.html
blobd4d2d20e57f4b77e9e523c5810c6f6a918663ebc
1 <!-- Copyright 2015 The Chromium Authors. All rights reserved.
2 Use of this source code is governed by a BSD-style license that can be
3 found in the LICENSE file. -->
5 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
6 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
7 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
8 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html">
9 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
10 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html">
11 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
12 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
14 <!--
15 Password changed UI for the New Gaia flow.
16 Contains two cards with a fade transition between them:
17 1. Old password input form.
18 2. Warning about data loss
19 3. Spinner with notice "Please wait";
21 Example:
22 <gaia-password-changed id="gaia-password-changed" hidden>
23 </gaia-password-changed>
25 Attributes:
26 'email' - displayed email in header.
28 Events:
29 'passwordEnter' - fired when user enters password. Fires with an argument
30 |password|.
31 'proceedAnyway' - fired when user decides to skip old password and
32 lose all the data in cryptohome.
33 'cancel' - fired when user press X-button.
35 Methods:
36 'invalidate' - mark password input as invalid.
37 'reset' - reset element, sets in on the first screen and enables
38 buttons.
39 'focus' - if current card is the first one it focuses password input.
41 -->
42 <dom-module name="gaia-password-changed">
43 <link rel="stylesheet" href="gaia_password_changed.css">
45 <template>
46 <neon-animated-pages id="animatedPages" class="fit"
47 entry-animation="fade-in-animation" exit-animation="fade-out-animation"
48 on-neon-animation-finish="onAnimationFinish_" selected="0">
49 <neon-animatable class="fit">
50 <gaia-card id="oldPasswordCard" class="fit">
51 <gaia-header class="header" email="[[email]]">
52 </gaia-header>
53 <div class="footer gaia-body-text" class="horizontal layout center">
54 <p i18n-content="passwordChangedTitle">
55 </p>
56 </div>
57 <gaia-input-form class="footer" id="oldPasswordInputForm"
58 disabled="[[disabled]]" on-submit="onPasswordSubmitted_"
59 i18n-values="button-text:nextButtonText">
60 <gaia-input id="oldPasswordInput" type="password" required
61 i18n-values="error:oldPasswordIncorrect;
62 label:oldPasswordHint">
63 </gaia-input>
64 <gaia-button type="link" on-tap="onForgotPasswordClicked_"
65 i18n-content="forgotOldPasswordButtonText">
66 </gaia-button>
67 </gaia-input-form>
68 </gaia-card>
69 </neon-animatable>
70 <neon-animatable class="fit">
71 <gaia-card class="fit">
72 <gaia-header class="header" email="[[email]]">
73 </gaia-header>
74 <div class="footer">
75 <div class="gaia-body-text horizontal layout center">
76 <iron-icon icon="warning"></iron-icon>
77 <p i18n-content="passwordChangedProceedAnywayTitle" class="flex">
78 </p>
79 </div>
80 <div class="horizontal layout justified center">
81 <gaia-button type="link" on-tap="onTryAgainClicked_"
82 i18n-content="passwordChangedTryAgain">
83 </gaia-button>
84 <gaia-button id="proceedAnywayBtn" on-tap="onProceedClicked_"
85 i18n-content="proceedAnywayButton">
86 </gaia-button>
87 </div>
88 </div>
89 </gaia-card>
90 </neon-animatable>
91 <neon-animatable class="fit">
92 <throbber-notice class="fit" i18n-values="text:gaiaLoadingNewGaia">
93 </throbber-notice>
94 </neon-animatable>
95 </neon-animated-pages>
96 <gaia-icon-button id="closeButton" icon="close" on-tap="onClose_"
97 disabled="[[disabled]]" i18n-values="aria-label:closeButton">
98 </gaia-icon-button>
99 </template>
100 </dom-module>