From 474677017febb6fba0c06d70bd735ae8c1f8f6da Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 24 Nov 2022 12:08:06 +0100
Subject: [PATCH] web/admin: fix empty request being sent due to multiple forms
 in duo import modal

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../authenticator_duo/DuoDeviceImportForm.ts  | 56 +++++++++----------
 1 file changed, 26 insertions(+), 30 deletions(-)

diff --git a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
index 0708231c5..8515a99e3 100644
--- a/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
+++ b/web/src/admin/stages/authenticator_duo/DuoDeviceImportForm.ts
@@ -42,15 +42,14 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
     };
 
     renderForm(): TemplateResult {
-        return html`${this.instance?.adminIntegrationKey !== ""
-            ? this.renderFormAutomatic()
-            : html``}
-        ${this.renderFormManual()}`;
+        return html` <form class="pf-c-form pf-m-horizontal">
+            ${this.instance?.adminIntegrationKey !== "" ? this.renderFormAutomatic() : html``}
+            ${this.renderFormManual()}
+        </form>`;
     }
 
     renderFormManual(): TemplateResult {
-        return html`<form class="pf-c-form pf-m-horizontal">
-            <ak-form-element-horizontal label=${t`User`} ?required=${true} name="username">
+        return html`<ak-form-element-horizontal label=${t`User`} ?required=${true} name="username">
                 <select class="pf-c-form-control">
                     ${until(
                         new CoreApi(DEFAULT_CONFIG)
@@ -76,35 +75,32 @@ export class DuoDeviceImportForm extends ModelForm<AuthenticatorDuoStage, string
                 <p class="pf-c-form__helper-text">
                     ${t`The user ID in Duo, can be found in the URL after clicking on a user.`}
                 </p>
-            </ak-form-element-horizontal>
-        </form>`;
+            </ak-form-element-horizontal>`;
     }
 
     renderFormAutomatic(): TemplateResult {
         return html`
-            <form class="pf-c-form pf-m-horizontal">
-                <ak-form-element-horizontal label=${t`Automatic import`}>
-                    <ak-action-button
-                        class="pf-m-primary"
-                        .apiRequest=${() => {
-                            return new StagesApi(DEFAULT_CONFIG)
-                                .stagesAuthenticatorDuoImportDevicesAutomaticCreate({
-                                    stageUuid: this.instance?.pk || "",
-                                })
-                                .then((res) => {
-                                    showMessage({
-                                        level: MessageLevel.info,
-                                        message: t`Successfully imported ${res.count} devices.`,
-                                    });
-                                    const modal = this.parentElement as ModalForm;
-                                    modal.open = false;
+            <ak-form-element-horizontal label=${t`Automatic import`}>
+                <ak-action-button
+                    class="pf-m-primary"
+                    .apiRequest=${() => {
+                        return new StagesApi(DEFAULT_CONFIG)
+                            .stagesAuthenticatorDuoImportDevicesAutomaticCreate({
+                                stageUuid: this.instance?.pk || "",
+                            })
+                            .then((res) => {
+                                showMessage({
+                                    level: MessageLevel.info,
+                                    message: t`Successfully imported ${res.count} devices.`,
                                 });
-                        }}
-                    >
-                        ${t`Start automatic import`}
-                    </ak-action-button>
-                </ak-form-element-horizontal>
-            </form>
+                                const modal = this.parentElement as ModalForm;
+                                modal.open = false;
+                            });
+                    }}
+                >
+                    ${t`Start automatic import`}
+                </ak-action-button>
+            </ak-form-element-horizontal>
             <ak-divider>${t`Or manually import`}</ak-divider>
             <br />
         `;