Reset Password

100%

Work In Progress

HTML
View
Context
Assets
Info
Notes


        
        <div class="container content__container content-slim">
    <div class="row">
        <div class="col-sm-12">
            <div class="form__wrapper">
                <h3 class="headline__text">Passwort zurücksetzen</h3>

                <form method="post" action="" id="reset-password-form">

                    <!-------------------------------------------->
                    <!------------------Text---------------------->
                    <!-------------------------------------------->
                    <p> Guten Tag
                        <b> </b>, bitte ändern Sie jetzt Ihr Passwort:
                    </p>
                    <br>

                    <!-------------------------------------------->
                    <!------------------PASSWORD------------------>
                    <!-------------------------------------------->
                    <label class="form__label">Neues Passwort*</label>
                    <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
                    <input placeholder="Neues Passwort" id="password" type="password" name="new_password" class="validate_password_field toggle_password_field form__input-field" required="">
                    <span class="password__message-error-text">
              Das Passwort muss folgende Kriterien erfüllen:
              <ul class="helper-text">
                  <li class="min_length">mindestens 12 Zeichen lang  und maximal 100 Zeichen lang</li>
                  <li class="min_upper_case">mindestens 1 Großbuchstaben beinhalten</li>
                  <li class="min_custom_characters">mindestens 1 ! § $ % &amp; / ( ) = ? * _ : ; , . - # + @ € | Ä Ü Ö ä ö ü ß</li>
              </ul>
          </span>

                    <!-------------------------------------------->
                    <!--------------PASSWORD REPEAT--------------->
                    <!-------------------------------------------->
                    <label class="form__label">Neues Passwort wiederholen*</label>
                    <div class="password-wrapper">
                        <input placeholder="Neues Passwort wiederholen" id="confirm_password" type="password" class="toggle_password_field form__input-field" required="">
                        <i class="bi bi-eye-slash toggle_password_icon" id="repeatTogglePassword"></i>
                    </div>
                    <span class="password__message-error-text">Die beiden Passwörter stimmen nicht überein!</span>

                    <!-------------------------------------------->
                    <!------------------BUTTONS------------------->
                    <!-------------------------------------------->
                    <div class="btn btn__wrapper">
                        <button id="reset-password-btn" value="submit" type="submit" class="btn__submit" disabled="">
              Absenden
            </button>
                    </div>

                    <input type="hidden" name="origin" value="/v4/hub/sso/login"><input type="hidden" name="client_id" value="gerstenberg-hiaz-portal"><input type="hidden" name="redirect_uri" value="https://feature-xpresso-sso-ppzuqei-msbl2jexeq3ky.de-2.platformsh.site/connect/xpresso/check">
                    <input
                        type="hidden" name="response_type" value="code"><input type="hidden" name="state" value="L2VjODM5N2YzZDk1ZDRkZTk0YjE2ODY3ZTQwNDcwNTlkN2JhN2U1YjY="><input type="hidden" name="code_challenge" value="kdx7tBjMcVErBaMwQbKHcHDPT7iXDawWPAiUOjrgfQs"><input type="hidden" name="code_challenge_method"
                            value="S256">
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('.validation').hide();
    let $password = $("#password");
    let $confirmPassword = $("#confirm_password");
    let $submitButton = $("#reset-password-btn");
    let $form = $('#reset-password-form');

    function isPasswordValid() {
        return (checkMinLength() && checkMaxLength() && checkMinNumber() && checkMinUpperCase() && checkMinLowerCase() && checkMinCustomCharacters());
    }

    function checkMinLength() {
        return ($password.val().length >= 12);
    }

    function checkMaxLength() {
        return ($password.val().length <= 100);
    }

    function checkMinNumber() {
        return true;
    }

    function checkMinUpperCase() {
        let upper = ($password.val().match(/[A-Z]/g) || []);
        return (upper.length >= 1);
    }

    function checkMinLowerCase() {
        return true;
    }

    function checkMinCustomCharacters() {
        let regex = new RegExp(htmlDecode("[ ,!,&quot;,#,$,%,&amp;,',(,),*,+,,,-,.,/,:,;,&lt;,=,&gt;,?,@,[,\,],^,_,`,{,|,},~,€,§,°]"), 'g');
        let custom = ($password.val().match(regex) || []);
        return (custom.length >= 1);
    }

    function arePasswordsMatching() {
        return $password.val() === $confirmPassword.val();
    }

    function fieldsAreFilled() {
        return $password.val() !== "" && $confirmPassword.val() !== ""
    }
    <!--Can submit -->
    function canSubmit() {
        return isPasswordValid() && fieldsAreFilled() && arePasswordsMatching();
    }

    function passwordEvent() {
        if (isPasswordValid()) {
            $password.next().hide();
        } else {
            $password.next().show();
        }
    }
    <!--Check Passwords match-->
    function confirmPasswordEvent() {
        if (arePasswordsMatching()) {
            $confirmPassword.next().hide();
        } else {
            $confirmPassword.next().show();
        }
    }

    function htmlDecode(input) {
        let doc = new DOMParser().parseFromString(input, "text/html");
        return doc.documentElement.textContent;
    }
    <!--Enable or disable the submit button-->
    function enableSubmitEvent() {
        $submitButton.prop("disabled", !canSubmit());
    }
    <!--Run passwords match check on click submit-->
    $form.submit(function(event) {
        event.preventDefault(); //this will prevent the default submit
        if (arePasswordsMatching()) {
            $(this).unbind('submit').submit(); // continue the submit unbind preventDefault
        }
        confirmPasswordEvent();
    })
    <!--Run passwords rule and field filled check-->
    $password.focus(passwordEvent).keyup(passwordEvent).keyup(enableSubmitEvent);
    <!--Run field filled check-->
    $confirmPassword.keyup(enableSubmitEvent);
    <!--Run submit button function code-->
    enableSubmitEvent();
