habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: move user settings into separate folder

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-30 22:22:11 +02:00
parent cb0b5f7146
commit 7a583cb7e6
10 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
web/src/pages/users/UserDetailsPage.ts
View File

@ -1,97 +0,0 @@
import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import AKGlobal from "../../authentik.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import { CoreApi, User } from "authentik-api";
import { me } from "../../api/Users";
import "../../elements/forms/FormElement";
import "../../elements/EmptyState";
import { FlowURLManager } from "../../api/legacy";
import "@polymer/paper-input/paper-input";
import "@polymer/iron-form/iron-form";
import { DEFAULT_CONFIG } from "../../api/Config";
import "../../elements/forms/Form";
@customElement("ak-user-details")
export class UserDetailsPage extends LitElement {
static get styles(): CSSResult[] {
return [PFBase, PFCard, PFForm, PFFormControl, PFButton, AKGlobal];
}
@property({attribute: false})
user?: User;
firstUpdated(): void {
me().then((user) => {
this.user = user.user;
});
}
render(): TemplateResult {
if (!this.user) {
return html`<ak-empty-state
?loading="${true}"
header=${gettext("Loading")}>
</ak-empty-state>`;
}
return html`<div class="pf-c-card">
<div class="pf-c-card__title">
${gettext("Update details")}
</div>
<div class="pf-c-card__body">
<ak-form
successMessage=${gettext("Successfully updated details.")}
.send=${(data: unknown) => {
return new CoreApi(DEFAULT_CONFIG).coreUsersUpdate({
id: this.user?.pk || 0,
data: data as User
});
}}>
<form class="pf-c-form pf-m-horizontal">
<paper-input
name="username"
?alwaysFloatLabel=${true}
label="${gettext("Username")}"
value=${this.user.username}>
</paper-input>
<p class="pf-c-form__helper-text">${gettext("Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.")}</p>
<paper-input
name="name"
?alwaysFloatLabel=${true}
label="${gettext("Name")}"
value=${this.user.name}>
</paper-input>
<p class="pf-c-form__helper-text">${gettext("User's display name.")}</p>
<paper-input
name="email"
?alwaysFloatLabel=${true}
type="email"
label="${gettext("Email address")}"
value=${this.user.email || ""}>
</paper-input>
<div class="pf-c-form__group pf-m-action">
<div class="pf-c-form__horizontal-group">
<div class="pf-c-form__actions">
<button class="pf-c-button pf-m-primary">
${gettext("Update")}
</button>
<a class="pf-c-button pf-m-danger"
href="${FlowURLManager.defaultUnenrollment()}">
${gettext("Delete account")}
</a>
</div>
</div>
</div>
</form>
</ak-form>
</div>
</div>`;
}
}

103
web/src/pages/users/UserSettingsPage.ts
View File

