<!-- Copyright 2016 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/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-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/neon-animation/web-animations.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<link rel="import" href="/components/common_styles.html">
<link rel="import" href="/components/oobe_i18n_behavior.html">
<link rel="import" href="/components/throbber_notice.html">

<!--
  Offline UI for the Active Directory password change.

  Attributes:
    'username' - User principal name.
  Methods:
    'reset' - resets to the initial state.
    'setInvalid' - invalidates input depending on passed error.
-->
<dom-module id="active-directory-password-change-element">
  <template>
    <style include="oobe-common"></style>
    <link rel="stylesheet" href="active_directory_password_change.css">
    <link rel="stylesheet" href="gaia_card_parameters.css">
    <neon-animated-pages id="animatedPages" class="fit"
        entry-animation="fade-in-animation" exit-animation="fade-out-animation"
        selected="0">
      <neon-animatable class="fit">
        <gaia-card id="gaiaCard" class="fit">
          <div slot="header" class="flex vertical layout end-justified start">
            <h1 id="welcomeMessage" class="welcome-message">
              [[i18nDynamic(locale, 'adPassChangeMessage', username)]]
            </h1>
          </div>
          <div slot="footer" class="flex vertical layout justified">
            <gaia-input-form id="inputForm" on-submit="onSubmit_"
                button-text="[[i18nDynamic(locale, 'offlineLoginNextBtn')]]">
              <cr-input slot="inputs" type="password" id="oldPassword" required
                  value="{{oldPassword}}" invalid="{{oldPasswordWrong_}}"
                  label="[[i18nDynamic(locale, 'adPassChangeOldPasswordHint')]]"
                  error-message="[[
                      i18nDynamic(locale, 'adPassChangeOldPasswordError')]]">
              </cr-input>
              <cr-input slot="inputs" type="password" id="newPassword" required
                  value="{{newPassword}}" invalid="{{newPasswordRejected_}}"
                  label="[[i18nDynamic(locale, 'adPassChangeNewPasswordHint')]]"
                  error-message="[[i18nDynamic(locale,
                      'adPassChangeNewPasswordRejected')]]">
              </cr-input>
              <cr-input slot="inputs" type="password" id="newPasswordRepeat"
                  required value="{{newPasswordRepeat}}"
                  invalid="{{passwordMismatch_}}"
                  label="[[i18nDynamic(locale,
                      'adPassChangeRepeatNewPasswordHint')]]"
                  error-message="[[i18nDynamic(locale,
                      'adPassChangePasswordsMismatch')]]">
              </cr-input>
            </gaia-input-form>
          </div>
        </gaia-card>
      </neon-animatable>
      <neon-animatable class="fit">
        <throbber-notice class="fit" text-key="gaiaLoading">
        </throbber-notice>
      </neon-animatable>
    </neon-animated-pages>
    <navigation-bar id="navigation" close-visible on-close="onClose_">
    </navigation-bar>
  </template>
</dom-module>