much better frontend, but save does not refresh form properly
Signed-off-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>
This commit is contained in:
Marc 'risson' Schmitt
parent
6e96303794
commit
6a5acf79a1
|
|
@ -136,9 +136,9 @@ 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("^/admin/settings$"), async () => {
|
||||
await import("@goauthentik/admin/admin-settings/AdminSettingsPage");
|
||||
return html`<ak-admin-settings></ak-admin-settings>`;
|
||||
}),
|
||||
new Route(new RegExp("^/blueprints/instances$"), async () => {
|
||||
await import("@goauthentik/admin/blueprints/BlueprintListPage");
|
||||
|
|
|
|||
|
|
@ -1,49 +1,156 @@
|
|||
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
||||
import { dateTimeLocal, first } from "@goauthentik/common/utils";
|
||||
import "@goauthentik/components/ak-switch-input";
|
||||
import "@goauthentik/components/ak-text-input";
|
||||
import "@goauthentik/components/ak-textarea-input";
|
||||
import { Form } from "@goauthentik/elements/forms/Form";
|
||||
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 { customElement, property, state } from "lit/decorators.js";
|
||||
|
||||
import { AdminApi, Settings } from "@goauthentik/api";
|
||||
import PFList from "@patternfly/patternfly/components/List/list.css";
|
||||
|
||||
import { AdminApi, Settings, SettingsRequest } 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();
|
||||
export class AdminSettingsForm extends Form<SettingsRequest> {
|
||||
@property({ attribute: false })
|
||||
set settings(value: Settings) {
|
||||
this._settings = value;
|
||||
}
|
||||
|
||||
private _settings?: Settings;
|
||||
|
||||
getSuccessMessage(): string {
|
||||
return msg("Successfully updated settings.");
|
||||
}
|
||||
|
||||
async send(data: Settings): Promise<Settings> {
|
||||
async send(data: SettingsRequest): Promise<Settings> {
|
||||
return new AdminApi(DEFAULT_CONFIG).adminSettingsUpdate({
|
||||
settingsRequest: data
|
||||
settingsRequest: data,
|
||||
});
|
||||
}
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return super.styles.concat(PFList);
|
||||
}
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html` <ak-form-element-horizontal
|
||||
label=${msg("Avatars")}
|
||||
return html`
|
||||
<ak-text-input
|
||||
name="avatars"
|
||||
?required=${true}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value="${this.instance?.avatars}"
|
||||
class="pf-c-form-control"
|
||||
required
|
||||
/>
|
||||
label=${msg("Avatars")}
|
||||
value="${this._settings?.avatars}"
|
||||
.bighelp=${html`
|
||||
<p class="pf-c-form__helper-text">
|
||||
${msg("Configure how authentik should show avatars for users.")}
|
||||
${msg(
|
||||
"Configure how authentik should show avatars for users. The following values can be set:",
|
||||
)}
|
||||
</p>
|
||||
</ak-form-element-horizontal>`;
|
||||
<p class="pf-c-form__helper-text">
|
||||
<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(
|
||||
"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(
|
||||
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>
|
||||
<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.",
|
||||
)}
|
||||
${msg(
|
||||
html`For example, setting this to <code>gravatar,initials</code> will
|
||||
attempt to get an avatar from Gravatar, and if the user has not
|
||||
configured on there, it will fallback to a generated avatar.`,
|
||||
)}
|
||||
</p>
|
||||
`}
|
||||
required
|
||||
>
|
||||
</ak-text-input>
|
||||
<ak-switch-input
|
||||
name="defaultUserChangeName"
|
||||
label=${msg("Default user change name")}
|
||||
?checked="${this._settings?.defaultUserChangeName}"
|
||||
help=${msg("Enable the ability for users to change their name.")}
|
||||
>
|
||||
</ak-switch-input>
|
||||
<ak-switch-input
|
||||
name="defaultUserChangeEmail"
|
||||
label=${msg("Default user change email")}
|
||||
?checked="${this._settings?.defaultUserChangeEmail}"
|
||||
help=${msg("Enable the ability for users to change their email.")}
|
||||
>
|
||||
</ak-switch-input>
|
||||
<ak-switch-input
|
||||
name="defaultUserChangeUsername"
|
||||
label=${msg("Default user change username")}
|
||||
?checked="${this._settings?.defaultUserChangeUsername}"
|
||||
help=${msg("Enable the ability for users to change their username.")}
|
||||
>
|
||||
</ak-switch-input>
|
||||
<ak-switch-input
|
||||
name="gdprCompliance"
|
||||
label=${msg("GDPR compliance")}
|
||||
?checked="${this._settings?.gdprCompliance}"
|
||||
help=${msg(
|
||||
"When enabled, all the events caused by a user will be deleted upon the user's deletion.",
|
||||
)}
|
||||
>
|
||||
</ak-switch-input>
|
||||
<ak-switch-input
|
||||
name="impersonation"
|
||||
label=${msg("Impersonation")}
|
||||
?checked="${this._settings?.impersonation}"
|
||||
help=${msg("Globally enable/disable impersonation.")}
|
||||
>
|
||||
</ak-switch-input>
|
||||
<ak-textarea-input
|
||||
name="footerLinks"
|
||||
label=${msg("Footer links")}
|
||||
.value="${this._settings?.footerLinks}"
|
||||
.bighelp=${html`
|
||||
<p class="pf-c-form__helper-text">
|
||||
${msg(
|
||||
"This option configures the footer links on the flow executor pages. It must be a valid JSON list and can be used as follows:",
|
||||
)}
|
||||
<code>[{"name": "Link Name","href":"https://goauthentik.io"}]</code>
|
||||
</p>
|
||||
`}
|
||||
>
|
||||
</ak-textarea-input>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
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/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")
|
||||
export class AdminSettingsPage extends AKElement {
|
||||
static get styles(): CSSResult[] {
|
||||
return [
|
||||
PFBase,
|
||||
PFButton,
|
||||
PFPage,
|
||||
PFGrid,
|
||||
PFContent,
|
||||
PFCard,
|
||||
PFDescriptionList,
|
||||
PFForm,
|
||||
PFFormControl,
|
||||
PFBanner,
|
||||
];
|
||||
}
|
||||
@property({ attribute: false })
|
||||
settings?: Settings;
|
||||
|
||||
loadSettings(): void {
|
||||
new AdminApi(DEFAULT_CONFIG).adminSettingsRetrieve().then((settings) => {
|
||||
this.settings = settings;
|
||||
});
|
||||
}
|
||||
|
||||
firstUpdated(): void {
|
||||
this.loadSettings();
|
||||
}
|
||||
|
||||
async save(): void {
|
||||
const form = this.shadowRoot?.querySelector<AdminSettingsForm>("ak-admin-settings-form");
|
||||
if (!form) {
|
||||
return;
|
||||
}
|
||||
await form.submit(new Event("submit"));
|
||||
this.resetForm();
|
||||
}
|
||||
|
||||
resetForm(): void {
|
||||
const form = this.shadowRoot?.querySelector<AdminSettingsForm>("ak-admin-settings-form");
|
||||
if (!form) {
|
||||
return;
|
||||
}
|
||||
this.loadSettings();
|
||||
form.settings = this.settings;
|
||||
form.resetForm();
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
if (!this.settings) {
|
||||
return html``;
|
||||
}
|
||||
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">
|
||||
<ak-admin-settings-form id="form" .settings=${this.settings}>
|
||||
</ak-admin-settings-form>
|
||||
<ak-spinner-button
|
||||
.callAction=${async () => {
|
||||
await this.save();
|
||||
}}
|
||||
class="pf-m-primary"
|
||||
>${msg("Save")}</ak-spinner-button
|
||||
>
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
this.resetForm();
|
||||
}}
|
||||
class="pf-m-secondary"
|
||||
>${msg("Cancel")}</ak-spinner-button
|
||||
>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
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>`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue