@progressive-development/pd-page/dist/pd-login/PdLogin.js

Progressive development page helper, teaser, menu, footer.

import { css, LitElement, html } from 'lit';
import { localized, msg } from '@lit/localize';
import { property, state, query } from 'lit/decorators.js';
import '@progressive-development/pd-forms/pd-form-container';
import '@progressive-development/pd-forms/pd-form-row';
import '@progressive-development/pd-forms/pd-input';
import '@progressive-development/pd-forms/pd-input-password';
import '@progressive-development/pd-forms/pd-panel-button';
import '@progressive-development/pd-content/pd-notice-box';
import { pdIcons } from '@progressive-development/pd-icon';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let PdLogin = class extends LitElement {
  constructor() {
    super(...arguments);
    this.loading = false;
    this.errorMessage = "";
    this.successMessage = "";
    this.hideForgotPassword = false;
    this._view = "login";
    this._validForm = false;
    this._forgotPasswordValidForm = false;
    this._prefillEmail = "";
  }
  render() {
    return this._view === "login" ? this._renderLoginView() : this._renderForgotPasswordView();
  }
  _renderLoginView() {
    return html`
      <div class="login-form">
        ${this.successMessage ? html`<pd-notice-box type="success" variant="sidebar"
              >${this.successMessage}</pd-notice-box
            >` : ""}

        <pd-form-container
          id="loginFormId"
          @pd-form-change="${this._handleFormChange}"
          commonError="${this.errorMessage}"
        >
          <pd-form-row>
            <pd-input
              id="eMail"
              maxlength="250"
              fieldType="mail"
              valueName="email"
              label="${msg("E-Mail", { id: "pd.login.email.label" })}"
              autoCompleteName="email"
              required
              @enter-pressed="${this._handleSubmit}"
            ></pd-input>
          </pd-form-row>

          <pd-form-row>
            <pd-input-password
              id="pWord"
              revealable
              maxlength="30"
              label="${msg("Passwort", { id: "pd.login.password.label" })}"
              valueName="password"
              autoCompleteName="current-password"
              required
              @enter-pressed="${this._handleSubmit}"
            ></pd-input-password>

            ${!this.hideForgotPassword ? html`<span class="pwd-link"
                  ><a href="#" @click="${this._handleForgotPassword}"
                    >${msg("Passwort vergessen?", {
      id: "pd.login.forgot.password"
    })}</a
                  ></span
                >` : ""}
          </pd-form-row>
        </pd-form-container>

        <pd-form-row>
          <pd-button
            text="${msg("Anmelden", { id: "pd.login.submit" })}"
            icon="${pdIcons.ICON_USER}"
            ?disabled="${!this._validForm || this.loading}"
            ?loading="${this.loading}"
            @button-clicked="${this._handleSubmit}"
          ></pd-button>
        </pd-form-row>
      </div>
    `;
  }
  _renderForgotPasswordView() {
    return html`
      <div class="login-form">
        <pd-notice-box type="info" variant="sidebar">
          ${msg(
      "Geben Sie Ihre E-Mail-Adresse ein. Sie erhalten einen Link zum Zurücksetzen Ihres Passworts.",
      {
        id: "pd.login.forgot.info"
      }
    )}
        </pd-notice-box>

        <pd-form-container
          id="forgotPasswordFormId"
          @pd-form-change="${this._handleForgotPasswordFormChange}"
          commonError="${this.errorMessage}"
        >
          <pd-form-row>
            <pd-input
              id="forgotEmail"
              maxlength="250"
              fieldType="mail"
              valueName="email"
              label="${msg("E-Mail", { id: "pd.login.email.label" })}"
              autoCompleteName="email"
              .value="${this._prefillEmail}"
              required
              @enter-pressed="${this._handleForgotPasswordSubmit}"
            ></pd-input>

            <span class="pwd-link">
              <a href="#" @click="${this._handleBackToLogin}"
                >${msg("Zurück zur Anmeldung", {
      id: "pd.login.forgot.back"
    })}</a
              >
            </span>
          </pd-form-row>
        </pd-form-container>

        <pd-form-row>
          <pd-button
            text="${msg("Link anfordern", { id: "pd.login.forgot.submit" })}"
            icon="${pdIcons.ICON_MAIL}"
            ?disabled="${!this._forgotPasswordValidForm || this.loading}"
            ?loading="${this.loading}"
            @button-clicked="${this._handleForgotPasswordSubmit}"
          ></pd-button>
        </pd-form-row>
      </div>
    `;
  }
  /** Clears the form and resets validation state. */
  clear() {
    this._formElement?.clear();
    this._validForm = false;
  }
  _handleFormChange(e) {
    this._validForm = e.detail.overallValidity;
    e.stopPropagation();
  }
  _handleSubmit() {
    if (!this._formElement?.valid || this.loading) {
      return;
    }
    const formValues = this._formElement.getValues().origin;
    const detail = {
      email: formValues.email,
      password: formValues.password
    };
    this.dispatchEvent(
      new CustomEvent("login-attempt", {
        detail,
        bubbles: true,
        composed: true
      })
    );
  }
  /**
   * Central view switch. Emits `view-change` so the owner can clear the
   * externally controlled `errorMessage` (which belongs to the view being
   * left). The component never mutates `errorMessage` itself.
   */
  _setView(view) {
    if (this._view === view) return;
    this._view = view;
    this.dispatchEvent(
      new CustomEvent("view-change", {
        detail: { view },
        bubbles: true,
        composed: true
      })
    );
  }
  _handleForgotPassword(e) {
    e.preventDefault();
    const formValues = this._formElement?.getValues()?.origin;
    this._prefillEmail = formValues?.email || "";
    this._setView("forgot-password");
  }
  _handleForgotPasswordFormChange(e) {
    this._forgotPasswordValidForm = e.detail.overallValidity;
    e.stopPropagation();
  }
  _handleForgotPasswordSubmit() {
    if (!this._forgotPasswordFormElement?.valid || this.loading) {
      return;
    }
    const formValues = this._forgotPasswordFormElement.getValues().origin;
    const detail = {
      email: formValues.email
    };
    this.dispatchEvent(
      new CustomEvent("forgot-password-attempt", {
        detail,
        bubbles: true,
        composed: true
      })
    );
    this._setView("login");
  }
  _handleBackToLogin(e) {
    e.preventDefault();
    this.showLogin();
  }
  /** Switch to forgot password view. */
  showForgotPassword() {
    const formValues = this._formElement?.getValues()?.origin;
    this._prefillEmail = formValues?.email || "";
    this._setView("forgot-password");
  }
  /** Switch back to login view. */
  showLogin() {
    this._setView("login");
  }
};
PdLogin.styles = [
  css`
      :host {
        display: flex;
        justify-content: center;
        width: 100%;
      }

      .login-form {
        display: flex;
        flex-flow: column;
        justify-content: center;
        background-color: var(
          --pd-login-bg-color,
          var(--pd-default-bg-light-col)
        );
        padding: var(--pd-login-padding, 1rem 0 1rem 1rem);
        border-radius: var(--pd-login-border-radius, var(--pd-radius-md));
        max-width: var(--pd-login-max-width, 500px);
        width: 100%;
      }

      .pwd-link {
        display: block;
        padding-bottom: 0.5em;
        text-align: right;
        font-size: 0.8em;
      }

      .pwd-link a {
        color: var(--pd-default-link-col, inherit);
        text-decoration: none;
      }

      .pwd-link a:hover {
        text-decoration: underline;
      }

      pd-notice-box {
        margin-bottom: var(--pd-spacing-md, 1rem);
      }
    `
];
__decorateClass([
  property({ type: Boolean })
], PdLogin.prototype, "loading", 2);
__decorateClass([
  property({ type: String })
], PdLogin.prototype, "errorMessage", 2);
__decorateClass([
  property({ type: String })
], PdLogin.prototype, "successMessage", 2);
__decorateClass([
  property({ type: Boolean })
], PdLogin.prototype, "hideForgotPassword", 2);
__decorateClass([
  state()
], PdLogin.prototype, "_view", 2);
__decorateClass([
  state()
], PdLogin.prototype, "_validForm", 2);
__decorateClass([
  state()
], PdLogin.prototype, "_forgotPasswordValidForm", 2);
__decorateClass([
  state()
], PdLogin.prototype, "_prefillEmail", 2);
__decorateClass([
  query("#loginFormId")
], PdLogin.prototype, "_formElement", 2);
__decorateClass([
  query("#forgotPasswordFormId")
], PdLogin.prototype, "_forgotPasswordFormElement", 2);
PdLogin = __decorateClass([
  localized()
], PdLogin);

export { PdLogin };