@ -1,103 +0,0 @@
import { gettext } from "django";
import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import PFPage from "@patternfly/patternfly/components/Page/page.css";
import PFContent from "@patternfly/patternfly/components/Content/content.css";
import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
import PFCard from "@patternfly/patternfly/components/Card/card.css";
import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css";
import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
import AKGlobal from "../../authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import { SourcesApi, StagesApi, UserSetting } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config";
import { until } from "lit-html/directives/until";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/Tabs";
import "./UserDetailsPage";
import "./UserTokenList";
import "./settings/UserSettingsAuthenticatorTOTP";
import "./settings/UserSettingsAuthenticatorStatic";
import "./settings/UserSettingsAuthenticatorWebAuthn";
import "./settings/UserSettingsPassword";
import "./settings/SourceSettingsOAuth";
@customElement("ak-user-settings")
export class UserSettingsPage extends LitElement {
static get styles(): CSSResult[] {
return [PFBase, PFPage, PFFlex, PFDisplay, PFGallery, PFContent, PFCard, PFDescriptionList, PFSizing, PFForm, PFFormControl, AKGlobal];
}
renderStageSettings(stage: UserSetting): TemplateResult {
switch (stage.component) {
case "ak-user-settings-authenticator-webauthn":
return html`<ak-user-settings-authenticator-webauthn objectId=${stage.objectUid}>
</ak-user-settings-authenticator-webauthn>`;
case "ak-user-settings-password":
return html`<ak-user-settings-password objectId=${stage.objectUid}>
</ak-user-settings-password>`;
case "ak-user-settings-authenticator-totp":
return html`<ak-user-settings-authenticator-totp objectId=${stage.objectUid}>
</ak-user-settings-authenticator-totp>`;
case "ak-user-settings-authenticator-static":
return html`<ak-user-settings-authenticator-static objectId=${stage.objectUid}>
</ak-user-settings-authenticator-static>`;
default:
return html`<p>${gettext(`Error: unsupported stage settings: ${stage.component}`)}</p>`;
}
}
renderSourceSettings(source: UserSetting): TemplateResult {
switch (source.component) {
case "ak-user-settings-source-oauth":
return html`<ak-user-settings-source-oauth objectId=${source.objectUid}>
</ak-user-settings-source-oauth>`;
default:
return html`<p>${gettext(`Error: unsupported source settings: ${source.component}`)}</p>`;
}
}
render(): TemplateResult {
return html`<div class="pf-c-page">
<main role="main" class="pf-c-page__main" tabindex="-1">
<section class="pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1>
<i class="pf-icon pf-icon-user"></i>
${gettext("User Settings")}
</h1>
<p>${gettext("Configure settings relevant to your user profile.")}</p>
</div>
</section>
<ak-tabs ?vertical="${true}" style="height: 100%;">
<section slot="page-1" data-tab-title="${gettext("User details")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<ak-user-details></ak-user-details>
</section>
<section slot="page-2" data-tab-title="${gettext("Tokens")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<ak-user-token-list></ak-user-token-list>
</section>
${until(new StagesApi(DEFAULT_CONFIG).stagesAllUserSettings({}).then((stages) => {
return stages.map((stage) => {
return html`<section slot="page-${stage.objectUid}" data-tab-title="${ifDefined(stage.title)}" class="pf-c-page__main-section pf-m-no-padding-mobile">
${this.renderStageSettings(stage)}
</section>`;
});
}))}
${until(new SourcesApi(DEFAULT_CONFIG).sourcesAllUserSettings({}).then((source) => {
return source.map((stage) => {
return html`<section slot="page-${stage.objectUid}" data-tab-title="${ifDefined(stage.title)}" class="pf-c-page__main-section pf-m-no-padding-mobile">
${this.renderSourceSettings(stage)}
</section>`;
});
}))}
</ak-tabs>
</main>
</div>`;
}
}

118
web/src/pages/users/UserTokenList.ts
View File

@ -1,118 +0,0 @@
import { gettext } from "django";
import { customElement, html, property, TemplateResult } from "lit-element";
import { AKResponse } from "../../api/Client";
import "../../elements/forms/DeleteForm";
import "../../elements/buttons/ModalButton";
import "../../elements/buttons/Dropdown";
import "../../elements/buttons/TokenCopyButton";
import { Table, TableColumn } from "../../elements/table/Table";
import { PAGE_SIZE } from "../../constants";
import { CoreApi, Token } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config";
import { AdminURLManager } from "../../api/legacy";
@customElement("ak-user-token-list")
export class UserTokenList extends Table<Token> {
searchEnabled(): boolean {
return true;
}
expandable = true;
@property()
order = "expires";
apiEndpoint(page: number): Promise<AKResponse<Token>> {
return new CoreApi(DEFAULT_CONFIG).coreTokensList({
ordering: this.order,
page: page,
pageSize: PAGE_SIZE,
search: this.search || "",
});
}
columns(): TableColumn[] {
return [
new TableColumn("Identifier", "identifier"),
new TableColumn(""),
];
}
renderToolbar(): TemplateResult {
return html`
<ak-modal-button href="/-/user/tokens/create/">
<ak-spinner-button slot="trigger" class="pf-m-primary">
${gettext("Create")}
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>
${super.renderToolbar()}
`;
}
renderExpanded(item: Token): TemplateResult {
return html`
<td role="cell" colspan="3">
<div class="pf-c-table__expandable-row-content">
<dl class="pf-c-description-list pf-m-horizontal">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("User")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${item.user.username}</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("Expiring")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${item.expiring ? "Yes" : "No"}</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${gettext("Expiring")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">${item.expiring ? item.expires?.toLocaleString() : "-"}</div>
</dd>
</div>
</dl>
</div>
</td>
<td></td>`;
}
row(item: Token): TemplateResult[] {
return [
html`${item.identifier}`,
html`
<ak-modal-button href="${AdminURLManager.tokens(`${item.identifier}/update/`)}">
<ak-spinner-button slot="trigger" class="pf-m-secondary">
${gettext("Edit")}
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>
<ak-forms-delete
.obj=${item}
objectLabel=${gettext("Token")}
.delete=${() => {
return new CoreApi(DEFAULT_CONFIG).coreTokensDelete({
identifier: item.identifier
});
}}>
<button slot="trigger" class="pf-c-button pf-m-danger">
${gettext("Delete")}
</button>
</ak-forms-delete>
<ak-token-copy-button identifier="${item.identifier}">
${gettext("Copy Key")}
</ak-token-copy-button>
`,
];
}
}