</script>


        <div class="container content__container content-slim">
  <div class="row">
    <div class="col-sm-12">
      <div class="form__wrapper">
        <h3 class="headline__text">Passwort zurücksetzen</h3>

        <form method="post" action="" id="reset-password-form">

          <!-------------------------------------------->
          <!------------------Text---------------------->
          <!-------------------------------------------->
          <p> Guten Tag
            <b> </b>,
            bitte ändern Sie jetzt Ihr Passwort:
          </p>
          <br>

          <!-------------------------------------------->
          <!------------------PASSWORD------------------>
          <!-------------------------------------------->
          <label class="form__label">Neues Passwort*</label>
          <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
          <input placeholder="Neues Passwort" id="password" type="password" name="new_password" class="validate_password_field toggle_password_field form__input-field" required="">
          <span class="password__message-error-text">
              Das Passwort muss folgende Kriterien erfüllen:
              <ul class="helper-text">
                  <li class="min_length">mindestens 12 Zeichen lang  und maximal 100 Zeichen lang</li>
                  <li class="min_upper_case">mindestens 1 Großbuchstaben beinhalten</li>
                  <li class="min_custom_characters">mindestens 1 ! § $ % &amp; / ( ) = ? * _ : ; , . - # + @ € | Ä Ü Ö ä ö ü ß</li>
              </ul>
          </span>

          <!-------------------------------------------->
          <!--------------PASSWORD REPEAT--------------->
          <!-------------------------------------------->
          <label class="form__label">Neues Passwort wiederholen*</label>
          <div class="password-wrapper">
            <input placeholder="Neues Passwort wiederholen" id="confirm_password" type="password" class="toggle_password_field form__input-field" required="">
            <i class="bi bi-eye-slash toggle_password_icon" id="repeatTogglePassword"></i>
          </div>
          <span class="password__message-error-text">Die beiden Passwörter stimmen nicht überein!</span>

          <!-------------------------------------------->
          <!------------------BUTTONS------------------->
          <!-------------------------------------------->
          <div class="btn btn__wrapper">
            <button id="reset-password-btn" value="submit" type="submit" class="btn__submit" disabled="">
              Absenden
            </button>
          </div>

          <input type="hidden" name="origin" value="/v4/hub/sso/login"><input type="hidden" name="client_id" value="gerstenberg-hiaz-portal"><input type="hidden" name="redirect_uri" value="https://feature-xpresso-sso-ppzuqei-msbl2jexeq3ky.de-2.platformsh.site/connect/xpresso/check"><input type="hidden" name="response_type" value="code"><input type="hidden" name="state" value="L2VjODM5N2YzZDk1ZDRkZTk0YjE2ODY3ZTQwNDcwNTlkN2JhN2U1YjY="><input type="hidden" name="code_challenge" value="kdx7tBjMcVErBaMwQbKHcHDPT7iXDawWPAiUOjrgfQs"><input type="hidden" name="code_challenge_method" value="S256">
        </form>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  $('.validation').hide();

  let $password = $("#password");
  let $confirmPassword = $("#confirm_password");
  let $submitButton = $("#reset-password-btn");
  let $form = $('#reset-password-form');

  function isPasswordValid() {
    return (checkMinLength() && checkMaxLength() && checkMinNumber() && checkMinUpperCase() && checkMinLowerCase() && checkMinCustomCharacters());
  }

  function checkMinLength() {
    return ($password.val().length >= 12);
  }

  function checkMaxLength() {
    return ($password.val().length <= 100);
  }

  function checkMinNumber() {
    return true;
  }

  function checkMinUpperCase() {
    let upper = ($password.val().match(/[A-Z]/g) || []);
    return (upper.length >= 1);
  }

  function checkMinLowerCase() {
    return true;
  }

  function checkMinCustomCharacters() {
    let regex = new RegExp(htmlDecode("[ ,!,&quot;,#,$,%,&amp;,',(,),*,+,,,-,.,/,:,;,&lt;,=,&gt;,?,@,[,\,],^,_,`,{,|,},~,€,§,°]"), 'g');
    let custom = ($password.val().match(regex) || []);
    return (custom.length >= 1);
  }

  function arePasswordsMatching() {
    return $password.val() === $confirmPassword.val();
  }

  function fieldsAreFilled() {
    return $password.val() !== "" && $confirmPassword.val() !== ""
  }

  <!--Can submit -->
  function canSubmit() {
    return isPasswordValid() && fieldsAreFilled() && arePasswordsMatching();
  }

  function passwordEvent() {
    if (isPasswordValid()) {
      $password.next().hide();
    } else {
      $password.next().show();
    }
  }

  <!--Check Passwords match-->
  function confirmPasswordEvent() {
    if (arePasswordsMatching()) {
      $confirmPassword.next().hide();
    } else {
      $confirmPassword.next().show();
    }
  }

  function htmlDecode(input) {
    let doc = new DOMParser().parseFromString(input, "text/html");
    return doc.documentElement.textContent;
  }

  <!--Enable or disable the submit button-->
  function enableSubmitEvent() {
    $submitButton.prop("disabled", !canSubmit());
  }

  <!--Run passwords match check on click submit-->
  $form.submit(function(event) {
    event.preventDefault(); //this will prevent the default submit
    if(arePasswordsMatching()){
      $(this).unbind('submit').submit(); // continue the submit unbind preventDefault
    }
    confirmPasswordEvent();
  })

  <!--Run passwords rule and field filled check-->
  $password.focus(passwordEvent).keyup(passwordEvent).keyup(enableSubmitEvent);

  <!--Run field filled check-->
  $confirmPassword.keyup(enableSubmitEvent);

  <!--Run submit button function code-->
  enableSubmitEvent();
