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