Login

100% 
<div class="container error-message-wrapper " id="error-message-wrapper">
    <div class="row">
        <div class="col-sm-12">
        </div>
    </div>
</div>

<div class="container content__container " id="form_wrapper">
    <div class="row">
        <div class="col-md-6 col-sm-12">
            <div class="form__wrapper">
                <form method="post" action="login" id="form">
                    <h3 class="headline__text">ZEITUNG Login</h3>

                    <!-------------------------------------------->
                    <!------------------E-MAIL-------------------->
                    <!-------------------------------------------->
                    <label class="form__label">E-Mail Adresse</label>
                    <input placeholder="E-Mail-Adresse / Benutzername" id="field_email" type="text" name="username" value="" class="form__input-field" required="">

                    <!-------------------------------------------->
                    <!------------------PASSWORD------------------>
                    <!-------------------------------------------->
                    <label class="form__label">Passwort</label>
                    <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
                    <input placeholder="Passwort" type="password" name="password" value="" id="field_password" class="toggle_password_field form__input-field" required="">
                    <!-------------------------------------------->
                    <!------------------FORGET PASSWORD----------->
                    <!-------------------------------------------->
                    <button class="btn__forgot-password">
                        <a href="/v4/hub/sso/password?client_id=gerstenberg-hiaz-lightbox&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Fsso-staging.hildesheimer-allgemeine.de%2Fv4%2Fsales%2Ffunnel%2Foauth%2Fgerstenberg-hiaz-lightbox&amp;state=ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1&amp;code_challenge=dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc&amp;code_challenge_method=S256&amp;origin=%2Fv4%2Fhub%2Fsso%2Flogin">Passwort vergessen?</a>
                    </button>

                    <!-------------------------------------------->
                    <!------------------BUTTONS------------------->
                    <!-------------------------------------------->
                    <div class="button__wrapper">
                        <div class="checkbox__wrapper">
                            <label class="checkbox__container">
                                <div class="form__checkbox-text">Angemeldet bleiben?</div>
                                <input id="remember_me" type="checkbox" name="cookie_lifetime" value="infinite" checked="">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div class="btn btn__wrapper">
                            <button type="submit" id="input_submit" class="btn__submit">
                                Anmelden
                            </button>
                        </div>
                    </div>

                    <input type="hidden" name="client_id" value="gerstenberg-hiaz-lightbox"><input type="hidden" name="response_type" value="code"><input type="hidden" name="redirect_uri" value="https://sso-staging.hildesheimer-allgemeine.de/v4/sales/funnel/oauth/gerstenberg-hiaz-lightbox"><input type="hidden" name="state" value="ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1"><input type="hidden" name="code_challenge" value="dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc"><input type="hidden" name="code_challenge_method" value="S256"><input type="hidden" name="origin" value="/v4/hub/sso/login">
                </form>
            </div>
        </div>
        <div class="col-md-6 col-sm-12 overlay">
            <div class="overlay__wrapper">
                <h4 class="overlay__heading">Noch nicht registriert?</h4>
                <button class="btn btn__jumpTo" id="signUp"><a href="/v4/hub/sso/register?client_id=gerstenberg-hiaz-lightbox&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Fsso-staging.hildesheimer-allgemeine.de%2Fv4%2Fsales%2Ffunnel%2Foauth%2Fgerstenberg-hiaz-lightbox&amp;state=ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1&amp;code_challenge=dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc&amp;code_challenge_method=S256&amp;origin=%2Fv4%2Fhub%2Fsso%2Flogin">Registrieren Sie sich</a>
                </button>
            </div>
        </div>
    </div>
</div>
<div class="footer mb-3 mt-3">
    <div class="footer__wrapper">
        <a href="/v4/hub/oauth/cancel?client_id=gerstenberg-hiaz-portal&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Ffeature-xpresso-sso-ppzuqei-msbl2jexeq3ky.de-2.platformsh.site%2Fconnect%2Fxpresso%2Fcheck&amp;state=L2xlc2VyLXNlcnZpY2UvbWVpbi1rb250by5odG1sZTM0ODA5OGZlYmVkODMzN2JkZDZiOTZmYTU3MzcxZTMwMzg4YTM3Nw%3D%3D&amp;scope=openid+read%3Aentitlements+profile+email&amp;code_challenge=8i2uYTeh8PeUWckbdG_IR3_ZdZ1p5dbbyCTTO5Syql0&amp;code_challenge_method=S256&amp;origin=%2Fv4%2Fhub%2Fsso%2Flogin">
            <button class="btn btn__cancel">Abbrechen</button>
        </a>
    </div>
</div>
 
<div class="container error-message-wrapper " id="error-message-wrapper">
    <div class="row">
        <div class="col-sm-12">
        </div>
    </div>
</div>

