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

<!-- Copyright 2015 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-from-right-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-left-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-right-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.html">
<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">

<!--
  Offline UI for the New Gaia flow.
  Contains two cards with a slide transition between them:
    1. Email input form.
    2. Password input form.

  Example:
    <offline-gaia></offline-gaia>

  Attributes:
    'enterpriseInfo' - Information about device management.
    'emailDomain' - autocomplete domain for the email input.

  Events:
    'authCompleted' - fired when user enters login and password. Fires with an
                      argument |credentials| which contains.
                      |credentials| = { 'useOffline': true,
                                        'email': <email>,
                                        'password': <typed password> }
                      If user did not type domain |email| will be added by
                      "@gmail.com" or by 'emailDomain' if it is set.
  Methods:
    'focus' - focuses current screen (email input or password input);
    'setEmail' - accepts an argument |email|. If |email| is empty it sets
                 current screen to the email input, otherwise it sets current
                 screen to password input and shows error that previously
                 entered password is incorrect.
-->
<dom-module name="offline-gaia">
  <link rel="stylesheet" href="offline_gaia.css">

  <template>
    <neon-animated-pages id="animatedPages" class="fit" attr-for-selected="id"
        entry-animation="slide-from-right-animation"
        exit-animation="slide-to-left-animation"
        on-neon-animation-finish="onAnimationFinish_" selected="emailSection">

      <neon-animatable id="emailSection" class="fit">
        <gaia-card class="fit">
          <div class="header flex vertical layout end-justified start">
            <h1 class="welcome-message" i18n-content="offlineLoginWelcome"></h1>
            <p class="enterprise-info"  hidden$="[[!enterpriseInfo]]">
              <span>[[enterpriseInfo]]</span>
            </p>
          </div>
          <div class="footer flex vertical layout justified">
            <gaia-input-form on-submit="onEmailSubmitted_"
                disabled="[[disabled]]"
                i18n-values="button-text:offlineLoginNextBtn">
              <gaia-input id="emailInput" type="email" required
                  domain="[[emailDomain]]"
                  i18n-values="error:offlineLoginInvalidEmail;
                               label:offlineLoginEmail">
              </gaia-input>
            </gaia-input-form>
            <img src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90"
                class="self-center" alt="">
          </div>
        </gaia-card>
      </neon-animatable>

      <neon-animatable id="passwordSection" class="fit">
        <gaia-card id="passwordCard" class="fit">
          <gaia-header class="header flex" id="passwordHeader">
          </gaia-header>
          <gaia-input-form class="footer" disabled="[[disabled]]"
              on-submit="onPasswordSubmitted_"
              i18n-values="button-text:offlineLoginNextBtn">
            <gaia-input id="passwordInput" type="password" required
                i18n-values="error:offlineLoginInvalidPassword;
                             label:offlineLoginPassword">
            </gaia-input>
            <gaia-button type="link" on-tap="onForgotPasswordClicked_"
                i18n-content="offlineLoginForgotPasswordBtn">
            </gaia-button>
          </gaia-input-form>
        </gaia-card>
      </neon-animatable>
    </neon-animated-pages>

    <gaia-icon-button id="backButton" icon="arrow-back" disabled="[[disabled]]"
        on-tap="onBack_" hidden>
    </gaia-icon-button>

    <paper-dialog id="forgotPasswordDlg" no-cancel-on-outside-click
        on-iron-overlay-closed="onDialogOverlayClosed_">
      <p i18n-content="offlineLoginForgotPasswordDlg"></p>
      <div class="buttons">
        <gaia-button type="dialog" dialog-confirm autofocus
            i18n-content="offlineLoginCloseBtn">
        </gaia-button>
      </div>
    </paper-dialog>
  </template>
</dom-module>