From 4ed81711306e8df4c1786c8a445b18ed90759ce6 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 28 May 2022 20:05:43 +0200
Subject: [PATCH] web/user: fix static prompt fields being rendered with label

closes #2584

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/flows/stages/prompt/PromptStage.ts    | 39 +++++++++++--------
 .../details/stages/prompt/PromptStage.ts      | 29 ++++++++------
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/web/src/flows/stages/prompt/PromptStage.ts b/web/src/flows/stages/prompt/PromptStage.ts
index f1d285eb4..9cce8181b 100644
--- a/web/src/flows/stages/prompt/PromptStage.ts
+++ b/web/src/flows/stages/prompt/PromptStage.ts
@@ -133,6 +133,18 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
         return html`<p class="pf-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>`;
     }
 
+    shouldRenderInWrapper(prompt: StagePrompt): bool {
+        // Special types that aren't rendered in a wrapper
+        if (
+            prompt.type === PromptTypeEnum.Static ||
+            prompt.type === PromptTypeEnum.Hidden ||
+            prompt.type === PromptTypeEnum.Separator
+        ) {
+            return false;
+        }
+        return true;
+    }
+
     renderField(prompt: StagePrompt): TemplateResult {
         // Checkbox is rendered differently
         if (prompt.type === PromptTypeEnum.Checkbox) {
@@ -151,26 +163,19 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
                 <p class="pf-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>
             </div>`;
         }
-        // Special types that aren't rendered in a wrapper
-        if (
-            prompt.type === PromptTypeEnum.Static ||
-            prompt.type === PromptTypeEnum.Hidden ||
-            prompt.type === PromptTypeEnum.Separator
-        ) {
-            return html`
+        if (this.shouldRenderInWrapper(prompt)) {
+            return html`<ak-form-element
+                label="${prompt.label}"
+                ?required="${prompt.required}"
+                class="pf-c-form__group"
+                .errors=${(this.challenge?.responseErrors || {})[prompt.fieldKey]}
+            >
                 ${unsafeHTML(this.renderPromptInner(prompt, false))}
                 ${this.renderPromptHelpText(prompt)}
-            `;
+            </ak-form-element>`;
         }
-        return html`<ak-form-element
-            label="${prompt.label}"
-            ?required="${prompt.required}"
-            class="pf-c-form__group"
-            .errors=${(this.challenge?.responseErrors || {})[prompt.fieldKey]}
-        >
-            ${unsafeHTML(this.renderPromptInner(prompt, false))}
-            ${this.renderPromptHelpText(prompt)}
-        </ak-form-element>`;
+        return html` ${unsafeHTML(this.renderPromptInner(prompt, false))}
+        ${this.renderPromptHelpText(prompt)}`;
     }
 
     renderContinue(): TemplateResult {
diff --git a/web/src/user/user-settings/details/stages/prompt/PromptStage.ts b/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
index 8084828c0..ff164dd2f 100644
--- a/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
+++ b/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
@@ -36,19 +36,24 @@ export class UserSettingsPromptStage extends PromptStage {
 
     renderField(prompt: StagePrompt): TemplateResult {
         const errors = (this.challenge?.responseErrors || {})[prompt.fieldKey];
+        if (this.shouldRenderInWrapper(prompt)) {
+            return html`
+                <ak-form-element-horizontal
+                    label=${t`${prompt.label}`}
+                    ?required=${prompt.required}
+                    name=${prompt.fieldKey}
+                    ?invalid=${errors !== undefined}
+                    .errorMessages=${(errors || []).map((error) => {
+                        return error.string;
+                    })}
+                >
+                    ${unsafeHTML(this.renderPromptInner(prompt, true))}
+                    ${this.renderPromptHelpText(prompt)}
+                </ak-form-element-horizontal>
+            `;
+        }
         return html`
-            <ak-form-element-horizontal
-                label=${t`${prompt.label}`}
-                ?required=${prompt.required}
-                name=${prompt.fieldKey}
-                ?invalid=${errors !== undefined}
-                .errorMessages=${(errors || []).map((error) => {
-                    return error.string;
-                })}
-            >
-                ${unsafeHTML(this.renderPromptInner(prompt, true))}
-                ${this.renderPromptHelpText(prompt)}
-            </ak-form-element-horizontal>
+            ${unsafeHTML(this.renderPromptInner(prompt, true))} ${this.renderPromptHelpText(prompt)}
         `;
     }