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 %}
 
-            <p>
-                Please enter your email address.
-                Next, we'll send you an email with log-in instructions!
-            </p>
 
             <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,12 +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>Server Error</h1>
+            <h1>Incorrect Verification Link</h1>
-
+            <div class="dialog-body">
-            <p>
+                <p>
-                Something bad happened and you should feel bad.
+                    The verification link you just used is incorrect.
-            </p>
+                    If you copy-pasted the link, please make sure you did not
+                    miss any characters.
+                </p>
+            </div>
         </div>
     </div>
 </div>

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>
+                <p>
-                Success! You've verified this email
+                    Success! You've verified this email
-                address, and it will now receive
+                    address, and it will now receive
-                healthchecks.io notifications.
+                    healthchecks.io notifications.
-            </p>
+                </p>
-
+            </div>
         </div>
     </div>
 </div>