add api key management UI in profile view

Signed-off-by: tdruez <tdruez@aboutcode.org>

Author: tdruez

scanpipe/templates/account/profile.html

@@ -13,16 +13,18 @@
         </ul>
       </nav>
     </div>
-
     <div class="columns">
       <div class="column is-7">
         <div class="content">
-          <p>
-            Your personal API key provides access to the <a href="{% url 'project-list' %}" target="_blank">REST API</a>.<br>
-            <strong>Treat it like a password and keep it secure.</strong>
-          </p>
+          <div class="mb-2">
+            Your personal API key provides access to the
+            <a href="{% url 'project-list' %}" target="_blank">REST API</a>
+            <div class="has-text-weight-semibold">
+              Treat it like a password and keep it secure.
+            </div>
+          </div>
           {% if request.user.api_token %}
-            <div class="notification is-info is-light mb-4">
+            <div class="notification is-grey mb-4">
               Your API key <strong>{{ request.user.api_token.prefix }}...</strong>
               was generated on {{ request.user.api_token.created }}<br>
               For security reasons, the full key is only shown once at generation time.<br>
@@ -36,26 +38,21 @@
           {% endif %}
         </div>
         <div class="buttons">
-          <button type="button" class="button is-link is-outlined modal-button">
+          <button type="button" class="button is-success is-outlined modal-button" data-target="modal-generate-api-key" aria-haspopup="true">
             Generate API key
           </button>
           {% if request.user.api_token %}
-            <button type="button" class="button is-danger is-outlined modal-button">
+            <button type="button" class="button is-danger is-outlined modal-button" data-target="modal-revoke-api-key" aria-haspopup="true">
               Revoke API key
             </button>
           {% endif %}
         </div>
       </div>
     </div>
-
-    <form action="{% url 'generate_api_key' %}" id="generate-api-key-form" method="post">{% csrf_token %}
-      <button type="submit" class="btn btn-success">Generate</button>
-    </form>
-
-    <form action="{% url 'revoke_api_key' %}" id="revoke-api-key-form" method="post">{% csrf_token %}
-      <button type="submit" class="btn btn-danger">Revoke API key</button>
-    </form>
-
   </section>
+  {% include 'scanpipe/modals/profile_generate_api_key_modal.html' %}
+  {% if request.user.api_token %}
+    {% include 'scanpipe/modals/profile_revoke_api_key_modal.html' %}
+  {% endif %}
 </div>
 {% endblock %}

scanpipe/templates/scanpipe/modals/profile_generate_api_key_modal.html

@@ -0,0 +1,27 @@
+<div class="modal" id="modal-generate-api-key">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Generate API key</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <form action="{% url 'generate_api_key' %}" method="post">{% csrf_token %}
+      <section class="modal-card-body">
+        <p class="mb-2">
+          You are about to generate your API key.
+        </p>
+        {% if request.user.api_token %}
+          <div class="notification is-danger has-text-weight-semibold">
+            Your existing key will be immediately revoked.
+          </div>
+        {% endif %}
+      </section>
+      <footer class="modal-card-foot is-justify-content-flex-end">
+        <div class="buttons">
+          <button class="button has-text-weight-semibold" type="reset">No, Cancel</button>
+          <button class="button is-success is-no-close" type="submit">Generate API key</button>
+        </div>
+      </footer>
+    </form>
+  </div>
+</div>

scanpipe/templates/scanpipe/modals/profile_revoke_api_key_modal.html

@@ -0,0 +1,27 @@
+<div class="modal" id="modal-revoke-api-key">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Revoke API key</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <form action="{% url 'revoke_api_key' %}" method="post">{% csrf_token %}
+      <section class="modal-card-body">
+        <p class="mb-2">
+          Are you sure you want to delete your API key?
+        </p>
+        {% if request.user.api_token %}
+          <div class="notification is-danger has-text-weight-semibold">
+            Your existing key will be immediately revoked.
+          </div>
+        {% endif %}
+      </section>
+      <footer class="modal-card-foot is-justify-content-flex-end">
+        <div class="buttons">
+          <button class="button has-text-weight-semibold" type="reset">No, Cancel</button>
+          <button class="button is-danger is-no-close" type="submit">Revoke API key</button>
+        </div>
+      </footer>
+    </form>
+  </div>
+</div>

scanpipe/tests/test_auth.py

@@ -36,6 +36,7 @@
 
 TEST_PASSWORD = str(uuid.uuid4())
 
+APIToken = apps.get_model("scanpipe", "APIToken")
 login_url = reverse("login")
 project_list_url = reverse("project_list")
 logout_url = reverse("logout")
@@ -112,12 +113,22 @@ def test_scancodeio_auth_logout_view(self):
 
     def test_scancodeio_account_profile_view(self):
         self.client.login(username=self.basic_user.username, password=TEST_PASSWORD)
-        APIToken = apps.get_model("scanpipe", "APIToken")
+
+        expected1 = "No API key created."
+        expected2 = "Generate API key"
+        expected3 = "Revoke API key"
+
+        response = self.client.get(profile_url)
+        self.assertContains(response, expected1)
+        self.assertContains(response, expected2)
+        self.assertNotContains(response, expected3)
+
         APIToken.create_token(user=self.basic_user)
         response = self.client.get(profile_url)
-        expected = '<label class="label">API Key</label>'
-        self.assertContains(response, expected, html=True)
-        # self.assertContains(response, self.basic_user.auth.key)
+        self.assertNotContains(response, expected1)
+        self.assertContains(response, expected2)
+        self.assertContains(response, expected3)
+        self.assertContains(response, self.basic_user.api_token.prefix)
 
     def test_scancodeio_auth_views_are_protected(self):
         a_uuid = uuid.uuid4()