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

web/admin: migrate stage forms to ModelForm

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-05-11 12:33:55 +02:00
parent ce1c400022
commit 59f339beda
19 changed files with 224 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/flows/BoundStagesList.ts
View File

@ -58,7 +58,7 @@ export class BoundStagesList extends Table<FlowStageBinding> {
<ak-proxy-form <ak-proxy-form
slot="form" slot="form"
.args=${{ .args=${{
"stageUUID": item.stage "instancePk": item.stage
}} }}
type=${ifDefined(item.stageObj?.component)}> type=${ifDefined(item.stageObj?.component)}>
</ak-proxy-form> </ak-proxy-form>

2
web/src/pages/stages/StageListPage.ts
View File

@ -90,7 +90,7 @@ export class StageListPage extends TablePage<Stage> {
<ak-proxy-form <ak-proxy-form
slot="form" slot="form"
.args=${{ .args=${{
"stageUUID": item.pk "instancePk": item.pk
}} }}
type=${ifDefined(item.component)}> type=${ifDefined(item.component)}>
</ak-proxy-form> </ak-proxy-form>

33
web/src/pages/stages/authenticator_static/AuthenticatorStaticStageForm.ts
View File

@ -1,31 +1,26 @@
import { FlowDesignationEnum, FlowsApi, AuthenticatorStaticStage, StagesApi } from "authentik-api"; import { FlowDesignationEnum, FlowsApi, AuthenticatorStaticStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-authenticator-static-form") @customElement("ak-stage-authenticator-static-form")
export class AuthenticatorStaticStageForm extends Form<AuthenticatorStaticStage> { export class AuthenticatorStaticStageForm extends ModelForm<AuthenticatorStaticStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<AuthenticatorStaticStage> {
new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorStaticRead({ return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorStaticRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: AuthenticatorStaticStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -33,9 +28,9 @@ export class AuthenticatorStaticStageForm extends Form<AuthenticatorStaticStage>
} }
send = (data: AuthenticatorStaticStage): Promise<AuthenticatorStaticStage> => { send = (data: AuthenticatorStaticStage): Promise<AuthenticatorStaticStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorStaticUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorStaticUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -54,7 +49,7 @@ export class AuthenticatorStaticStageForm extends Form<AuthenticatorStaticStage>
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -65,20 +60,20 @@ export class AuthenticatorStaticStageForm extends Form<AuthenticatorStaticStage>
label=${t`Token count`} label=${t`Token count`}
?required=${true} ?required=${true}
name="tokenCount"> name="tokenCount">
<input type="text" value="${first(this.stage?.tokenCount, 6)}" class="pf-c-form-control" required> <input type="text" value="${first(this.instance?.tokenCount, 6)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Configuration flow`} label=${t`Configuration flow`}
name="configureFlow"> name="configureFlow">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.stage?.configureFlow === undefined}>---------</option> <option value="" ?selected=${this.instance?.configureFlow === undefined}>---------</option>
${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({ ${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
ordering: "pk", ordering: "pk",
designation: FlowDesignationEnum.StageConfiguration, designation: FlowDesignationEnum.StageConfiguration,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.stage?.configureFlow === flow.pk; let selected = this.instance?.configureFlow === flow.pk;
if (!this.stage?.pk && !this.stage?.configureFlow && flow.slug === "default-otp-time-configure") { if (!this.instance?.pk && !this.instance?.configureFlow && flow.slug === "default-otp-time-configure") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;

35
web/src/pages/stages/authenticator_totp/AuthenticatorTOTPStageForm.ts
View File

@ -1,30 +1,25 @@
import { FlowDesignationEnum, FlowsApi, AuthenticatorTOTPStage, StagesApi } from "authentik-api"; import { FlowDesignationEnum, FlowsApi, AuthenticatorTOTPStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-authenticator-totp-form") @customElement("ak-stage-authenticator-totp-form")
export class AuthenticatorTOTPStageForm extends Form<AuthenticatorTOTPStage> { export class AuthenticatorTOTPStageForm extends ModelForm<AuthenticatorTOTPStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<AuthenticatorTOTPStage> {
new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorTotpRead({ return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorTotpRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: AuthenticatorTOTPStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -32,9 +27,9 @@ export class AuthenticatorTOTPStageForm extends Form<AuthenticatorTOTPStage> {
} }
send = (data: AuthenticatorTOTPStage): Promise<AuthenticatorTOTPStage> => { send = (data: AuthenticatorTOTPStage): Promise<AuthenticatorTOTPStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorTotpUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorTotpUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -53,7 +48,7 @@ export class AuthenticatorTOTPStageForm extends Form<AuthenticatorTOTPStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -65,10 +60,10 @@ export class AuthenticatorTOTPStageForm extends Form<AuthenticatorTOTPStage> {
?required=${true} ?required=${true}
name="digits"> name="digits">
<select name="users" class="pf-c-form-control"> <select name="users" class="pf-c-form-control">
<option value="6" ?selected=${this.stage?.digits === 6}> <option value="6" ?selected=${this.instance?.digits === 6}>
${t`6 digits, widely compatible`} ${t`6 digits, widely compatible`}
</option> </option>
<option value="8" ?selected=${this.stage?.digits === 8}> <option value="8" ?selected=${this.instance?.digits === 8}>
${t`8 digits, not compatible with apps like Google Authenticator`} ${t`8 digits, not compatible with apps like Google Authenticator`}
</option> </option>
</select> </select>
@ -77,14 +72,14 @@ export class AuthenticatorTOTPStageForm extends Form<AuthenticatorTOTPStage> {
label=${t`Configuration flow`} label=${t`Configuration flow`}
name="configureFlow"> name="configureFlow">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.stage?.configureFlow === undefined}>---------</option> <option value="" ?selected=${this.instance?.configureFlow === undefined}>---------</option>
${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({ ${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
ordering: "pk", ordering: "pk",
designation: FlowDesignationEnum.StageConfiguration, designation: FlowDesignationEnum.StageConfiguration,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.stage?.configureFlow === flow.pk; let selected = this.instance?.configureFlow === flow.pk;
if (!this.stage?.pk && !this.stage?.configureFlow && flow.slug === "default-otp-time-configure") { if (!this.instance?.pk && !this.instance?.configureFlow && flow.slug === "default-otp-time-configure") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;

35
web/src/pages/stages/authenticator_validate/AuthenticatorValidateStageForm.ts
View File

@ -3,32 +3,29 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-authenticator-validate-form") @customElement("ak-stage-authenticator-validate-form")
export class AuthenticatorValidateStageForm extends Form<AuthenticatorValidateStage> { export class AuthenticatorValidateStageForm extends ModelForm<AuthenticatorValidateStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<AuthenticatorValidateStage> {
new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorValidateRead({ return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorValidateRead({
stageUuid: value, stageUuid: pk,
}).then(stage => { }).then(stage => {
this.stage = stage;
this.showConfigureFlow = stage.notConfiguredAction === AuthenticatorValidateStageNotConfiguredActionEnum.Configure; this.showConfigureFlow = stage.notConfiguredAction === AuthenticatorValidateStageNotConfiguredActionEnum.Configure;
return stage;
}); });
} }
@property({attribute: false})
stage?: AuthenticatorValidateStage;
@property({ type: Boolean }) @property({ type: Boolean })
showConfigureFlow = false; showConfigureFlow = false;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -36,9 +33,9 @@ export class AuthenticatorValidateStageForm extends Form<AuthenticatorValidateSt
} }
send = (data: AuthenticatorValidateStage): Promise<AuthenticatorValidateStage> => { send = (data: AuthenticatorValidateStage): Promise<AuthenticatorValidateStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorValidateUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorValidateUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -49,7 +46,7 @@ export class AuthenticatorValidateStageForm extends Form<AuthenticatorValidateSt
}; };
isDeviceClassSelected(field: AuthenticatorValidateStageDeviceClassesEnum): boolean { isDeviceClassSelected(field: AuthenticatorValidateStageDeviceClassesEnum): boolean {
return (this.stage?.deviceClasses || []).filter(isField => { return (this.instance?.deviceClasses || []).filter(isField => {
return field === isField; return field === isField;
}).length > 0; }).length > 0;
} }
@ -63,7 +60,7 @@ export class AuthenticatorValidateStageForm extends Form<AuthenticatorValidateSt
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -82,13 +79,13 @@ export class AuthenticatorValidateStageForm extends Form<AuthenticatorValidateSt
this.showConfigureFlow = false; this.showConfigureFlow = false;
} }
}}> }}>
<option value=${AuthenticatorValidateStageNotConfiguredActionEnum.Configure} ?selected=${this.stage?.notConfiguredAction === AuthenticatorValidateStageNotConfiguredActionEnum.Configure}> <option value=${AuthenticatorValidateStageNotConfiguredActionEnum.Configure} ?selected=${this.instance?.notConfiguredAction === AuthenticatorValidateStageNotConfiguredActionEnum.Configure}>
${t`Force the user to configure an authenticator`} ${t`Force the user to configure an authenticator`}
</option> </option>
<option value=${AuthenticatorValidateStageNotConfiguredActionEnum.Deny} ?selected=${this.stage?.notConfiguredAction === AuthenticatorValidateStageNotConfiguredActionEnum.Deny}> <option value=${AuthenticatorValidateStageNotConfiguredActionEnum.Deny} ?selected=${this.instance?.notConfiguredAction === AuthenticatorValidateStageNotConfiguredActionEnum.Deny}>
${t`Deny the user access`} ${t`Deny the user access`}
</option> </option>
<option value=${AuthenticatorValidateStageNotConfiguredActionEnum.Skip} ?selected=${this.stage?.notConfiguredAction === AuthenticatorValidateStageNotConfiguredActionEnum.Skip}> <option value=${AuthenticatorValidateStageNotConfiguredActionEnum.Skip} ?selected=${this.instance?.notConfiguredAction === AuthenticatorValidateStageNotConfiguredActionEnum.Skip}>
${t`Continue`} ${t`Continue`}
</option> </option>
</select> </select>
@ -117,12 +114,12 @@ export class AuthenticatorValidateStageForm extends Form<AuthenticatorValidateSt
?required=${true} ?required=${true}
name="configureFlow"> name="configureFlow">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.stage?.configurationStage === undefined}>---------</option> <option value="" ?selected=${this.instance?.configurationStage === undefined}>---------</option>
${until(new StagesApi(DEFAULT_CONFIG).stagesAllList({ ${until(new StagesApi(DEFAULT_CONFIG).stagesAllList({
ordering: "pk", ordering: "pk",
}).then(stages => { }).then(stages => {
return stages.results.map(stage => { return stages.results.map(stage => {
const selected = this.stage?.configurationStage === stage.pk; const selected = this.instance?.configurationStage === stage.pk;
return html`<option value=${ifDefined(stage.pk)} ?selected=${selected}>${stage.name} (${stage.verboseName})</option>`; return html`<option value=${ifDefined(stage.pk)} ?selected=${selected}>${stage.name} (${stage.verboseName})</option>`;
}); });
}), html`<option>${t`Loading...`}</option>`)} }), html`<option>${t`Loading...`}</option>`)}

25
web/src/pages/stages/authenticator_webauthn/AuthenticateWebAuthnStageForm.ts
View File

@ -1,28 +1,23 @@
import { AuthenticateWebAuthnStage, StagesApi } from "authentik-api"; import { AuthenticateWebAuthnStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-authenticator-webauthn-form") @customElement("ak-stage-authenticator-webauthn-form")
export class AuthenticateWebAuthnStageForm extends Form<AuthenticateWebAuthnStage> { export class AuthenticateWebAuthnStageForm extends ModelForm<AuthenticateWebAuthnStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<AuthenticateWebAuthnStage> {
new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorWebauthnRead({ return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorWebauthnRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: AuthenticateWebAuthnStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -30,9 +25,9 @@ export class AuthenticateWebAuthnStageForm extends Form<AuthenticateWebAuthnStag
} }
send = (data: AuthenticateWebAuthnStage): Promise<AuthenticateWebAuthnStage> => { send = (data: AuthenticateWebAuthnStage): Promise<AuthenticateWebAuthnStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorWebauthnUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorWebauthnUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -51,7 +46,7 @@ export class AuthenticateWebAuthnStageForm extends Form<AuthenticateWebAuthnStag
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }

31
web/src/pages/stages/captcha/CaptchaStageForm.ts
View File

@ -1,29 +1,24 @@
import { CaptchaStage, StagesApi } from "authentik-api"; import { CaptchaStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-captcha-form") @customElement("ak-stage-captcha-form")
export class CaptchaStageForm extends Form<CaptchaStage> { export class CaptchaStageForm extends ModelForm<CaptchaStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<CaptchaStage> {
new StagesApi(DEFAULT_CONFIG).stagesCaptchaRead({ return new StagesApi(DEFAULT_CONFIG).stagesCaptchaRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: CaptchaStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -31,9 +26,9 @@ export class CaptchaStageForm extends Form<CaptchaStage> {
} }
send = (data: CaptchaStage): Promise<CaptchaStage> => { send = (data: CaptchaStage): Promise<CaptchaStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesCaptchaPartialUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesCaptchaPartialUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -52,7 +47,7 @@ export class CaptchaStageForm extends Form<CaptchaStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -63,15 +58,15 @@ export class CaptchaStageForm extends Form<CaptchaStage> {
label=${t`Public Key`} label=${t`Public Key`}
?required=${true} ?required=${true}
name="publicKey"> name="publicKey">
<input type="text" value="${ifDefined(this.stage?.publicKey || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.publicKey || "")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Public key, acquired from https://www.google.com/recaptcha/intro/v3.html.`}</p> <p class="pf-c-form__helper-text">${t`Public key, acquired from https://www.google.com/recaptcha/intro/v3.html.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Private Key`} label=${t`Private Key`}
?required=${true} ?required=${true}
?writeOnly=${this.stage !== undefined} ?writeOnly=${this.instance !== undefined}
name="privateKey"> name="privateKey">
<input type="text" value="${ifDefined(this.stage?.privateKey || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.privateKey || "")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Private key, acquired from https://www.google.com/recaptcha/intro/v3.html.`}</p> <p class="pf-c-form__helper-text">${t`Private key, acquired from https://www.google.com/recaptcha/intro/v3.html.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>

31
web/src/pages/stages/consent/ConsentStageForm.ts
View File

@ -3,31 +3,28 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-consent-form") @customElement("ak-stage-consent-form")
export class ConsentStageForm extends Form<ConsentStage> { export class ConsentStageForm extends ModelForm<ConsentStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<ConsentStage> {
new StagesApi(DEFAULT_CONFIG).stagesConsentRead({ return new StagesApi(DEFAULT_CONFIG).stagesConsentRead({
stageUuid: value, stageUuid: pk,
}).then(stage => { }).then(stage => {
this.stage = stage;
this.showExpiresIn = stage.name === ConsentStageModeEnum.Expiring; this.showExpiresIn = stage.name === ConsentStageModeEnum.Expiring;
return stage;
}); });
} }
@property({attribute: false})
stage?: ConsentStage;
@property({type: Boolean}) @property({type: Boolean})
showExpiresIn = false; showExpiresIn = false;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -35,9 +32,9 @@ export class ConsentStageForm extends Form<ConsentStage> {
} }
send = (data: ConsentStage): Promise<ConsentStage> => { send = (data: ConsentStage): Promise<ConsentStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesConsentUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesConsentUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -56,7 +53,7 @@ export class ConsentStageForm extends Form<ConsentStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -75,13 +72,13 @@ export class ConsentStageForm extends Form<ConsentStage> {
this.showExpiresIn = false; this.showExpiresIn = false;
} }
}}> }}>
<option value=${ConsentStageModeEnum.AlwaysRequire} ?selected=${this.stage?.mode === ConsentStageModeEnum.AlwaysRequire}> <option value=${ConsentStageModeEnum.AlwaysRequire} ?selected=${this.instance?.mode === ConsentStageModeEnum.AlwaysRequire}>
${t`Always require consent`} ${t`Always require consent`}
</option> </option>
<option value=${ConsentStageModeEnum.Permanent} ?selected=${this.stage?.mode === ConsentStageModeEnum.Permanent}> <option value=${ConsentStageModeEnum.Permanent} ?selected=${this.instance?.mode === ConsentStageModeEnum.Permanent}>
${t`Consent given last indefinitely`} ${t`Consent given last indefinitely`}
</option> </option>
<option value=${ConsentStageModeEnum.Expiring} ?selected=${this.stage?.mode === ConsentStageModeEnum.Expiring}> <option value=${ConsentStageModeEnum.Expiring} ?selected=${this.instance?.mode === ConsentStageModeEnum.Expiring}>
${t`Consent expires.`} ${t`Consent expires.`}
</option> </option>
</select> </select>
@ -91,7 +88,7 @@ export class ConsentStageForm extends Form<ConsentStage> {
label=${t`Consent expires in`} label=${t`Consent expires in`}
?required=${true} ?required=${true}
name="consentExpireIn"> name="consentExpireIn">
<input type="text" value="${ifDefined(this.stage?.consentExpireIn || "weeks=4")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.consentExpireIn || "weeks=4")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Offset after which consent expires. (Format: hours=1;minutes=2;seconds=3).`}</p> <p class="pf-c-form__helper-text">${t`Offset after which consent expires. (Format: hours=1;minutes=2;seconds=3).`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>

25
web/src/pages/stages/deny/DenyStageForm.ts
View File

@ -1,28 +1,23 @@
import { DenyStage, StagesApi } from "authentik-api"; import { DenyStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-deny-form") @customElement("ak-stage-deny-form")
export class DenyStageForm extends Form<DenyStage> { export class DenyStageForm extends ModelForm<DenyStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<DenyStage> {
new StagesApi(DEFAULT_CONFIG).stagesDenyRead({ return new StagesApi(DEFAULT_CONFIG).stagesDenyRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: DenyStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -30,9 +25,9 @@ export class DenyStageForm extends Form<DenyStage> {
} }
send = (data: DenyStage): Promise<DenyStage> => { send = (data: DenyStage): Promise<DenyStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesDenyUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesDenyUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -51,7 +46,7 @@ export class DenyStageForm extends Form<DenyStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }

25
web/src/pages/stages/dummy/DummyStageForm.ts
View File

@ -1,28 +1,23 @@
import { DummyStage, StagesApi } from "authentik-api"; import { DummyStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-dummy-form") @customElement("ak-stage-dummy-form")
export class DummyStageForm extends Form<DummyStage> { export class DummyStageForm extends ModelForm<DummyStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<DummyStage> {
new StagesApi(DEFAULT_CONFIG).stagesDummyRead({ return new StagesApi(DEFAULT_CONFIG).stagesDummyRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: DummyStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -30,9 +25,9 @@ export class DummyStageForm extends Form<DummyStage> {
} }
send = (data: DummyStage): Promise<DummyStage> => { send = (data: DummyStage): Promise<DummyStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesDummyUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesDummyUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -51,7 +46,7 @@ export class DummyStageForm extends Form<DummyStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }

50
web/src/pages/stages/email/EmailStageForm.ts
View File

@ -3,32 +3,30 @@ import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-email-form") @customElement("ak-stage-email-form")
export class EmailStageForm extends Form<EmailStage> { export class EmailStageForm extends ModelForm<EmailStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<EmailStage> {
new StagesApi(DEFAULT_CONFIG).stagesEmailRead({ return new StagesApi(DEFAULT_CONFIG).stagesEmailRead({
stageUuid: value, stageUuid: pk,
}).then(stage => { }).then(stage => {
this.stage = stage; this.showConnectionSettings = !stage.useGlobalSettings;
return stage;
}); });
} }
@property({attribute: false})
stage?: EmailStage;
@property({type: Boolean}) @property({type: Boolean})
showConnectionSettings = false; showConnectionSettings = false;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -36,9 +34,9 @@ export class EmailStageForm extends Form<EmailStage> {
} }
send = (data: EmailStage): Promise<EmailStage> => { send = (data: EmailStage): Promise<EmailStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesEmailPartialUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesEmailPartialUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -61,28 +59,28 @@ export class EmailStageForm extends Form<EmailStage> {
label=${t`SMTP Host`} label=${t`SMTP Host`}
?required=${true} ?required=${true}
name="host"> name="host">
<input type="text" value="${ifDefined(this.stage?.host || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.host || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`SMTP Port`} label=${t`SMTP Port`}
?required=${true} ?required=${true}
name="port"> name="port">
<input type="number" value="${first(this.stage?.port, 25)}" class="pf-c-form-control" required> <input type="number" value="${first(this.instance?.port, 25)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`SMTP Username`} label=${t`SMTP Username`}
name="username"> name="username">
<input type="text" value="${ifDefined(this.stage?.username || "")}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.username || "")}" class="pf-c-form-control">
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`SMTP Password`} label=${t`SMTP Password`}
?writeOnly=${this.stage !== undefined} ?writeOnly=${this.instance !== undefined}
name="password"> name="password">
<input type="text" value="${ifDefined(this.stage?.password || "")}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.instance?.password || "")}" class="pf-c-form-control">
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="useTls"> <ak-form-element-horizontal name="useTls">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.stage?.useTls, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.useTls, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Use TLS`} ${t`Use TLS`}
</label> </label>
@ -90,7 +88,7 @@ export class EmailStageForm extends Form<EmailStage> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="useSsl"> <ak-form-element-horizontal name="useSsl">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.stage?.useSsl, false)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.useSsl, false)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Use SSL`} ${t`Use SSL`}
</label> </label>
@ -100,13 +98,13 @@ export class EmailStageForm extends Form<EmailStage> {
label=${t`Timeout`} label=${t`Timeout`}
?required=${true} ?required=${true}
name="timeout"> name="timeout">
<input type="number" value="${first(this.stage?.timeout, 30)}" class="pf-c-form-control" required> <input type="number" value="${first(this.instance?.timeout, 30)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`From address`} label=${t`From address`}
?required=${true} ?required=${true}
name="fromAddress"> name="fromAddress">
<input type="text" value="${ifDefined(this.stage?.fromAddress || "system@authentik.local")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.fromAddress || "system@authentik.local")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group>`; </ak-form-group>`;
@ -121,7 +119,7 @@ export class EmailStageForm extends Form<EmailStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -130,7 +128,7 @@ export class EmailStageForm extends Form<EmailStage> {
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="useGlobalSettings"> <ak-form-element-horizontal name="useGlobalSettings">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.stage?.useGlobalSettings, true)} @change=${(ev: Event) => { <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.useGlobalSettings, true)} @change=${(ev: Event) => {
const target = ev.target as HTMLInputElement; const target = ev.target as HTMLInputElement;
this.showConnectionSettings = !target.checked; this.showConnectionSettings = !target.checked;
}}> }}>
@ -144,14 +142,14 @@ export class EmailStageForm extends Form<EmailStage> {
label=${t`Token expiry`} label=${t`Token expiry`}
?required=${true} ?required=${true}
name="tokenExpiry"> name="tokenExpiry">
<input type="number" value="${first(this.stage?.tokenExpiry, 30)}" class="pf-c-form-control" required> <input type="number" value="${first(this.instance?.tokenExpiry, 30)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Time in minutes the token sent is valid.`}</p> <p class="pf-c-form__helper-text">${t`Time in minutes the token sent is valid.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Subject`} label=${t`Subject`}
?required=${true} ?required=${true}
name="subject"> name="subject">
<input type="text" value="${first(this.stage?.subject, "authentik")}" class="pf-c-form-control" required> <input type="text" value="${first(this.instance?.subject, "authentik")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Template`} label=${t`Template`}
@ -160,7 +158,7 @@ export class EmailStageForm extends Form<EmailStage> {
<select name="users" class="pf-c-form-control"> <select name="users" class="pf-c-form-control">
${until(new StagesApi(DEFAULT_CONFIG).stagesEmailTemplates().then(templates => { ${until(new StagesApi(DEFAULT_CONFIG).stagesEmailTemplates().then(templates => {
return templates.map(template => { return templates.map(template => {
const selected = this.stage?.template === template.name; const selected = this.instance?.template === template.name;
return html`<option value=${ifDefined(template.name)} ?selected=${selected}> return html`<option value=${ifDefined(template.name)} ?selected=${selected}>
${template.description} ${template.description}
</option>`; </option>`;

39
web/src/pages/stages/identification/IdentificationStageForm.ts
View File

@ -1,31 +1,26 @@
import { FlowDesignationEnum, FlowsApi, IdentificationStage, IdentificationStageUserFieldsEnum, StagesApi } from "authentik-api"; import { FlowDesignationEnum, FlowsApi, IdentificationStage, IdentificationStageUserFieldsEnum, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-identification-form") @customElement("ak-stage-identification-form")
export class IdentificationStageForm extends Form<IdentificationStage> { export class IdentificationStageForm extends ModelForm<IdentificationStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<IdentificationStage> {
new StagesApi(DEFAULT_CONFIG).stagesIdentificationRead({ return new StagesApi(DEFAULT_CONFIG).stagesIdentificationRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: IdentificationStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -33,9 +28,9 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
} }
send = (data: IdentificationStage): Promise<IdentificationStage> => { send = (data: IdentificationStage): Promise<IdentificationStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesIdentificationUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesIdentificationUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -46,7 +41,7 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
}; };
isUserFieldSelected(field: IdentificationStageUserFieldsEnum): boolean { isUserFieldSelected(field: IdentificationStageUserFieldsEnum): boolean {
return (this.stage?.userFields || []).filter(isField => { return (this.instance?.userFields || []).filter(isField => {
return field === isField; return field === isField;
}).length > 0; }).length > 0;
} }
@ -60,7 +55,7 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -83,7 +78,7 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="caseInsensitiveMatching"> <ak-form-element-horizontal name="caseInsensitiveMatching">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.stage?.caseInsensitiveMatching, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.caseInsensitiveMatching, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Case insensitive matching`} ${t`Case insensitive matching`}
</label> </label>
@ -92,7 +87,7 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal name="showMatchedUser"> <ak-form-element-horizontal name="showMatchedUser">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.stage?.showMatchedUser, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.showMatchedUser, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Show matched user`} ${t`Show matched user`}
</label> </label>
@ -103,13 +98,13 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
label=${t`Enrollment flow`} label=${t`Enrollment flow`}
name="enrollmentFlow"> name="enrollmentFlow">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.stage?.enrollmentFlow === undefined}>---------</option> <option value="" ?selected=${this.instance?.enrollmentFlow === undefined}>---------</option>
${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({ ${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
ordering: "pk", ordering: "pk",
designation: FlowDesignationEnum.Enrollment, designation: FlowDesignationEnum.Enrollment,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
const selected = this.stage?.enrollmentFlow === flow.pk; const selected = this.instance?.enrollmentFlow === flow.pk;
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
}); });
}), html`<option>${t`Loading...`}</option>`)} }), html`<option>${t`Loading...`}</option>`)}
@ -120,13 +115,13 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
label=${t`Recovery flow`} label=${t`Recovery flow`}
name="recoveryFlow"> name="recoveryFlow">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.stage?.recoveryFlow === undefined}>---------</option> <option value="" ?selected=${this.instance?.recoveryFlow === undefined}>---------</option>
${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({ ${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
ordering: "pk", ordering: "pk",
designation: FlowDesignationEnum.Recovery, designation: FlowDesignationEnum.Recovery,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
const selected = this.stage?.recoveryFlow === flow.pk; const selected = this.instance?.recoveryFlow === flow.pk;
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
}); });
}), html`<option>${t`Loading...`}</option>`)} }), html`<option>${t`Loading...`}</option>`)}

27
web/src/pages/stages/invitation/InvitationStageForm.ts
View File

@ -1,30 +1,25 @@
import { InvitationStage, StagesApi } from "authentik-api"; import { InvitationStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-invitation-form") @customElement("ak-stage-invitation-form")
export class InvitationStageForm extends Form<InvitationStage> { export class InvitationStageForm extends ModelForm<InvitationStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<InvitationStage> {
new StagesApi(DEFAULT_CONFIG).stagesInvitationStagesRead({ return new StagesApi(DEFAULT_CONFIG).stagesInvitationStagesRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: InvitationStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -32,9 +27,9 @@ export class InvitationStageForm extends Form<InvitationStage> {
} }
send = (data: InvitationStage): Promise<InvitationStage> => { send = (data: InvitationStage): Promise<InvitationStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesInvitationStagesUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesInvitationStagesUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -53,7 +48,7 @@ export class InvitationStageForm extends Form<InvitationStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -62,7 +57,7 @@ export class InvitationStageForm extends Form<InvitationStage> {
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="continueFlowWithoutInvitation"> <ak-form-element-horizontal name="continueFlowWithoutInvitation">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.stage?.continueFlowWithoutInvitation, true)}> <input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.continueFlowWithoutInvitation, true)}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${t`Continue flow without invitation`} ${t`Continue flow without invitation`}
</label> </label>

35
web/src/pages/stages/password/PasswordStageForm.ts
View File

@ -1,31 +1,26 @@
import { FlowDesignationEnum, FlowsApi, PasswordStage, PasswordStageBackendsEnum, StagesApi } from "authentik-api"; import { FlowDesignationEnum, FlowsApi, PasswordStage, PasswordStageBackendsEnum, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-password-form") @customElement("ak-stage-password-form")
export class PasswordStageForm extends Form<PasswordStage> { export class PasswordStageForm extends ModelForm<PasswordStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<PasswordStage> {
new StagesApi(DEFAULT_CONFIG).stagesPasswordRead({ return new StagesApi(DEFAULT_CONFIG).stagesPasswordRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: PasswordStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -33,9 +28,9 @@ export class PasswordStageForm extends Form<PasswordStage> {
} }
send = (data: PasswordStage): Promise<PasswordStage> => { send = (data: PasswordStage): Promise<PasswordStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesPasswordUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesPasswordUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -46,7 +41,7 @@ export class PasswordStageForm extends Form<PasswordStage> {
}; };
isBackendSelected(field: PasswordStageBackendsEnum): boolean { isBackendSelected(field: PasswordStageBackendsEnum): boolean {
return (this.stage?.backends || []).filter(isField => { return (this.instance?.backends || []).filter(isField => {
return field === isField; return field === isField;
}).length > 0; }).length > 0;
} }
@ -60,7 +55,7 @@ export class PasswordStageForm extends Form<PasswordStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -87,14 +82,14 @@ export class PasswordStageForm extends Form<PasswordStage> {
?required=${true} ?required=${true}
name="configureFlow"> name="configureFlow">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.stage?.configureFlow === undefined}>---------</option> <option value="" ?selected=${this.instance?.configureFlow === undefined}>---------</option>
${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({ ${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
ordering: "pk", ordering: "pk",
designation: FlowDesignationEnum.StageConfiguration, designation: FlowDesignationEnum.StageConfiguration,
}).then(flows => { }).then(flows => {
return flows.results.map(flow => { return flows.results.map(flow => {
let selected = this.stage?.configureFlow === flow.pk; let selected = this.instance?.configureFlow === flow.pk;
if (!this.stage?.pk && !this.stage?.configureFlow && flow.slug === "default-password-change") { if (!this.instance?.pk && !this.instance?.configureFlow && flow.slug === "default-password-change") {
selected = true; selected = true;
} }
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`; return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
@ -107,7 +102,7 @@ export class PasswordStageForm extends Form<PasswordStage> {
label=${t`Failed attempts before cancel`} label=${t`Failed attempts before cancel`}
?required=${true} ?required=${true}
name="failedAttemptsBeforeCancel"> name="failedAttemptsBeforeCancel">
<input type="number" value="${first(this.stage?.failedAttemptsBeforeCancel, 5)}" class="pf-c-form-control" required> <input type="number" value="${first(this.instance?.failedAttemptsBeforeCancel, 5)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`How many attempts a user has before the flow is canceled. To lock the user out, use a reputation policy and a user_write stage.`}</p> <p class="pf-c-form__helper-text">${t`How many attempts a user has before the flow is canceled. To lock the user out, use a reputation policy and a user_write stage.`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>

29
web/src/pages/stages/prompt/PromptStageForm.ts
View File

@ -1,32 +1,27 @@
import { PoliciesApi, PromptStage, StagesApi } from "authentik-api"; import { PoliciesApi, PromptStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import "../../../elements/forms/ModalForm"; import "../../../elements/forms/ModalForm";
import "./PromptForm"; import "./PromptForm";
import { until } from "lit-html/directives/until"; import { until } from "lit-html/directives/until";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-prompt-form") @customElement("ak-stage-prompt-form")
export class PromptStageForm extends Form<PromptStage> { export class PromptStageForm extends ModelForm<PromptStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<PromptStage> {
new StagesApi(DEFAULT_CONFIG).stagesPromptStagesRead({ return new StagesApi(DEFAULT_CONFIG).stagesPromptStagesRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: PromptStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -34,9 +29,9 @@ export class PromptStageForm extends Form<PromptStage> {
} }
send = (data: PromptStage): Promise<PromptStage> => { send = (data: PromptStage): Promise<PromptStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesPromptStagesUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesPromptStagesUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -55,7 +50,7 @@ export class PromptStageForm extends Form<PromptStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -71,7 +66,7 @@ export class PromptStageForm extends Form<PromptStage> {
ordering: "field_name" ordering: "field_name"
}).then(prompts => { }).then(prompts => {
return prompts.results.map(prompt => { return prompts.results.map(prompt => {
const selected = Array.from(this.stage?.fields || []).some(su => { const selected = Array.from(this.instance?.fields || []).some(su => {
return su == prompt.pk; return su == prompt.pk;
}); });
return html`<option value=${ifDefined(prompt.pk)} ?selected=${selected}> return html`<option value=${ifDefined(prompt.pk)} ?selected=${selected}>
@ -103,7 +98,7 @@ export class PromptStageForm extends Form<PromptStage> {
ordering: "name" ordering: "name"
}).then(policies => { }).then(policies => {
return policies.results.map(policy => { return policies.results.map(policy => {
const selected = Array.from(this.stage?.validationPolicies || []).some(su => { const selected = Array.from(this.instance?.validationPolicies || []).some(su => {
return su == policy.pk; return su == policy.pk;
}); });
return html`<option value=${ifDefined(policy.pk)} ?selected=${selected}> return html`<option value=${ifDefined(policy.pk)} ?selected=${selected}>

25
web/src/pages/stages/user_delete/UserDeleteStageForm.ts
View File

@ -1,28 +1,23 @@
import { UserDeleteStage, StagesApi } from "authentik-api"; import { UserDeleteStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-user-delete-form") @customElement("ak-stage-user-delete-form")
export class UserDeleteStageForm extends Form<UserDeleteStage> { export class UserDeleteStageForm extends ModelForm<UserDeleteStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<UserDeleteStage> {
new StagesApi(DEFAULT_CONFIG).stagesUserDeleteRead({ return new StagesApi(DEFAULT_CONFIG).stagesUserDeleteRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: UserDeleteStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -30,9 +25,9 @@ export class UserDeleteStageForm extends Form<UserDeleteStage> {
} }
send = (data: UserDeleteStage): Promise<UserDeleteStage> => { send = (data: UserDeleteStage): Promise<UserDeleteStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesUserDeleteUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesUserDeleteUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -52,7 +47,7 @@ export class UserDeleteStageForm extends Form<UserDeleteStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }

27
web/src/pages/stages/user_login/UserLoginStageForm.ts
View File

@ -1,29 +1,24 @@
import { UserLoginStage, StagesApi } from "authentik-api"; import { UserLoginStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup"; import "../../../elements/forms/FormGroup";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-user-login-form") @customElement("ak-stage-user-login-form")
export class UserLoginStageForm extends Form<UserLoginStage> { export class UserLoginStageForm extends ModelForm<UserLoginStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<UserLoginStage> {
new StagesApi(DEFAULT_CONFIG).stagesUserLoginRead({ return new StagesApi(DEFAULT_CONFIG).stagesUserLoginRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: UserLoginStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -31,9 +26,9 @@ export class UserLoginStageForm extends Form<UserLoginStage> {
} }
send = (data: UserLoginStage): Promise<UserLoginStage> => { send = (data: UserLoginStage): Promise<UserLoginStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesUserLoginUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesUserLoginUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -52,7 +47,7 @@ export class UserLoginStageForm extends Form<UserLoginStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${first(this.stage?.name, "")}" class="pf-c-form-control" required> <input type="text" value="${first(this.instance?.name, "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-group .expanded=${true}> <ak-form-group .expanded=${true}>
<span slot="header"> <span slot="header">
@ -63,7 +58,7 @@ export class UserLoginStageForm extends Form<UserLoginStage> {
label=${t`Session duration`} label=${t`Session duration`}
?required=${true} ?required=${true}
name="sessionDuration"> name="sessionDuration">
<input type="text" value="${first(this.stage?.sessionDuration, "seconds=0")}" class="pf-c-form-control" required> <input type="text" value="${first(this.instance?.sessionDuration, "seconds=0")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Determines how long a session lasts. Default of 0 seconds means that the sessions lasts until the browser is closed.`}</p> <p class="pf-c-form__helper-text">${t`Determines how long a session lasts. Default of 0 seconds means that the sessions lasts until the browser is closed.`}</p>
<p class="pf-c-form__helper-text">${t`(Format: hours=-1;minutes=-2;seconds=-3).`}</p> <p class="pf-c-form__helper-text">${t`(Format: hours=-1;minutes=-2;seconds=-3).`}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>

25
web/src/pages/stages/user_logout/UserLogoutStageForm.ts
View File

@ -1,28 +1,23 @@
import { UserLogoutStage, StagesApi } from "authentik-api"; import { UserLogoutStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-user-logout-form") @customElement("ak-stage-user-logout-form")
export class UserLogoutStageForm extends Form<UserLogoutStage> { export class UserLogoutStageForm extends ModelForm<UserLogoutStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<UserLogoutStage> {
new StagesApi(DEFAULT_CONFIG).stagesUserLogoutRead({ return new StagesApi(DEFAULT_CONFIG).stagesUserLogoutRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: UserLogoutStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -30,9 +25,9 @@ export class UserLogoutStageForm extends Form<UserLogoutStage> {
} }
send = (data: UserLogoutStage): Promise<UserLogoutStage> => { send = (data: UserLogoutStage): Promise<UserLogoutStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesUserLogoutUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesUserLogoutUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -51,7 +46,7 @@ export class UserLogoutStageForm extends Form<UserLogoutStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }

25
web/src/pages/stages/user_write/UserWriteStageForm.ts
View File

@ -1,28 +1,23 @@
import { UserWriteStage, StagesApi } from "authentik-api"; import { UserWriteStage, StagesApi } from "authentik-api";
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { customElement, property } from "lit-element"; import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-stage-user-write-form") @customElement("ak-stage-user-write-form")
export class UserWriteStageForm extends Form<UserWriteStage> { export class UserWriteStageForm extends ModelForm<UserWriteStage, string> {
set stageUUID(value: string) { loadInstance(pk: string): Promise<UserWriteStage> {
new StagesApi(DEFAULT_CONFIG).stagesUserWriteRead({ return new StagesApi(DEFAULT_CONFIG).stagesUserWriteRead({
stageUuid: value, stageUuid: pk,
}).then(stage => {
this.stage = stage;
}); });
} }
@property({attribute: false})
stage?: UserWriteStage;
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.stage) { if (this.instance) {
return t`Successfully updated stage.`; return t`Successfully updated stage.`;
} else { } else {
return t`Successfully created stage.`; return t`Successfully created stage.`;
@ -30,9 +25,9 @@ export class UserWriteStageForm extends Form<UserWriteStage> {
} }
send = (data: UserWriteStage): Promise<UserWriteStage> => { send = (data: UserWriteStage): Promise<UserWriteStage> => {
if (this.stage) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesUserWriteUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesUserWriteUpdate({
stageUuid: this.stage.pk || "", stageUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -52,7 +47,7 @@ export class UserWriteStageForm extends Form<UserWriteStage> {
label=${t`Name`} label=${t`Name`}
?required=${true} ?required=${true}
name="name"> name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required> <input type="text" value="${ifDefined(this.instance?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }