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

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/elements/forms/HorizontalFormElement.ts

@@ -30,10 +30,25 @@ export class HorizontalFormElement extends LitElement {
     @property({ type: Boolean })
     invalid = false;
 
+    @property()
+    name = "";
+
     updated(): void {
         this.querySelectorAll<HTMLInputElement>("input[autofocus]").forEach(input => {
             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 {

web/src/pages/crypto/CertificateGenerateForm.ts

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

web/src/pages/crypto/CertificateKeyPairForm.ts

@@ -1,4 +1,4 @@
-import { CertificateKeyPair, CoreApi, CryptoApi, Group } from "authentik-api";
+import { CertificateKeyPair, CryptoApi } from "authentik-api";
 import { gettext } from "django";
 import { customElement, property } from "lit-element";
 import { html, TemplateResult } from "lit-html";
@@ -38,16 +38,24 @@ export class CertificateKeyPairForm extends Form<CertificateKeyPair> {
 
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
-            <ak-form-element-horizontal label=${gettext("Name")} ?required=${true}>
-                <input type="text" name="name" value="${ifDefined(this.keyPair?.name)}" class="pf-c-form-control" required="">
+            <ak-form-element-horizontal
+                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>
             ${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}>
-                <textarea class="pf-c-form-control" type="text" name="certificateData">${ifDefined(this.keyPair?.certificateData)}</textarea>
+            <ak-form-element-horizontal
+                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>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${gettext("Private Key")}>
-                <textarea class="pf-c-form-control" type="text" name="keyData">${ifDefined(this.keyPair?.keyData)}</textarea>
+            <ak-form-element-horizontal
+                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>
             </ak-form-element-horizontal>
         </form>`;

web/src/pages/groups/GroupForm.ts

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

web/src/pages/users/UserForm.ts

@@ -38,28 +38,40 @@ export class UserForm extends Form<User> {
 
     renderForm(): TemplateResult {
         return html`<form class="pf-c-form pf-m-horizontal">
-            <ak-form-element-horizontal label=${gettext("Username")} ?required=${true}>
-                <input type="text" name="username" value="${ifDefined(this.user?.username)}" class="pf-c-form-control" required="">
+            <ak-form-element-horizontal
+                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>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${gettext("Name")} ?required=${true}>
-                <input type="text" name="name" value="${ifDefined(this.user?.name)}" class="pf-c-form-control" required="">
+            <ak-form-element-horizontal
+                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>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${gettext("Email")} ?required=${true}>
-                <input type="email" name="email" autocomplete="off" value="${ifDefined(this.user?.email)}" class="pf-c-form-control" required="">
+            <ak-form-element-horizontal
+                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
+                name="isActive">
                 <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">
                         ${gettext("Is active")}
                     </label>
                 </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>
             </ak-form-element-horizontal>
-            <ak-form-element-horizontal label=${gettext("Attributes")}>
-                <ak-codemirror mode="yaml" name="attributes" value="${YAML.stringify(this.user?.attributes)}">
+            <ak-form-element-horizontal
+                label=${gettext("Attributes")}
+                name="attributes">
+                <ak-codemirror mode="yaml" value="${YAML.stringify(this.user?.attributes)}">
                 </ak-codemirror>
             </ak-form-element-horizontal>
         </form>`;

web/src/utils.ts

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