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

sources/oauth: migrate to webcomponents

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-24 20:19:10 +01:00
parent a085632b8e
commit 533a719914
24 changed files with 286 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/api/legacy.ts
View File

@ -94,6 +94,9 @@ export class AppURLManager {
static sourceSAML(slug: string, rest: string): string {
return `/source/saml/${slug}/${rest}`;
}
static sourceOAuth(slug: string, action: string): string {
return `/source/oauth/${action}/${slug}/`;
}
static providerSAML(rest: string): string {
return `/application/saml/${rest}`;
}

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

@ -24,6 +24,7 @@ import "./settings/UserSettingsAuthenticatorTOTP";
import "./settings/UserSettingsAuthenticatorStatic";
import "./settings/UserSettingsAuthenticatorWebAuthnDevices";
import "./settings/UserSettingsPassword";
import "./settings/SourceSettingsOAuth";
@customElement("ak-user-settings")
export class UserSettingsPage extends LitElement {
@ -35,16 +36,16 @@ export class UserSettingsPage extends LitElement {
renderStageSettings(stage: UserSetting): TemplateResult {
switch (stage.component) {
case "ak-user-settings-authenticator-webauthn":
return html`<ak-user-settings-authenticator-webauthn stageId=${stage.objectUid}>
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 stageId=${stage.objectUid}>
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 stageId=${stage.objectUid}>
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 stageId=${stage.objectUid}>
return html`<ak-user-settings-authenticator-static objectId=${stage.objectUid}>
</ak-user-settings-authenticator-static>`;
default:
return html`<div class="pf-u-display-flex pf-u-justify-content-center">
@ -57,6 +58,22 @@ export class UserSettingsPage extends LitElement {
}
}
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`<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">
<ak-site-shell url="${ifDefined(source.component)}">
<div slot="body"></div>
</ak-site-shell>
</div>
</div>`;
}
}
render(): TemplateResult {
return html`<div class="pf-c-page">
<main role="main" class="pf-c-page__main" tabindex="-1">
@ -89,18 +106,11 @@ export class UserSettingsPage extends LitElement {
</section>`;
});
}))}
${until(new SourcesApi(DEFAULT_CONFIG).sourcesAllUserSettings({}).then((sources) => {
return sources.map((source) => {
// TODO: Check for non-shell sources
return html`<section slot="page-${source.objectUid}" data-tab-title="${ifDefined(source.title)}" class="pf-c-page__main-section pf-m-no-padding-mobile">
<div class="pf-u-display-flex pf-u-justify-content-center">
<div class="pf-u-w-75">
<ak-site-shell url="${ifDefined(source.component)}">
<div slot="body"></div>
</ak-site-shell>
</div>
</div>
</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>

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

@ -0,0 +1,50 @@
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({
source: 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>`;
}))}`;
}
}