ha-frontend-cdce8p/panels/config/cloud/ha-config-cloud-account.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-item/paper-item-body.html">
<link rel="import" href='../../../bower_components/paper-button/paper-button.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'>

<dom-module id="ha-config-cloud-account">
  <template>
    <style include="iron-flex ha-style">
      .content {
        padding-bottom: 24px;
      }
      paper-card {
        display: block;
      }
      .account-row {
        display: flex;
        padding: 0 16px;
      }
      paper-button {
        align-self: center;
      }
      .soon {
        font-style: italic;
        margin-top: 24px;
        text-align: center;
      }
      .nowrap {
        white-space: nowrap;;
      }
      .wrap {
        white-space: normal;
      }
      .status {
        text-transform: capitalize;
        padding: 16px;
      }
      paper-button {
        color: var(--primary-color);
        font-weight: 500;
      }
    </style>
    <hass-subpage title='Cloud Account'>
      <div class='content'>
        <ha-config-section
          is-wide='[[isWide]]'
        >
          <span slot='header'>Home Assistant Cloud</span>
          <span slot='introduction'>
            Thank you for supporting Home Assistant. It's because of people like you that we are able to run this project and make a great home automation experience for everyone. Thank you!
          </span>

          <paper-card heading='Account'>
            <div class='account-row'>
              <paper-item-body two-line>
                [[account.email]]
                <div secondary class='wrap'>
                  <span class='nowrap'>Subscription expires on </span>
                  <span class='nowrap'>[[_formatExpiration(account.sub_exp)]]</span>
                </div>
              </paper-item-body>
              <paper-button
                on-click='handleLogout'
              >Sign out</paper-button>
            </div>

            <div class='account-row'>
              <paper-item-body>
                Cloud connection status
              </paper-item-body>
              <div class='status'>[[account.cloud]]</div>
            </div>
          </paper-card>
        </ha-config-section>

        <ha-config-section
          is-wide='[[isWide]]'
        >
          <span slot='header'>Integrations</span>
          <span slot='introduction'>
            Integrations for Home Assistant Cloud allow you to connect with services in the cloud
            without having to expose your Home Assistant instance publicly on the internet.
          </span>

          <paper-card heading='Alexa'>
            <div class="card-content">
              With the Alexa integration for Home Assistant Cloud you'll be able to control all your Home Assistant devices via any Alexa-enabled device.
              <p><em>This integration requires an Alexa-enabled device like the Amazon Echo.</em></p>
            </div>
            <div class='card-actions'>
              <a href='https://alexa.amazon.com/spa/index.html#skills/dp/B0772J1QKB/?ref=skill_dsk_skb_sr_2' target='_blank'>
                <paper-button>
                  Home Assistant Alexa skill
                </paper-button>
              </a>
              <a href='https://home-assistant.io/components/cloud.alexa/' target='_blank'>
                <paper-button>
                  Documentation
                </paper-button>
              </a>
            </div>
          </paper-card>
        </ha-config-section>
      </div>
    </hass-subpage>
  </template>
</dom-module>

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

  static get properties() {
    return {
      hass: Object,
      account: {
        type: Object,
        observer: '_accountChanged',
      },
    };
  }

  handleLogout() {
    this.hass.callApi('post', 'cloud/logout').then(() => this.fire('ha-account-refreshed', { account: null }));
  }

  _formatExpiration(date) {
    return window.hassUtil.formatDateTime(new Date(date));
  }

  _accountChanged(newAccount) {
    if (!newAccount || newAccount.cloud !== 'connecting') {
      if (this._accountUpdater) {
        clearTimeout(this._accountUpdater);
        this._accountUpdater = null;
      }
      return;
    } else if (this._accountUpdater) {
      return;
    }
    setTimeout(() => {
      this._accountUpdater = null;
      this.hass.callApi('get', 'cloud/account')
        .then(account => this.fire('ha-account-refreshed', { account }));
    }, 5000);
  }
}

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