@cuba-platform/front-generator/lib/generators/polymer2/app/template/src/${project_namespace}-login.html

CUBA Platform front-end clients generator

<%  const className = genClassName('Login'); %>
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/cuba-app/cuba-localize-behavior.html">
<link rel="import" href="../bower_components/cuba-login/cuba-login.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">

<%if (project.locales) {%>
<link rel="import" href="<%= project.namespace %>-locale-select.html">
<% } %>
<link rel="import" href="shared-styles.html">
<dom-module id="<%= project.namespace %>-login">
  <template>
    <style include="shared-styles"></style>
    <style>
      :host {
        display: block;
        height: 100%;
      }
      .login-wrapper {
        background: var(--google-grey-100);
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        align-items: center;
        justify-content: center;
      }
      .login-card {
        display: block;
        min-width: 300px;
        min-height: 300px;
        padding: 24px;
        margin: 0 auto;
      }
      #logo {
        --iron-icon-width: 32px;
        --iron-icon-height: 32px;
        margin-right: 12px;
      }
      cuba-login {
        margin-top: 24px;
      }
      .login-field {
        width: 100%;
        margin-bottom: 6px;
      }
      <%= project.namespace %>-locale-select {
        margin-top: 24px;
      }
      <%if (project.locales) {%>
        <%= project.namespace %>-locale-select {
        margin-top: 20px;
      }
      <% } %>
      .login-button {
        width: 100%;
        margin: 24px 0 12px;
        background-color: var(--primary-color);
        color: #FFF;
      }
    </style>
    <div class="login-wrapper">
      <paper-card class="login-card">
        <div class="card-content">
          <iron-icon id="logo" src="images/app-icon/icon-32x32.png"></iron-icon>
          Welcome to <%= title %>
          <cuba-login on-cuba-login-error="_handleLoginError">
            <vaadin-text-field slot="username-input" class="login-field" placeholder="[[msg('User Name')]]"></vaadin-text-field>
            <vaadin-password-field slot="password-input" class="login-field" placeholder="[[msg('Password')]]"></vaadin-password-field>
            <vaadin-button slot="login-button" theme="primary" class="login-button">[[msg('Login')]]</vaadin-button>
          </cuba-login>
        </div>
      </paper-card>
      <%if (project.locales) {%>
      <<%= project.namespace %>-locale-select></<%= project.namespace %>-locale-select>
      <% } %>
    </div>
    <vaadin-notification id="loginError" position="bottom-end">
      <template>
        [[msg('Login failed')]]
      </template>
    </vaadin-notification>
  </template>
  <script>
    {
      /**
       * @extends {Polymer.Element}
       * @appliesMixin CubaLocalizeBehavior
       */
      class <%= className %> extends Polymer.mixinBehaviors([CubaLocalizeBehavior], Polymer.Element) {
        static get is() {
          return '<%= project.namespace %>-login'
        }

        _handleLoginError() {
          this.$.loginError.show();
        }
      }

      customElements.define(<%= className %>.is, <%= className %>);
    }
  </script>
</dom-module>