Passwort vergessen

100% 
<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">
                    <h3 class="headline__text">Haben Sie Ihr Kennwort vergessen?</h3>

                    <!-------------------------------------------->
                    <!------------------Text---------------------->
                    <!-------------------------------------------->
                    <p class="forgotPassword__text">
                        Bitte geben Sie Ihre E-Mail-Adresse oder Ihren Benutzernamen, mit dem Sie sich registriert haben, ein. An die angegebene bzw. hinterlegte E-Mail-Adresse wird der neue Kennwort-Link versendet.
                    </p>

                    <!-------------------------------------------->
                    <!------------------E-MAIL-------------------->
                    <!-------------------------------------------->
                    <label class="form__label">E-Mail-Adresse</label>
                    <input placeholder="E-Mail-Adresse" id="field_email" type="email" name="email" class="form__input-field" value="" required>
                    <span class="email__message-error-text">
                        Bitte geben Sie eine gültige E-Mail-Adresse ein.
                    </span>

                    <!-------------------------------------------->
                    <!------------------BUTTONS------------------->
                    <!-------------------------------------------->
                    <div class="btn btn__wrapper">
                        <button id="forgot-password-btn" type="submit" disabled class="btn__submit">
                            Bestätigen
                        </button>
                    </div>
                </form>
            </div>
        </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>
 
<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">
                        <h3 class="headline__text">Haben Sie Ihr Kennwort vergessen?</h3>

                        <!-------------------------------------------->
                        <!------------------Text---------------------->
                        <!-------------------------------------------->
                        <p class="forgotPassword__text">
                            Bitte geben Sie Ihre E-Mail-Adresse oder Ihren Benutzernamen, mit dem Sie sich registriert haben, ein. An die angegebene bzw. hinterlegte E-Mail-Adresse wird der neue Kennwort-Link versendet.
                        </p>

                        <!-------------------------------------------->
                        <!------------------E-MAIL-------------------->
                        <!-------------------------------------------->
                        <label class="form__label">E-Mail-Adresse</label>
                        <input placeholder="E-Mail-Adresse"
                               id="field_email"
                               type="email"
                               name="email"
                               class="form__input-field"
                               value=""
                               required>
                        <span class="email__message-error-text">
                                Bitte geben Sie eine gültige E-Mail-Adresse ein.
                        </span>

                        <!-------------------------------------------->
                        <!------------------BUTTONS------------------->
                        <!-------------------------------------------->
                        <div class="btn btn__wrapper">
                            <button id="forgot-password-btn" type="submit" disabled class="btn__submit">
                                Bestätigen
                            </button>
                        </div>
                    </form>
                </div>
            </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>
 
{
  "texts": {
    "hub-forgot-password-title": "Haben Sie Ihr Kennwort vergessen?",
    "hub-forgot-password-title-success": "E-Mail wurde versendet",
    "hub-forgot-password-text": "Bitte geben Sie Ihre E-Mail-Adresse oder Ihren Benutzernamen, mit dem Sie sich registriert haben, ein. An die angegebene bzw. hinterlegte E-Mail-Adresse wird der neue Kennwort-Link versendet.",
    "hub-forgot-password-success-text": "Wir haben Ihnen eine E-Mail mit weiteren Anweisungen gesendet.",
    "hub-forgot-password-email": "E-Mail-Adresse",
    "hub-forgot-password-error-email": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
    "hub-forgot-password-username": "Benutzername",
    "hub-forgot-password-username-field-text": "Bitte geben Sie zusätzlich Ihren Benutzernamen ein.",
    "hub-forgot-password-button-text": "Bestätigen",
    "hub-forgot-password-register-text": "Sie haben noch keinen Account?",
    "hub-forgot-password-register-linktext": "Zur Neuanmeldung",
    "hub-forgot-password-cancel": "Abbrechen"
  },
  "states": {
    "forgot_password": {
      "show_form": true,
      "successful": false,
      "username_required": false
    }
  },
  "options": {
    "hub": {
      "register": {
        "activated": false
      }
    }
  },
  "links": {
    "hub": {
      "cancel": "#",
      "register": "#"
    }
  },
  "forms": {
    "forgot_password": {
      "method": "POST",
      "action": "#",
      "parameters": "",
      "fields": {
        "email": {
          "type": "email",
          "name": "email",
          "value": "",
          "required": "required"
        },
        "username": {
          "type": "text",
          "name": "username",
          "required": "required"
        }
      }
    }
  }
}
  • Content: 
    ${> header}$

