Add hint to providers

src/oidc_test/settings.py

@@ -19,6 +19,7 @@ class OIDCProvider(BaseModel):
     url: str
     client_id: str
     client_secret: str = ""
+    hint: str = "Use your own credentials"
 
     @computed_field
     @property

src/oidc_test/templates/base.html

@@ -52,40 +52,7 @@
       .user-info a.logout:hover {
         background-color: orange;
       }
-      .login-box {
+     .debug-auth {
-        text-align: center;
-      }
-      .login-box p {
-        margin: 0;
-      }
-      .login-toolbox {
-        max-width: 18em;
-        margin: 0.5em auto;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding: 0.8em;
-        background-color: floralwhite;
-        gap: 0.5em;
-      }
-      .login-toolbox a {
-        background-color: lightblue;
-        font-weight: bold;
-        border-radius: 8px;
-        padding: 6px;
-        text-decoration: none;
-        text-align: center;
-        color: black;
-        flex: 1 1 auto;
-      }
-      .login-toolbox .error {
-        color: darkred;
-        padding: 3px 6px;
-        text-align: center;
-        font-weight: bold;
-        flex: 1 1 auto;
-      }
-      .debug-auth {
         font-size: 90%;
         background-color: #d8bebc75;
         padding: 6px;

src/oidc_test/templates/home.html

@@ -1,20 +1,72 @@
 {% extends "base.html" %}
 {% block content %}
+<style>
+ .login-box {
+   text-align: center;
+   background-color: floralwhite;
+   margin: 0 auto;
+   width: fit-content;
+   border: 1px solid grey;
+ }
+ .login-box p {
+   margin: 0;
+ }
+ .login-box .description {
+   font-style: italic;
+ }
+ .providers {
+   margin: 0.5em auto;
+   justify-content: center;
+   padding: 0.8em;
+ }
+ .providers .provider {
+   height: 2em;
+ }
+ .providers .provider a {
+   background-color: lightblue;
+   border-radius: 8px;
+   padding: 6px;
+   text-align: center;
+   color: black;
+   text-decoration: none;
+   font-weight: bold;
+ }
+ .providers .provider .hint {
+   font-size: 80%;
+   max-width: 12em;
+ }
+ .providers .provider .provider-link {
+   text-align: center;
+ }
+ .providers .error {
+   color: darkred;
+   padding: 3px 6px;
+   text-align: center;
+   font-weight: bold;
+   flex: 1 1 auto;
+ }
+</style>
   <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">
-    <div class="login-toolbox">
+    <p class="description">Log in with one of these authentication providers:</p>
-      <p>Log in with one of these authentication providers:</p>
+    <table class="providers">
       {% for provider in settings.oidc.providers %}
-        <a href="login/{{ provider.id }}">{{ provider.name }}</a>
+      <tr class="provider">
+        <td class="provider-link">
+          <a href="login/{{ provider.id }}">{{ provider.name }}</a>
+        </td>
+        <td class="hint">{{ provider.hint }}</div>
+        </td>
+      </tr>
       {% else %}
-        <span class="error">There is no authentication provider defined.
+        <div class="error">There is no authentication provider defined.
-        Hint: check the settings.yaml file.</span>
+        Hint: check the settings.yaml file.</div>
       {% endfor %}
-    </div>
+    </table>
   </div>
   {% endif %}
   {% if user %}