diff --git a/src/views/ProfileCreationView.vue b/src/views/ProfileCreationView.vue index 315c9cb5479a8a4d01e7a8820ab6bd6d988fe4fe..84ee995a09140ac6ca952033bb143435d0bdbc9b 100644 --- a/src/views/ProfileCreationView.vue +++ b/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