AudioBookRequest/templates/settings_page/security.html

{% extends "settings_page/base.html" %}
{% block head %}
  <title>Settings - Security</title>
  {% include "scripts/alpinejs.html" %}
{% endblock head %}
{% block content %}
  <div class="flex flex-col">
    {% block form %}
      <form class="flex flex-col gap-2"
            hx-post="{{ base_url }}/settings/security"
            hx-disabled-elt="#save-button"
            hx-target="this"
            x-data="{ loginType: '{{ login_type.value }}' }">
        {% if success %}<script>toast("{{success|safe}}", "success");</script>{% endif %}
        <h2 class="text-lg">Login/Security</h2>
        <label for="login-type">Login Type</label>
        <select id="login-type"
                name="login_type"
                class="select w-full"
                x-model="loginType">
          <option value="basic" {% if login_type.is_basic() %}selected{% endif %}>Basic Auth (Dialog)</option>
          <option value="forms" {% if login_type.is_forms() %}selected{% endif %}>Forms Login</option>
          <option value="oidc" {% if login_type.is_oidc() %}selected{% endif %}>OpenID Connect</option>
          <option value="none" {% if login_type.is_none() %}selected{% endif %}>None (Insecure)</option>
        </select>
        <template x-if="loginType === 'forms'">
          <div class="contents">
            <label for="expiry-input">Access Token Expiry (minutes)</label>
            <input id="expiry-input"
                   type="number"
                   name="access_token_expiry"
                   class="input w-full"
                   value="{{ access_token_expiry }}" />
          </div>
        </template>
        <template x-if="loginType === 'forms' || loginType === 'basic'">
          <div class="contents">
            <label for="pw-len-input">Minimum Password Length</label>
            <input id="pw-len-input"
                   type="number"
                   name="min_password_length"
                   class="input w-full"
                   placeholder="1"
                   value="{{ min_password_length }}" />
          </div>
        </template>
        <template x-if="loginType === 'oidc'">
          <div class="contents">
            <label for="oidc-client-id">
              OIDC Client ID <span class="text-error">*</span>
            </label>
            <input id="oidc-client-id"
                   required
                   type="text"
                   autocomplete="off"
                   name="oidc_client_id"
                   class="input w-full"
                   value="{{ oidc_client_id }}" />
            <label for="oidc-client-secret">
              OIDC Client Secret <span class="text-error">*</span>
            </label>
            <input id="oidc-client-secret"
                   required
                   type="text"
                   autocomplete="off"
                   name="oidc_client_secret"
                   class="input w-full"
                   value="{{ oidc_client_secret }}" />
            <div>
              <label for="oidc-endpoint">
                OIDC Configuration Endpoint
                <span class="text-error">*</span>
              </label>
              <p class="opacity-60 text-xs">
                The
                <span class="font-mono">.well-known/openid-configuration</span>
                endpoint containing all the OIDC information. You should be able to
                visit the page and view it yourself.
              </p>
            </div>
            <input id="oidc-endpoint"
                   required
                   type="text"
                   placeholder="https://example.com/.well-known/openid-configuration"
                   name="oidc_endpoint"
                   class="input w-full"
                   value="{{ oidc_endpoint }}" />
            <div>
              <label for="oidc-scope">
                OIDC Scopes <span class="text-error">*</span>
              </label>
              <p class="opacity-60 text-xs">
                The scopes that will be requested from the OIDC provider. "openid"
                is almost always required. Add the scopes required to fetch the
                username and group claims.
              </p>
            </div>
            <input id="oidc-scope"
                   required
                   type="text"
                   placeholder="openid profile"
                   autocomplete="off"
                   name="oidc_scope"
                   class="input w-full"
                   value="{{ oidc_scope }}" />
            <div>
              <label for="oidc-username-claim">
                OIDC Username Claim <span class="text-error">*</span>
              </label>
              <p class="opacity-60 text-xs">
                The claim that will be used for the username. Make sure the
                respective scope is passed along above. For example some services
                expect the "email" claim to be able to use the email. "sub" is
                always avaiable. You can head to the OIDC endpoint to see what
                claims are avaiable.
              </p>
            </div>
            <input id="oidc-username-claim"
                   required
                   type="text"
                   autocomplete="off"
                   placeholder="sub"
                   name="oidc_username_claim"
                   class="input w-full"
                   value="{{ oidc_username_claim }}" />
            <div>
              <label for="oidc-username-claim">OIDC Group Claim</label>
              <p class="opacity-60 text-xs">
                The claim that contains the group(s) the user is in. For example, if
                a user is in the group "trusted" they will be assigned the Trusted
                role here. The group claim can be a list of groups or a single one
                and is case-insensitive.
              </p>
            </div>
            <input id="oidc-group-claim"
                   type="text"
                   autocomplete="off"
                   placeholder="group"
                   name="oidc_group_claim"
                   class="input w-full"
                   value="{{ oidc_group_claim }}" />
            <div>
              <label for="oidc-logout-url">Use http or https for the redirect URL</label>
              <p class="opacity-60 text-xs">
                After you login on your authentication server, you will be
                redirected to <span class="font-mono">/auth/oidc</span>. Determine
                if you should be redirected to http or https. This should match up
                with what you configured as the redirect URL in your OIDC provider.
              </p>
            </div>
            <select class="select" name="oidc_redirect_https">
              <option value="True" {% if oidc_redirect_https %}selected{% endif %}>https</option>
              <option value="False" {% if not oidc_redirect_https %}selected{% endif %}>http</option>
            </select>
            <div>
              <label for="oidc-logout-url">OIDC Logout URL</label>
              <p class="opacity-60 text-xs">
                The link you'll be redirected to upon logging out. If your OIDC
                provider has the
                <span class="font-mono">end_session_endpoint</span> defined, it'll
                use that as the logout url.
              </p>
            </div>
            <input id="oidc-logout-url"
                   type="text"
                   autocomplete="off"
                   name="oidc_logout_url"
                   class="input w-full"
                   value="{{ oidc_logout_url }}" />
            <p class="text-error text-xs">
              Make sure all the settings are correct. In the case of a
              miconfiguration, you can log in at
              <a href="{{ base_url }}/login?backup=1"
                 class="font-mono link whitespace-nowrap inline-block">/login?backup=1</a>
              to fix the settings.
              <br />
              <span class="font-semibold">Note:</span> To test your OpenID Connect
              settings you have to log out to invalidate your current session first.
            </p>
          </div>
        </template>
        <button id="save-button" name="submit" class="btn btn-primary" type="submit">Save</button>
      </form>
    {% endblock form %}
    <hr class="my-8 border-base-200" />
    <div class="flex flex-col gap-2">
      <h2 class="text-lg text-error">Danger Zone</h2>
      <button type="button"
              class="btn btn-error"
              hx-post="{{ base_url }}/settings/security/reset-auth"
              hx-confirm="Are you sure you want to reset the authentication secret? This will invalidate everyone's login session forcing them to log in again."
              hx-target="this">Reset Authentication Secret (invalidates all logins)</button>
    </div>
  </div>
{% endblock content %}