småfikser i brukerflyt ved å opprette profil

src/views/ProfileCreationView.vue

@@ -12,7 +12,9 @@ export default {
                 profileImageUrl: "",
                 name: "",
                 isRestricted: false
-            }
+            },
+            pin: "",
+            errorMsg: ""
         };
     },
     methods: {
@@ -25,15 +27,21 @@ export default {
 
                     if (typeof image === 'undefined') {
                         this.authStore.profile = profile;
+                        this.authStore.profiles.push(profile);
                         router.push("/");
+                    } else {
+                        API.uploadProfileImage(image, id)
+                            .then((updatedProfile) => {
+                                this.authStore.profile = updatedProfile;
+                                this.authStore.profiles.push(profile);
+                                router.push("/");
+                            });
                     }
-                    API.uploadProfileImage(image, id)
-                        .then((updatedProfile) => {
-                            this.authStore.profile = updatedProfile;
-                            router.push("/");
-                        });
 
                 })
+                .catch(() => {
+                    this.errorMsg = "Oops! Dette navnet er allerede i bruk på en annen profil, bruk et annet navn"
+                })
         },
         updateImg() {
             let file = document.getElementById("profile_img").files[0];
@@ -68,9 +76,14 @@ export default {
             <input name="name" type="text" v-model="profile.name">
             <div class="check_container">
                 <label for="limited">Begrenset:</label>
-                <input type="checkbox" name="limited" id="limited">
+                <input type="checkbox" v-model="this.profile.isRestricted" name="limited" id="limited">
+            </div>
+            <div v-if="!this.profile.isRestricted" class="pincode-container">
+                <label for="pincode-field">PIN:</label>
+                <input id="pincode-field" type="tel" v-model="pin" maxlength="4" placeholder="0000" />
             </div>
         </form>
+        <p>{{ this.errorMsg }}</p>
         <button @click="submit">Opprett</button>
     </main>
 </template>
@@ -101,6 +114,10 @@ main {
     form {
         gap: $gap;
     }
+
+    p {
+        max-width: 20em;
+    }
 }
 
 #profile_img_label {
@@ -153,6 +170,21 @@ main {
     transition: all 350ms eases;
 }
 
+.pincode-container {
+    width: 100%;
+    display: flex;
+
+    input {
+        border-radius: .2em;
+        border: 1px solid black;
+        height: 50px;
+        width: 105px;
+        margin: 0 5px;
+        font-size: 38px;
+        padding: 5px;
+    }
+}
+
 form {
     display: flex;
     flex-direction: column;
@@ -166,7 +198,6 @@ button {
     border-radius: .5rem;
     background-color: $light-green;
 
-    color: white;
     font-weight: bold;
 }
 </style>
\ No newline at end of file