web: move ak-form-element to separate file

This commit is contained in:
Jens Langhammer
2021-02-21 23:08:38 +01:00
parent 0fa97de06e
commit 20e0fe3941
9 changed files with 54 additions and 51 deletions

View File

@ -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[];

View File

@ -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;

View 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>`;
}
}

View File

@ -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">

View File

@ -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;

View File

@ -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;