From c2a560e2edc08fc80a47d86d42171015db5b7b37 Mon Sep 17 00:00:00 2001
From: Bert Verhelst <verhelstbert@gmail.com>
Date: Fri, 1 Oct 2021 14:57:31 +0200
Subject: [PATCH 1/2] fix(setup): increase left padding input fields + avoid
 clipping

---
 src/pages/Setup.vue | 45 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/pages/Setup.vue b/src/pages/Setup.vue
index 7966f9e9b..5a4f836f5 100644
--- a/src/pages/Setup.vue
+++ b/src/pages/Setup.vue
@@ -46,8 +46,8 @@
 </template>
 
 <script>
-import { useToast } from "vue-toastification"
-const toast = useToast()
+import { useToast } from "vue-toastification";
+const toast = useToast();
 
 export default {
     data() {
@@ -56,7 +56,7 @@ export default {
             username: "",
             password: "",
             repeatPassword: "",
-        }
+        };
     },
     watch: {
         "$i18n.locale"() {
@@ -66,7 +66,7 @@ export default {
     mounted() {
         this.$root.getSocket().emit("needSetup", (needSetup) => {
             if (! needSetup) {
-                this.$router.push("/")
+                this.$router.push("/");
             }
         });
     },
@@ -75,31 +75,30 @@ export default {
             this.processing = true;
 
             if (this.password !== this.repeatPassword) {
-                toast.error("Repeat password do not match.")
+                toast.error("Repeat password do not match.");
                 this.processing = false;
                 return;
             }
 
             this.$root.getSocket().emit("setup", this.username, this.password, (res) => {
                 this.processing = false;
-                this.$root.toastRes(res)
+                this.$root.toastRes(res);
 
                 if (res.ok) {
                     this.processing = true;
 
-                    this.$root.login(this.username, this.password, "", (res) => {
+                    this.$root.login(this.username, this.password, "", () => {
                         this.processing = false;
-                        this.$router.push("/")
-                    })
+                        this.$router.push("/");
+                    });
                 }
-            })
+            });
         },
     },
-}
+};
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
 .form-container {
     display: flex;
     align-items: center;
@@ -107,6 +106,26 @@ export default {
     padding-bottom: 40px;
 }
 
+.form-floating {
+    > .form-select {
+        padding-left: 1.3rem;
+        padding-top: 1.525rem;
+        line-height: 1.35;
+
+        ~ label {
+            padding-left: 1.3rem;
+        }
+    }
+
+    > label {
+        padding-left: 1.3rem;
+    }
+
+    > .form-control {
+        padding-left: 1.3rem;
+    }
+}
+
 .form {
 
     width: 100%;

From ee830621dda92e9e9fc9c8f49f32f28da45cb0ff Mon Sep 17 00:00:00 2001
From: Bert Verhelst <verhelstbert@gmail.com>
Date: Fri, 1 Oct 2021 15:07:05 +0200
Subject: [PATCH 2/2] fix(login): fix the same padding issues for the login
 screen

---
 src/components/Login.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Login.vue b/src/components/Login.vue
index ca36fdb9f..8a20fbdbc 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -52,7 +52,7 @@ export default {
             token: "",
             res: null,
             tokenRequired: false,
-        }
+        };
     },
     methods: {
         submit() {
@@ -60,21 +60,20 @@ export default {
 
             this.$root.login(this.username, this.password, this.token, (res) => {
                 this.processing = false;
-                console.log(res)
+                console.log(res);
 
                 if (res.tokenRequired) {
                     this.tokenRequired = true;
                 } else {
                     this.res = res;
                 }
-            })
+            });
         },
     },
-}
+};
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
 .form-container {
     display: flex;
     align-items: center;
@@ -82,8 +81,17 @@ export default {
     padding-bottom: 40px;
 }
 
-.form {
+.form-floating {
+    > label {
+        padding-left: 1.3rem;
+    }
 
+    > .form-control {
+        padding-left: 1.3rem;
+    }
+}
+
+.form {
     width: 100%;
     max-width: 330px;
     padding: 15px;