Add a "Lost password?" link with instructions in the Sign In page

CHANGELOG.md

@@ -17,6 +17,8 @@ All notable changes to this project will be documented in this file.
 - Implement WebAuthn two-factor authentication
 - Implement badge mode (up/down vs up/late/down) selector (#282)
 - Add Ping.exitstatus field, store client's reported exit status values (#455)
+- Implement header-based authentication (#457)
+- Add a "Lost password?" link with instructions in the Sign In page
 
 ## Bug Fixes
 - Fix db field overflow when copying a check with a long name

hc/accounts/views.py

@@ -156,6 +156,7 @@ def login(request):
         "magic_form": magic_form,
         "bad_link": bad_link,
         "registration_open": settings.REGISTRATION_OPEN,
+        "support_email": settings.SUPPORT_EMAIL,
     }
     return render(request, "accounts/login.html", ctx)
 

static/css/login.css

@@ -29,7 +29,8 @@
 #link-instruction {
     color: #999;
     font-style: italic;
-    padding: 12px 16px;
+    padding: 13px 16px;
+    margin-bottom: 36px;
 }
 
 #login-sep {
@@ -85,4 +86,20 @@
 
 #login-signup-cta a:hover {
     color:  #0091EA;
+}
+
+#login-password {
+    margin-bottom: 0;
+}
+
+#forgot-password {
+    float: right;
+    display: block;
+    height: 36px;
+    padding-top: 2px;
+    margin: 0;
+}
+
+#lost-password-modal ol {
+    line-height: 1.8;
 }

static/js/login.js

@@ -1,13 +0,0 @@
-$(function () {
-    var passwordInput = $("#password-block input");
-
-    if ($("#password-block").hasClass("hide")) {
-       passwordInput.detach();
-    }
-
-    $("#password-toggle").click(function() {
-        $("#password-toggle").hide();
-        $("#password-block").removeClass("hide");
-        $("#password-block .input-group").append(passwordInput);
-    });
-});

templates/accounts/login.html

@@ -81,11 +81,16 @@
                         autocomplete="email">
 
                     <input
+                        id="login-password"
                         type="password"
                         class="form-control input-lg"
                         name="password"
                         placeholder="your password">
 
+                    <p id="forgot-password">
+                        <a href="#" data-toggle="modal" data-target="#lost-password-modal">Lost your password?</a>
+                    </p>
+
                     <button type="submit" class="btn btn-lg btn-primary btn-block">
                         Sign In
                     </button>
@@ -109,13 +114,46 @@
 {% include "front/signup_modal.html" %}
 {% endif %}
 
+<div id="lost-password-modal" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <h4>Lost Password?</h4>
+            </div>
+            <div class="modal-body">
+                <p>
+                    If you need to reset your password, please do the following:
+                </p>
+                <ol>
+                    <li>Sign in using the <strong>Email Me a Link</strong> method.</li>
+                    <li>
+                        Once in your account, go to
+                        <strong>Account Settings › Set Password</strong>
+                        to set a new password.
+                    </li>
+                </ol>
+                {% if support_email %}
+                <p>
+                    Please contact us at
+                    <a href="mailto:{{ support_email }}">{{ support_email }}</a>
+                    in case you need assistance!
+                </p>
+                {% endif %}
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Got it</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 {% endblock %}
 
 {% block scripts %}
 {% compress js %}
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
-<script src="{% static 'js/login.js' %}"></script>
 <script src="{% static 'js/signup.js' %}"></script>
 {% endcompress %}
 {% endblock %}