From 1b360cafbb3d97c4c1670020015d84d86b0ff7af Mon Sep 17 00:00:00 2001
From: Erik Borgeteien Hansen <erik@erikbhan.no>
Date: Thu, 21 Apr 2022 11:36:59 +0200
Subject: [PATCH] make register page mobile friendlier

---
 src/components/RegisterFormComponent.vue | 40 ++++++++++++++----------
 src/views/RegisterView.vue               |  5 ++-
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/RegisterFormComponent.vue b/src/components/RegisterFormComponent.vue
index 61ff4d9..84dbf8d 100644
--- a/src/components/RegisterFormComponent.vue
+++ b/src/components/RegisterFormComponent.vue
@@ -1,20 +1,26 @@
 <template>
   <v-form ref="form" v-model="valid" lazy-validation>
-    <v-text-field
-      v-model="firstName"
-      :counter="32"
-      :rules="firstNameRules"
-      label="Fornavn"
-      required
-    ></v-text-field>
+    <v-container class="grey lighten-5">
+      <v-row>
+        <v-text-field
+          class="pr-2"
+          v-model="firstName"
+          :counter="32"
+          :rules="firstNameRules"
+          label="Fornavn"
+          required
+        ></v-text-field>
 
-    <v-text-field
-      v-model="lastName"
-      :counter="32"
-      :rules="lastNameRules"
-      label="Etternavn"
-      required
-    ></v-text-field>
+        <v-text-field
+          class="pl-2"
+          v-model="lastName"
+          :counter="32"
+          :rules="lastNameRules"
+          label="Etternavn"
+          required
+        ></v-text-field>
+      </v-row>
+    </v-container>
 
     <v-text-field
       v-model="email"
@@ -71,7 +77,7 @@
       >Registrer</v-btn
     >
 
-    <v-btn color="error" class="mr-4" @click="reset">Tøm alle felter</v-btn>
+    <v-btn color="error" class="mr-4" @click="reset">Tøm felter</v-btn>
   </v-form>
 </template>
 <script>
@@ -100,7 +106,8 @@ export default {
     password: "",
     passwordRules: [
       (v) => !!v || "Passord er påkrevd",
-      (v) => (v && v.length <= 32) || "Passord må være mindre enn 32 bokstaver",
+      (v) => (v && v.length <= 32) || "Passord må være mindre enn 32 tegn",
+      (v) => (v && v.length >= 8) || "Passord må være større enn 8 tegn",
     ],
     // confirmPassword: "",
     // confirmPasswordRules: [
@@ -126,6 +133,7 @@ export default {
     reset() {
       this.$refs.form.reset();
       this.$refs.form.resetValidation();
+      this.valid = true;
     },
   },
 };
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
index c68716a..9d2ee69 100644
--- a/src/views/RegisterView.vue
+++ b/src/views/RegisterView.vue
@@ -1,5 +1,5 @@
 <template>
-  <register-form-component id="form" />
+  <register-form-component id="form" class="pa-8" />
 </template>
 
 <script>
@@ -14,8 +14,7 @@ export default {
 
 <style scoped>
 #form {
-  max-width: 80%;
+  max-width: 600px;
   margin: auto;
-  margin-top: 5%;
 }
 </style>
-- 
GitLab