ha-frontend-cdce8p/panels/config/cloud/ha-config-cloud-login.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-button/paper-button.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-login">
  <template>
    <style include="iron-flex ha-style">
      .content {
        padding-bottom: 24px;
      }
      [slot=introduction] a {
        color: var(--primary-color);
      }
      paper-card {
        display: block;
      }
      paper-item {
        cursor: pointer;
      }
      paper-card:last-child {
        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;
      }
      [hidden] {
        display: none;
      }
    </style>
    <hass-subpage title='Cloud Login'>
      <div class='content'>
        <ha-config-section
          is-wide='[[isWide]]'
        >
          <span slot='header'>Home Assistant Cloud</span>
          <span slot='introduction'>
            The Home Assistant Cloud allows your local Home Assistant instance to connect with cloud-only services like Amazon Alexa.
            <p><a href='https://home-assistant.io/components/cloud/' target='_blank'>Learn more</a></p>
          </span>

          <paper-card>
            <div class='card-content'>
              <h1>Sign In</h1>
              <paper-input
                label='Email'
                id='emailInput'
                type='email'
                value='{{email}}'
                on-keydown='_keyDown'
              ></paper-input>
              <paper-input
                label='Password'
                value='{{_password}}'
                type='password'
                on-keydown='_keyDown'
              ></paper-input>
              <div class='error' hidden$='[[!error]]'>[[error]]</div>
            </div>
            <div class='card-actions'>
              <ha-progress-button
                on-tap='_handleLogin'
                progress='[[_requestInProgress]]'
              >Sign in</ha-progress-button>
              <button
                class='link'
                hidden='[[_requestInProgress]]'
                on-click='_handleForgotPassword'
              >forgot password?</button>
            </div>
          </paper-card>

          <paper-card>
            <paper-item on-tap='_handleRegister'>
              <paper-item-body two-line>
                Create Account
                <div secondary>Get up and running quickly.</div>
              </paper-item-body>
              <iron-icon icon='mdi:chevron-right'></iron-icon>
            </paper-item>
          </paper-card>
        </ha-config-section>
      </div>
    </hass-subpage>
  </template>
</dom-module>

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

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

  static get observers() {
    return [
      '_inputChanged(email, _password)'
    ];
  }

  _inputChanged() {
    this.error = false;
  }

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

  _handleLogin() {
    if (!this.email) {
      this.error = 'Email is required.';
    } else if (!this._password) {
      this.error = 'Password is required.';
    }

    if (this.error) return;

    this._requestInProgress = true;

    this.hass.callApi('post', 'cloud/login', {
      email: this.email,
      password: this._password,
    }).then((account) => {
      this.fire('ha-account-refreshed', { account: account });
      this.email = '';
      this._password = '';
    }, (err) => {
      this._password = '';
      this._requestInProgress = false;
      if (!err || !err.body || !err.body.message) {
        this.error = 'Unknown error';
        return;
      } else if (err.body.code === 'UserNotConfirmed') {
        alert('You need to confirm your email before logging in.');
        this.navigate('/config/cloud/register#confirm');
        return;
      } else if (err.body.code === 'PasswordChangeRequired') {
        alert('You need to change your password before logging in.');
        this.navigate('/config/cloud/forgot-password');
      }
      this.error = err.body.message;
    });
  }

  _handleRegister() {
    this.navigate('/config/cloud/register');
  }

  _handleForgotPassword() {
    this.navigate('/config/cloud/forgot-password');
  }
}

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