BTHLABS-50: Safari Web extension

Co-authored-by: Tomek Wójcik <labs@tomekwojcik.pl>
Co-committed-by: Tomek Wójcik <labs@tomekwojcik.pl>

services/backend/hotpocket_backend/apps/ui/templates/ui/accounts/apps/browse.html

@@ -0,0 +1,68 @@
+{% extends "ui/page.html" %}
+
+{% load crispy_forms_tags i18n static ui %}
+
+{% block title %}{% translate 'Apps' %} | {% translate 'Account' %}{% endblock %}
+
+{% block page_body %}
+  <div id="BrowseAccountAppsView" class="container">
+    <p class="display-6 my-3">{% translate 'Apps' %}</p>
+
+    {% include 'ui/accounts/partials/nav.html' with active_tab='apps' %}
+
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <td>{% translate 'App' %}</td>
+          <td>{% translate 'Platform' %}</td>
+          <td>{% translate 'Version' %}</td>
+          <td>{% translate 'Authorized at' %}</td>
+        </tr>
+      </thead>
+      <tbody class="ui-account-apps">
+        {% include 'ui/accounts/partials/apps/apps.html' with access_tokens=access_tokens params=params %}
+      </tbody>
+    </table>
+
+    <p class="my-3 text-center {% if not access_tokens and params.before is None %}d-none{% endif %}">
+      <button
+        class="btn btn-primary {% if not before %}disabled{% endif %} ui-noscript-hide ui-load-more-button"
+        hx-get="{{ next_url }}"
+        hx-push-url="true"
+        hx-swap="beforeend"
+        hx-target="#BrowseAccountAppsView .ui-account-apps"
+      >
+        {% translate 'Load more' %}
+      </button>
+
+      <a
+        class="btn btn-primary {% if not before %}disabled{% endif %} ui-noscript-show"
+        href="{{ next_url }}"
+      >
+        {% translate 'Load more' %}
+      </a>
+    </p>
+
+    <template id="BrowseAccountAppsView-DeleteModal">
+      <div class="modal fade" tabindex="-1">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">{% translate 'Delete an app authorization?' %}</h5>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button>
+            </div>
+            <div class="modal-body">
+              {% include 'ui/accounts/partials/apps/delete_confirmation.html' with alert_class="mb-0" %}
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate 'Cancel' %}</button>
+              <button type="button" class="btn btn-danger" data-ui-modal-action="confirm">
+                {% translate 'Delete' %}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+{% endblock %}

services/backend/hotpocket_backend/apps/ui/templates/ui/accounts/apps/delete.html

@@ -0,0 +1,17 @@
+{% extends "ui/page.html" %}
+
+{% load crispy_forms_tags i18n static ui %}
+
+{% block title %}{% translate 'Delete an app authorization?' %} | {% translate 'Account' %}{% endblock %}
+
+{% block page_body %}
+  <div id="BrowseAccountAppsView" class="container">
+    <p class="display-6 my-3">{% translate 'Delete an app authorization?' %}</p>
+
+    {% include 'ui/accounts/partials/nav.html' with active_tab='apps' %}
+
+    {% include 'ui/accounts/partials/apps/delete_confirmation.html' %}
+
+    {% crispy form %}
+  </div>
+{% endblock %}

services/backend/hotpocket_backend/apps/ui/templates/ui/accounts/partials/apps/apps.html

