| 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/paper-dialog/paper-action-di
alog.html"> | 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/neon-animation/animatio
ns/fade-in-animation.html"> |
| 7 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animatio
ns/fade-out-animation.html"> |
| 8 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-ani
matable.html"> |
| 9 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-ani
mated-pages.html"> |
| 10 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dial
og.html"> |
| 11 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
| 12 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html"> |
| 6 | 13 |
| 7 <!-- | 14 <!-- |
| 8 SAML password confirmation UI for the New Gaia flow. | 15 SAML password confirmation UI for the New Gaia flow. |
| 9 Contains two cards with a fade transition between them: | 16 Contains two cards with a fade transition between them: |
| 10 1. Password input form. | 17 1. Password input form. |
| 11 2. Spinner with notice "Please wait"; | 18 2. Spinner with notice "Please wait"; |
| 12 | 19 |
| 13 Example: | 20 Example: |
| 14 <saml-confirm-password id="saml-confirm-password" hidden> | 21 <saml-confirm-password id="saml-confirm-password" hidden> |
| 15 </saml-confirm-password> | 22 </saml-confirm-password> |
| 16 | 23 |
| 17 Attributes: | 24 Attributes: |
| 18 'email' - Displayed email in header. | 25 'email' - Displayed email in header. |
| 19 | 26 |
| 20 Events: | 27 Events: |
| 21 'passwordEnter' - Fired when user enters password. Fires with an argument | 28 'passwordEnter' - Fired when user enters password. Fires with an argument |
| 22 |password|. | 29 |password|. |
| 23 'cancel' - Fired when user presses the X-button and then presses YES | 30 'cancel' - Fired when user presses the X-button and then presses YES |
| 24 in the cancel confirmation dialog. | 31 in the cancel confirmation dialog. |
| 25 | 32 |
| 26 Methods: | 33 Methods: |
| 27 'invalidate' - Mark password input as invalid. | 34 'invalidate' - Mark password input as invalid. |
| 28 'reset' - Reset element, switches to the first screen, closes | 35 'reset' - Reset element, switches to the first screen, closes |
| 29 the confirm dialog, displays the close button, | 36 the confirm dialog, displays the close button, |
| 30 empties password field and enables buttons. | 37 empties password field and enables buttons. |
| 31 'focus' - If the current card is the first one, focuses password input. | 38 'focus' - If the current card is the first one, focuses password input. |
| 32 --> | 39 --> |
| 33 <polymer-element name="saml-confirm-password" vertical layout | 40 <dom-module name="saml-confirm-password"> |
| 34 attributes="email"> | 41 <link rel="stylesheet" href="saml_confirm_password.css"> |
| 42 |
| 35 <template> | 43 <template> |
| 36 <link rel="stylesheet" href="saml_confirm_password.css"> | 44 <neon-animated-pages id="animatedPages" class="fit" |
| 37 <core-animated-pages id="animatedPages" transitions="cross-fade-all" flex | 45 entry-animation="fade-in-animation" exit-animation="fade-out-animation" |
| 38 on-core-animated-pages-transition-end="{{onTransitionEnd}}"> | 46 on-neon-animation-finish="onAnimationFinish_" selected="0"> |
| 39 <section flex> | 47 <neon-animatable class="fit"> |
| 40 <gaia-card id="confirmPasswordCard"> | 48 <gaia-card id="confirmPasswordCard" class="fit"> |
| 41 <gaia-header class="header" email="{{email}}"> | 49 <gaia-header class="header flex" email="[[email]]"> |
| 42 </gaia-header> | 50 </gaia-header> |
| 43 <div horizontal layout center class="footer gaia-body-text"> | 51 <div class="footer gaia-body-text horizontal layout center"> |
| 44 <p i18n-content="confirmPasswordTitle"> | 52 <p i18n-content="confirmPasswordTitle"> |
| 45 </p> | 53 </p> |
| 46 </div> | 54 </div> |
| 47 <gaia-input-form id="inputForm" class="footer" | 55 <gaia-input-form id="inputForm" class="footer" |
| 48 on-submit="{{onPasswordSubmitted}}" | 56 on-submit="onPasswordSubmitted_" disabled="[[disabled]]" |
| 49 i18n-values="buttonText:nextButtonText"> | 57 i18n-values="button-text:nextButtonText"> |
| 50 <gaia-input id="passwordInput" type="password" required | 58 <gaia-input id="passwordInput" type="password" required |
| 51 i18n-values="error:confirmPasswordIncorrectPassword; | 59 i18n-values="error:confirmPasswordIncorrectPassword; |
| 52 label:confirmPasswordLabel;"> | 60 label:confirmPasswordLabel;"> |
| 53 </gaia-input> | 61 </gaia-input> |
| 54 </gaia-input-form> | 62 </gaia-input-form> |
| 55 <paper-action-dialog class="footer" id="cancelConfirmDlg" | |
| 56 layered="false"> | |
| 57 <p i18n-content="accountSetupCancelDialogTitle"></p> | |
| 58 <gaia-button type="dialog" affirmative autofocus | |
| 59 i18n-content="accountSetupCancelDialogNo"> | |
| 60 </gaia-button> | |
| 61 <gaia-button type="dialog" on-tap="{{onConfirmCancel}}" affirmative | |
| 62 i18n-content="accountSetupCancelDialogYes"> | |
| 63 </gaia-button> | |
| 64 </paper-action-dialog> | |
| 65 </gaia-card> | 63 </gaia-card> |
| 66 </section> | 64 </neon-animatable> |
| 67 <section flex vertical layout center-justified> | 65 <neon-animatable class="fit"> |
| 68 <throbber-notice i18n-values="text:gaiaLoadingNewGaia" self-center> | 66 <throbber-notice i18n-values="text:gaiaLoadingNewGaia" class="fit"> |
| 69 </throbber-notice> | 67 </throbber-notice> |
| 70 </section> | 68 </neon-animatable> |
| 71 </core-animated-pages> | 69 </neon-animated-pages> |
| 72 <button id="closeButton" is="gaia-icon-button" icon="close" | 70 |
| 73 on-click="{{onClose}}" i18n-values="aria-label:closeButton" | 71 <gaia-icon-button id="closeButton" icon="close" on-tap="onClose_" |
| 74 tabindex="0"> | 72 disabled="[[disabled]]" i18n-values="aria-label:closeButton"> |
| 75 </button> | 73 </gaia-icon-button> |
| 74 |
| 75 <paper-dialog id="cancelConfirmDlg" no-cancel-on-outside-click |
| 76 on-iron-overlay-closed="onDialogOverlayClosed_"> |
| 77 <h2 i18n-content="accountSetupCancelDialogTitle"></h2> |
| 78 <div class="buttons"> |
| 79 <gaia-button type="dialog" dialog-dismiss autofocus |
| 80 i18n-content="accountSetupCancelDialogNo"> |
| 81 </gaia-button> |
| 82 <gaia-button type="dialog" dialog-confirm on-tap="onConfirmCancel_" |
| 83 i18n-content="accountSetupCancelDialogYes"> |
| 84 </gaia-button> |
| 85 </div> |
| 86 </paper-dialog> |
| 87 |
| 76 </template> | 88 </template> |
| 77 </polymer-element> | 89 </dom-module> |
| 90 |
| OLD | NEW |