start frontend :help:

Signed-off-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>

schema.yml

@@ -33222,10 +33222,6 @@ components:
           type: string
         icon:
           type: string
-          nullable: true
-          description: |-
-            Get the URL to the Icon. If the name is /static or
-            starts with http it is returned as-is
           readOnly: true
         server_uri:
           type: string
@@ -34415,10 +34411,6 @@ components:
           type: string
         icon:
           type: string
-          nullable: true
-          description: |-
-            Get the URL to the Icon. If the name is /static or
-            starts with http it is returned as-is
           readOnly: true
         provider_type:
           $ref: '#/components/schemas/ProviderTypeEnum'
@@ -38802,10 +38794,6 @@ components:
           type: string
         icon:
           type: string
-          nullable: true
-          description: |-
-            Get the URL to the Icon. If the name is /static or
-            starts with http it is returned as-is
           readOnly: true
         client_id:
           type: string
@@ -40752,10 +40740,6 @@ components:
           type: string
         icon:
           type: string
-          nullable: true
-          description: |-
-            Get the URL to the Icon. If the name is /static or
-            starts with http it is returned as-is
           readOnly: true
         pre_authentication_flow:
           type: string
@@ -41505,10 +41489,6 @@ components:
           type: string
         icon:
           type: string
-          nullable: true
-          description: |-
-            Get the URL to the Icon. If the name is /static or
-            starts with http it is returned as-is
           readOnly: true
       required:
       - component

web/src/admin/AdminInterface/AdminSidebar.ts

@@ -142,7 +142,8 @@ export class AkAdminSidebar extends AKElement {
             [null, msg("System"), null, [
                 ["/core/brands", msg("Brands")],
                 ["/crypto/certificates", msg("Certificates")],
-                ["/outpost/integrations", msg("Outpost Integrations")]]]
+                ["/outpost/integrations", msg("Outpost Integrations")],
+                ["/admin/settings", msg("Settings")]]],
         ];
 
         // Typescript requires the type here to correctly type the recursive path

web/src/admin/Routes.ts

@@ -136,6 +136,10 @@ export const ROUTES: Route[] = [
         await import("@goauthentik/admin/crypto/CertificateKeyPairListPage");
         return html`<ak-crypto-certificate-list></ak-crypto-certificate-list>`;
     }),
