Rework templates for OAuth2

Signed-off-by: Yohann D'ANELLO <ynerant@crans.org>

apps/member/templates/member/manage_auth_tokens.html

@@ -5,32 +5,98 @@ SPDX-License-Identifier: GPL-3.0-or-later
 {% load i18n %}
 
 {% block content %}
-<div class="alert alert-info">
+<div class="row mt-4">
-    <h4>À quoi sert un jeton d'authentification ?</h4>
+    <div class="col-xl-6">
+        <div class="card">
+            <div class="card-header text-center">
+                <h3>{% trans "Token authentication" %}</h3>
+            </div>
+            <div class="card-body">
+                <div class="alert alert-info">
+                    <h4>À quoi sert un jeton d'authentification ?</h4>
 
-    Un jeton vous permet de vous connecter à <a href="/api/">l'API de la Note Kfet</a>.<br />
+                    Un jeton vous permet de vous connecter à <a href="/api/">l'API de la Note Kfet</a> via votre propre compte
-    Il suffit pour cela d'ajouter en en-tête de vos requêtes <code>Authorization: Token &lt;TOKEN&gt;</code>
+                    depuis un client externe.<br />
-    pour pouvoir vous identifier.<br /><br />
+                    Il suffit pour cela d'ajouter en en-tête de vos requêtes <code>Authorization: Token &lt;TOKEN&gt;</code>
+                    pour pouvoir vous identifier.<br /><br />
 
-    Une documentation de l'API arrivera ultérieurement.
+                    La documentation de l'API est disponible ici :
+                    <a href="/doc/api/">{{ request.scheme }}://{{ request.get_host }}/doc/api/</a>.
+                </div>
+
+                <div class="alert alert-info">
+                    <strong>{%trans  'Token' %} :</strong>
+                    {% if 'show' in request.GET %}
+                    {{ token.key }} (<a href="?">cacher</a>)
+                    {% else %}
+                    <em>caché</em> (<a href="?show">montrer</a>)
+                    {% endif %}
+                    <br />
+                    <strong>{%trans  'Created' %} :</strong> {{ token.created }}
+                </div>
+
+                <div class="alert alert-warning">
+                    <strong>{% trans "Warning" %} :</strong> regénérer le jeton va révoquer tout accès autorisé à l'API via ce jeton !
+                </div>
+            </div>
+            <div class="card-footer text-center">
+                <a href="?regenerate">
+                    <button class="btn btn-primary">{% trans 'Regenerate token' %}</button>
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-xl-6">
+        <div class="card">
+            <div class="card-header text-center">
+                <h3>{% trans "OAuth2 authentication" %}</h3>
+            </div>
+            <div class="card-header">
+                <div class="alert alert-info">
+                    <p>
+                        La Note Kfet implémente également le protocole <a href="https://oauth.net/2/">OAuth2</a>, afin de
+                        permettre à des applications tierces d'interagir avec la Note en récoltant des informations
+                        (de connexion par exemple) voir en permettant des modifications à distance, par exemple lorsqu'il
+                        s'agit d'avoir un site marchand sur lequel faire des transactions via la Note Kfet.
+                    </p>
+
+                    <p>
+                        L'usage de ce protocole est recommandé pour tout usage non personnel, car permet de mieux cibler
+                        les droits dont on a besoin, en restreignant leur usage par jeton généré.
+                    </p>
+
+                    <p>
+                        La documentation vis-à-vis de l'usage de ce protocole est disponible ici :
+                        <a href="/doc/external_services/oauth2/">{{ request.scheme }}://{{ request.get_host }}/doc/external_services/oauth2/</a>.
+                    </p>
+                </div>
+
+                Liste des URL à communiquer à votre application :
+
+                <ul>
+                    <li>
+                        {% trans "Authorization:" %}
+                        <a href="{% url 'oauth2_provider:authorize' %}">{{ request.scheme }}://{{ request.get_host }}{% url 'oauth2_provider:authorize' %}</a>
+                    </li>
+                    <li>
+                        {% trans "Token:" %}
+                        <a href="{% url 'oauth2_provider:authorize' %}">{{ request.scheme }}://{{ request.get_host }}{% url 'oauth2_provider:token' %}</a>
+                    </li>
+                    <li>
+                        {% trans "Revoke Token:" %}
+                        <a href="{% url 'oauth2_provider:authorize' %}">{{ request.scheme }}://{{ request.get_host }}{% url 'oauth2_provider:revoke-token' %}</a>
+                    </li>
+                    <li>
+                        {% trans "Introspect Token:" %}
+                        <a href="{% url 'oauth2_provider:authorize' %}">{{ request.scheme }}://{{ request.get_host }}{% url 'oauth2_provider:introspect' %}</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="card-footer text-center">
+                <a class="btn btn-primary" href="{% url 'oauth2_provider:list' %}">{% trans "Show my applications" %}</a>
+            </div>
+        </div>
+    </div>
 </div>
