Cosmetic

src/oidc_test/main.py

@@ -143,7 +143,7 @@ async def non_compliant_logout(
     return templates.TemplateResponse(
         name="non_compliant_logout.html",
         request=request,
-        context={"provider": provider},
+        context={"provider": provider, "home_url": request.url_for("home")},
     )
 
 

src/oidc_test/templates/base.html

@@ -12,6 +12,9 @@
       .hidden {
         display: none;
       }
+      .center {
+        text-align: center;
+      }
       .content {
         width: 100%;
         display: flex;
@@ -56,16 +59,20 @@
         margin: 0;
       }
       .login-toolbox {
-        max-width: 20em;
-        margin: auto;
+        max-width: 18em;
+        margin: 0.5em auto;
         display: flex;
         flex-direction: column;
-        padding: 0 1em;
-        gap: 5px;
+        justify-content: center;
+        padding: 0.8em;
+        background-color: floralwhite;
+        gap: 0.5em;
       }
       .login-toolbox a {
         background-color: lightblue;
-        padding: 3px 6px;
+        font-weight: bold;
+        border-radius: 8px;
+        padding: 6px;
         text-decoration: none;
         text-align: center;
         color: black;
@@ -78,9 +85,6 @@
         font-weight: bold;
         flex: 1 1 auto;
       }
-      .login-toolbox a:hover {
-        background-color: lightgreen;
-      }
       .debug-auth {
         font-size: 90%;
         background-color: #d8bebc75;
@@ -106,12 +110,15 @@
       .content #links-to-check {
         display: flex;
         text-align: center;
+        justify-content: center;
+        gap: 0.5em;
+        flex-flow: wrap;
       }
       .content #links-to-check a {
-        margin: 5px;
         color: black;
-        padding: 3px 6px;
+        padding: 5px 10px;
         text-decoration: none;
+        border-radius: 8px;
       }
       .hasResponseStatus {
         background-color: #88888840;

src/oidc_test/templates/home.html

@@ -1,15 +1,19 @@
 {% extends "base.html" %}
 {% block content %}
+  <p class="center">
+    Test the authentication and authorization of FastAPI web based applications
+    with OpenID Connect and OAuth2 with different providers.
+  </p>
   {% if not user %} 
   <div class="login-box">
-    <p>Log in with one of these authentication providers:</p>
     <div class="login-toolbox">
-        {% for provider in settings.oidc.providers %}
-          <a href="login/{{ provider.id }}">{{ provider.name }}</a>
-        {% else %}
-          <span class="error">There is no authentication provider defined.
-          Hint: check the settings.yaml file.</span>
-        {% endfor %}
+      <p>Log in with one of these authentication providers:</p>
+      {% for provider in settings.oidc.providers %}
+        <a href="login/{{ provider.id }}">{{ provider.name }}</a>
+      {% else %}
+        <span class="error">There is no authentication provider defined.
+        Hint: check the settings.yaml file.</span>
+      {% endfor %}
     </div>
   </div>
   {% endif %}
@@ -35,6 +39,7 @@
       <a href="logout" class="logout">Logout</a>
     </div>
   {% endif %}
+  <hr>
   <div class="content">
     <p>
       These links should get different response codes depending on the authorization:

src/oidc_test/templates/non_compliant_logout.html

@@ -6,10 +6,12 @@
     authorisation to log in again without asking for credentials.
   </p>
   <p>
-  This is because {{ provider.name }} does not provide "end_session_endpoint"
-  in its metadata (see: <a href="{{ provider._server_metadata_url }}">{{ provider._server_metadata_url }}</a>).
+    This is because {{ provider.name }} does not provide "end_session_endpoint" in its metadata
+    (see: <a href="{{ provider._server_metadata_url }}">{{ provider._server_metadata_url }}</a>).
   </p>
   <p>
-  Please <a href="{{ provider.server_metadata['issuer'] }}">go there</a> and log out manually.
+    You can just also go back to the <a href="{{ home_url }}">application home page</a>, but
+    it recommended to go to the <a href="{{ provider.server_metadata['issuer'] }}">provider's site</a>
+    and log out explicitely from there.
   </p>
 {% endblock %}