18
web/src/pages/users/settings/BaseUserSettings.ts
View File

@ -1,18 +0,0 @@
import { CSSResult, LitElement, property } 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 PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
export abstract class BaseUserSettings extends LitElement {
@property()
objectId!: string;
static get styles(): CSSResult[] {
return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal];
}
}

50
web/src/pages/users/settings/SourceSettingsOAuth.ts
View File

@ -1,50 +0,0 @@
import { customElement, html, TemplateResult } from "lit-element";
import { BaseUserSettings } from "./BaseUserSettings";
import { OAuthSource, SourcesApi } from "authentik-api";
import { until } from "lit-html/directives/until";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { gettext } from "django";
import { AppURLManager } from "../../../api/legacy";
@customElement("ak-user-settings-source-oauth")
export class SourceSettingsOAuth extends BaseUserSettings {
render(): TemplateResult {
return html`${until(new SourcesApi(DEFAULT_CONFIG).sourcesOauthRead({
slug: this.objectId
}).then((source) => {
return html`<div class="pf-c-card">
<div class="pf-pf-c-card__title">
${gettext(`Source ${source.name}`)}
</div>
<div class="pf-c-card__body">
${this.renderInner(source)}
</div>
</div>`;
}))}`;
}
renderInner(source: OAuthSource): TemplateResult {
return html`${until(new SourcesApi(DEFAULT_CONFIG).sourcesOauthUserConnectionsList({
sourceSlug: this.objectId
}).then((connection) => {
if (connection.results.length > 0) {
return html`<p>${gettext("Connected.")}</p>
<button class="pf-c-button pf-m-danger"
@click=${() => {
return new SourcesApi(DEFAULT_CONFIG).sourcesOauthUserConnectionsDelete({
id: connection.results[0].pk || 0
});
}}>
${gettext("Disconnect")}
</button>`;
}
return html`<p>${gettext("Not connected.")}</p>
<a class="pf-c-button pf-m-primary"
href=${AppURLManager.sourceOAuth(source.slug, "login")}>
${gettext("Connect")}
</a>`;
}))}`;
}
}

69
web/src/pages/users/settings/UserSettingsAuthenticatorStatic.ts
View File

