Reset Password Form not appearing

Solved
mattNOOMA
Tourist
4 0 0

Hello,

 

I am editing my site wholesale.drinknooma.com.

My customers are unable to reset their passwords using the Forgot your password? link on the login page.

This is strange because we have another site that's almost identical - drinknooma.com - and the Forgot your password? link works perfectly on that site.

 

Here's the code from my customers/login.liquid for wholesale.drinknooma.com

<a name="pagecontent" id="pagecontent"></a>

<div class="sixteen columns clearfix collection_nav">
  <h1>{{ 'customer.login.title' | t }}</h1>
  <p>If you need help, please email <a href="mailto:lisa@drinknooma.com">lisa@drinknooma.com</a>.</p>
  <div class="feature_divider"></div>
</div>

<div class="clearfix" id="customer">
  <br class="clear" />
  <div class="six columns offset-by-five animated fadeInUp" id="login_form">

    {% form 'customer_login' %}
      {{ form.errors | default_errors }}

      <label for="customer_email" class="login">{{ 'customer.login.email' | t }}</label>
      <input type="email" value="" name="customer[email]" id="customer_email" class="large" size="30"  autocorrect="off" autocapitalize="off" tabindex="1" />

      {% if form.password_needed %}

        {% comment %}
          Customer Account Login
        {% endcomment %}

        <small class="right"><em><a href="#" onclick="showRecoverPasswordForm()">{{ 'customer.login.forgot_password' | t }}</a></em></small>
        <label for="customer_password" class="login">{{ 'customer.login.password' | t }}</label>
        <input type="password" value="" name="customer[password]" id="customer_password" class="large password" size="16" tabindex="2" />

      {% endif %}

      <input class="btn action_button" type="submit" value="{{ 'customer.login.sign_in' | t }}" style="margin-bottom: 5px !important" tabindex="3" />

      {% unless shop.checkout.guest_login %}
        <p class="right" style="padding-top: 10px;">
          {{ 'customer.login.new_customer_label' | t }} {{ 'customer.login.sign_up_html' | t | customer_register_link }}
        </p>
      {% endunless %}
    {% endform %}



    <div id="recover-password" style='display:none'>
      <div class="six columns offset-by-five animated fadeInUp">

        <h4>{{ 'customer.recover_password.title' | t }}</h4>

        {% form 'recover_customer_password' %}
          {{ form.errors | default_errors }}

          {% if form.posted_successfully? %}
            {% assign reset_success = true %}
          {% endif %}

          {% if reset_success %}
            <p>
              <em class="note">{{ 'customer.recover_password.success' | t }}</em>
            </p>
          {% else %}
            <div id="recover_email" class="clearfix large_form">
              <label for="email" class="large">{{ 'customer.recover_password.email' | t }}</label>
              <input type="email" value="" size="30" name="email" id="recover-email" class="large" autocorrect="off" autocapitalize="off" />
            </div>
            <p>
              <em class="note">{{ 'customer.recover_password.subtext' | t }}</em>
            </p>
            <div class="action_bottom">
              <input class="btn action_button" type="submit" value="{{ 'customer.recover_password.submit' | t }}" />
              <span class="note">{{ 'customer.recover_password.or' | t }} <a href="#" onclick="hideRecoverPasswordForm()">{{ 'customer.recover_password.cancel' | t }}</a></span>
            </div>
        
          {% endif %}



        {% endform %}
      </div>
    </div>
  </div>
</div>

<br class="clear" />
<br class="clear" />

<script type="text/javascript">
  function showRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'block';
    document.getElementById('login_form').style.display='none';
    return false;
  }

  function hideRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'none';
    document.getElementById('login_form').style.display = 'block';
    return false;
  }

  if (window.location.hash == '#recover') { showRecoverPasswordForm() }

  // reset_success is only true when the reset form is
  {% if reset_success %}
    showRecoverPasswordForm();
  {% endif %}
</script>

The only differences I can think of between the two sites is that wholesale.drinknooma.com has an app installed that requires customers to be logged in to see our pricing.