</script>


        
            
            /* No context defined for this component. */

File:

Content:


                                ${> header}$

<div class="container content__container content-slim">
    <div class="row">
        <div class="col-sm-12">
            <div class="form__wrapper">
                <h3 class="headline__text">${texts.hub-reset-password-title}$</h3>

                ${#states.reset_password.invalid_token}$
                <div class="alert alert-danger 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-exclamation-triangle" viewBox="0 0 16 16">
                        <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
                        <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
                    </svg>
                    <span class="pl-3">${texts.hub-reset-password-alert-invalid-token-text}$</span>
                </div>
                <p> ${texts.hub-reset-password-try-again-text}$</p>
                <div class="btn btn__wrapper">
                    <a href="${links.hub.password_forgot}$">
                        <button class="btn btn__link">
                            ${texts.hub-reset-password-error-btn-text}$
                        </button>
                    </a>
                </div>
                ${/states.reset_password.invalid_token}$

                ${#states.reset_password.failed}$
                <div class="alert alert-danger 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-exclamation-triangle" viewBox="0 0 16 16">
                        <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
                        <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
                    </svg>
                    <span class="pl-3">${texts.hub-reset-password-alert-error-text}$</span>
                </div>
                <p> ${texts.hub-reset-password-try-again-text}$</p>
                <div class="btn btn__wrapper">
                    <a href="${links.hub.password_forgot}$">
                        <button class="btn btn__link">
                            ${texts.hub-reset-password-error-btn-text}$
                        </button>
                    </a>
                </div>
                ${/states.reset_password.failed}$

                ${#states.reset_password.successful}$
                <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-reset-password-alert-success-text}$</span>
                </div>
                <div class="btn btn__wrapper">
                    ${#links.hub.login}$
                    <a href="${links.hub.login}$">
                        <button class="btn btn__link" id="signIn">
                            ${texts.hub-reset-password-success-btn-text}$
                        </button>
                    </a>
                    ${/links.hub.login}$
                </div>
                ${/states.reset_password.successful}$

                ${#states.reset_password.show_form}$
                <form method="${forms.reset_password.method}$" action="${forms.reset_password.action}$"
                      id="reset-password-form">

                    <!-------------------------------------------->
                    <!------------------Text---------------------->
                    <!-------------------------------------------->
                    <p> ${texts.hub-reset-password-hello-intro}$
                        <b>${data.user.firstname}$ ${data.user.surname}$</b>,
                        ${texts.hub-reset-password-intro-paragraph}$
                    </p>
                    <br>

                    <!-------------------------------------------->
                    <!------------------PASSWORD------------------>
                    <!-------------------------------------------->
                    <label class="form__label">${texts.hub-reset-password-new-password-label}$*</label>
                    <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
                    <input placeholder="${texts.hub-reset-password-new-password-label}$"
                           id="password"
                           type="${forms.reset_password.fields.password.type}$"
                           name="${forms.reset_password.fields.password.name}$"
                           class="toggle_password_field form__input-field"
                           ${forms.reset_password.fields.password.required}$>
                    <span class="password__message-error-text">
                            ${texts.hub-password-rules-intro}$
                            ${#data.password_rules}$
                            <ul class="helper-text">
                                ${#min_length}$<li class="min_length">${texts.hub-password-rules-min}$ ${min_length}$ ${texts.hub-password-rules-min-length}$${/min_length}$ ${#max_length}$ ${#min_length}$ ${texts.hub-password-rules-and}$ ${/min_length}$ ${texts.hub-password-rules-max}$ ${max_length}$ ${texts.hub-password-rules-min-length}$</li>${/max_length}$
                                ${#min_upper_case}$<li class="min_upper_case">${texts.hub-password-rules-min}$ ${min_upper_case}$ ${texts.hub-password-rules-min-upper-case}$</li>${/min_upper_case}$
                                ${#min_lower_case}$<li class="min_lower_case">${texts.hub-password-rules-min}$ ${min_lower_case}$ ${texts.hub-password-rules-min-lower-case}$</li>${/min_lower_case}$
                                ${#min_number}$<li class="min_number">${texts.hub-password-rules-min}$ ${min_number}$ ${texts.hub-password-rules-min-number}$</li>${/min_number}$
                                ${#min_custom_characters}$<li class="min_custom_characters">${texts.hub-password-rules-min}$ ${min_custom_characters}$ ${texts.hub-password-rules-custom-characters}$</li>${/min_custom_characters}$
                            </ul>
                            ${/data.password_rules}$
                    </span>
                    ${#errors.property_messages.new_password}$
                    <div>
                        <span id="username-error-message" class="error">${message}$</span>
                    </div>
                    ${/errors.property_messages.new_password}$

                    <!-------------------------------------------->
                    <!--------------PASSWORD REPEAT--------------->
                    <!-------------------------------------------->
                    <label class="form__label">${texts.hub-reset-password-new-password-repeat-label}$*</label>
                    <input placeholder="${texts.hub-reset-password-new-password-repeat-label}$"
                           id="confirm_password"
                           type="${forms.reset_password.fields.password_repeat.type}$"
                           class="form__input-field"
                           ${forms.reset_password.fields.password_repeat.required}$>
                    <span class="password__message-error-text">${texts.hub-reset-password-not-matching-password-text}$</span>

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

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

${> resetPasswordCheckInput}$

${> footer}$

URL: /components/raw/xpresso-reset-password/resetPassword.mustache
Filesystem Path: src/patterns/50-external/Xpresso/Hub/xpresso-reset-password/resetPassword.mustache
Size: 9.4 KB

Handle: @xpresso-reset-password
Preview:
- With layout
- Component only
Filesystem Path: src/patterns/50-external/Xpresso/Hub/xpresso-reset-password/xpresso-reset-password.twig

There are no notes for this item.

Reset Password

Lists

Info Box

Logo

Menus

Poll

Teaser

Articles

Forms

Paywall

User

Xpresso

Funnel

Hub

Reset Password

Social Menu

Paywall

Funnel

Hub