111 lines
4.6 KiB
TypeScript
111 lines
4.6 KiB
TypeScript
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
|
|
import { t } from "@lingui/macro";
|
|
import { AuthenticatorsApi, 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 {
|
|
|
|
@property({type: Boolean})
|
|
configureFlow = false;
|
|
|
|
static get styles(): CSSResult[] {
|
|
return super.styles.concat(PFDataList);
|
|
}
|
|
|
|
renderDelete(device: WebAuthnDevice): TemplateResult {
|
|
return html`<ak-forms-delete
|
|
.obj=${device}
|
|
objectLabel=${t`Authenticator`}
|
|
.delete=${() => {
|
|
return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnDelete({
|
|
id: device.pk || 0
|
|
});
|
|
}}>
|
|
<button slot="trigger" class="pf-c-button pf-m-danger">
|
|
${t`Delete`}
|
|
</button>
|
|
</ak-forms-delete>`;
|
|
}
|
|
|
|
renderUpdate(device: WebAuthnDevice): TemplateResult {
|
|
return html`<ak-forms-modal>
|
|
<span slot="submit">
|
|
${t`Update`}
|
|
</span>
|
|
<span slot="header">
|
|
${t`Update`}
|
|
</span>
|
|
<ak-form
|
|
slot="form"
|
|
successMessage=${t`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=${t`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">
|
|
${t`Update`}
|
|
</button>
|
|
</ak-forms-modal>`;
|
|
}
|
|
|
|
render(): TemplateResult {
|
|
return html`<div class="pf-c-card">
|
|
<div class="pf-c-card__title">
|
|
${t`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">
|
|
${t`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">
|
|
${this.configureFlow ?
|
|
html`<a href="${FlowURLManager.configure(this.objectId || "", "?next=/%23%2Fuser")}"
|
|
class="pf-c-button pf-m-primary">${t`Configure WebAuthn`}
|
|
</a>`: html``}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
}
|