<div class="container content__container " id="form_wrapper">
    <div class="row">
         <div class="col-md-6 col-sm-12">
                <div class="form__wrapper">
                    <form method="post" action="login" id="form">
                        <h3 class="headline__text">ZEITUNG Login</h3>

                        <!-------------------------------------------->
                        <!------------------E-MAIL-------------------->
                        <!-------------------------------------------->
                        <label class="form__label">E-Mail Adresse</label>
                        <input placeholder="E-Mail-Adresse / Benutzername" id="field_email" type="text" name="username" value="" class="form__input-field" required="">

                        <!-------------------------------------------->
                        <!------------------PASSWORD------------------>
                        <!-------------------------------------------->
                        <label class="form__label">Passwort</label>
                        <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
                        <input placeholder="Passwort" type="password" name="password" value="" id="field_password" class="toggle_password_field form__input-field" required="">
                        <!-------------------------------------------->
                        <!------------------FORGET PASSWORD----------->
                        <!-------------------------------------------->
                        <button class="btn__forgot-password">
                          <a href="/v4/hub/sso/password?client_id=gerstenberg-hiaz-lightbox&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Fsso-staging.hildesheimer-allgemeine.de%2Fv4%2Fsales%2Ffunnel%2Foauth%2Fgerstenberg-hiaz-lightbox&amp;state=ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1&amp;code_challenge=dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc&amp;code_challenge_method=S256&amp;origin=%2Fv4%2Fhub%2Fsso%2Flogin">Passwort vergessen?</a>
                        </button>

                        <!-------------------------------------------->
                        <!------------------BUTTONS------------------->
                        <!-------------------------------------------->
                        <div class="button__wrapper">
                          <div class="checkbox__wrapper">
                            <label class="checkbox__container">
                              <div class="form__checkbox-text">Angemeldet bleiben?</div>
                              <input id="remember_me" type="checkbox" name="cookie_lifetime" value="infinite" checked="">
                              <span class="checkmark"></span>
                            </label>
                          </div>
                          <div class="btn btn__wrapper">
                            <button type="submit" id="input_submit" class="btn__submit">
                              Anmelden
                            </button>
                          </div>
                        </div>

                        <input type="hidden" name="client_id" value="gerstenberg-hiaz-lightbox"><input type="hidden" name="response_type" value="code"><input type="hidden" name="redirect_uri" value="https://sso-staging.hildesheimer-allgemeine.de/v4/sales/funnel/oauth/gerstenberg-hiaz-lightbox"><input type="hidden" name="state" value="ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1"><input type="hidden" name="code_challenge" value="dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc"><input type="hidden" name="code_challenge_method" value="S256"><input type="hidden" name="origin" value="/v4/hub/sso/login">
                    </form>
                </div>
            </div>
            <div class="col-md-6 col-sm-12 overlay">
                <div class="overlay__wrapper">
                    <h4 class="overlay__heading">Noch nicht registriert?</h4>
                    <button class="btn btn__jumpTo" id="signUp"><a href="/v4/hub/sso/register?client_id=gerstenberg-hiaz-lightbox&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Fsso-staging.hildesheimer-allgemeine.de%2Fv4%2Fsales%2Ffunnel%2Foauth%2Fgerstenberg-hiaz-lightbox&amp;state=ZDc2NjcxNzYtY2UwMS00ZmRmLWFjOGYtN2I5MzY4YjFiMDA1&amp;code_challenge=dwrC3dwfyzZR3Uk31EpFPs8Mgq4z7yD-wtKq1eG9Sxc&amp;code_challenge_method=S256&amp;origin=%2Fv4%2Fhub%2Fsso%2Flogin">Registrieren Sie sich</a>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="footer mb-3 mt-3">
      <div class="footer__wrapper">
        <a href="/v4/hub/oauth/cancel?client_id=gerstenberg-hiaz-portal&amp;response_type=code&amp;redirect_uri=https%3A%2F%2Ffeature-xpresso-sso-ppzuqei-msbl2jexeq3ky.de-2.platformsh.site%2Fconnect%2Fxpresso%2Fcheck&amp;state=L2xlc2VyLXNlcnZpY2UvbWVpbi1rb250by5odG1sZTM0ODA5OGZlYmVkODMzN2JkZDZiOTZmYTU3MzcxZTMwMzg4YTM3Nw%3D%3D&amp;scope=openid+read%3Aentitlements+profile+email&amp;code_challenge=8i2uYTeh8PeUWckbdG_IR3_ZdZ1p5dbbyCTTO5Syql0&amp;code_challenge_method=S256&amp;origin=%2Fv4%2Fhub%2Fsso%2Flogin">
          <button class="btn btn__cancel">Abbrechen</button>
        </a>
      </div>
    </div>
 
