web/admin: migrate remaining forms

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-05-11 12:44:50 +02:00
parent 59f339beda
commit 6f8d129dea
11 changed files with 588 additions and 576 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

View file

@ -102,7 +102,7 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
<span slot="header">
${t`Update User`}
</span>
<ak-user-form slot="form" .user=${item.userObj}>
<ak-user-form slot="form" .instancePk=${item.userObj?.pk}>
</ak-user-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit User`}

View file

@ -1,22 +1,25 @@
import { Invitation, StagesApi } from "authentik-api";
import { t } from "@lingui/macro";
import { customElement, property } from "lit-element";
import { customElement } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/CodeMirror";
import YAML from "yaml";
import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-invitation-form")
export class InvitationForm extends Form<Invitation> {
export class InvitationForm extends ModelForm<Invitation, string> {
@property({attribute: false})
invitation?: Invitation;
loadInstance(pk: string): Promise<Invitation> {
return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsRead({
inviteUuid: pk,
});
}
getSuccessMessage(): string {
if (this.invitation) {
if (this.instance) {
return t`Successfully updated invitation.`;
} else {
return t`Successfully created invitation.`;
@ -24,9 +27,9 @@ export class InvitationForm extends Form<Invitation> {
}
send = (data: Invitation): Promise<Invitation> => {
if (this.invitation) {
if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsUpdate({
inviteUuid: this.invitation.pk || "",
inviteUuid: this.instance.pk || "",
data: data
});
} else {
@ -47,13 +50,13 @@ export class InvitationForm extends Form<Invitation> {
<ak-form-element-horizontal
label=${t`Attributes`}
name="fixedData">
<ak-codemirror mode="yaml" value="${YAML.stringify(first(this.invitation?.fixedData, {}))}">
<ak-codemirror mode="yaml" value="${YAML.stringify(first(this.instance?.fixedData, {}))}">
</ak-codemirror>
<p class="pf-c-form__helper-text">${t`Optional data which is loaded into the flow's 'prompt_data' context variable. YAML or JSON.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="singleUse">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.invitation?.singleUse, true)}>
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.singleUse, true)}>
<label class="pf-c-check__label">
${t`Single use`}
</label>

View file