+    new Route(new RegExp("^/admin/settings$"), async() => {
+        await import("@goauthentik/admin/admin-settings/AdminSettingsViewPage");
+        return html`<ak-admin-settings-view></ak-admin-settings-view>`;
+    }),
     new Route(new RegExp("^/blueprints/instances$"), async () => {
         await import("@goauthentik/admin/blueprints/BlueprintListPage");
         return html`<ak-blueprint-list></ak-blueprint-list>`;

web/src/admin/admin-settings/AdminSettingsForm.ts

@@ -0,0 +1,49 @@
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { dateTimeLocal, first } from "@goauthentik/common/utils";
+import "@goauthentik/elements/forms/FormGroup";
+import "@goauthentik/elements/forms/HorizontalFormElement";
+import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
+import "@goauthentik/elements/forms/Radio";
+import "@goauthentik/elements/forms/SearchSelect";
+
+import { msg } from "@lit/localize";
+import { TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+import { AdminApi, Settings } from "@goauthentik/api";
+
+@customElement("ak-admin-settings-form")
+export class AdminSettingsForm extends ModelForm<Settings, string> {
+
+    async loadInstance(pk: string): Promise<Settings> {
+        return await new AdminApi(DEFAULT_CONFIG).adminSettingsRetrieve();
+    }
+
+    getSuccessMessage(): string {
+        return msg("Successfully updated settings.");
+    }
+
+    async send(data: Settings): Promise<Settings> {
+        return new AdminApi(DEFAULT_CONFIG).adminSettingsUpdate({
+            settingsRequest: data
+        });
+    }
+
+    renderForm(): TemplateResult {
+        return html` <ak-form-element-horizontal
+                label=${msg("Avatars")}
+                name="avatars"
+                ?required=${true}
+            >
+                <input
+                    type="text"
+                    value="${this.instance?.avatars}"
+                    class="pf-c-form-control"
+                    required
+                />
+                <p class="pf-c-form__helper-text">
+                    ${msg("Configure how authentik should show avatars for users.")}
+                </p>
+            </ak-form-element-horizontal>`;
+    }
+}

web/src/admin/admin-settings/AdminSettingsViewPage.ts

@@ -0,0 +1,184 @@
+import "@goauthentik/admin/admin-settings/AdminSettingsForm";
+import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { EVENT_REFRESH } from "@goauthentik/common/constants";
+import { convertToTitle } from "@goauthentik/common/utils";
+import "@goauthentik/components/events/ObjectChangelog";
+import { AKElement } from "@goauthentik/elements/Base";
+import "@goauthentik/elements/CodeMirror";
+import "@goauthentik/elements/EmptyState";
+import "@goauthentik/elements/Markdown";
+import "@goauthentik/elements/PageHeader";
+import "@goauthentik/elements/Tabs";
+import "@goauthentik/elements/buttons/ModalButton";
+import "@goauthentik/elements/buttons/SpinnerButton";
+import "@goauthentik/elements/forms/ModalForm";
+
+import { msg } from "@lit/localize";
+import { CSSResult, TemplateResult, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+import PFBanner from "@patternfly/patternfly/components/Banner/banner.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import { AdminApi, Settings } from "@goauthentik/api";
+
+@customElement("ak-admin-settings-view")
+export class AdminSettingsViewPage extends AKElement {
+    @property({ attribute: false })
+    settings?: Settings;
+
+    firstUpdated(): void {
+        new AdminApi(DEFAULT_CONFIG).adminSettingsRetrieve().then((settings) => {
+            this.settings = settings;
+        });
+    }
+
+    static get styles(): CSSResult[] {
+        return [
+            PFBase,
+            PFButton,
+            PFPage,
+            PFGrid,
+            PFContent,
+            PFCard,
+            PFDescriptionList,
+            PFForm,
+            PFFormControl,
+            PFBanner,
+        ];
+    }
+
+    render(): TemplateResult {
+        if (!this.settings) {
+            return html``;
+        }
+        // TODO: someone else than Marc, make this look ok, perhaps by directly embedding the form
+        // with Save/Cancel buttons
+        // TODO: add descriptive text about what each of these do, as is currently presented in
+        // https://goauthentik.io/docs/installation/configuration
+        return html` <ak-page-header icon="fa fa-cog" header="" description="">
+                <span slot="header"> ${msg("System settings")} </span>
+            </ak-page-header>
+            <section class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
+                <div class="pf-c-card pf-l-grid__item pf-m-12-col">
+                    <div class="pf-c-card__body">
+                        <dl class="pf-c-description-list pf-m-3-col-on-lg">
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${msg("Avatars")}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.settings.avatars}
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${msg("Default user change name")}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.settings.defaultUserChangeName
+                                            ? msg("Allowed")
+                                            : msg("Disallowed")}
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${msg("Default user change email")}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.settings.defaultUserChangeEmail
+                                            ? msg("Allowed")
+                                            : msg("Disallowed")}
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${msg("Default user change username")}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.settings.defaultUserChangeUsername
+                                            ? msg("Allowed")
+                                            : msg("Disallowed")}
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${msg("GDPR compliance")}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.settings.defaultUserChangeUsername
+                                            ? msg("Enabled")
+                                            : msg("Disabled")}
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${msg("Impersonation")}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.settings.defaultUserChangeUsername
+                                            ? msg("Enabled")
+                                            : msg("Disabled")}
+                                    </div>
+                                </dd>
+                            </div>
+                            <div class="pf-c-description-list__group">
+                                <dt class="pf-c-description-list__term">
+                                    <span class="pf-c-description-list__text"
+                                        >${msg("Footer links")}</span
+                                    >
+                                </dt>
+                                <dd class="pf-c-description-list__description">
+                                    <div class="pf-c-description-list__text">
+                                        ${this.settings.footerLinks}
+                                    </div>
+                                </dd>
+                            </div>
+                        </dl>
+                    </div>
+                    <div class="pf-c-card__footer">
+                        <ak-forms-modal>
+                            <span slot="submit"> ${msg("Update")} </span>
+                            <span slot="header"> ${msg("Update settings")} </span>
+                            <ak-admin-settings-form slot="form" .instancePk="unused">
+                            </ak-admin-settings-form>
+                            <button slot="trigger" class="pf-c-button pf-m-primary">
+                                ${msg("Edit")}
+                            </button>
+                        </ak-forms-modal>
+                    </div>
+                </div>
+            </section>`;
+    }
+}