-
-<div class="alert alert-info">
-    <strong>{%trans  'Token' %} :</strong>
-    {% if 'show' in request.GET %}
-    {{ token.key }} (<a href="?">cacher</a>)
-    {% else %}
-    <em>caché</em> (<a href="?show">montrer</a>)
-    {% endif %}
-    <br />
-    <strong>{%trans  'Created' %} :</strong> {{ token.created }}
-</div>
-
-<div class="alert alert-warning">
-    <strong>Attention :</strong> regénérer le jeton va révoquer tout accès autorisé à l'API via ce jeton !
-</div>
-
-<a href="?regenerate">
-    <button class="btn btn-primary">{% trans 'Regenerate token' %}</button>
-</a>
 {% endblock %}

apps/permission/templates/permission/scopes.html

@@ -57,16 +57,16 @@
                     let scope = ""
                     for (let element of elements) {
                         if (element.checked) {
-                            scope += element.value + "%20"
+                            scope += element.value + " "
                         }
                     }
 
-                    scope = scope.substr(0, scope.length - 3)
+                    scope = scope.substr(0, scope.length - 1)
 
                     document.getElementById("url-{{ app.name.lower }}").innerHTML = 'Scopes : ' + scope
-                        + '<br><a href="{% url 'oauth2_provider:authorize' %}?client_id={{ app.client_id }}&response_type=code&scope='+ scope
+                        + '<br><a href="{% url 'oauth2_provider:authorize' %}?client_id={{ app.client_id }}&response_type=code&scope='+ scope.replaceAll(' ', '%20')
                         + '" target="_blank">{{ request.scheme }}://{{ request.get_host }}{% url 'oauth2_provider:authorize' %}?client_id={{ app.client_id }}&response_type=code&scope='
-                        + scope + '</a>'
+                        + scope.replaceAll(' ', '%20') + '</a>'
                 }
             }
         {% endfor %}

apps/permission/views.py

@@ -157,7 +157,7 @@ class ScopesView(LoginRequiredMixin, TemplateView):
         scopes = PermissionScopes()
         context["scopes"] = {}
         all_scopes = scopes.get_all_scopes()
-        for app in Application.objects.filter(Q(user=self.request.user) | Q(client_type='public')).all():
+        for app in Application.objects.filter(user=self.request.user).all():
             available_scopes = scopes.get_available_scopes(app)
             context["scopes"][app] = OrderedDict()
             items = [(k, v) for (k, v) in all_scopes.items() if k in available_scopes]

locale/fr/LC_MESSAGES/django.po

@@ -1053,18 +1053,50 @@ msgstr "Changer le mot de passe"
 msgid "API token"
 msgstr "Accès API"
 
-#: apps/member/templates/member/manage_auth_tokens.html:19
+#: apps/member/templates/member/manage_auth_tokens.html:12
+msgid "Token authentication"
+msgstr "Authentification par jeton"
+
+#: apps/member/templates/member/manage_auth_tokens.html:28
 msgid "Token"
 msgstr "Jeton"
 
