From 6237352e25fa1a0fa00a4a5caefa7d3defed16c4 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Fri, 27 Aug 2021 23:09:53 +0200
Subject: [PATCH] web/flows: fix checkboxes not being rendered correctly

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

diff --git a/web/src/flows/stages/prompt/PromptStage.ts b/web/src/flows/stages/prompt/PromptStage.ts
index 70ca53b79..72a1e0aa6 100644
--- a/web/src/flows/stages/prompt/PromptStage.ts
+++ b/web/src/flows/stages/prompt/PromptStage.ts
@@ -64,13 +64,6 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
                     placeholder="${prompt.placeholder}"
                     class="pf-c-form-control"
                     ?required=${prompt.required}>`;
-            case "checkbox":
-                return `<input
-                    type="checkbox"
-                    name="${prompt.fieldKey}"
-                    placeholder="${prompt.placeholder}"
-                    class="pf-c-form-control"
-                    ?required=${prompt.required}>`;
             case "date":
                 return `<input
                     type="date"
@@ -115,6 +108,22 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
                     }}
                 >
                     ${this.challenge.fields.map((prompt) => {
+                        // Checkbox is rendered differently
+                        if (prompt.type === "checkbox") {
+                            return html`<div class="pf-c-check">
+                                <input
+                                    type="checkbox"
+                                    class="pf-c-check__input"
+                                    name="${prompt.fieldKey}"
+                                    ?checked=${prompt.placeholder !== ""}
+                                    ?required=${prompt.required}
+                                />
+                                <label class="pf-c-check__label">${prompt.label}</label>
+                                ${prompt.required
+                                    ? html`<p class="pf-c-form__helper-text">${t`Required.`}</p>`
+                                    : html``}
+                            </div>`;
+                        }
                         // Special types that aren't rendered in a wrapper
                         if (
                             prompt.type === "static" ||
diff --git a/web/src/pages/stages/prompt/PromptForm.ts b/web/src/pages/stages/prompt/PromptForm.ts
index 7fafebab7..a0164677a 100644
--- a/web/src/pages/stages/prompt/PromptForm.ts
+++ b/web/src/pages/stages/prompt/PromptForm.ts
@@ -157,7 +157,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
             <ak-form-element-horizontal label=${t`Order`} ?required=${true} name="order">
                 <input
                     type="number"
-                    value="${ifDefined(this.instance?.order)}"
+                    value="${first(this.instance?.order, 0)}"
                     class="pf-c-form-control"
                     required
                 />