From 5f67e82b8c091f6544514b147e0de24ca9561cad Mon Sep 17 00:00:00 2001
From: Daniel Schadt <kingdread@gmx.de>
Date: Sat, 2 Jul 2022 00:47:59 +0200
Subject: also update style of account creation form

---
 fietsboek/templates/create_account.jinja2 | 62 ++++++++++++++++++-------------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/fietsboek/templates/create_account.jinja2 b/fietsboek/templates/create_account.jinja2
index cf52203..17f96a9 100644
--- a/fietsboek/templates/create_account.jinja2
+++ b/fietsboek/templates/create_account.jinja2
@@ -3,43 +3,55 @@
 <div class="container">
   <h1>{{ _("page.create_account.title") }}</h1>
   <form method="POST" action="{{ request.route_path('create-account') }}" class="needs-validation" novalidate>
-    <div class="row mb-3">
-      <label for="inputName" class="col-sm-3 col-form-label">{{ _("page.create_account.email") }}</label>
-      <div class="col-sm-9">
-        <input type="email" class="form-control" id="inputEmail" name="email" required>
-        <div class="invalid-feedback">
-          {{ _("page.create_account.email_invalid") }}
+    <div class="row mb-3 justify-content-center">
+      <div class="col-lg-5">
+        <div class="form-floating">
+          <input type="email" class="form-control" id="inputEmail" name="email" required placeholder="x">
+          <div class="invalid-feedback">
+            {{ _("page.create_account.email_invalid") }}
+          </div>
+          <label for="inputName">{{ _("page.create_account.email") }}</label>
         </div>
       </div>
     </div>
-    <div class="row mb-3">
-      <label for="inputName" class="col-sm-3 col-form-label">{{ _("page.create_account.name") }}</label>
-      <div class="col-sm-9">
-        <input type="text" class="form-control" id="inputName" name="name" onchange="checkNameValidity('#inputName')" required>
-        <div class="invalid-feedback">
-          {{ _("page.create_account.name_invalid") }}
+    <div class="row mb-3 justify-content-center">
+      <div class="col-lg-5">
+        <div class="form-floating">
+          <input type="text" class="form-control" id="inputName" name="name" onchange="checkNameValidity('#inputName')" required placeholder="x">
+          <div class="invalid-feedback">
+            {{ _("page.create_account.name_invalid") }}
+          </div>
+          <label for="inputName">{{ _("page.create_account.name") }}</label>
         </div>
       </div>
     </div>
-    <div class="row mb-3">
-      <label for="inputPassword" class="col-sm-3 col-form-label">{{ _("page.create_account.password") }}</label>
-      <div class="col-sm-9">
-        <input type="password" class="form-control" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" required>
-        <div class="invalid-feedback">
-          {{ _("page.create_account.password_invalid") }}
+    <div class="row mb-3 justify-content-center">
+      <div class="col-lg-5">
+        <div class="form-floating">
+          <input type="password" class="form-control" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" required placeholder="x">
+          <div class="invalid-feedback">
+            {{ _("page.create_account.password_invalid") }}
+          </div>
+          <label for="inputPassword">{{ _("page.create_account.password") }}</label>
         </div>
       </div>
     </div>
-    <div class="row mb-3">
-      <label for="repeatPassword" class="col-sm-3 col-form-label">{{ _("page.create_account.repeat_password") }}</label>
-      <div class="col-sm-9">
-        <input type="password" class="form-control" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" required>
-        <div class="invalid-feedback">
-          {{ _("page.create_account.password_must_match") }}
+    <div class="row mb-3 justify-content-center">
+      <div class="col-lg-5">
+        <div class="form-floating">
+          <input type="password" class="form-control" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" required placeholder="x">
+          <div class="invalid-feedback">
+            {{ _("page.create_account.password_must_match") }}
+          </div>
+          <label for="repeatPassword">{{ _("page.create_account.repeat_password") }}</label>
         </div>
       </div>
     </div>
-    <button type="submit" class="btn btn-primary"><i class="bi bi-person-plus"></i> {{ _("page.create_account.create") }}</button>
+    <div class="row justify-content-center">
+      <div class="col-auto">
+        <button type="submit" class="btn btn-primary"><i class="bi bi-person-plus"></i> {{ _("page.create_account.create") }}</button>
+      </div>
+    </div>
   </form>
 </div>
 {% endblock %}
-- 
cgit v1.2.3