stages/password: migrate settings to webcomponents

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-24 18:01:21 +01:00
parent ab5d6dbea1
commit 1ef5a8e6c5
10 changed files with 47 additions and 62 deletions

View File

@ -21,6 +21,7 @@ import "../../elements/Tabs";
import "../tokens/UserTokenList";
import "../generic/SiteShell";
import "./settings/AuthenticatorWebAuthnDevices";
import "./settings/Password";
@customElement("ak-user-settings")
export class UserSettingsPage extends LitElement {
@ -34,6 +35,9 @@ export class UserSettingsPage extends LitElement {
case "ak-user-settings-authenticator-webauthn":
return html`<ak-user-settings-authenticator-webauthn stageId=${stage.objectUid}>
</ak-user-settings-authenticator-webauthn>`;
case "ak-user-settings-password":
return html`<ak-user-settings-password stageId=${stage.objectUid}>
</ak-user-settings-password>`;
default:
return html`<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">

View File

@ -0,0 +1,35 @@
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import AKGlobal from "../../../authentik.css";
import { gettext } from "django";
import { FlowURLManager } from "../../../api/legacy";
@customElement("ak-user-settings-password")
export class UserSettingsPassword extends LitElement {
@property()
stageId!: string;
static get styles(): CSSResult[] {
return [PFBase, PFCard, PFButton, AKGlobal];
}
render(): TemplateResult {
// For this stage we don't need to check for a configureFlow,
// as the stage won't return any UI Elements if no configureFlow is set.
return html`<div class="pf-c-card">
<div class="pf-c-card__title">
${gettext('Change your password')}
</div>
<div class="pf-c-card__body">
<a href="${FlowURLManager.configure(this.stageId, '?next=/%23user')}"
class="pf-c-button pf-m-primary">
${gettext('Change password')}
</a>
</div>
</div>`;
}
}