trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/admin: migrate remaining forms

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

514
web/src/locales/en.po
View file

File diff suppressed because it is too large Load diff

514
web/src/locales/pseudo-LOCALE.po
View file

File diff suppressed because it is too large Load diff

2
web/src/pages/policies/BoundPoliciesList.ts
View file

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

23
web/src/pages/stages/invitation/InvitationForm.ts
View file

@ -1,22 +1,25 @@
import { Invitation, StagesApi } from "authentik-api"; import { Invitation, 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/CodeMirror"; import "../../../elements/CodeMirror";
import YAML from "yaml"; import YAML from "yaml";
import { first } from "../../../utils"; import { first } from "../../../utils";
import { ModelForm } from "../../../elements/forms/ModelForm";
@customElement("ak-invitation-form") @customElement("ak-invitation-form")
export class InvitationForm extends Form<Invitation> { export class InvitationForm extends ModelForm<Invitation, string> {
@property({attribute: false}) loadInstance(pk: string): Promise<Invitation> {
invitation?: Invitation; return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsRead({
inviteUuid: pk,
});
}
getSuccessMessage(): string { getSuccessMessage(): string {
if (this.invitation) { if (this.instance) {
return t`Successfully updated invitation.`; return t`Successfully updated invitation.`;
} else { } else {
return t`Successfully created invitation.`; return t`Successfully created invitation.`;
@ -24,9 +27,9 @@ export class InvitationForm extends Form<Invitation> {
} }
send = (data: Invitation): Promise<Invitation> => { send = (data: Invitation): Promise<Invitation> => {
if (this.invitation) { if (this.instance) {
return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsUpdate({ return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsUpdate({
inviteUuid: this.invitation.pk || "", inviteUuid: this.instance.pk || "",
data: data data: data
}); });
} else { } else {
@ -47,13 +50,13 @@ export class InvitationForm extends Form<Invitation> {
<ak-form-element-horizontal <ak-form-element-horizontal
label=${t`Attributes`} label=${t`Attributes`}
name="fixedData"> 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> </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> <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>
<ak-form-element-horizontal name="singleUse"> <ak-form-element-horizontal name="singleUse">
<div class="pf-c-check"> <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"> <label class="pf-c-check__label">
${t`Single use`} ${t`Single use`}
</label> </label>

51
web/src/pages/stages/prompt/PromptForm.ts
View file

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

2
web/src/pages/stages/prompt/PromptListPage.ts
View file

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

23
web/src/pages/user-settings/tokens/UserTokenForm.ts
View file

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

2
web/src/pages/user-settings/tokens/UserTokenList.ts
View file

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

29
web/src/pages/users/UserForm.ts
View file

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

2
web/src/pages/users/UserListPage.ts
View file

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

2
web/src/pages/users/UserViewPage.ts
View file

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