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/slide-from-right.html"> | 4 |
5 <link rel="import" href="chrome://resources/polymer/paper-button/paper-button.ht
ml"> | 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/paper-dialog/paper-action-di
alog.html"> | 6 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animatio
ns/slide-from-left-animation.html"> |
| 7 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animatio
ns/slide-from-right-animation.html"> |
| 8 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animatio
ns/slide-left-animation.html"> |
| 9 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animatio
ns/slide-right-animation.html"> |
| 10 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-ani
matable.html"> |
| 11 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-ani
mated-pages.html"> |
| 12 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dial
og.html"> |
| 13 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
7 | 14 |
8 <!-- | 15 <!-- |
9 Offline UI for the New Gaia flow. | 16 Offline UI for the New Gaia flow. |
10 Contains two cards with a slide transition between them: | 17 Contains two cards with a slide transition between them: |
11 1. Email input form. | 18 1. Email input form. |
12 2. Password input form. | 19 2. Password input form. |
13 | 20 |
14 Example: | 21 Example: |
15 <offline-gaia></offline-gaia> | 22 <offline-gaia></offline-gaia> |
16 | 23 |
17 Attributes: | 24 Attributes: |
18 'enterpriseInfo' - Information about device management. | 25 'enterpriseInfo' - Information about device management. |
19 'emailDomain' - autocomplete domain for the email input. | 26 'emailDomain' - autocomplete domain for the email input. |
20 | 27 |
21 Events: | 28 Events: |
22 'authCompleted' - fired when user enters login and password. Fires with an | 29 'authCompleted' - fired when user enters login and password. Fires with an |
23 argument |credentials| which contains. | 30 argument |credentials| which contains. |
24 |credentials| = { 'useOffline': true, | 31 |credentials| = { 'useOffline': true, |
25 'email': <email>, | 32 'email': <email>, |
26 'password': <typed password> } | 33 'password': <typed password> } |
27 If user did not type domain |email| will be added by | 34 If user did not type domain |email| will be added by |
28 "@gmail.com" or by 'emailDomain' if it is set. | 35 "@gmail.com" or by 'emailDomain' if it is set. |
29 Methods: | 36 Methods: |
30 'focus' - focuses current screen (email input or password input); | 37 'focus' - focuses current screen (email input or password input); |
31 'setEmail' - accepts an argument |email|. If |email| is empty it sets | 38 'setEmail' - accepts an argument |email|. If |email| is empty it sets |
32 current screen to the email input, otherwise it sets current | 39 current screen to the email input, otherwise it sets current |
33 screen to password input and shows error that previously | 40 screen to password input and shows error that previously |
34 entered password is incorrect. | 41 entered password is incorrect. |
35 --> | 42 --> |
36 <polymer-element name="offline-gaia" vertical layout | 43 <dom-module name="offline-gaia"> |
37 attributes="enterpriseInfo emailDomain"> | 44 <link rel="stylesheet" href="offline_gaia.css"> |
| 45 |
38 <template> | 46 <template> |
39 <link rel="stylesheet" href="offline_gaia.css"> | 47 <neon-animated-pages id="animatedPages" class="fit" attr-for-selected="id" |
40 <core-animated-pages id="animatedPages" transitions="slide-from-right" | 48 entry-animation="slide-from-right-animation" |
41 valueattr="id" | 49 exit-animation="slide-to-left-animation" |
42 on-core-animated-pages-transition-end="{{onTransitionEnd}}" flex> | 50 on-neon-animation-finish="onAnimationFinish_" selected="emailSection"> |
43 <section flex id="emailSection"> | 51 |
44 <gaia-card> | 52 <neon-animatable id="emailSection" class="fit"> |
45 <div class="header" flex vertical layout end-justified start> | 53 <gaia-card class="fit"> |
| 54 <div class="header flex vertical layout end-justified start"> |
46 <h1 class="welcome-message" i18n-content="offlineLoginWelcome"></h1> | 55 <h1 class="welcome-message" i18n-content="offlineLoginWelcome"></h1> |
47 <p class="enterprise-info" hidden?="{{!enterpriseInfo}}"> | 56 <p class="enterprise-info" hidden$="[[!enterpriseInfo]]"> |
48 {{enterpriseInfo}} | 57 <span>[[enterpriseInfo]]</span> |
49 </p> | 58 </p> |
50 </div> | 59 </div> |
51 <div class="footer" flex vertical layout justified> | 60 <div class="footer flex vertical layout justified"> |
52 <gaia-input-form i18n-values="buttonText:offlineLoginNextBtn" | 61 <gaia-input-form on-submit="onEmailSubmitted_" |
53 on-submit="{{onEmailSubmitted}}"> | 62 disabled="[[disabled]]" |
| 63 i18n-values="button-text:offlineLoginNextBtn"> |
54 <gaia-input id="emailInput" type="email" required | 64 <gaia-input id="emailInput" type="email" required |
55 domain="{{emailDomain}}" | 65 domain="[[emailDomain]]" |
56 i18n-values="error:offlineLoginInvalidEmail; | 66 i18n-values="error:offlineLoginInvalidEmail; |
57 label:offlineLoginEmail"> | 67 label:offlineLoginEmail"> |
58 </gaia-input> | 68 </gaia-input> |
59 </gaia-input-form> | 69 </gaia-input-form> |
60 <img self-center src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" | 70 <img src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" |
61 alt=""> | 71 class="self-center" alt=""> |
62 </div> | 72 </div> |
63 </gaia-card> | 73 </gaia-card> |
64 </section> | 74 </neon-animatable> |
65 <section flex id="passwordSection"> | 75 |
66 <gaia-card> | 76 <neon-animatable id="passwordSection" class="fit"> |
67 <gaia-header class="header" id="passwordHeader"> | 77 <gaia-card id="passwordCard" class="fit"> |
| 78 <gaia-header class="header flex" id="passwordHeader"> |
68 </gaia-header> | 79 </gaia-header> |
69 <gaia-input-form class="footer" | 80 <gaia-input-form class="footer" disabled="[[disabled]]" |
70 i18n-values="buttonText:offlineLoginNextBtn" | 81 on-submit="onPasswordSubmitted_" |
71 on-submit="{{onPasswordSubmitted}}"> | 82 i18n-values="button-text:offlineLoginNextBtn"> |
72 <gaia-input id="passwordInput" type="password" required | 83 <gaia-input id="passwordInput" type="password" required |
73 i18n-values="error:offlineLoginInvalidPassword; | 84 i18n-values="error:offlineLoginInvalidPassword; |
74 label:offlineLoginPassword"> | 85 label:offlineLoginPassword"> |
75 </gaia-input> | 86 </gaia-input> |
76 <gaia-button type="link" on-tap="{{onForgotPasswordClicked}}" | 87 <gaia-button type="link" on-tap="onForgotPasswordClicked_" |
77 i18n-content="offlineLoginForgotPasswordBtn"> | 88 i18n-content="offlineLoginForgotPasswordBtn"> |
78 </gaia-button> | 89 </gaia-button> |
79 <paper-action-dialog id="forgotPasswordDlg" autoCloseDisabled | |
80 backdrop on-keydown="{{onKeyDownOnDialog}}"> | |
81 <p i18n-content="offlineLoginForgotPasswordDlg"></p> | |
82 <gaia-button type="dialog" affirmative autofocus | |
83 i18n-content="offlineLoginCloseBtn"> | |
84 </gaia-button> | |
85 </paper-action-dialog> | |
86 </gaia-input-form> | 90 </gaia-input-form> |
87 </gaia-card> | 91 </gaia-card> |
88 </section> | 92 </neon-animatable> |
89 </core-animated-pages> | 93 </neon-animated-pages> |
90 <button id="backButton" is="gaia-icon-button" icon="arrow-back" | 94 |
91 i18n-values="aria-label:backButton" on-click="{{onBack}}"> | 95 <gaia-icon-button id="backButton" icon="arrow-back" disabled="[[disabled]]" |
92 </button> | 96 on-tap="onBack_" hidden> |
| 97 </gaia-icon-button> |
| 98 |
| 99 <paper-dialog id="forgotPasswordDlg" no-cancel-on-outside-click |
| 100 on-iron-overlay-closed="onDialogOverlayClosed_"> |
| 101 <p i18n-content="offlineLoginForgotPasswordDlg"></p> |
| 102 <div class="buttons"> |
| 103 <gaia-button type="dialog" dialog-confirm autofocus |
| 104 i18n-content="offlineLoginCloseBtn"> |
| 105 </gaia-button> |
| 106 </div> |
| 107 </paper-dialog> |
93 </template> | 108 </template> |
94 </polymer-element> | 109 </dom-module> |
| 110 |
OLD | NEW |