web: move ak-form-element to separate file
This commit is contained in:
@ -3,6 +3,7 @@ import { css, CSSResult, customElement, html, property, TemplateResult } from "l
|
||||
import { WithUserInfoChallenge } from "../../../api/Flows";
|
||||
import { COMMON_STYLES } from "../../../common/styles";
|
||||
import { BaseStage } from "../base";
|
||||
import "../form";
|
||||
|
||||
export interface AuthenticatorStaticChallenge extends WithUserInfoChallenge {
|
||||
codes: number[];
|
||||
|
@ -4,6 +4,7 @@ import { WithUserInfoChallenge } from "../../../api/Flows";
|
||||
import { COMMON_STYLES } from "../../../common/styles";
|
||||
import { BaseStage } from "../base";
|
||||
import "webcomponent-qr-code";
|
||||
import "../form";
|
||||
|
||||
export interface AuthenticatorTOTPChallenge extends WithUserInfoChallenge {
|
||||
config_url: string;
|
||||
|
35
web/src/elements/stages/form.ts
Normal file
35
web/src/elements/stages/form.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { customElement, LitElement, CSSResult, property } from "lit-element";
|
||||
import { TemplateResult, html } from "lit-html";
|
||||
import { Error } from "../../api/Flows";
|
||||
import { COMMON_STYLES } from "../../common/styles";
|
||||
|
||||
@customElement("ak-form-element")
|
||||
export class FormElement extends LitElement {
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return COMMON_STYLES;
|
||||
}
|
||||
|
||||
@property()
|
||||
label?: string;
|
||||
|
||||
@property({ type: Boolean })
|
||||
required = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
errors?: Error[];
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">${this.label}</span>
|
||||
${this.required ? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>` : html``}
|
||||
</label>
|
||||
<slot></slot>
|
||||
${(this.errors || []).map((error) => {
|
||||
return html`<p class="pf-c-form__helper-text pf-m-error">${error.string}</p>`;
|
||||
})}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
}
|
@ -1,8 +1,9 @@
|
||||
import { gettext } from "django";
|
||||
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import { Challenge, Error } from "../../../api/Flows";
|
||||
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
|
||||
import { Challenge } from "../../../api/Flows";
|
||||
import { COMMON_STYLES } from "../../../common/styles";
|
||||
import { BaseStage } from "../base";
|
||||
import "../form";
|
||||
|
||||
export interface IdentificationChallenge extends Challenge {
|
||||
|
||||
@ -23,37 +24,6 @@ export interface UILoginButton {
|
||||
icon_url?: string;
|
||||
}
|
||||
|
||||
@customElement("ak-form-element")
|
||||
export class FormElement extends LitElement {
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return COMMON_STYLES;
|
||||
}
|
||||
|
||||
@property()
|
||||
label?: string;
|
||||
|
||||
@property({type: Boolean})
|
||||
required = false;
|
||||
|
||||
@property({attribute: false})
|
||||
errors?: Error[];
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
<span class="pf-c-form__label-text">${this.label}</span>
|
||||
${this.required ? html`<span class="pf-c-form__label-required" aria-hidden="true">*</span>` : html``}
|
||||
</label>
|
||||
<slot></slot>
|
||||
${(this.errors || []).map((error) => {
|
||||
return html`<p class="pf-c-form__helper-text pf-m-error">${error.string}</p>`;
|
||||
})}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@customElement("ak-stage-identification")
|
||||
export class IdentificationStage extends BaseStage {
|
||||
|
||||
@ -77,7 +47,7 @@ export class IdentificationStage extends BaseStage {
|
||||
}
|
||||
|
||||
renderFooter(): TemplateResult {
|
||||
if (!(this.challenge?.enroll_url && this.challenge.recovery_url)) {
|
||||
if (!this.challenge?.enroll_url && !this.challenge?.recovery_url) {
|
||||
return html``;
|
||||
}
|
||||
return html`<div class="pf-c-login__main-footer-band">
|
||||
|
@ -3,6 +3,7 @@ import { CSSResult, customElement, html, property, TemplateResult } from "lit-el
|
||||
import { WithUserInfoChallenge } from "../../../api/Flows";
|
||||
import { COMMON_STYLES } from "../../../common/styles";
|
||||
import { BaseStage } from "../base";
|
||||
import "../form";
|
||||
|
||||
export interface PasswordChallenge extends WithUserInfoChallenge {
|
||||
recovery_url?: string;
|
||||
|
@ -3,6 +3,7 @@ import { CSSResult, customElement, html, property, TemplateResult } from "lit-el
|
||||
import { Challenge } from "../../../api/Flows";
|
||||
import { COMMON_STYLES } from "../../../common/styles";
|
||||
import { BaseStage } from "../base";
|
||||
import "../form";
|
||||
|
||||
export interface Prompt {
|
||||
field_key: string;
|
||||
|
Reference in New Issue
Block a user