-#: apps/member/templates/member/manage_auth_tokens.html:26
+#: apps/member/templates/member/manage_auth_tokens.html:35
 msgid "Created"
 msgstr "Créé le"
 
-#: apps/member/templates/member/manage_auth_tokens.html:34
+#: apps/member/templates/member/manage_auth_tokens.html:39
+msgid "Warning"
+msgstr "Attention"
+
+#: apps/member/templates/member/manage_auth_tokens.html:44
 msgid "Regenerate token"
 msgstr "Regénérer le jeton"
 
+#: apps/member/templates/member/manage_auth_tokens.html:53
+msgid "OAuth2 authentication"
+msgstr "Authentification OAuth2"
+
+#: apps/member/templates/member/manage_auth_tokens.html:79
+msgid "Authorization:"
+msgstr "Autorisation :"
+
+#: apps/member/templates/member/manage_auth_tokens.html:83
+msgid "Token:"
+msgstr "Jeton :"
+
+#: apps/member/templates/member/manage_auth_tokens.html:87
+msgid "Revoke Token:"
+msgstr "Révoquer le jeton :"
+
+#: apps/member/templates/member/manage_auth_tokens.html:91
+msgid "Introspect Token:"
+msgstr "Introspection :"
+
+#: apps/member/templates/member/manage_auth_tokens.html:97
+msgid "Show my applications"
+msgstr "Voir mes applications"
+
 #: apps/member/templates/member/picture_update.html:35
 msgid "Nevermind"
 msgstr "Annuler"
@@ -1482,7 +1514,7 @@ msgstr "Pas de motif spécifié"
 #: apps/wei/tables.py:74 apps/wei/tables.py:114
 #: apps/wei/templates/wei/weiregistration_confirm_delete.html:31
 #: note_kfet/templates/oauth2_provider/application_confirm_delete.html:18
-#: note_kfet/templates/oauth2_provider/application_detail.html:31
+#: note_kfet/templates/oauth2_provider/application_detail.html:39
 #: note_kfet/templates/oauth2_provider/authorized-token-delete.html:12
 msgid "Delete"
 msgstr "Supprimer"
@@ -1493,7 +1525,7 @@ msgstr "Supprimer"
 #: apps/wei/templates/wei/bus_detail.html:20
 #: apps/wei/templates/wei/busteam_detail.html:20
 #: apps/wei/templates/wei/busteam_detail.html:40
-#: note_kfet/templates/oauth2_provider/application_detail.html:30
+#: note_kfet/templates/oauth2_provider/application_detail.html:38
 msgid "Edit"
 msgstr "Éditer"
 
@@ -1808,17 +1840,17 @@ msgid "Available scopes"
 msgstr "Scopes disponibles"
 
 #: apps/permission/templates/permission/scopes.html:42
-#: note_kfet/templates/oauth2_provider/application_list.html:18
+#: note_kfet/templates/oauth2_provider/application_list.html:24
 msgid "No applications defined"
 msgstr "Pas d'application définie"
 
 #: apps/permission/templates/permission/scopes.html:43
-#: note_kfet/templates/oauth2_provider/application_list.html:19
+#: note_kfet/templates/oauth2_provider/application_list.html:25
 msgid "Click here"
 msgstr "Cliquez ici"
 
 #: apps/permission/templates/permission/scopes.html:43
-#: note_kfet/templates/oauth2_provider/application_list.html:19
+#: note_kfet/templates/oauth2_provider/application_list.html:25
 msgid "if you want to register a new one"
 msgstr "si vous voulez en enregistrer une nouvelle"
 
@@ -3180,6 +3212,17 @@ msgid "Redirect Uris"
 msgstr "URIs de redirection"
 
 #: note_kfet/templates/oauth2_provider/application_detail.html:29
+#, python-format
+msgid ""
+"You can go <a href=\"%(scopes_url)s\">here</a> to generate authorization "
+"link templates and convert permissions to scope numbers with the permissions "
+"that you want to grant for your application."
+msgstr ""
+"Vous pouvez aller <a href=\"%(scopes_url)s\"ici</a> pour générer des modèles "
+"de liens d'autorisation et convertir des permissions en identifiants de "
+"scopes avec les permissions que vous souhaitez attribuer à votre application."
+
+#: note_kfet/templates/oauth2_provider/application_detail.html:37
 #: note_kfet/templates/oauth2_provider/application_form.html:23
 msgid "Go Back"
 msgstr "Retour en arrière"