Can someone please help me identify what's preventing the Reset Password Form from loading?

 

Thank you.

0 Likes
PixelSplash
Shopify Partner
38 8 5

This is an accepted solution.

Hi @mattNOOMA,

You are hiding a div with id -> 'login_form' and showing another div with id  -> 'recover-password' when clicked on 'forgot password',

The reason it doesn't work is 'login_form' div is the parent of 'recover-password' div. So when you try to hide the login_form, forgot_password div can't reveal itself as it is the child. 

The solution would be making both these divs siblings. 

0 Likes
mattNOOMA
Tourist
4 0 0

That worked for me, thank you so much!

0 Likes
HonghuiChea
New Member
1 0 0

How do you combine both div? Not a coding expert here.

0 Likes
ClayOz
New Member
1 0 0

I am having a similar issue.  I am pretty lost and could use help?  Here is my current liquid code:  

<div class="page-width">
<div class="grid">

<div class="grid__item medium-up--one-half medium-up--push-one-quarter">
<div class="form-message form-message--success hide" id="ResetSuccess">
{{ 'customer.recover_password.success' | t }}
</div>

<div id="CustomerLoginForm" class="form-vertical">
{% form 'customer_login' %}

<h1 class="text-center">{{ 'customer.login.title' | t }}</h1>

{%- if form.errors -%}
<div class="form-message form-message--error">
{{ form.errors | default_errors }}
</div>
{%- endif -%}

<label for="CustomerEmail">{{ 'customer.login.email' | t }}</label>
<input type="email" name="customer[email]" id="CustomerEmail" class="{% if form.errors contains 'email' %} input--error{% endif %}" autocorrect="off" autocapitalize="off" autofocus>

{% if form.password_needed %}
<label for="CustomerPassword">{{ 'customer.login.password' | t }}</label>
<input type="password" value="" name="customer[password]" id="CustomerPassword" class="{% if form.errors contains 'password' %} input--error{% endif %}">
{% endif %}

<div class="text-center">
{% if form.password_needed %}
<p><a href="#recover" id="RecoverPassword">{{ 'customer.login.forgot_password' | t }}</a></p>
{% endif %}

<input type="submit" class="btn" value="{{ 'customer.login.sign_in' | t }}">

<p>
{{ 'layout.customer.create_account' | t | customer_register_link }}
</p>
</div>

{% endform %}
</div>

<div id="RecoverPasswordForm" class="hide">

<div class="text-center">
<h2>{{ 'customer.recover_password.title' | t }}</h2>
<p>{{ 'customer.recover_password.subtext' | t }}</p>
</div>

<div class="form-vertical">
{% form 'recover_customer_password' %}

{%- if form.errors -%}
<div class="form-message form-message--error">
{{ form.errors | default_errors }}
</div>
{%- endif -%}

{% comment %}
Add a hidden span to indicate the form was submitted succesfully.
{% endcomment %}
{% if form.posted_successfully? %}
<span class="hide reset-password-success"></span>
{% endif %}

<label for="RecoverEmail">{{ 'customer.recover_password.email' | t }}</label>
<input type="email" value="" name="email" id="RecoverEmail" class="input-full"autocorrect="off" autocapitalize="off">

<div class="text-center">
<p>
<input type="submit" class="btn" value="{{ 'customer.recover_password.submit' | t }}">
</p>

<button type="button" id="HideRecoverPasswordLink" class="text-link">{{ 'customer.recover_password.cancel' | t }}</button>
</div>
{% endform %}
</div>

</div>

{% comment %}
If accounts are set as optional, the following will be shown as an option
during checkout, not on the default /login page.
{% endcomment %}
{% if shop.checkout.guest_login %}
<div class="text-center">
<hr class="hr--invisible">
<h2>{{ 'customer.login.guest_title' | t }}</h2>

{% form 'guest_login' %}
<input type="submit" class="btn" value="{{ 'customer.login.guest_continue' | t }}">
{% endform %}
</div>
{% endif %}
</div>

</div>
</div>

0 Likes