chrome/browser/resources/chromeos/login/offline_gaia.html

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