@@ -3192,10 +3235,22 @@ msgstr "Modifier l'application"
 msgid "Your applications"
 msgstr "Vos applications"
 
-#: note_kfet/templates/oauth2_provider/application_list.html:24
+#: note_kfet/templates/oauth2_provider/application_list.html:11
+msgid ""
+"You can find on this page the list of the applications that you already "
+"registered."
+msgstr ""
+"Vous pouvez trouver sur cette page la liste des applications que vous avez "
+"déjà enregistrées."
+
+#: note_kfet/templates/oauth2_provider/application_list.html:30
 msgid "New Application"
 msgstr "Nouvelle application"
 
+#: note_kfet/templates/oauth2_provider/application_list.html:31
+msgid "Authorized Tokens"
+msgstr "Jetons autorisés"
+
 #: note_kfet/templates/oauth2_provider/application_registration_form.html:5
 msgid "Register a new application"
 msgstr "Enregistrer une nouvelle application"

note_kfet/templates/oauth2_provider/application_detail.html

@@ -12,7 +12,7 @@
                 <dd class="col-xl-6"><input class="form-control" type="text" value="{{ application.client_id }}" readonly></dd>
 
                 <dt class="col-xl-6">{% trans "Client secret" %}</dt>
-                <dd class="col-xl-6"><input class="form-control" type="text" value="{{ application.client_secret }}" readonly></dd>
+                <dd class="col-xl-6"><input class="form-control" type="text" value="****************************************************************" readonly></dd>
 
                 <dt class="col-xl-6">{% trans "Client type" %}</dt>
                 <dd class="col-xl-6">{{ application.client_type }}</dd>
@@ -24,6 +24,14 @@
                 <dd class="col-xl-6"><textarea class="form-control" readonly>{{ application.redirect_uris }}</textarea></dd>
             </dl>
 
+            <div class="alert alert-info">
+                {% url 'permission:scopes' as scopes_url %}
+                {% blocktrans trimmed %}
+                    You can go <a href="{{ scopes_url }}">here</a> to generate authorization link templates and convert
+                    permissions to scope numbers with the permissions that you want to grant for your application.
+                {% endblocktrans %}
+            </div>
+
         </div>
         <div class="card-footer text-center">
             <a class="btn btn-secondary" href="{% url "oauth2_provider:list" %}">{% trans "Go Back" %}</a>

note_kfet/templates/oauth2_provider/application_list.html

@@ -7,6 +7,12 @@
             <h3>{% trans "Your applications" %}</h3>
         </div>
         <div class="card-body">
+            <div class="alert alert-info">
+                {% blocktrans trimmed %}
+                    You can find on this page the list of the applications that you already registered.
+                {% endblocktrans %}
+            </div>
+
             {% if applications %}
                 <ul>
                     {% for application in applications %}
@@ -22,6 +28,7 @@
         </div>
         <div class="card-footer text-center">
             <a class="btn btn-success" href="{% url "oauth2_provider:register" %}">{% trans "New Application" %}</a>
+            <a class="btn btn-secondary" href="{% url "oauth2_provider:authorized-token-list" %}">{% trans "Authorized Tokens" %}</a>
         </div>
     </div>
 {% endblock content %}

note_kfet/templates/oauth2_provider/authorize.html

@@ -39,3 +39,11 @@
         {% endif %}
     </div>
 {% endblock %}
+
+{% block extrajavascript %}
+    <script>
+        {# Small hack to have the remove the allow checkbox and replace it with the button #}
+        {# Django oauth toolkit does simply not render the wdiget since it is not hidden, and create directly the button #}
+        document.getElementById('div_id_allow').parentElement.remove()
+    </script>
+{% endblock %}