web/flows: fix checkboxes not being rendered correctly

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

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" ||

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
                 />