@ -1,69 +0,0 @@
import { AuthenticatorsApi, StagesApi } from "authentik-api";
import { gettext } from "django";
import { customElement, html, TemplateResult } from "lit-element";
import { until } from "lit-html/directives/until";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { FlowURLManager } from "../../../api/legacy";
import { BaseUserSettings } from "./BaseUserSettings";
@customElement("ak-user-settings-authenticator-static")
export class UserSettingsAuthenticatorStatic extends BaseUserSettings {
renderEnabled(): TemplateResult {
return html`<div class="pf-c-card__body">
<p>
${gettext("Status: Enabled")}
<i class="pf-icon pf-icon-ok"></i>
</p>
</div>
<div class="pf-c-card__footer">
<button
class="pf-c-button pf-m-danger"
@click=${() => {
return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpList({}).then((devices) => {
if (devices.results.length < 1) {
return;
}
// TODO: Handle multiple devices, currently we assume only one TOTP Device
return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpDelete({
id: devices.results[0].pk || 0
});
});
}}>
${gettext("Disable Time-based OTP")}
</button>
</div>`;
}
renderDisabled(): TemplateResult {
return html`
<div class="pf-c-card__body">
<p>
${gettext("Status: Disabled")}
<i class="pf-icon pf-icon-error-circle-o"></i>
</p>
</div>
<div class="pf-c-card__footer">
${until(new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorTotpRead({ stageUuid: this.objectId}).then((stage) => {
if (stage.configureFlow) {
return html`<a href="${FlowURLManager.configure(stage.pk || "", "?next=/%23%2Fuser")}"
class="pf-c-button pf-m-primary">${gettext("Enable Time-based OTP")}
</a>`;
}
return html``;
}))}
</div>`;
}
render(): TemplateResult {
return html`<div class="pf-c-card">
<div class="pf-c-card__title">
${gettext("Time-based One-Time Passwords")}
</div>
${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpList({}).then((devices) => {
return devices.results.length > 0 ? this.renderEnabled() : this.renderDisabled();
}))}
</div>`;
}
}

84
web/src/pages/users/settings/UserSettingsAuthenticatorTOTP.ts
View File

@ -1,84 +0,0 @@
import { AuthenticatorsApi, StagesApi } from "authentik-api";
import { gettext } from "django";
import { CSSResult, customElement, html, TemplateResult } from "lit-element";
import { until } from "lit-html/directives/until";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { FlowURLManager } from "../../../api/legacy";
import { STATIC_TOKEN_STYLE } from "../../../flows/stages/authenticator_static/AuthenticatorStaticStage";
import { BaseUserSettings } from "./BaseUserSettings";
@customElement("ak-user-settings-authenticator-totp")
export class UserSettingsAuthenticatorTOTP extends BaseUserSettings {
static get styles(): CSSResult[] {
return super.styles.concat(STATIC_TOKEN_STYLE);
}
renderEnabled(): TemplateResult {
return html`<div class="pf-c-card__body">
<p>
${gettext("Status: Enabled")}
<i class="pf-icon pf-icon-ok"></i>
</p>
<ul class="ak-otp-tokens">
${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsStaticList({}).then((devices) => {
if (devices.results.length < 1) {
return;
}
return devices.results[0].tokenSet?.map((token) => {
return html`<li>${token.token}</li>`;
});
}))}
</ul>
</div>
<div class="pf-c-card__footer">
<button
class="pf-c-button pf-m-danger"
@click=${() => {
return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsStaticList({}).then((devices) => {
if (devices.results.length < 1) {
return;
}
// TODO: Handle multiple devices, currently we assume only one TOTP Device
return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsStaticDelete({
id: devices.results[0].pk || 0
});
});
}}>
${gettext("Disable Static Tokens")}
</button>
</div>`;
}
renderDisabled(): TemplateResult {
return html`
<div class="pf-c-card__body">
<p>
${gettext("Status: Disabled")}
<i class="pf-icon pf-icon-error-circle-o"></i>
</p>
</div>
<div class="pf-c-card__footer">
${until(new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorStaticRead({ stageUuid: this.objectId}).then((stage) => {
if (stage.configureFlow) {
return html`<a href="${FlowURLManager.configure(stage.pk || "", "?next=/%23%2Fuser")}"
class="pf-c-button pf-m-primary">${gettext("Enable Static Tokens")}
</a>`;
}
return html``;
}))}
</div>`;
}
render(): TemplateResult {
return html`<div class="pf-c-card">
<div class="pf-c-card__title">
${gettext("Static Tokens")}
</div>
${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsTotpList({}).then((devices) => {
return devices.results.length > 0 ? this.renderEnabled() : this.renderDisabled();
}))}
</div>`;
}
}

