Gate

100%
<div class="container error-message-wrapper content-slim" id="error-message-wrapper">
    <div class="row">
        <div class="col-sm-12">
        </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">
                <form method="POST" action="#" id="form" aria-label="Anmeldeformular">
                    <h3 class="headline__text">Bitte geben Sie Ihre E-Mail-Adresse ein.</h3>

                    <p style="margin-bottom: 20px;">Melden Sie sich jetzt an oder erstellen Sie ein neues Konto.</p>

                    <!-------------------------------------------->
                    <!------------------E-MAIL-------------------->
                    <!-------------------------------------------->
                    <label class="form__label">E-Mail-Adresse</label>
                    <input placeholder="ihre@email.de" id="field_email" type="email" name="email" value="" class="form__input-field" aria-label="E-Mail-Adresse" required>

                    <!-------------------------------------------->
                    <!------------------BUTTONS------------------->
                    <!-------------------------------------------->
                    <div class="button__wrapper">
                        <div class="btn btn__wrapper">
                            <button type="submit" id="input_submit" class="btn__submit">
                                Weiter
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<div class="footer mb-3 mt-3">
    <div class="footer__wrapper content-slim">
        <a href="#">
            <button class="btn btn__cancel">Abbrechen</button>
        </a>
    </div>
</div>
${> header}$
<div class="container error-message-wrapper content-slim"
     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.gate}$
                <form method="${method}$" action="${action}$" id="form" aria-label="Anmeldeformular">
                    <h3 class="headline__text">${variables.hub-gate-title}$</h3>

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

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

                    <!-------------------------------------------->
                    <!------------------BUTTONS------------------->
                    <!-------------------------------------------->
                    <div class="button__wrapper">
                        ${#fields.submit}$
                        <div class="btn btn__wrapper">
                            <button type="${type}$" id="input_submit" class="btn__submit">
                                ${variables.hub-gate-submit}$
                            </button>
                        </div>
                        ${/fields.submit}$
                    </div>
                    ${#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.gate}$
            </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-gate-cancel}$</button>
        </a>
    </div>
</div>
${> footer}$
{
  "variables": {
    "hub-gate-title": "Bitte geben Sie Ihre E-Mail-Adresse ein.",
    "hub-gate-description-text": "Melden Sie sich jetzt an oder erstellen Sie ein neues Konto.",
    "hub-gate-submit": "Weiter",
    "hub-gate-cancel": "Abbrechen"
  },
  "links": {
    "hub": {
      "cancel": "#"
    }
  },
  "messages": {
    "_all": {
      "types": {
        "error": false
      }
    }
  },
  "client": {
    "services": {
      "external_auth_providers": {
        "_all": []
      }
    }
  },
  "forms": {
    "gate": {
      "method": "POST",
      "action": "#",
      "fields": {
        "email": {
          "label": "E-Mail-Adresse",
          "placeholder": "ihre@email.de",
          "type": "email",
          "name": "email",
          "value": ""
        },
        "submit": {
          "type": "submit"
        }
      }
    }
  }
}
  • Content:
    ${> header}$
    <div class="container error-message-wrapper content-slim"
         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.gate}$
                    <form method="${method}$" action="${action}$" id="form" aria-label="Anmeldeformular">
                        <h3 class="headline__text">${variables.hub-gate-title}$</h3>
    
                        <p style="margin-bottom: 20px;">${variables.hub-gate-description-text}$</p>
    
                        ${#fields.email}$
                        <!-------------------------------------------->
                        <!------------------E-MAIL-------------------->
                        <!-------------------------------------------->
                        <label class="form__label">${label}$</label>
                        <input placeholder="${placeholder}$" id="field_email"
                               type="${type}$"
                               name="${name}$"
                               value="${value}$"
                               class="form__input-field"
                               aria-label="E-Mail-Adresse"
                               required>
                        ${/fields.email}$
    
                        <!-------------------------------------------->
                        <!------------------BUTTONS------------------->
                        <!-------------------------------------------->
                        <div class="button__wrapper">
                            ${#fields.submit}$
                            <div class="btn btn__wrapper">
                                <button type="${type}$" id="input_submit" class="btn__submit">
                                    ${variables.hub-gate-submit}$
                                </button>
                            </div>
                            ${/fields.submit}$
                        </div>
                        ${#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.gate}$
                </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-gate-cancel}$</button>
            </a>
        </div>
    </div>
    ${> footer}$
    
  • URL: /components/raw/gate/gate.mustache
  • Filesystem Path: src/patterns/50-external/Xpresso/Hub/gate/gate.mustache
  • Size: 2.9 KB

No notes defined.