From 9a1c22081330e2df354f50b0835b69a6921b32f3 Mon Sep 17 00:00:00 2001
From: Valentin Weber <valentin@wv2.ch>
Date: Sat, 7 Dec 2024 21:07:15 +0100
Subject: [PATCH] feat: refactor user settings part 1

---
 templates/settings.html | 76 ++++++++++++++++++++++++++---------------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/templates/settings.html b/templates/settings.html
index 69713be..443396a 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -25,37 +25,57 @@
     <h2>My Account</h2>
 
     <form id="settings-myaccount-form" method="post" action="/settings?change=account" accept-charset="UTF-8">
-      <label class="form-label" for="settings-myaccount-username">Username: </label>
-      <input class="form-control" id="settings-myaccount-username" type="text" name="username" value="{{ authuser.name }}" /><br/>
-
-      <label class="form-label" for="settings-myaccount-email">E-Mail: </label>
-      <input class="form-control" id="settings-myaccount-email" type="text" name="email" value="{% if authuser.email is not none %}{{ authuser.email }}{% endif %}" /><br/>
-
-      <label class="form-label" for="settings-myaccount-receipt-pref">Receipts: </label>
-      <select class="form-select" id="settings-myaccount-receipt-pref" name="receipt_pref">
-        {% for pref in receipt_preference_class %}
-          <option value="{{ pref.value }}" {% if authuser.receipt_pref == pref %} selected="selected" {% endif %}>{{ pref.human_readable }}</option>
-        {% endfor %}
-      </select>
-      {% if config_smtp_enabled != '1' %}Sending receipts is disabled by your administrator.{% endif %}
-      <br/>
-
-      <div class="form-check">
-      <input class="form-check-input" id="settings-myaccount-ismember" type="checkbox" disabled="disabled" {% if authuser.is_member %} checked="checked" {% endif %}/>
-      <label class="form-check-label" for="settings-myaccount-ismember">Member</label>
+      <div class="row g-2">
+        <div class="col-md">
+          <div class="form-floating">
+            <input class="form-control" id="settings-myaccount-username" type="text" name="username" value="{{ authuser.name }}">
+            <label for="settings-myaccount-username">Username</label>
+          </div>
+        </div>
+        <div class="col-md">
+          <div class="form-floating">
+            <input class="form-control" id="settings-myaccount-email" type="email" name="email" value="{% if authuser.email is not none %}{{ authuser.email }}{% endif %}">
+            <label for="settings-myaccount-email">E-Mail</label>
+          </div>
+        </div>
+        {% if config_smtp_enabled == '1' %}
+        <div class="col-md">
+          <div class="form-floating">
+            <select class="form-select" id="settings-myaccount-receipt-pref" name="receipt_pref">
+            {% for pref in receipt_preference_class %}
+              <option value="{{ pref.value }}" {% if authuser.receipt_pref == pref %} selected {% endif %}>{{ pref.human_readable }}</option>
+            {% endfor %}
+            </select>
+            <label for="settings-myaccount-receipt-pref">Receipts</label>
+          </div>
+        </div>
+        {% endif %}
       </div>
-
-      <div class="form-check">
-      <input class="form-check-input" id="settings-myaccount-isadmin" type="checkbox" disabled="disabled" {% if authuser.is_admin %} checked="checked" {% endif %}/>
-      <label class="form-check-label" for="settings-myaccount-isadmin">Admin</label>
+      <div class="row g-2">
+        <div class="col">
+          <div class="form-check">
+            <input class="form-check-input" id="settings-myaccount-ismember" type="checkbox" disabled="disabled" {% if authuser.is_member %} checked="checked" {% endif %}>
+            <label class="form-check-label" for="settings-myaccount-ismember">Member</label>
+          </div>
+        </div>
+        <div class="col">
+          <div class="form-check">
+            <input class="form-check-input" id="settings-myaccount-isadmin" type="checkbox" disabled="disabled" {% if authuser.is_admin %} checked="checked" {% endif %}>
+            <label class="form-check-label" for="settings-myaccount-isadmin">Admin</label>
+          </div>
+        </div>
+        <div class="col">
+          <div class="form-check">
+            <input class="form-check-input" id="settings-myaccount-logout-after-purchase" type="checkbox" name="logout_after_purchase" {% if authuser.logout_after_purchase %} checked="checked" {% endif %}>
+            <label class="form-check-label" for="settings-myaccount-logout-after-purchase">Logout after purchase</label>
+          </div>
+        </div>
       </div>
-
-      <div class="form-check">
-      <input class="form-check-input" id="settings-myaccount-logout-after-purchase" type="checkbox" name="logout_after_purchase" {% if authuser.logout_after_purchase %} checked="checked" {% endif %}/>
-      <label class="form-check-label" for="settings-myaccount-logout-after-purchase">Logout after purchase</label>
+      <div class="row g-2">
+        <div class="col">
+          <input class="btn btn-primary" type="submit" value="Save changes">
+        </div>
       </div>
-
-      <input class="btn btn-primary" type="submit" value="Save changes" />
     </form>
 
     <h2>Avatar</h2>