Update wording in "Incorrect Link" pages. Fixes #5

hc/accounts/views.py

@@ -102,4 +102,5 @@ def check_token(request, username, token):
 
             return redirect("hc-checks")
 
-    return render(request, "bad_link.html")
+    ctx = {"bad_link": True}
+    return render(request, "accounts/login.html", ctx)

static/css/base.css

@@ -62,12 +62,16 @@ body {
     color: #d9534f;
 }
 
-#login_dialog {
+.hc-dialog {
     background: #FFF;
     padding: 2em;
     margin-top: 100px;
 }
 
-#login_dialog h1 {
+.hc-dialog h1 {
     margin: 0;
 }
+
+.dialog-body {
+    margin: 24px 0;
+}

templates/accounts/login.html

@@ -3,13 +3,23 @@
 {% block content %}
 <div class="row">
     <div class="col-sm-6 col-sm-offset-3">
-        <div id="login_dialog">
+        <div class="hc-dialog">
+            {% if bad_link %}
+            <h1>Incorrect Login Link</h1>
+            <div class="dialog-body">
+                <p>The login link you just used is either incorrect or expired.</p>
+                <p>Please use the form below to request a fresh login link:</p>
+            </div>
+            {% else %}
             <h1>Health Checks</h1>
-
+            <div class="dialog-body">
                 <p>
                     Please enter your email address.
                     Next, we'll send you an email with log-in instructions!
                 </p>
+            </div>
+            {% endif %}
+
 
             <form method="post">
                 {% csrf_token %}

templates/accounts/login_link_sent.html

@@ -3,7 +3,7 @@
 {% block content %}
 <div class="row">
     <div class="col-sm-6 col-sm-offset-3">
-        <div id="login_dialog">
+        <div class="hc-dialog">
             <h1>Login Link Sent!</h1>
             <br />
             <p>

templates/bad_link.html

@@ -3,13 +3,16 @@
 {% block content %}
 <div class="row">
     <div class="col-sm-6 col-sm-offset-3">
-        <div id="login_dialog">
-            <h1>Server Error</h1>
-
+        <div class="hc-dialog">
+            <h1>Incorrect Verification Link</h1>
+            <div class="dialog-body">
                 <p>
-                Something bad happened and you should feel bad.
+                    The verification link you just used is incorrect.
+                    If you copy-pasted the link, please make sure you did not
+                    miss any characters.
                 </p>
             </div>
         </div>
+    </div>
 </div>
 {% endblock %}

templates/front/verify_email_success.html

@@ -3,15 +3,15 @@
 {% block content %}
 <div class="row">
     <div class="col-sm-6 col-sm-offset-3">
-        <div id="login_dialog">
+        <div class="hc-dialog">
             <h1>Email Address Verified!</h1>
-            <br />
+            <div class="dialog-body">
                 <p>
                     Success! You've verified this email
                     address, and it will now receive
                     healthchecks.io notifications.
                 </p>
-
+            </div>
         </div>
     </div>
 </div>