Clean up Pushover subscription flow, add Setup Instructions with screenshots.

hc/front/views.py

@@ -738,19 +738,21 @@ def add_discord(request):
     return render(request, "integrations/add_discord.html", ctx)
 
 
-@login_required
 def add_pushover(request):
     if settings.PUSHOVER_API_TOKEN is None or settings.PUSHOVER_SUBSCRIPTION_URL is None:
         raise Http404("pushover integration is not available")
 
+    if not request.user.is_authenticated:
+        ctx = {"page": "channels"}
+        return render(request, "integrations/add_pushover.html", ctx)
+
     if request.method == "POST":
         # Initiate the subscription
-        nonce = get_random_string()
-        request.session["po_nonce"] = nonce
+        state = _prepare_state(request, "pushover")
 
         failure_url = settings.SITE_ROOT + reverse("hc-channels")
         success_url = settings.SITE_ROOT + reverse("hc-add-pushover") + "?" + urlencode({
-            "nonce": nonce,
+            "state": state,
             "prio": request.POST.get("po_priority", "0"),
         })
         subscription_url = settings.PUSHOVER_SUBSCRIPTION_URL + "?" + urlencode({
@@ -762,34 +764,28 @@ def add_pushover(request):
 
     # Handle successful subscriptions
     if "pushover_user_key" in request.GET:
-        if "nonce" not in request.GET or "prio" not in request.GET:
+        key = _get_validated_code(request, "pushover", "pushover_user_key")
+        if key is None:
             return HttpResponseBadRequest()
 
-        # Validate nonce
-        if request.GET["nonce"] != request.session.get("po_nonce"):
-            return HttpResponseForbidden()
-
         # Validate priority
-        if request.GET["prio"] not in ("-2", "-1", "0", "1", "2"):
+        prio = request.GET.get("prio")
+        if prio not in ("-2", "-1", "0", "1", "2"):
             return HttpResponseBadRequest()
 
-        # All looks well--
-        del request.session["po_nonce"]
-
         if request.GET.get("pushover_unsubscribed") == "1":
             # Unsubscription: delete all Pushover channels for this user
             Channel.objects.filter(user=request.user, kind="po").delete()
             return redirect("hc-channels")
-        else:
-            # Subscription
-            user_key = request.GET["pushover_user_key"]
-            priority = int(request.GET["prio"])
 
-            channel = Channel(user=request.team.user, kind="po")
-            channel.value = "%s|%d" % (user_key, priority)
-            channel.save()
-            channel.assign_all_checks()
-            return redirect("hc-channels")
+        # Subscription
+        channel = Channel(user=request.team.user, kind="po")
+        channel.value = "%s|%s" % (key, prio)
+        channel.save()
+        channel.assign_all_checks()
+
+        messages.success(request, "The Pushover integration has been added!")
+        return redirect("hc-channels")
 
     # Show Integration Settings form
     ctx = {

templates/integrations/add_pushover.html

@@ -7,13 +7,99 @@
 {% block content %}
 <div class="row">
 <div class="col-sm-12">
-    <h1>Pushover</h1>
+    <div class="jumbotron">
+        {% if request.user.is_authenticated %}
+        <p>
+            <a href="https://www.pushover.net/">Pushover</a> delivers
+            real-time notifications on your Android, iPhone, iPad, and Desktop,
+            Android Wear and Apple Watch. You can set up {% site_name %} to
+            receive Pushover notifications in a few simple steps.
+        </p>
+        {% else %}
+        <p>
+        {% site_name %} is a <strong>free</strong> and
+        <a href="https://github.com/healthchecks/healthchecks">open source</a>
+        service for monitoring your cron jobs, background processes and
+        scheduled tasks. Before adding Pushover integration, please log into
+        {% site_name %}:</p>
 
-    <p><a href="https://www.pushover.net/">Pushover</a> is a service to receive
-    instant push notifications on your phone or tablet from a variety of
-    sources. If you bought the app on your mobile device, you can integrate it
-    with your {% site_name %} account in a few simple steps.</p>
+        <div class="text-center">
+        <form class="form-inline" action="{% url 'hc-login' %}" method="post">
+            {% csrf_token %}
+            <div class="form-group">
+                <div class="input-group input-group-lg">
+                    <div class="input-group-addon">@</div>
+                    <input
+                        type="email"
+                        class="form-control"
+                        name="email"
+                        autocomplete="email"
+                        placeholder="Email">
+                </div>
+            </div>
+            <div class="form-group">
+                <button type="submit" class="btn btn-lg btn-primary pull-right">
+                    Log In
+                </button>
+            </div>
+        </form>
+        </div>
+        {% endif %}
+    </div>
+
+    {% if not request.user.is_authenticated %}
+    <h2>Setup Guide</h2>
+
+    <div class="row ai-step">
+        <div class="col-sm-6">
+            <span class="step-no">1</span>
+            <p>
+                After logging in, go to "Integrations &rarr; Add Pushover".
+                Pushover supports different notification priorities from
+                silent to "Emergency". Select your preferred priority
+                and click "Subscribe with Pushover".
+            </p>
+        </div>
+        <div class="col-sm-6">
+            <img
+                class="ai-guide-screenshot"
+                alt="Screenshot"
+                src="{% static 'img/integrations/setup_pushover_1.png' %}">
+        </div>
+    </div>
+
+    <div class="row ai-step">
+        <div class="col-sm-6">
+            <span class="step-no">2</span>
+            <p>
+                You will be redirected to
+                <a href="https://pushover.net">pushover.net</a> and
+                asked to confirm a subscription. Review the subscription
+                details and click "Subscribe Me".
+            </p>
+        </div>
+        <div class="col-sm-6">
+            <img
+                class="ai-guide-screenshot"
+                alt="Screenshot"
+                src="{% static 'img/integrations/setup_pushover_2.png' %}">
+        </div>
+    </div>
+
+    <div class="row ai-step">
+        <div class="col-sm-6">
+            <span class="step-no">3</span>
+            <p>
+                That is all! You will now be redirected back to
+                "Integrations" page on {% site_name %} and see
+                the new integration!
+            </p>
+        </div>
+        <div class="col-sm-6">
+        </div>
+    </div>
 
+    {% else %}
     <h2>Integration Settings</h2>
 
     <form method="post" id="add-pushover" class="form-horizontal" action="{% url 'hc-add-pushover' %}">
@@ -82,6 +168,7 @@
             </div>
         </div>
     </form>
+    {% endif %}
 </div>
 </div>
 {% endblock %}

templates/integrations/add_slack.html

@@ -58,7 +58,7 @@
 
     <div class="row ai-step">
         <div class="col-sm-6">
-            <span class="step-no">2</span>
+            <span class="step-no">1</span>
             <p>
                 After {% if request.user.is_authenticated %}{% else %}logging in and{% endif %}
                 clicking on "Add to Slack", you should
@@ -77,7 +77,7 @@
 
     <div class="row ai-step">
         <div class="col-sm-6">
-            <span class="step-no">3</span>
+            <span class="step-no">2</span>
             <p>
                 You should now be on a page that says "{% site_name %} would
                 like access to <i>TEAM NAME</i>". Select the channel you want to
@@ -94,7 +94,7 @@
 
     <div class="row ai-step">
         <div class="col-sm-6">
-            <span class="step-no">4</span>
+            <span class="step-no">3</span>
             <p>
                 That is all! You will now be redirected back to
                 "Integrations" page on {% site_name %} and see