ha-frontend-cdce8p/panels/config/cloud/ha-config-cloud-forgot-password.html

<link rel="import" href='../../../bower_components/polymer/polymer-element.html'>
<link rel="import" href='../../../bower_components/paper-card/paper-card.html'>
<link rel="import" href='../../../bower_components/paper-input/paper-input.html'>

<link rel="import" href="../../../src/layouts/hass-subpage.html">
<link rel="import" href="../../../src/util/hass-mixins.html">
<link rel="import" href='../../../src/resources/ha-style.html'>
<link rel="import" href='../../../src/components/buttons/ha-progress-button.html'>

<dom-module id="ha-config-cloud-forgot-password">
  <template>
    <style include="iron-flex ha-style">
      .content {
        padding-bottom: 24px;
      }

      paper-card {
        display: block;
        max-width: 600px;
        margin: 0 auto;
        margin-top: 24px;
      }
      h1 {
        @apply --paper-font-headline;
        margin: 0;
      }
      .error {
        color: var(--google-red-500);
      }
      .card-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .card-actions a {
        color: var(--primary-text-color);
      }
      [hidden] {
        display: none;
      }
    </style>
    <hass-subpage title="Forgot Password">
      <div class='content'>
        <paper-card>
          <div class='card-content'>
            <h1>Forgot your password?</h1>
            <p>
              Enter your email address and we will send you a link to reset your password.
            </p>
            <div class='error' hidden$='[[!_error]]'>[[_error]]</div>
            <paper-input
              autofocus
              id='email'
              label='E-mail'
              value='{{email}}'
              type='email'
              on-keydown='_keyDown'
              error-message='Invalid email'
            ></paper-input>
          </div>
          <div class='card-actions'>
            <ha-progress-button
              on-click='_handleEmailPasswordReset'
              progress='[[_requestInProgress]]'
            >Send reset email</ha-progress-button>
          </div>
        </paper-card>
      </div>
    </hass-subpage>
  </template>
</dom-module>

<script>
class HaConfigCloudForgotPassword extends window.hassMixins.EventsMixin(Polymer.Element) {
  static get is() { return 'ha-config-cloud-forgot-password'; }

  static get properties() {
    return {
      hass: Object,
      email: {
        type: String,
        notify: true,
        observer: '_emailChanged'
      },
      _requestInProgress: {
        type: Boolean,
        value: false,
      },
      _error: {
        type: String,
        value: '',
      }
    };
  }

  _emailChanged() {
    this._error = '';
    this.$.email.invalid = false;
  }

  _keyDown(ev) {
    // validate on enter
    if (ev.keyCode === 13) {
      this._handleEmailPasswordReset();
      ev.preventDefault();
    }
  }

  _handleEmailPasswordReset() {
    if (!this.email || !this.email.includes('@')) {
      this.$.email.invalid = true;
    }

    if (this.$.email.invalid) return;

    this._requestInProgress = true;

    this.hass.callApi('post', 'cloud/forgot_password', {
      email: this.email,
    }).then(() => {
      this._requestInProgress = false;
      this.fire('cloud-done', {
        flashMessage: 'Check your email for instructions on how to reset your password.'
      });
    }, err => this.setProperties({
      _requestInProgress: false,
      _error: err && err.body && err.body.message ?
        err.body.message : 'Unknown error',
    }));
  }
}

customElements.define(HaConfigCloudForgotPassword.is, HaConfigCloudForgotPassword);
</script>