111
web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthn.ts
View File

@ -1,111 +0,0 @@
import { CSSResult, customElement, html, TemplateResult } from "lit-element";
import { gettext } from "django";
import { AuthenticatorsApi, StagesApi, WebAuthnDevice } from "authentik-api";
import { until } from "lit-html/directives/until";
import { FlowURLManager } from "../../../api/legacy";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { BaseUserSettings } from "./BaseUserSettings";
import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";
import "../../../elements/buttons/ModalButton";
import "../../../elements/buttons/SpinnerButton";
import "../../../elements/forms/DeleteForm";
import "../../../elements/forms/Form";
import "../../../elements/forms/ModalForm";
import "../../../elements/forms/HorizontalFormElement";
import { ifDefined } from "lit-html/directives/if-defined";
@customElement("ak-user-settings-authenticator-webauthn")
export class UserSettingsAuthenticatorWebAuthn extends BaseUserSettings {
static get styles(): CSSResult[] {
return super.styles.concat(PFDataList);
}
renderDelete(device: WebAuthnDevice): TemplateResult {
return html`<ak-forms-delete
.obj=${device}
objectLabel=${gettext("Authenticator")}
.delete=${() => {
return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnDelete({
id: device.pk || 0
});
}}>
<button slot="trigger" class="pf-c-button pf-m-danger">
${gettext("Delete")}
</button>
</ak-forms-delete>`;
}
renderUpdate(device: WebAuthnDevice): TemplateResult {
return html`<ak-forms-modal>
<span slot="submit">
${gettext("Update")}
</span>
<span slot="header">
${gettext("Update")}
</span>
<ak-form
slot="form"
successMessage=${gettext("Successfully updated device.")}
.send=${(data: unknown) => {
return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnUpdate({
id: device.pk || 0,
data: data as WebAuthnDevice
});
}}>
<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal
label=${gettext("Device name")}
?required=${true}
name="name">
<input type="text" value="${ifDefined(device.name)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
</form>
</ak-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${gettext("Update")}
</button>
</ak-forms-modal>`;
}
render(): TemplateResult {
return html`<div class="pf-c-card">
<div class="pf-c-card__title">
${gettext("WebAuthn Devices")}
</div>
<div class="pf-c-card__body">
<ul class="pf-c-data-list" role="list">
${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnList({}).then((devices) => {
return devices.results.map((device) => {
return html`<li class="pf-c-data-list__item">
<div class="pf-c-data-list__item-row">
<div class="pf-c-data-list__item-content">
<div class="pf-c-data-list__cell">${device.name || "-"}</div>
<div class="pf-c-data-list__cell">
${gettext(`Created ${device.createdOn?.toLocaleString()}`)}
</div>
<div class="pf-c-data-list__cell">
${this.renderUpdate(device)}
${this.renderDelete(device)}
</div>
</div>
</div>
</li>`;
});
}))}
</ul>
</div>
<div class="pf-c-card__footer">
${until(new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorWebauthnRead({ stageUuid: this.objectId}).then((stage) => {
if (stage.configureFlow) {
return html`<a href="${FlowURLManager.configure(stage.pk || "", "?next=/%23%2Fuser")}"
class="pf-c-button pf-m-primary">${gettext("Configure WebAuthn")}
</a>`;
}
return html``;
}))}
</div>
</div>`;
}
}

25
web/src/pages/users/settings/UserSettingsPassword.ts
View File

@ -1,25 +0,0 @@
import { customElement, html, TemplateResult } from "lit-element";
import { gettext } from "django";
import { FlowURLManager } from "../../../api/legacy";
import { BaseUserSettings } from "./BaseUserSettings";
@customElement("ak-user-settings-password")
export class UserSettingsPassword extends BaseUserSettings {
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.objectId, "?next=/%23%2Fuser")}"
class="pf-c-button pf-m-primary">
${gettext("Change password")}
</a>
</div>
</div>`;
}
}