@ -1,21 +1,24 @@
import { Prompt, PromptTypeEnum, StagesApi } from "authentik-api";
import { t } from "@lingui/macro";
import { customElement, property } from "lit-element";
import { customElement } 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";
import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-prompt-form")
export class PromptForm extends Form<Prompt> {
export class PromptForm extends ModelForm<Prompt, string> {
@property({attribute: false})
prompt?: Prompt;
loadInstance(pk: string): Promise<Prompt> {
return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsRead({
promptUuid: pk
});
}
getSuccessMessage(): string {
if (this.prompt) {
if (this.instance) {
return t`Successfully updated prompt.`;
} else {
return t`Successfully created prompt.`;
@ -23,9 +26,9 @@ export class PromptForm extends Form<Prompt> {
}
send = (data: Prompt): Promise<Prompt> => {
if (this.prompt) {
if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsUpdate({
promptUuid: this.prompt.pk || "",
promptUuid: this.instance.pk || "",
data: data
});
} else {
@ -37,37 +40,37 @@ export class PromptForm extends Form<Prompt> {
renderTypes(): TemplateResult {
return html`
<option value=${PromptTypeEnum.Text} ?selected=${this.prompt?.type === PromptTypeEnum.Text}>
<option value=${PromptTypeEnum.Text} ?selected=${this.instance?.type === PromptTypeEnum.Text}>
${t`Text: Simple Text input`}
</option>
<option value=${PromptTypeEnum.Username} ?selected=${this.prompt?.type === PromptTypeEnum.Username}>
<option value=${PromptTypeEnum.Username} ?selected=${this.instance?.type === PromptTypeEnum.Username}>
${t`Username: Same as Text input, but checks for and prevents duplicate usernames.`}
</option>
<option value=${PromptTypeEnum.Email} ?selected=${this.prompt?.type === PromptTypeEnum.Email}>
<option value=${PromptTypeEnum.Email} ?selected=${this.instance?.type === PromptTypeEnum.Email}>
${t`Email: Text field with Email type.`}
</option>
<option value=${PromptTypeEnum.Password} ?selected=${this.prompt?.type === PromptTypeEnum.Password}>
<option value=${PromptTypeEnum.Password} ?selected=${this.instance?.type === PromptTypeEnum.Password}>
${t`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}>
<option value=${PromptTypeEnum.Number} ?selected=${this.instance?.type === PromptTypeEnum.Number}>
${t`Number`}
</option>
<option value=${PromptTypeEnum.Checkbox} ?selected=${this.prompt?.type === PromptTypeEnum.Checkbox}>
<option value=${PromptTypeEnum.Checkbox} ?selected=${this.instance?.type === PromptTypeEnum.Checkbox}>
${t`Checkbox`}
</option>
<option value=${PromptTypeEnum.Date} ?selected=${this.prompt?.type === PromptTypeEnum.Date}>
<option value=${PromptTypeEnum.Date} ?selected=${this.instance?.type === PromptTypeEnum.Date}>
${t`Date`}
</option>
<option value=${PromptTypeEnum.DateTime} ?selected=${this.prompt?.type === PromptTypeEnum.DateTime}>
<option value=${PromptTypeEnum.DateTime} ?selected=${this.instance?.type === PromptTypeEnum.DateTime}>
${t`Date Time`}
</option>
<option value=${PromptTypeEnum.Separator} ?selected=${this.prompt?.type === PromptTypeEnum.Separator}>
<option value=${PromptTypeEnum.Separator} ?selected=${this.instance?.type === PromptTypeEnum.Separator}>
${t`Separator: Static Separator Line`}
</option>
<option value=${PromptTypeEnum.Hidden} ?selected=${this.prompt?.type === PromptTypeEnum.Hidden}>
<option value=${PromptTypeEnum.Hidden} ?selected=${this.instance?.type === PromptTypeEnum.Hidden}>
${t`Hidden: Hidden field, can be used to insert data into form.`}
</option>
<option value=${PromptTypeEnum.Static} ?selected=${this.prompt?.type === PromptTypeEnum.Static}>
<option value=${PromptTypeEnum.Static} ?selected=${this.instance?.type === PromptTypeEnum.Static}>
${t`Static: Static value, displayed as-is.`}
</option>
`;
@ -79,14 +82,14 @@ export class PromptForm extends Form<Prompt> {
label=${t`Field Key`}
?required=${true}
name="fieldKey">
<input type="text" value="${ifDefined(this.prompt?.fieldKey)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.fieldKey)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Name of the form field, also used to store the value.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Label`}
?required=${true}
name="label">
<input type="text" value="${ifDefined(this.prompt?.label)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.label)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Label shown next to/above the prompt.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
@ -99,7 +102,7 @@ export class PromptForm extends Form<Prompt> {
</ak-form-element-horizontal>
<ak-form-element-horizontal name="required">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.prompt?.required, false)}>
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.required, false)}>
<label class="pf-c-check__label">
${t`Required`}
</label>
@ -108,14 +111,14 @@ export class PromptForm extends Form<Prompt> {
<ak-form-element-horizontal
label=${t`Placeholder`}
name="placeholder">
<input type="text" value="${ifDefined(this.prompt?.placeholder)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.placeholder)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Optionally pre-fill the input value`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Order`}
?required=${true}
name="order">
<input type="number" value="${ifDefined(this.prompt?.order)}" class="pf-c-form-control" required>
<input type="number" value="${ifDefined(this.instance?.order)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
</form>`;
}

View file

@ -68,7 +68,7 @@ export class PromptListPage extends TablePage<Prompt> {
<span slot="header">
${t`Update Prompt`}
</span>
<ak-prompt-form slot="form" .prompt=${item}>
<ak-prompt-form slot="form" .instancePk=${item.pk}>
</ak-prompt-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit`}

View file

@ -1,20 +1,23 @@
import { CoreApi, Token } from "authentik-api";
import { t } from "@lingui/macro";
import { customElement, property } from "lit-element";
import { customElement } 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";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-user-token-form")
export class UserTokenForm extends Form<Token> {
export class UserTokenForm extends ModelForm<Token, string> {
@property({attribute: false})
token?: Token;
loadInstance(pk: string): Promise<Token> {
return new CoreApi(DEFAULT_CONFIG).coreTokensRead({
identifier: pk
});
}
getSuccessMessage(): string {
if (this.token) {
if (this.instance) {
return t`Successfully updated token.`;
} else {
return t`Successfully created token.`;
@ -22,9 +25,9 @@ export class UserTokenForm extends Form<Token> {
}
send = (data: Token): Promise<Token> => {
if (this.token) {
if (this.instance) {
return new CoreApi(DEFAULT_CONFIG).coreTokensUpdate({
identifier: this.token.identifier,
identifier: this.instance.identifier,
data: data
});
} else {
@ -40,13 +43,13 @@ export class UserTokenForm extends Form<Token> {
label=${t`Identifier`}
?required=${true}
name="identifier">
<input type="text" value="${ifDefined(this.token?.identifier)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.identifier)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Description`}
?required=${true}
name="description">
<input type="text" value="${ifDefined(this.token?.description)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.description)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
</form>`;
}

View file

@ -110,7 +110,7 @@ export class UserTokenList extends Table<Token> {
<span slot="header">
${t`Update Token`}
</span>
<ak-user-token-form slot="form" .token=${item}>
<ak-user-token-form slot="form" .instancePk=${item.identifier}>
</ak-user-token-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">
${t`Edit`}

View file

@ -1,23 +1,26 @@
import { CoreApi, User } from "authentik-api";
import { t } from "@lingui/macro";
import { customElement, property } from "lit-element";
import { customElement } 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";
import "../../elements/CodeMirror";
import YAML from "yaml";
import { first } from "../../utils";
import { ModelForm } from "../../elements/forms/ModelForm";
@customElement("ak-user-form")
export class UserForm extends Form<User> {
export class UserForm extends ModelForm<User, number> {
@property({ attribute: false })
user?: User;
loadInstance(pk: number): Promise<User> {
return new CoreApi(DEFAULT_CONFIG).coreUsersRead({
id: pk
});
}
getSuccessMessage(): string {
if (this.user) {
if (this.instance) {
return t`Successfully updated user.`;
} else {
return t`Successfully created user.`;
@ -25,9 +28,9 @@ export class UserForm extends Form<User> {
}
send = (data: User): Promise<User> => {
if (this.user) {
if (this.instance) {
return new CoreApi(DEFAULT_CONFIG).coreUsersUpdate({
id: this.user.pk || 0,
id: this.instance.pk || 0,
data: data
});
} else {
@ -43,26 +46,26 @@ export class UserForm extends Form<User> {
label=${t`Username`}
?required=${true}
name="username">
<input type="text" value="${ifDefined(this.user?.username)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.username)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Name`}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.user?.name)}" class="pf-c-form-control" required>
<input type="text" value="${ifDefined(this.instance?.name)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${t`User's display name.`}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Email`}
?required=${true}
name="email">
<input type="email" autocomplete="off" value="${ifDefined(this.user?.email)}" class="pf-c-form-control" required>
<input type="email" autocomplete="off" value="${ifDefined(this.instance?.email)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
name="isActive">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.user?.isActive, true)}>
<input type="checkbox" class="pf-c-check__input" ?checked=${first(this.instance?.isActive, true)}>
<label class="pf-c-check__label">
${t`Is active`}
</label>
@ -73,7 +76,7 @@ export class UserForm extends Form<User> {
label=${t`Attributes`}
?required=${true}
name="attributes">
<ak-codemirror mode="yaml" value="${YAML.stringify(first(this.user?.attributes, {}))}">
<ak-codemirror mode="yaml" value="${YAML.stringify(first(this.instance?.attributes, {}))}">
</ak-codemirror>
<p class="pf-c-form__helper-text">${t`Set custom attributes using YAML or JSON.`}</p>
</ak-form-element-horizontal>

View file

@ -75,7 +75,7 @@ export class UserListPage extends TablePage<User> {
<span slot="header">
${t`Update User`}
</span>
<ak-user-form slot="form" .user=${item}>
<ak-user-form slot="form" .instancePk=${item.pk}>
</ak-user-form>
<button slot="trigger" class="pf-m-secondary pf-c-button">
${t`Edit`}

View file

@ -144,7 +144,7 @@ export class UserViewPage extends LitElement {
<span slot="header">
${t`Update User`}
</span>
<ak-user-form slot="form" .user=${this.user}>
<ak-user-form slot="form" .instancePk=${this.user.pk}>
</ak-user-form>
<button slot="trigger" class="pf-m-primary pf-c-button">
${t`Edit`}