From 3f5a074fefbf145cfe3bf7365939695d247218ff Mon Sep 17 00:00:00 2001
From: George Lacey <git@george.ooo>
Date: Mon, 10 May 2021 00:32:57 +0100
Subject: [PATCH] Improve login form layout and aesthetic

---
 borgweb/templates/registration/login.html | 56 ++++++++++++++++++++---
 1 file changed, 49 insertions(+), 7 deletions(-)
diff --git a/borgweb/templates/registration/login.html b/borgweb/templates/registration/login.html
index 5eb1164..dc86468 100644
--- a/borgweb/templates/registration/login.html
+++ b/borgweb/templates/registration/login.html
@@ -3,15 +3,57 @@
 <head>
     <meta charset="UTF-8">
     <title>Login</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
+    <style>
+        html, body {
+            height: 100%;
+        }
+
+        body {
+            display: flex;
+            align-items: center;
+            padding-top: 40px;
+            padding-bottom: 40px;
+            background-color: aliceblue;
+            text-align: center;
+        }
+
+        .form-signin {
+            width: 100%;
+            max-width: 330px;
+            padding: 15px;
+            margin: auto;
+        }
+    </style>
 </head>
-<body>
+<body class="text-center">
 {% block content %}
-  <h2>Log In</h2>
-  <form method="post">
-    {% csrf_token %}
-    {{ form.as_p }}
-    <button type="submit">Log In</button>
-  </form>
+
+<main class="form-signin">
+    <form method="post p-4">
+        {% csrf_token %}
+        <!--    <img class="mb-4" src="" alt="" width="" height="">-->
+        <h1 class="h1 mb-4 fw-regular">Log in</h1>
+
+        <div class="form-floating my-2">
+            <input class="form-control" placeholder="Username" type="text" name="username" autofocus=""
+                   autocapitalize="none" autocomplete="username"
+                   maxlength="150" required="" id="{{ form.username.id_for_label }}">
+            <label for="{{ form.username.id_for_label }}">Username</label>
+
+        </div>
+        <div class="form-floating mb-4">
+            <input class="form-control" placeholder="Password" type="password" name="password"
+                   autocomplete="current-password" required=""
+                   id="{{ form.password.id_for_label }}">
+            <label for="{{ form.password.id_for_label }}">Password</label>
+        </div>
+
+        <button class="w-100 btn btn-lg btn-primary" type="submit">Log In</button>
+    </form>
+</main>
+
 {% endblock %}
 </body>
 </html>
\ No newline at end of file
