Startseite > Template- und Themeprogrammierung > Account- & Passwort-Reset-Templates > password_reset / set_new_password.liquid

set_new_password.liquid

Das Template <keyword>set_new_password.liquid</keyword> rendert den Set-New-Password-Step des Password-Reset-Workflows und ist Schritt 3 des 3-Schritt-Verfahrens mit dem ein Account-Besitzer sein Passwort neu vergeben kann.

Speicherort

Das Template muss unter <keyword>templates/password_reset/set_new_password.liquid</keyword> abgelegt werden.

Verfügbare Objekte

Innerhalb des <keyword>request.liquid</keyword> Templates stehen folgende Objekte zur Verfügung:

Beschreibung

Das hier beschriebene Template ist Schritt 3 in dem 3-Schritt-Verfahren des Password-Reset-Workflow.

Nachdem der Account-Besitzer in Schritt 1 ein Zurücksetzen seines Passworts beantragt hat und durch den Empfang der Email bewiesen hat, dass er der Account-Besitzer ist, kann er innerhalb der Frist (standardmäßig 48 Stunden) den Link in der Email klicken und wird dann auf den hier beschriebenen Set-New-Password-Step im Webshop weiterleitet.

Sehen Sie auch folgende Beschreibungen um den Request-Step für Schritt 1 und das Email-Template für Schritt 2 zu hinterlegen:

Beispiel-Template

Das nachfolgende Beispiel zeigt das Markup des Set-New-Password-Steps.

In dem Beispiel wird ein HTML-Form aufgebaut. Das HTML-Form schickt das neue Passwort und ein Bestätigungspasswort an die Webshop-Software zur Verarbeitung. Damit die Webshop-Software diese Werte verarbeiten kann, müssen die beiden Formularfelder wie hier ersichtlich mit den Werten bestückt werden, die über das <obj>password_reset_workflow:workflow#step-2</obj> Objekt zur Verfügung stehen. Es werden außerdem folgende Fehlerfälle abgefragt, um dem Account-Besitzer eine entsprechende Fehlermeldung anzuzeigen:

  • Erlaubte Gültigkeitsdauer des Links (standardmäßig 48 Stunden) bereits abgelaufen
  • Link wurde bereits benutzt

Beim Absenden des Formulars wird von der Webshop-Software sichergestellt, dass das neue Passwort den Kriterien (standardmäßig mind. 6 Zeichen Länge) genügt und mit dem Bestätigungspasswort übereinstimmt.

<h2>Set new password</h2>

{% assign form = workflow.current_step.forms.password_reset %}
{% if form.post_successful == true %}
  {% comment %}Success message{% endcomment %}
  <p><b>Your password has been changed successfully! You can now login with it.</b></p>
 
{% elsif reset_status == 'link_used' %}
  {% comment %}Link already used message{% endcomment %}
  <p><b>The link for changing the password is invalid, because the password has already been changed.</b></p>
  <p>You can request a new link for changing the password here: <a href="/password_reset/request">I forgot my password</a></p>
 
{% elsif reset_status == 'link_expired' %}
  {% comment %}Link expired message{% endcomment %}
  <p><b>The link for changing the password is invalid, because {{ workflow.current_step.link_duration }} hours have been exceeded.</b></p>
  <p>You can request a new link for changing the password here: <a href="/password_reset/request">I forgot my password</a></p>
 
{% elsif reset_status == 'link_ok' %}
  {% comment %}Set new password form{% endcomment %}

  <p>Please enter a new password. Please note that the new password should be at least {{ shop.config.password_min_length }} characters long</p>

  <form method="post" action="">
 
    {% unless form.valid %}
      <p><b>There are errors in this form.</b></p>
    {% endunless %}
          
    <ul>
      <li>
        {% comment %}Field for new password{% endcomment %}
        <label for="{{ form.fields.password.name }}">New password *</label>
        <input type="password"
               {% if form.fields.password.required %}required{% endif %}
               {% if form.fields.password.max_length %}maxlength="{{ form.fields.password.max_length }}"{% endif %}
               name="{{ form.fields.password.name }}"
               value="{{ form.fields.password.value }}" />
      </li>
      <li>
        {% comment %}Field for repeat new password {% endcomment %}
        <label for="{{ form.fields.password_confirm.name }}">Repeat new password *</label>
        <input type="password"
               {% if form.fields.password_confirm.required %}required{% endif %}
               {% if form.fields.password_confirm.max_length %}maxlength="{{ form.fields.password_confirm.max_length }}"{% endif %}
               name="{{ form.fields.password_confirm.name }}"
               value="{{ form.fields.password_confirm.value }}" />
      </li>
    </ul>

    {% comment %}Submit-Button{% endcomment %}
    <input type="submit" value="Continue">
  </form>
{% endif %}