From 89057c0c26fb9074c8a6dec303601390a2fea795 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sun, 6 Sep 2026 15:49:10 +0200
Subject: [PATCH] =?UTF-8?q?OTC-Formular=20vollst=C3=A4ndig=20am=20Stylegui?=
 =?UTF-8?q?de=20ausrichten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/shared/auth/ui/home.php | 52 ++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/modules/shared/auth/ui/home.php b/modules/shared/auth/ui/home.php
index 4ffd666..781288a 100644
--- a/modules/shared/auth/ui/home.php
+++ b/modules/shared/auth/ui/home.php
@@ -448,8 +448,9 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
         $disabledAttribute = $hasSellableMapping ? '' : ' disabled aria-disabled="true"';
 
         $otcProductRows .= '<div class="sg-form-sections-card__field-group">';
-        $otcProductRows .= '<label class="sg-label" for="' . $inputId . '">' . $productName . ($productSku !== '' ? ' (' . $productSku . ')' : '') . $mappingNote . '</label>';
-        $otcProductRows .= '<input class="sg-interaction-element sg-input-single-line" type="number" id="' . $inputId . '" min="0" step="1" data-otc-order-product data-product-id="' . $productId . '" data-title="' . $productName . '" data-available-qty="' . $availableQty . '"' . $disabledAttribute . '>';
+        $otcProductRows .= '<label class="sg-labeled-input-row"><span class="sg-label">' . $productName . ($productSku !== '' ? ' (' . $productSku . ')' : '') . $mappingNote . '</span>';
+        $otcProductRows .= '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="number" id="' . $inputId . '" min="0" step="1" data-otc-order-product data-product-id="' . $productId . '" data-title="' . $productName . '" data-available-qty="' . $availableQty . '"' . $disabledAttribute . '>';
+        $otcProductRows .= '</label>';
         $otcProductRows .= '<p class="sg-body sg-form-sections-card__sentence">Physischer Bestand: ' . $availableQty . '</p>';
         $otcProductRows .= '</div>';
     }
@@ -571,20 +572,23 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-order-date-title">';
     echo '<h2 id="otc-order-date-title" class="sg-strong sg-form-sections-card__chapter-title">Datum</h2>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-order-date">Bestelldatum</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="date" id="otc-order-date" value="' . htmlspecialchars(date('Y-m-d'), ENT_QUOTES, 'UTF-8') . '" data-otc-order-date>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Bestelldatum</span>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="date" id="otc-order-date" value="' . htmlspecialchars(date('Y-m-d'), ENT_QUOTES, 'UTF-8') . '" data-otc-order-date>';
+    echo '</label>';
     echo '</div>';
     echo '</section>';
     echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-payment-title">';
     echo '<h2 id="otc-payment-title" class="sg-strong sg-form-sections-card__chapter-title">Bezahlung</h2>';
     echo '<div data-otc-payment-rows>';
     echo '<div class="sg-form-sections-card__field-group" data-otc-payment-row>';
-    echo '<label class="sg-label" for="otc-payment-method-1">Bezahlart</label>';
-    echo '<select class="sg-interaction-element sg-input-single-line sg-pulldown" id="otc-payment-method-1" data-otc-payment-method>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Bezahlart</span>';
+    echo '<select class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable sg-pulldown" id="otc-payment-method-1" data-otc-payment-method>';
     echo '<option value="twint">Twint</option><option value="card">Kreditkarte</option><option value="cash">Barzahlung</option><option value="paypal">PayPal</option><option value="bank_transfer">Überweisung</option>';
     echo '</select>';
-    echo '<label class="sg-label" for="otc-payment-amount-1">Betrag (CHF)</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="number" id="otc-payment-amount-1" min="0.01" step="0.01" value="0.00" data-otc-payment-amount>';
+    echo '</label>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Betrag (CHF)</span>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="number" id="otc-payment-amount-1" min="0.01" step="0.01" value="0.00" data-otc-payment-amount>';
+    echo '</label>';
     echo '</div>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__actions-segment">';
@@ -594,28 +598,34 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo '<section class="sg-form-sections-card__chapter" aria-labelledby="otc-billing-title">';
     echo '<h2 id="otc-billing-title" class="sg-strong sg-form-sections-card__chapter-title">Rechnungsadresse</h2>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-first-name">Vorname</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-first-name" value="Fabienne" data-otc-order-first-name>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Vorname</span>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-first-name" value="Fabienne" data-otc-order-first-name>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-last-name">Nachname</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-last-name" value="Föhn" data-otc-order-last-name>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Nachname</span>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-last-name" value="Föhn" data-otc-order-last-name>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-street">Strasse</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-street" value="Im Hochrain" data-otc-order-street>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Strasse</span>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-street" value="Im Hochrain" data-otc-order-street>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-house-number">Hausnummer</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-house-number" value="2" data-otc-order-house-number>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Hausnummer</span>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-house-number" value="2" data-otc-order-house-number>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-zip">PLZ</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-zip" value="8102" data-otc-order-zip>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">PLZ</span>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-zip" value="8102" data-otc-order-zip>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
-    echo '<label class="sg-label" for="otc-city">Ort</label>';
-    echo '<input class="sg-interaction-element sg-input-single-line" type="text" id="otc-city" value="Oberengstringen" data-otc-order-city>';
+    echo '<label class="sg-labeled-input-row"><span class="sg-label">Ort</span>';
+    echo '<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" id="otc-city" value="Oberengstringen" data-otc-order-city>';
+    echo '</label>';
     echo '</div>';
     echo '<div class="sg-form-sections-card__field-group">';
     echo '<div class="sg-body sg-otc-order-form__status hidden" data-otc-order-success>Bestellung erfolgreich erfasst! Die Bestellnummer wird automatisch generiert.</div>';
@@ -1362,7 +1372,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "    const row = document.createElement('div');";
     echo "    row.className = 'sg-form-sections-card__field-group';";
     echo "    row.dataset.otcPaymentRow = '';";
-    echo "    row.innerHTML = '<label class=\"sg-label\" for=\"otc-payment-method-' + number + '\">Bezahlart</label><select class=\"sg-interaction-element sg-input-single-line sg-pulldown\" id=\"otc-payment-method-' + number + '\" data-otc-payment-method>' + paymentOptions + '</select><label class=\"sg-label\" for=\"otc-payment-amount-' + number + '\">Betrag (CHF)</label><input class=\"sg-interaction-element sg-input-single-line\" type=\"number\" id=\"otc-payment-amount-' + number + '\" min=\"0.01\" step=\"0.01\" value=\"0.00\" data-otc-payment-amount>';";
+    echo "    row.innerHTML = '<label class=\"sg-labeled-input-row\"><span class=\"sg-label\">Bezahlart</span><select class=\"sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable sg-pulldown\" id=\"otc-payment-method-' + number + '\" data-otc-payment-method>' + paymentOptions + '</select></label><label class=\"sg-labeled-input-row\"><span class=\"sg-label\">Betrag (CHF)</span><input class=\"sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable\" type=\"number\" id=\"otc-payment-amount-' + number + '\" min=\"0.01\" step=\"0.01\" value=\"0.00\" data-otc-payment-amount></label>' ;";
     echo "    row.querySelector('[data-otc-payment-method]').value = nextPaymentMethod;";
     echo "    paymentRows.appendChild(row);";
     echo "    bindPaymentRow(row);";