@@ -0,0 +1,44 @@
+{% load i18n static ui %}
+
+{% for access_token in access_tokens %}
+  <tr data-access-token="{{ access_token.pk }}">
+    <td>{{ access_token|render_access_token_app }}</td>
+    <td>{{ access_token|render_access_token_platform }}</td>
+    <td><code>{{ access_token.meta.version }}</code></td>
+    <td>{{ access_token.created_at }}</td>
+  </tr>
+  <tr data-access-token="{{ access_token.pk }}">
+    <td colspan="4">
+      <div class="d-flex justify-content-end align-items-center">
+        <div class="spinner-border spinner-border-sm ui-htmx-indicator" role="status">
+          <span class="visually-hidden">{% translate 'Processing' %}</span>
+        </div>
+        <a
+          class="btn btn-sm btn-danger ms-2"
+          data-ui-modal="#BrowseAccountAppsView-DeleteModal"
+          hx-confirm='CANHAZCONFIRM'
+          hx-indicator='[data-access-token="{{ access_token.pk }}"] .ui-htmx-indicator'
+          hx-post="{% url 'ui.accounts.apps.delete' pk=access_token.pk %}"
+          hx-swap="delete"
+          hx-target='[data-access-token="{{ access_token.pk }}"]'
+          hx-vars='{"canhazconfirm":true}'
+          href="{% url 'ui.accounts.apps.delete' pk=access_token.pk %}"
+        >
+          <i class="bi bi-trash3-fill"></i> {% translate 'Delete' %}
+        </a>
+      </div>
+    </td>
+  </tr>
+{% empty %}
+  {% if not HTMX %}
+    <tr>
+      <td colspan="4">
+        {% if params.before is None %}
+          <strong>{% translate "You haven't authorized any apps yet." %}</strong>
+        {% else %}
+          <span>{% translate "You've reached the end of the line." %}</span>
+        {% endif %}
+      </td>
+    </tr>
+  {% endif %}
+{% endfor %}

services/backend/hotpocket_backend/apps/ui/templates/ui/accounts/partials/apps/delete_confirmation.html

@@ -0,0 +1,7 @@
+{% load i18n static ui %}
+
+<div class="alert alert-danger {{ alert_class|default_if_none:'' }}">
+  <h4 class="alert-heading">{% translate 'Point of no return' %}</h4>
+  <p class="lead mb-0">{% translate 'Are you sure you want to delete this app authorization?' %}</p>
+  <p class="mb-0"><strong>You'll need to authorize again if you ever change your mind.</strong></p>
+</div>

services/backend/hotpocket_backend/apps/ui/templates/ui/accounts/partials/nav.html

@@ -5,7 +5,7 @@
   {% if active_tab == 'profile' %}
     <a class="nav-link active" aria-current="page" href="#">
   {% else %}
-    <a class="nav-link" aria-current="page" href="{% url 'ui.accounts.settings.profile' %}">
+    <a class="nav-link" href="{% url 'ui.accounts.settings.profile' %}">
   {% endif %}
       {% translate 'Profile' %}
     </a>
@@ -14,7 +14,7 @@
   {% if active_tab == 'password' %}
     <a class="nav-link active" aria-current="page" href="#">
   {% else %}
-    <a class="nav-link" aria-current="page" href="{% url 'ui.accounts.settings.password' %}">
+    <a class="nav-link" href="{% url 'ui.accounts.settings.password' %}">
   {% endif %}
       {% translate 'Password' %}
     </a>
@@ -23,9 +23,18 @@
   {% if active_tab == 'settings' %}
     <a class="nav-link active" aria-current="page" href="#">
   {% else %}
-    <a class="nav-link" aria-current="page" href="{% url 'ui.accounts.settings.settings' %}">
+    <a class="nav-link" href="{% url 'ui.accounts.settings.settings' %}">
   {% endif %}
       {% translate 'Settings' %}
     </a>
   </li>
+  <li class="nav-item">
+  {% if active_tab == 'apps' %}
+    <a class="nav-link active" aria-current="page" href="#">
+  {% else %}
+    <a class="nav-link" href="{% url 'ui.accounts.apps.index' %}">
+  {% endif %}
+      {% translate 'Apps' %}
+    </a>
+  </li>
 </ul>

services/backend/hotpocket_backend/apps/ui/templates/ui/associations/partials/association_card.html

@@ -19,7 +19,7 @@
     <a href="{{ association.target.url }}" target="_blank" rel="noopener noreferer"><small>{{ association.target.url|render_url_domain }}</small></a>
     <div class="ms-auto flex-shrink-0 d-flex align-items-center">
       {% if not association.archived_at %}
