web/admin: migrate prompts to web
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
@ -24,10 +24,6 @@ export class AdminURLManager {
|
||||
return `/administration/stages/${rest}`;
|
||||
}
|
||||
|
||||
static stagePrompts(rest: string): string {
|
||||
return `/administration/stages_prompts/${rest}`;
|
||||
}
|
||||
|
||||
static stageBindings(rest: string): string {
|
||||
return `/administration/stages/bindings/${rest}`;
|
||||
}
|
||||
|
||||
122
web/src/pages/stages/PromptForm.ts
Normal file
122
web/src/pages/stages/PromptForm.ts
Normal file
@ -0,0 +1,122 @@
|
||||
import { Prompt, PromptTypeEnum, StagesApi } from "authentik-api";
|
||||
import { gettext } from "django";
|
||||
import { customElement, property } from "lit-element";
|
||||
import { html, TemplateResult } from "lit-html";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import { Form } from "../../elements/forms/Form";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import "../../elements/forms/HorizontalFormElement";
|
||||
|
||||
@customElement("ak-stage-prompt-form")
|
||||
export class PromptForm extends Form<Prompt> {
|
||||
|
||||
@property({attribute: false})
|
||||
prompt?: Prompt;
|
||||
|
||||
getSuccessMessage(): string {
|
||||
if (this.prompt) {
|
||||
return gettext("Successfully updated prompt.");
|
||||
} else {
|
||||
return gettext("Successfully created prompt.");
|
||||
}
|
||||
}
|
||||
|
||||
send = (data: Prompt): Promise<Prompt> => {
|
||||
if (this.prompt) {
|
||||
return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsUpdate({
|
||||
promptUuid: this.prompt.pk || "",
|
||||
data: data
|
||||
});
|
||||
} else {
|
||||
return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsCreate({
|
||||
data: data
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
renderTypes(): TemplateResult {
|
||||
return html`
|
||||
<option value=${PromptTypeEnum.Text} ?selected=${this.prompt?.type === PromptTypeEnum.Text}>
|
||||
${gettext("Text: Simple Text input")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.Username} ?selected=${this.prompt?.type === PromptTypeEnum.Username}>
|
||||
${gettext("Username: Same as Text input, but checks for and prevents duplicate usernames.")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.Email} ?selected=${this.prompt?.type === PromptTypeEnum.Email}>
|
||||
${gettext("Email: Text field with Email type.")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.Password} ?selected=${this.prompt?.type === PromptTypeEnum.Password}>
|
||||
${gettext("Password: Masked input, password is validated against sources. Policies still have to be applied to this Stage. If two of these are used in the same stage, they are ensured to be identical.")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.Number} ?selected=${this.prompt?.type === PromptTypeEnum.Number}>
|
||||
${gettext("Number")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.Checkbox} ?selected=${this.prompt?.type === PromptTypeEnum.Checkbox}>
|
||||
${gettext("Checkbox")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.Date} ?selected=${this.prompt?.type === PromptTypeEnum.Date}>
|
||||
${gettext("Date")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.DateTime} ?selected=${this.prompt?.type === PromptTypeEnum.DateTime}>
|
||||
${gettext("Date Time")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.Separator} ?selected=${this.prompt?.type === PromptTypeEnum.Separator}>
|
||||
${gettext("Separator: Static Separator Line")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.Hidden} ?selected=${this.prompt?.type === PromptTypeEnum.Hidden}>
|
||||
${gettext("Hidden: Hidden field, can be used to insert data into form.")}
|
||||
</option>
|
||||
<option value=${PromptTypeEnum.Static} ?selected=${this.prompt?.type === PromptTypeEnum.Static}>
|
||||
${gettext("Static: Static value, displayed as-is.")}
|
||||
</option>
|
||||
`;
|
||||
}
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Field Key")}
|
||||
?required=${true}
|
||||
name="fieldKey">
|
||||
<input type="text" value="${ifDefined(this.prompt?.fieldKey)}" class="pf-c-form-control" required>
|
||||
<p class="pf-c-form__helper-text">${gettext("Name of the form field, also used to store the value.")}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Label")}
|
||||
?required=${true}
|
||||
name="label">
|
||||
<input type="text" value="${ifDefined(this.prompt?.label)}" class="pf-c-form-control" required>
|
||||
<p class="pf-c-form__helper-text">${gettext("Label shown next to/above the prompt.")}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Type")}
|
||||
?required=${true}
|
||||
name="type">
|
||||
<select class="pf-c-form-control">
|
||||
${this.renderTypes()}
|
||||
</select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="required">
|
||||
<div class="pf-c-check">
|
||||
<input type="checkbox" class="pf-c-check__input" ?checked=${this.prompt?.required || false}>
|
||||
<label class="pf-c-check__label">
|
||||
${gettext("Required")}
|
||||
</label>
|
||||
</div>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Placeholder")}
|
||||
name="placeholder">
|
||||
<input type="text" value="${ifDefined(this.prompt?.placeholder)}" class="pf-c-form-control" required>
|
||||
<p class="pf-c-form__helper-text">${gettext("Optionally pre-fill the input value")}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Order")}
|
||||
?required=${true}
|
||||
name="order">
|
||||
<input type="number" value="${ifDefined(this.prompt?.order)}" class="pf-c-form-control" required>
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
}
|
||||
@ -6,11 +6,12 @@ import { TablePage } from "../../elements/table/TablePage";
|
||||
import "../../elements/buttons/ModalButton";
|
||||
import "../../elements/buttons/SpinnerButton";
|
||||
import "../../elements/forms/DeleteForm";
|
||||
import "../../elements/forms/ModalForm";
|
||||
import "./PromptForm";
|
||||
import { TableColumn } from "../../elements/table/Table";
|
||||
import { PAGE_SIZE } from "../../constants";
|
||||
import { Prompt, StagesApi } from "authentik-api";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import { AdminURLManager } from "../../api/legacy";
|
||||
|
||||
@customElement("ak-stage-prompt-list")
|
||||
export class PromptListPage extends TablePage<Prompt> {
|
||||
@ -60,12 +61,19 @@ export class PromptListPage extends TablePage<Prompt> {
|
||||
return html`<li>${stage.name}</li>`;
|
||||
})}`,
|
||||
html`
|
||||
<ak-modal-button href="${AdminURLManager.stagePrompts(`${item.pk}/update/`)}">
|
||||
<ak-spinner-button slot="trigger" class="pf-m-secondary">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit">
|
||||
${gettext("Update")}
|
||||
</span>
|
||||
<span slot="header">
|
||||
${gettext("Update Prompt")}
|
||||
</span>
|
||||
<ak-stage-prompt-form slot="form" .prompt=${item}>
|
||||
</ak-stage-prompt-form>
|
||||
<button slot="trigger" class="pf-c-button pf-m-secondary">
|
||||
${gettext("Edit")}
|
||||
</ak-spinner-button>
|
||||
<div slot="modal"></div>
|
||||
</ak-modal-button>
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
<ak-forms-delete
|
||||
.obj=${item}
|
||||
objectLabel=${gettext("Prompt")}
|
||||
@ -83,12 +91,19 @@ export class PromptListPage extends TablePage<Prompt> {
|
||||
|
||||
renderToolbar(): TemplateResult {
|
||||
return html`
|
||||
<ak-modal-button href=${AdminURLManager.stagePrompts("create/")}>
|
||||
<ak-spinner-button slot="trigger" class="pf-m-primary">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit">
|
||||
${gettext("Create")}
|
||||
</ak-spinner-button>
|
||||
<div slot="modal"></div>
|
||||
</ak-modal-button>
|
||||
</span>
|
||||
<span slot="header">
|
||||
${gettext("Create Prompt")}
|
||||
</span>
|
||||
<ak-stage-prompt-form slot="form">
|
||||
</ak-stage-prompt-form>
|
||||
<button slot="trigger" class="pf-c-button pf-m-primary">
|
||||
${gettext("Create")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
${super.renderToolbar()}
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user