| 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 |