-        <div class="spinner-border spinner-border-sm" role="status">
+        <div class="spinner-border spinner-border-sm ui-htmx-indicator" role="status">
           <span class="visually-hidden">{% translate 'Processing' %}</span>
         </div>
         {% if association.is_starred %}
@@ -35,7 +35,7 @@
                 <a
                   class="dropdown-item"
                   hx-get="{% url 'ui.associations.unstar' pk=association.pk %}"
-                  hx-indicator='[data-association="{{ association.pk }}"] .spinner-border'
+                  hx-indicator='[data-association="{{ association.pk }}"] .ui-htmx-indicator'
                   hx-swap="innerHTML"
                   hx-target='[data-association="{{ association.pk }}"]'
                   href="{% url 'ui.associations.unstar' pk=association.pk %}"
@@ -48,7 +48,7 @@
                 <a
                   class="dropdown-item"
                   hx-get="{% url 'ui.associations.star' pk=association.pk %}"
-                  hx-indicator='[data-association="{{ association.pk }}"] .spinner-border'
+                  hx-indicator='[data-association="{{ association.pk }}"] .ui-htmx-indicator'
                   hx-swap="innerHTML"
                   hx-target='[data-association="{{ association.pk }}"]'
                   href="{% url 'ui.associations.star' pk=association.pk %}"
@@ -70,7 +70,7 @@
                 class="dropdown-item text-warning"
                 data-ui-modal="#BrowseSavesView-RefreshModal"
                 hx-confirm='CANHAZCONFIRM'
-                hx-indicator='[data-association="{{ association.pk }}"] .spinner-border'
+                hx-indicator='[data-association="{{ association.pk }}"] .ui-htmx-indicator'
                 hx-post="{% url 'ui.associations.refresh' pk=association.pk %}"
                 hx-swap="none"
                 hx-target='[data-association="{{ association.pk }}"]'

services/backend/hotpocket_backend/apps/ui/templates/ui/integrations/extension/post_authenticate.html

@@ -0,0 +1,18 @@
+{% extends "ui/page.html" %}
+
+{% load i18n static ui %}
+
+{% block title %}{% translate 'Redirecting back to the extension...' %}{% endblock %}
+
+{% block button_bar_class %}d-none{% endblock %}
+
+{% block page_body %}
+  <div class="container">
+    <div class="alert alert-success mt-3" role="alert">
+      <h4 class="alert-heading">{% translate 'Done!' %}</h4>
+      <p class="lead mb-0">
+        {% translate "You've successfully logged in to the extension." %}
+      </p>
+    </div>
+  </div>
+{% endblock %}

services/backend/hotpocket_backend/apps/ui/templates/ui/page.html

@@ -10,7 +10,7 @@
         <li class="nav-item dropdown">
           <a class="nav-link dropdown-toggle ui-navbar-brand" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
             {% spaceless %}
-              <img src="{% static 'ui/img/icon-180.png' %}">
+              <img src="{% static 'ui/img/icon-48.png' %}">
               <span class="ms-2">{% block top_nav_title %}HotPocket{% endblock %}</span>
             {% endspaceless %}
           </a>
@@ -35,7 +35,7 @@
       {% else %}
         <li class="nav-item">
           <a class="nav-link pe-none ui-navbar-brand">
-            <img src="{% static 'ui/img/icon-180.png' %}">
+            <img src="{% static 'ui/img/icon-48.png' %}">
             <span class="ms-2">{{ SITE_TITLE }}</span>
           </a>
         </li>
@@ -146,6 +146,7 @@
 <script src="{% static 'ui/js/hotpocket-backend.ui.Modal.js' %}" type="text/javascript"></script>
 <script src="{% static 'ui/js/hotpocket-backend.ui.BrowseSavesView.js' %}" type="text/javascript"></script>
 <script src="{% static 'ui/js/hotpocket-backend.ui.ViewAssociationView.js' %}" type="text/javascript"></script>
+<script src="{% static 'ui/js/hotpocket-backend.ui.BrowseAccountAppsView.js' %}" type="text/javascript"></script>
 {% block page_scripts %}{% endblock %}
 <script type="text/javascript">
 (() => {