<div class="container content__container ${^options.hub.register.activated}$ content-slim ${/options.hub.register.activated}$"
     id="form_wrapper">
    <div class="row">
        ${#options.hub.register.activated}$<div class="col-md-6 col-sm-12">${/options.hub.register.activated}$ ${^options.hub.register.activated}$<div class="col-sm-12">${/options.hub.register.activated}$
                <div class="form__wrapper">
                    ${#states.forgot_password.successful}$
                    <h3 class="headline__text">${texts.hub-forgot-password-title-success}$</h3>
                    <!-------------------------------------------->
                    <!----------------SUCCESS Text---------------->
                    <!-------------------------------------------->
                    <div class="alert alert-success d-flex justify-items-center" role="alert">
                        <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor"
                             class="icon-lg my-auto bi bi-check-circle" viewBox="0 0 16 16">
                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
                        </svg>
                        <span class="pl-3">${{texts.hub-forgot-password-success-text}}$</span>
                    </div>
                    ${/states.forgot_password.successful}$
                    ${#states.forgot_password.show_form}$
                    <form method="${forms.forgot_password.method}$" action="${forms.forgot_password.action}$" id="form">
                        <h3 class="headline__text">${texts.hub-forgot-password-title}$</h3>

                        <!-------------------------------------------->
                        <!------------------Text---------------------->
                        <!-------------------------------------------->
                        <p class="forgotPassword__text">
                            ${texts.hub-forgot-password-text}$
                        </p>

                        <!-------------------------------------------->
                        <!------------------E-MAIL-------------------->
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-forgot-password-email}$</label>
                        <input placeholder="${texts.hub-forgot-password-email}$"
                               id="field_email"
                               type="${forms.forgot_password.fields.email.type}$"
                               name="${forms.forgot_password.fields.email.name}$"
                               class="form__input-field"
                               value="${forms.forgot_password.fields.email.value}$"
                               ${forms.forgot_password.fields.email.required}$>
                        <span class="email__message-error-text">
                                ${texts.hub-forgot-password-error-email}$
                        </span>

                        ${#states.forgot_password.username_required}$
                        <p class="forgotPassword__text">
                            ${texts.hub-forgot-password-username-field-text}$
                        </p>
                        <!-------------------------------------------->
                        <!------------------USERNAME------------------>
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-forgot-password-username}$</label>
                        <input placeholder="${texts.hub-forgot-password-username}$"
                               id="field_username"
                               type="${forms.forgot_password.fields.username.type}$"
                               name="${forms.forgot_password.fields.username.name}$"
                               class="form__input-field"
                               ${forms.forgot_password.fields.username.required}$>
                        ${/states.forgot_password.username_required}$

                        <!-------------------------------------------->
                        <!------------------BUTTONS------------------->
                        <!-------------------------------------------->
                        <div class="btn btn__wrapper">
                            <button id="forgot-password-btn" type="submit" disabled class="btn__submit">
                                ${texts.hub-forgot-password-button-text}$
                            </button>
                        </div>

                       ${{forms.forgot_password.parameters}}$
                    </form>
                    ${/states.forgot_password.show_form}$
                </div>
            </div>
        </div>
    </div>



<div class="footer mb-3 mt-3">
    ${#options.hub.register.activated}$  <div class="footer__wrapper"> ${/options.hub.register.activated}$ ${^options.hub.register.activated}$  <div class="footer__wrapper content-slim"> ${/options.hub.register.activated}$
            ${#links.hub.cancel}$
            <a href="${links.hub.cancel}$">
                <button class="btn btn__cancel">${texts.hub-forgot-password-cancel}$</button>
            </a>
            ${/links.hub.cancel}$
        </div>
</div>

${> forgotPasswordCheckInput}$

${> footer}$
  • URL: /components/raw/forgotpassword/forgotPassword.mustache
  • Filesystem Path: src/patterns/50-external/Xpresso/Hub/forgotPassword/forgotPassword.mustache
  • Size: 5.6 KB
  • Handle: @forgotpassword
  • Preview:
  • Filesystem Path: src/patterns/50-external/Xpresso/Hub/forgotPassword/forgotPassword.twig

No notes defined.