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/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.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:
    'showEnterpriseMessage' - If the "manged by" message should be shown.
    'domain' - The enterprise domain the device is managed by.
    'emailDomain' - autocomplete domain for the email input.
    'glif-mode' - GLIF MM mode (Gaia v2 API).

  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 id="offline-gaia">
  <link rel="stylesheet" href="offline_gaia.css">

  <template>
    <style include="cr-shared-style"></style>
    <link rel="stylesheet" href="oobe_flex_layout.css">
    <link rel="stylesheet" href="oobe_dialog_host.css">
    <link rel="stylesheet" href="gaia_card_parameters.css">
    <oobe-dialog role="dialog" has-buttons selected$="[[activeSection]]"
        animation-in-progress$="[[animationInProgress]]" no-header
        no-footer-padding>
      <div slot="footer">
        <img id="icon" src="chrome://theme/IDR_LOGO_GOOGLE_COLOR_90" alt="">
      </div>
      <div id="animation-outer-container" slot="footer">
        <div id="animation-inner-container" class="flex layout horizontal">
          <div id="email-section" class="section"
              on-animationend="onSlideAnimationEnd_">
            <div id="title-container" class="layout vertical end-justified">
              <h1>[[i18nDynamic(locale, 'loginWelcomeMessage')]]</h1>
            </div>
            <div id="subtitle-container">
              <div id="managedBy" class="enterprise-info"
                  hidden$="[[!domain]]">
                  [[i18nDynamic(locale, 'enterpriseInfoMessage', domain)]]
              </div>
            </div>
            <gaia-input-form on-submit="onEmailSubmitted_"
                disabled="[[disabled]]"
                button-text="[[i18nDynamic(locale, 'offlineLoginNextBtn')]]">
              <gaia-input slot="inputs" id="emailInput" type="email" required
                  domain="[[emailDomain]]">
                <div slot="label">
                  [[i18nDynamic(locale, 'offlineLoginEmail')]]
                </div>
                <div slot="error">
                  [[i18nDynamic(locale, 'offlineLoginInvalidEmail')]]
                </div>
              </gaia-input>
            </gaia-input-form>
          </div>
          <div id="password-section" class="section">
            <div id="title-container" class="layout vertical end-justified">
              <gaia-header id="passwordHeader"></gaia-header>
            </div>
            <div id="subtitle-container">
            </div>
            <gaia-input-form disabled="[[disabled]]"
                on-submit="onPasswordSubmitted_"
                button-text="[[i18nDynamic(locale, 'offlineLoginNextBtn')]]">
              <gaia-input slot="inputs" id="passwordInput" type="password"
                  required>
                <div slot="label">
                  [[i18nDynamic(locale, 'offlineLoginPassword')]]
                </div>
                <div slot="error">
                  [[i18nDynamic(locale, 'offlineLoginInvalidPassword')]]
                </div>
              </gaia-input>
              <gaia-button type="link" on-tap="onForgotPasswordClicked_">
                [[i18nDynamic(locale, 'offlineLoginForgotPasswordBtn')]]
              </gaia-button>
            </gaia-input-form>
          </div>
        </div>
      </div>
      <div slot="bottom-buttons" class="flex layout horizontal">
        <oobe-back-button id="offline-gaia-back-button"
            on-tap="onBackButtonClicked_"></oobe-back-button>
        <div class="flex">
        </div>
      </div>
    </oobe-dialog>
    <cr-dialog id="forgotPasswordDlg"
        on-close="onDialogOverlayClosed_">
      <div slot="body"
          i18n-content="offlineLoginForgotPasswordDlg"></div>
      <div slot="button-container">
        <paper-button autofocus on-tap="onForgotPasswordCloseTap_"
            i18n-content="offlineLoginCloseBtn" class="action-button">
        </paper-button>
      </div>
    </cr-dialog>
  </template>
</dom-module>