From 89fbea33057ffd667191dd5a68b0eb0858e762e6 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens@goauthentik.io>
Date: Thu, 28 Dec 2023 15:12:27 +0100
Subject: [PATCH] fix web stuff

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 .../admin/admin-settings/AdminSettingsForm.ts | 69 +++++++++++--------
 .../admin/admin-settings/AdminSettingsPage.ts |  4 +-
 2 files changed, 41 insertions(+), 32 deletions(-)

diff --git a/web/src/admin/admin-settings/AdminSettingsForm.ts b/web/src/admin/admin-settings/AdminSettingsForm.ts
index 803e64183..ae9aaffe6 100644
--- a/web/src/admin/admin-settings/AdminSettingsForm.ts
+++ b/web/src/admin/admin-settings/AdminSettingsForm.ts
@@ -10,8 +10,9 @@ import "@goauthentik/elements/forms/SearchSelect";
 import "@goauthentik/elements/utils/TimeDeltaHelp";
 
 import { msg } from "@lit/localize";
-import { TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 import PFList from "@patternfly/patternfly/components/List/list.css";
 
@@ -45,47 +46,55 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
             <ak-text-input
                 name="avatars"
                 label=${msg("Avatars")}
-                value="${this._settings?.avatars}"
+                value="${ifDefined(this._settings?.avatars)}"
                 .bighelp=${html`
                     <p class="pf-c-form__helper-text">
                         ${msg(
                             "Configure how authentik should show avatars for users. The following values can be set:",
                         )}
                     </p>
-                    <p class="pf-c-form__helper-text">
-                        <ul class="pf-c-list">
-                            <li class="pf-c-form__helper-text"><code>none</code>: ${msg(
+                    <ul class="pf-c-list">
+                        <li class="pf-c-form__helper-text">
+                            <code>none</code>:
+                            ${msg(
                                 "Disables per-user avatars and just shows a 1x1 pixel transparent picture",
-                            )}</li>
-                            <li class="pf-c-form__helper-text"><code>gravatar</code>: ${msg(
-                                "Uses gravatar with the user's email address",
-                            )}</li>
-                            <li class="pf-c-form__helper-text"><code>initials</code>: ${msg(
-                                "Generated avatars based on the user's name",
-                            )}</li>
-                            <li class="pf-c-form__helper-text">${msg(
+                            )}
+                        </li>
+                        <li class="pf-c-form__helper-text">
+                            <code>gravatar</code>:
+                            ${msg("Uses gravatar with the user's email address")}
+                        </li>
+                        <li class="pf-c-form__helper-text">
+                            <code>initials</code>:
+                            ${msg("Generated avatars based on the user's name")}
+                        </li>
+                        <li class="pf-c-form__helper-text">
+                            ${msg(
                                 "Any URL: If you want to use images hosted on another server, you can set any URL. Additionally, these placeholders can be used:",
                             )}
-                                <ul class="pf-c-list">
-                                    <li class="pf-c-form__helper-text"><code>%(username)s</code>: ${msg(
-                                        "The user's username",
-                                    )}</li>
-                                    <li class="pf-c-form__helper-text"><code>%(mail_hash)s</code>: ${msg(
-                                        "The email address, md5 hashed",
-                                    )}</li>
-                                    <li class="pf-c-form__helper-text"><code>%(upn)s</code>: ${msg(
-                                        "The user's UPN, if set (otherwise an empty string)",
-                                    )}</li>
-                                </ul>
-                            </li>
-                            <li class="pf-c-form__helper-text">${msg(
+                            <ul class="pf-c-list">
+                                <li class="pf-c-form__helper-text">
+                                    <code>%(username)s</code>: ${msg("The user's username")}
+                                </li>
+                                <li class="pf-c-form__helper-text">
+                                    <code>%(mail_hash)s</code>:
+                                    ${msg("The email address, md5 hashed")}
+                                </li>
+                                <li class="pf-c-form__helper-text">
+                                    <code>%(upn)s</code>:
+                                    ${msg("The user's UPN, if set (otherwise an empty string)")}
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="pf-c-form__helper-text">
+                            ${msg(
                                 html`An attribute path like
                                     <code>attributes.something.avatar</code>, which can be used in
                                     combination with the file field to allow users to upload custom
                                     avatars for themselves.`,
-                            )}</li>
-                        </ul>
-                    </p>
+                            )}
+                        </li>
+                    </ul>
                     <p class="pf-c-form__helper-text">
                         ${msg(
                             "Multiple values can be set, comma-separated, and authentik will fallback to the next mode when no avatar could be found.",
@@ -125,7 +134,7 @@ export class AdminSettingsForm extends Form<SettingsRequest> {
                 name="eventRetention"
                 label=${msg("Event retention")}
                 required
-                value="${this._settings?.eventRetention}"
+                value="${ifDefined(this._settings?.eventRetention)}"
                 .bighelp=${html`<p class="pf-c-form__helper-text">
                         ${msg("Duration after which events will be deleted from the database.")}
                     </p>
diff --git a/web/src/admin/admin-settings/AdminSettingsPage.ts b/web/src/admin/admin-settings/AdminSettingsPage.ts
index 4f1a81e38..beec8881e 100644
--- a/web/src/admin/admin-settings/AdminSettingsPage.ts
+++ b/web/src/admin/admin-settings/AdminSettingsPage.ts
@@ -59,7 +59,7 @@ export class AdminSettingsPage extends AKElement {
         this.loadSettings();
     }
 
-    async save(): void {
+    async save(): Promise<void> {
         const form = this.shadowRoot?.querySelector<AdminSettingsForm>("ak-admin-settings-form");
         if (!form) {
             return;
@@ -74,7 +74,7 @@ export class AdminSettingsPage extends AKElement {
             return;
         }
         this.loadSettings();
-        form.settings = this.settings;
+        form.settings = this.settings!;
         form.resetForm();
     }