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

web: set name on ak-form-element-horizontal for error messages 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-29 18:22:15 +02:00
parent 5b8e3b4189
commit d5281d2023
6 changed files with 92 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/elements/forms/HorizontalFormElement.ts
View File

@ -30,10 +30,25 @@ export class HorizontalFormElement extends LitElement {
@property({ type: Boolean }) @property({ type: Boolean })
invalid = false; invalid = false;
@property()
name = "";
updated(): void { updated(): void {
this.querySelectorAll<HTMLInputElement>("input[autofocus]").forEach(input => { this.querySelectorAll<HTMLInputElement>("input[autofocus]").forEach(input => {
input.focus(); input.focus();
}); });
this.querySelectorAll("*").forEach((input) => {
switch (input.tagName.toLowerCase()) {
case "input":
case "textarea":
case "select":
case "ak-codemirror":
(input as HTMLInputElement).name = this.name;
break;
default:
break;
}
});
} }
render(): TemplateResult { render(): TemplateResult {

25
web/src/pages/crypto/CertificateGenerateForm.ts
View File

@ -1,6 +1,7 @@
import { CertificateGeneration, CryptoApi } from "authentik-api"; import { CertificateGeneration, CryptoApi } from "authentik-api";
import { CertificateKeyPair } from "authentik-api/src";
import { gettext } from "django"; import { gettext } from "django";
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 { Form } from "../../elements/forms/Form";
@ -13,7 +14,7 @@ export class CertificateKeyPairForm extends Form<CertificateGeneration> {
return gettext("Successfully generated certificate-key pair."); return gettext("Successfully generated certificate-key pair.");
} }
send = (data: CertificateGeneration): Promise<CertificateGeneration> => { send = (data: CertificateGeneration): Promise<CertificateKeyPair> => {
return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsGenerate({ return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsGenerate({
data: data data: data
}); });
@ -21,15 +22,23 @@ export class CertificateKeyPairForm extends Form<CertificateGeneration> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${gettext("Common Name")} ?required=${true}> <ak-form-element-horizontal
<input type="text" name="commonName" class="pf-c-form-control" required=""> label=${gettext("Common Name")}
name="commonName"
?required=${true}>
<input type="text" class="pf-c-form-control" required="">
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${gettext("Subject-alt name")}> <ak-form-element-horizontal
<input class="pf-c-form-control" type="text" name="subjectAltName"> label=${gettext("Subject-alt name")}
name="subjectAltName">
<input class="pf-c-form-control" type="text">
<p class="pf-c-form__helper-text">${gettext("Optional, comma-separated SubjectAlt Names.")}</p> <p class="pf-c-form__helper-text">${gettext("Optional, comma-separated SubjectAlt Names.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${gettext("Validity days")} ?required=${true}> <ak-form-element-horizontal
<input class="pf-c-form-control" type="number" name="validityDays" value="365"> label=${gettext("Validity days")}
name="validityDays"
?required=${true}>
<input class="pf-c-form-control" type="number" value="365">
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;
} }

22
web/src/pages/crypto/CertificateKeyPairForm.ts
View File

@ -1,4 +1,4 @@
import { CertificateKeyPair, CoreApi, CryptoApi, Group } from "authentik-api"; import { CertificateKeyPair, CryptoApi } from "authentik-api";
import { gettext } from "django"; import { gettext } from "django";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
@ -38,16 +38,24 @@ export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${gettext("Name")} ?required=${true}> <ak-form-element-horizontal
<input type="text" name="name" value="${ifDefined(this.keyPair?.name)}" class="pf-c-form-control" required=""> label=${gettext("Name")}
name="name"
?required=${true}>
<input type="text" value="${ifDefined(this.keyPair?.name)}" class="pf-c-form-control" required>
</ak-form-element-horizontal> </ak-form-element-horizontal>
${this.keyPair ? html`<ak-divider>${gettext("Only change the fields below if you want to overwrite their values.")}</ak-divider>` : html``} ${this.keyPair ? html`<ak-divider>${gettext("Only change the fields below if you want to overwrite their values.")}</ak-divider>` : html``}
<ak-form-element-horizontal label=${gettext("Certificate")} ?required=${true}> <ak-form-element-horizontal
<textarea class="pf-c-form-control" type="text" name="certificateData">${ifDefined(this.keyPair?.certificateData)}</textarea> label=${gettext("Certificate")}
name="certificateData"
?required=${true}>
<textarea class="pf-c-form-control" required>${ifDefined(this.keyPair?.certificateData)}</textarea>
<p class="pf-c-form__helper-text">${gettext("PEM-encoded Certificate data.")}</p> <p class="pf-c-form__helper-text">${gettext("PEM-encoded Certificate data.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${gettext("Private Key")}> <ak-form-element-horizontal
<textarea class="pf-c-form-control" type="text" name="keyData">${ifDefined(this.keyPair?.keyData)}</textarea> name="keyData"
label=${gettext("Private Key")}>
<textarea class="pf-c-form-control" >${ifDefined(this.keyPair?.keyData)}</textarea>
<p class="pf-c-form__helper-text">${gettext("Optional Private Key. If this is set, you can use this keypair for encryption.")}</p> <p class="pf-c-form__helper-text">${gettext("Optional Private Key. If this is set, you can use this keypair for encryption.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;

31
web/src/pages/groups/GroupForm.ts
View File

@ -39,20 +39,26 @@ export class GroupForm extends Form<Group> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${gettext("Name")} ?required=${true}> <ak-form-element-horizontal
<input type="text" name="name" value="${ifDefined(this.group?.name)}" class="pf-c-form-control" required=""> label=${gettext("Name")}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.group?.name)}" class="pf-c-form-control" required="">
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal> <ak-form-element-horizontal name="isSuperuser">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" name="is_superuser" class="pf-c-check__input" ?checked=${this.group?.isSuperuser || false}> <input type="checkbox" class="pf-c-check__input" ?checked=${this.group?.isSuperuser || false}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${gettext("Is superuser")} ${gettext("Is superuser")}
</label> </label>
</div> </div>
<p class="pf-c-form__helper-text">${gettext("Users added to this group will be superusers.")}</p> <p class="pf-c-form__helper-text">${gettext("Users added to this group will be superusers.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${gettext("Parent")} ?required=${true}> <ak-form-element-horizontal
<select name="parent" class="pf-c-form-control"> label=${gettext("Parent")}
?required=${true}
name="parent">
<select class="pf-c-form-control">
<option value="" ?selected=${this.group?.parent === undefined}>---------</option> <option value="" ?selected=${this.group?.parent === undefined}>---------</option>
${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => { ${until(new CoreApi(DEFAULT_CONFIG).coreGroupsList({}).then(groups => {
return groups.results.map(group => { return groups.results.map(group => {
@ -61,8 +67,11 @@ export class GroupForm extends Form<Group> {
}), html``)} }), html``)}
</select> </select>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${gettext("Members")} ?required=${true}> <ak-form-element-horizontal
<select name="users" class="pf-c-form-control" multiple=""> label=${gettext("Members")}
?required=${true}
name="users">
<select name="users" class="pf-c-form-control" multiple>
${until(new CoreApi(DEFAULT_CONFIG).coreUsersList({}).then(users => { ${until(new CoreApi(DEFAULT_CONFIG).coreUsersList({}).then(users => {
return users.results.map(user => { return users.results.map(user => {
const selected = Array.from(this.group?.users || []).some(su => { const selected = Array.from(this.group?.users || []).some(su => {
@ -74,8 +83,10 @@ export class GroupForm extends Form<Group> {
</select> </select>
<p class="pf-c-form__helper-text">${gettext("Hold control/command to select multiple items.")}</p> <p class="pf-c-form__helper-text">${gettext("Hold control/command to select multiple items.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${gettext("Attributes")}> <ak-form-element-horizontal
<ak-codemirror mode="yaml" name="attributes" value="${YAML.stringify(this.group?.attributes)}"> label=${gettext("Attributes")}
name="attributes">
<ak-codemirror mode="yaml" value="${YAML.stringify(this.group?.attributes)}">
</ak-codemirror> </ak-codemirror>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;

32
web/src/pages/users/UserForm.ts
View File

@ -38,28 +38,40 @@ export class UserForm extends Form<User> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal"> return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal label=${gettext("Username")} ?required=${true}> <ak-form-element-horizontal
<input type="text" name="username" value="${ifDefined(this.user?.username)}" class="pf-c-form-control" required=""> label=${gettext("Username")}
?required=${true}
name="username">
<input type="text" value="${ifDefined(this.user?.username)}" class="pf-c-form-control" required="">
<p class="pf-c-form__helper-text">${gettext("Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.")}</p> <p class="pf-c-form__helper-text">${gettext("Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${gettext("Name")} ?required=${true}> <ak-form-element-horizontal
<input type="text" name="name" value="${ifDefined(this.user?.name)}" class="pf-c-form-control" required=""> label=${gettext("Name")}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.user?.name)}" class="pf-c-form-control" required="">
<p class="pf-c-form__helper-text">${gettext("User's display name.")}</p> <p class="pf-c-form__helper-text">${gettext("User's display name.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${gettext("Email")} ?required=${true}> <ak-form-element-horizontal
<input type="email" name="email" autocomplete="off" value="${ifDefined(this.user?.email)}" class="pf-c-form-control" required=""> label=${gettext("Email")}
?required=${true}
name="email">
<input type="email" autocomplete="off" value="${ifDefined(this.user?.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">
<div class="pf-c-check"> <div class="pf-c-check">
<input type="checkbox" name="is_active" class="pf-c-check__input" ?checked=${this.user?.isActive || false}> <input type="checkbox" class="pf-c-check__input" ?checked=${this.user?.isActive || false}>
<label class="pf-c-check__label"> <label class="pf-c-check__label">
${gettext("Is active")} ${gettext("Is active")}
</label> </label>
</div> </div>
<p class="pf-c-form__helper-text">${gettext("Designates whether this user should be treated as active. Unselect this instead of deleting accounts.")}</p> <p class="pf-c-form__helper-text">${gettext("Designates whether this user should be treated as active. Unselect this instead of deleting accounts.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${gettext("Attributes")}> <ak-form-element-horizontal
<ak-codemirror mode="yaml" name="attributes" value="${YAML.stringify(this.user?.attributes)}"> label=${gettext("Attributes")}
name="attributes">
<ak-codemirror mode="yaml" value="${YAML.stringify(this.user?.attributes)}">
</ak-codemirror> </ak-codemirror>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</form>`; </form>`;

4
web/src/utils.ts
View File

@ -53,6 +53,6 @@ export function loading<T>(v: T, actual: TemplateResult): TemplateResult {
} }
export function camelToSnake(key: string): string { export function camelToSnake(key: string): string {
var result = key.replace(/([A-Z])/g, " $1"); const result = key.replace(/([A-Z])/g, " $1");
return result.split(' ').join('_').toLowerCase(); return result.split(" ").join("_").toLowerCase();
} }