From 4589be119c6830b40fee969b968fe7ba441b59a2 Mon Sep 17 00:00:00 2001
From: Tom Hempel <tom.hempel2001@gmail.com>
Date: Sat, 6 Jun 2026 16:40:19 +0200
Subject: [PATCH] Add read-only client and coach code fields in questionnaire
 preview

---
 website/css/style.css               | 10 ++++++++++
 website/js/questionnaire-preview.js | 17 ++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/website/css/style.css b/website/css/style.css
index bd195fb..29af89d 100644
--- a/website/css/style.css
+++ b/website/css/style.css
@@ -2578,6 +2578,16 @@ select:disabled {
     background: var(--surface);
     color: var(--text);
 }
+.qp-review-note {
+    margin-bottom: 4px;
+}
+.qp-review-codes .qp-readonly-field {
+    background: var(--bg, #f4f4f5);
+    color: var(--text-secondary);
+    cursor: default;
+    border-style: dashed;
+    user-select: all;
+}
 .qp-glass-table {
     overflow-x: auto;
     margin-top: 8px;
diff --git a/website/js/questionnaire-preview.js b/website/js/questionnaire-preview.js
index 45dd807..9231784 100644
--- a/website/js/questionnaire-preview.js
+++ b/website/js/questionnaire-preview.js
@@ -12,6 +12,10 @@ const GLASS_LABELS = [
     { key: 'extreme_glass', label: 'Extreme' },
 ];
 
+/** Sample codes shown in preview (read-only), mimicking the app after load/login. */
+const PREVIEW_CLIENT_CODE = 'CLIENT-042';
+const PREVIEW_COACH_CODE = 'coach.demo';
+
 const MONTHS = [
     'January', 'February', 'March', 'April', 'May', 'June',
     'July', 'August', 'September', 'October', 'November', 'December',
@@ -395,9 +399,16 @@ function renderQuestionBody(q, sectionIdx) {
 
         case 'client_coach_code_question':
             inner += `
-                <div class="qp-form-stack">
-                    <label>Client code<input type="text" data-field="client"></label>
-                    <label>Coach code<input type="text" data-field="coach"></label>
+                <p class="qp-hint qp-review-note">In the app, client and coach codes are loaded automatically — coaches review them here, not type them in.</p>
+                <div class="qp-form-stack qp-review-codes">
+                    <label>Client code
+                        <input type="text" class="qp-readonly-field" data-field="client"
+                            value="${esc(PREVIEW_CLIENT_CODE)}" readonly tabindex="-1" aria-readonly="true">
+                    </label>
+                    <label>Coach code
+                        <input type="text" class="qp-readonly-field" data-field="coach"
+                            value="${esc(PREVIEW_COACH_CODE)}" readonly tabindex="-1" aria-readonly="true">
+                    </label>
                 </div>`;
             break;