In setup instructions, show an additional "log ina adn go to the Integrations" page for logged-out users

hc/front/tests/test_add_pushover.py

@@ -17,10 +17,6 @@ class AddPushoverTestCase(BaseTestCase):
         r = self.client.get(self.url)
         self.assertEqual(r.status_code, 404)
 
-    def test_instructions_work_without_login(self):
-        r = self.client.get("/integrations/add_pushover/")
-        self.assertContains(r, "Setup Guide")
-
     def test_it_shows_form(self):
         self.client.login(username="alice@example.org", password="password")
         r = self.client.get(self.url)

hc/front/tests/test_add_pushover_help.py

@@ -0,0 +1,18 @@
+from django.test.utils import override_settings
+from hc.test import BaseTestCase
+
+
+@override_settings(
+    PUSHOVER_API_TOKEN="token", PUSHOVER_SUBSCRIPTION_URL="http://example.org"
+)
+class AddPushoverHelpTestCase(BaseTestCase):
+    url = "/integrations/add_pushover/"
+
+    @override_settings(PUSHOVER_API_TOKEN=None)
+    def test_it_requires_api_token(self):
+        r = self.client.get(self.url)
+        self.assertEqual(r.status_code, 404)
+
+    def test_instructions_work_without_login(self):
+        r = self.client.get(self.url)
+        self.assertContains(r, "Setup Guide")

hc/front/views.py

@@ -1257,6 +1257,7 @@ def add_discord_complete(request):
     return redirect("hc-p-channels", project.code)
 
 
+@require_setting("PUSHOVER_API_TOKEN")
 def add_pushover_help(request):
     ctx = {"page": "channels"}
     return render(request, "integrations/add_pushover_help.html", ctx)

templates/integrations/add_pushover_help.html

@@ -8,17 +8,27 @@
 <div class="col-sm-12">
     <h1>Pushover</h1>
     <div class="jumbotron">
+        {% if request.user.is_authenticated %}
         <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>
+            <a href="https://www.pushover.net/">Pushover</a> delivers
+            real-time notifications on your Android, iPhone, iPad, 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>
 
         <div class="text-center">
             <a href="{% url 'hc-login' %} %}"
                class="btn btn-primary btn-lg">Sign In</a>
         </div>
+        {% endif %}
     </div>
 
     <h2>Setup Guide</h2>
@@ -27,7 +37,29 @@
         <div class="col-sm-6">
             <span class="step-no"></span>
             <p>
-                After logging in, go to "Integrations &rarr; Add Pushover".
+                {% if request.user.is_authenticated %}
+                Go
+                {% else %}
+                After logging in, go
+                {% endif %}
+
+                to the <strong>Integrations</strong> page,
+                and click on <strong>Add Integration</strong> next to the
+                Pushover integration.
+            </p>
+        </div>
+        <div class="col-sm-6">
+            <img
+                class="ai-guide-screenshot"
+                alt="Screenshot"
+                src="{% static 'img/integrations/setup_pushover_0.png' %}">
+        </div>
+    </div>
+
+    <div class="row ai-step">
+        <div class="col-sm-6">
+            <span class="step-no"></span>
+            <p>
                 Pushover supports different notification priorities from
                 silent to "Emergency". Select your preferred priorities
                 and click "Subscribe with Pushover".

templates/integrations/add_slack_btn.html

@@ -13,6 +13,7 @@
         up {% site_name %} to post status updates directly to an appropriate
         Slack channel.</p>
 
+        {% if authorize_url %}
         <div class="text-center">
         <a href="{{ authorize_url }}">
             <img
@@ -21,6 +22,7 @@
                 srcset="{% static 'img/integrations/add_to_slack.png' %} 1x, {% static 'img/integrations/add_to_slack@2x.png' %} 2x" />
         </a>
         </div>
+        {% endif %}
 
         {% else %}
         <p>
@@ -39,12 +41,36 @@
 
     <h2>Setup Guide</h2>
 
+    {% if not authorize_url %}
     <div class="row ai-step">
         <div class="col-sm-6">
             <span class="step-no"></span>
             <p>
-                After {% if request.user.is_authenticated %}{% else %}signing in and{% endif %}
-                clicking on "Add to Slack", you should
+                {% if request.user.is_authenticated %}
+                Go
+                {% else %}
+                After logging in, go
+                {% endif %}
+
+                to the <strong>Integrations</strong> page,
+                and click on <strong>Add Integration</strong> next to the
+                Slack integration.
+            </p>
+        </div>
+        <div class="col-sm-6">
+            <img
+                class="ai-guide-screenshot"
+                alt="Screenshot"
+                src="{% static 'img/integrations/setup_slack_btn_0.png' %}">
+        </div>
+    </div>
+    {% endif %}
+
+    <div class="row ai-step">
+        <div class="col-sm-6">
+            <span class="step-no"></span>
+            <p>
+                Click on the "Add to Slack" button, and you should
                 be on a page that says "{% site_name %} would like access to
                 your Slack team". Select the team you want to add the
                 {% site_name %} integration app to.