oidc-fastapi-test/src/oidc_test/templates/home.html

{% 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 .description {
   font-style: italic;
 }
 .providers {
   margin: 0.5em auto;
   justify-content: center;
   padding: 0.8em;
 }
 .providers .provider {
   min-height: 2em;
 }
 .providers .provider a.link {
   text-decoration: none;
 }
 .providers .provider .link div {
   text-align: center;
   background-color: lightblue;
   border-radius: 8px;
   padding: 6px;
   text-align: center;
   color: black;
   font-weight: bold;
   cursor: pointer;
 }
 .providers .provider .hint {
   font-size: 80%;
   max-width: 12em;
 }
 .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,
    with OpenID Connect and OAuth2 with different providers.
  </p>
  {% if not user %} 
  <div class="login-box">
    <p class="description">Log in with one of these authentication providers:</p>
    <table class="providers">
      {% for provider in settings.oidc.providers %}
      <tr class="provider">
        <td>
          <a class="link" href="login/{{ provider.id }}"><div>{{ provider.name }}</div></a>
        </td>
        <td class="hint">{{ provider.hint }}</div>
        </td>
      </tr>
      {% else %}
        <div class="error">There is no authentication provider defined.
        Hint: check the settings.yaml file.</div>
      {% endfor %}
    </table>
  </div>
  {% endif %}
  {% if user %}
    <div class="user-info">
      <p>Hey, {{ user.name }}</p>
      {% if user.picture %}
        <img src="{{ user.picture }}" class="picture"></img>
      {% endif %}
      <div>{{ user.email }}</div>
      {% if user.roles %}
        <div>
        <span>Roles:</span>
        {% for role in user.roles %}
          <span class="role">{{ role.name }}</span>
        {% endfor %}
        </div>
      {% endif %}
      <div>
        <span>Provider:</span>
        {{ user.oidc_provider.name }} 
      </div>
      <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:
    </p>
    <div id="links-to-check">
      <a href="public">Public</a>
      <a href="protected">Auth protected content</a>
      <a href="protected-by-foorole">Auth + foorole protected content</a>
      <a href="protected-by-foorole-or-barrole">Auth + foorole or barrole protected content</a>
      <a href="protected-by-barrole">Auth + barrole protected content</a>
      <a href="protected-by-foorole-and-barrole">Auth + foorole and barrole protected content</a>
      <a href="fast_api_depends" class="hidden">Using FastAPI Depends</a>
      <a href="other">Other</a>
    </div>
  {% if user_info_details %}
    <div class="debug-auth">
      <p>User info</p>
      <ul>
        {% for key, value in user_info_details.items() %}
        <li>
          <span class="key">{{ key }}</span>: {{ value }}
        </li>
        {% endfor %}
      </ul>
      </div>
      <div>Now is: {{ now }}</div>
    </div>
  {% endif %}
{% endblock %}