{
  "variables": {
    "hub-login-title": "Anmelden",
    "hub-login-description-text": "Mit Ihren Login-Daten melden Sie sich auf unserer Website und in unserer App an.",
    "hub-login-email-address-username": "Benutzername",
    "hub-login-password": "Passwort",
    "hub-login-remember-me": "Angemeldet bleiben",
    "hub-login-submit-login": "Anmelden",
    "hub-login-cancel": "Abbrechen",
    "password-forgotten": "Passwort vergessen?"
  },
  "links": {
    "hub": {
      "password_forgot": "#",
      "cancel": "#"
    }
  },
  "messages": {
    "_all": {
      "types": {
        "error": false
      }
    }
  },
  "client": {
    "config": {
      "registration_disabled": false
    },
    "services": {
      "external_auth_providers": {
        "_all": []
      }
    }
  },
  "forms": {
    "login": {
      "method": "POST",
      "action": "#",
      "fields": {
        "username": {
          "label": "E-Mail-Adresse",
          "type": "email",
          "name": "username",
          "value": "",
          "required": true,
          "readonly": false
        },
        "password": {
          "label": "Passwort",
          "type": "password",
          "name": "password",
          "value": ""
        },
        "cookie_lifetime": {
          "type": "checkbox",
          "name": "cookie_lifetime",
          "value": "1"
        },
        "submit": {
          "type": "submit"
        }
      }
    }
  }
}
  • Content: 
    ${> header}$
<div class="container error-message-wrapper ${#client.config.registration_disabled}$ content-slim ${/client.config.registration_disabled}$"
     id="error-message-wrapper">
    <div class="row">
        <div class="col-sm-12">
            ${#messages._all.types.error}$
            <div id="error_message" class="error">
                ${message_text}$
            </div>
            ${/messages._all.types.error}$
        </div>
    </div>
</div>

<div class="container content__container content-slim" id="form_wrapper">
    <div class="row">
        <div class="col-sm-12">
            <div class="form__wrapper">
                ${#forms.login}$
                <form method="${method}$" action="${action}$" id="form" aria-label="Anmeldeformular">
                    <h3 class="headline__text">${variables.hub-login-title}$</h3>

                    ${#fields.removed}$
                    <p style="margin-bottom: 20px;">${variables.hub-login-description-text}$</p>
                    ${/fields.removed}$

                    ${#fields.username}$
                    <!-------------------------------------------->
                    <!------------------E-MAIL-------------------->
                    <!-------------------------------------------->
                    <label class="form__label">${label}$</label>
                    <input placeholder="${variables.hub-login-email-address-username}$" id="field_email"
                           type="${type}$"
                           name="${name}$"
                           value="${value}$"
                           class="form__input-field"
                           aria-label="E-Mail-Adresse"
                           ${#required}$required${/required}$
                    ${#readonly}$readonly${/readonly}$>
                    ${/fields.username}$

                    ${#fields.password}$
                    <!-------------------------------------------->
                    <!------------------PASSWORD------------------>
                    <!-------------------------------------------->
                    <label class="form__label">${label}$</label>
                    <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
                    <input placeholder="${variables.hub-login-password}$"
                           type="${type}$"
                           name="${name}$"
                           value="${value}$"
                           id="field_password"
                           class="toggle_password_field form__input-field"
                           aria-label="Passwort"
                           required>
                    ${/fields.password}$

                    <!-------------------------------------------->
                    <!------------------FORGET PASSWORD----------->
                    <!-------------------------------------------->
                    <a href="${links.hub.password_forgot}$" class="btn__forgot-password">${variables.password-forgotten}$</a>

                    <!-------------------------------------------->
                    <!------------------BUTTONS------------------->
                    <!-------------------------------------------->
                    ${#fields.cookie_lifetime}$
                    <div class="button__wrapper">
                        <div class="checkbox__wrapper">
                            <label class="checkbox__container">
                                <div class="form__checkbox-text">${variables.hub-login-remember-me}$</div>
                                <input id="remember_me"
                                       type="${type}$"
                                       name="${name}$"
                                       value="${value}$"
                                       aria-label="Angemeldet bleiben">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                    ${/fields.cookie_lifetime}$

                    ${#fields.submit}$
                    <div class="btn btn__wrapper">
                        <button type="${type}$" id="input_submit" class="btn__submit">
                            ${variables.hub-login-submit-login}$
                        </button>
                    </div>
                    ${/fields.submit}$
                    ${#client.services.external_auth_providers._all}$
                    <a href="${link}$">
                        <div class="btn btn__cancel">
                            ${label}$
                        </div>
                    </a>
                    ${/client.services.external_auth_providers._all}$
                    ${{parameters}}$
                </form>
                ${/forms.login}$
            </div>
        </div>
    </div>
</div>

<div class="footer mb-3 mt-3">
    <div class="footer__wrapper content-slim">
        <a href="${links.hub.cancel}$">
            <button class="btn btn__cancel">${variables.hub-login-cancel}$</button>
        </a>
    </div>
</div>
${> footer}$
  • URL: /components/raw/hub-login/login.mustache
  • Filesystem Path: src/patterns/50-external/Xpresso/Hub/login/login.mustache
  • Size: 5.1 KB

No notes defined.