feat(register): register form now includes all necessary user details and input validation

src/components/FormRegister.vue

 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useUserStore } from '@/stores/userStore'
 
+const firstname = ref<string>('')
+const lastname = ref<string>('')
+const email = ref<string>('')
 const username = ref<string>('')
 const password = ref<string>('')
+const confirm = ref<string>('')
+
 const showPassword = ref<boolean>(false)
 const errorMessage = ref<string>('')
 
 const userStore = useUserStore()
 
 const submitForm = () => {
-    userStore.register(username.value, password.value)
+    userStore.register(firstname.value, lastname.value, email.value, username.value, password.value)
 }
 
 const toggleShowPassword = () => {
     showPassword.value = !showPassword.value
 }
 
+const isEmailValid = computed(() => {
+    return /\S+@\S+\.\S+/.test(email.value)
+})
+
+const isFormInvalid = computed(() => {
+    return (
+        '' == firstname.value ||
+        '' == lastname.value ||
+        '' == email.value ||
+        !isEmailValid.value ||
+        '' == username.value ||
+        '' == password.value ||
+        '' == confirm.value ||
+        password.value != confirm.value
+    )
+})
+
 watch(
     () => userStore.errorMessage,
     (newValue: string) => {
@@ -28,35 +50,74 @@ watch(
 <template>
     <div class="flex flex-col justify-center gap-5 w-full">
         <div class="flex flex-col">
-            <p class="mx-4">Brukernavn</p>
+            <p class="mx-4">Fornavn*</p>
+            <input
+                v-model="firstname"
+                :class="{ 'bg-green-100': '' !== firstname.valueOf() }"
+                class="bg-red-100"
+                name="firstname"
+                placeholder="Skriv inn fornavn"
+                type="text"
+            />
+        </div>
+        <div class="flex flex-col">
+            <p class="mx-4">Etternavn*</p>
+            <input
+                v-model="lastname"
+                :class="{ 'bg-green-100': '' !== lastname.valueOf() }"
+                class="bg-red-100"
+                name="lastname"
+                placeholder="Skriv inn etternavn"
+                type="text"
+            />
+        </div>
+        <div class="flex flex-col">
+            <p class="mx-4">E-post*</p>
+            <input
+                v-model="email"
+                :class="{ 'bg-green-100': isEmailValid }"
+                class="bg-red-100"
+                name="email"
+                placeholder="Skriv inn e-post"
+                type="text"
+            />
+        </div>
+        <div class="flex flex-col">
+            <p class="mx-4">Brukernavn*</p>
             <input
                 v-model="username"
                 name="username"
                 placeholder="Skriv inn brukernavn"
                 type="text"
+                :class="{ 'bg-green-100': '' !== username.valueOf() }"
+                class="bg-red-100"
             />
         </div>
         <div class="flex flex-col">
-            <p class="mx-4">Passord</p>
+            <p class="mx-4">Passord*</p>
             <div class="relative">
                 <input
                     name="password"
                     v-model="password"
                     :type="showPassword ? 'text' : 'password'"
-                    class="w-full"
                     placeholder="Skriv inn passord"
+                    class="w-full"
                 />
                 <button class="absolute right-0 top-1 bg-transparent" @click="toggleShowPassword">
                     {{ showPassword ? '🔓' : '🔒' }}
                 </button>
             </div>
+            <input
+                v-model="confirm"
+                :class="{ 'bg-green-100': password == confirm && '' !== confirm.valueOf() }"
+                class="mt-2 bg-red-100"
+                name="confirm"
+                placeholder="Bekreft passord"
+                type="password"
+            />
         </div>
         <div class="flex flex-row gap-5">
-            <button
-                :disabled="'' == username.valueOf() || '' == password.valueOf()"
-                class="grow-0"
-                @click="submitForm"
-            >
+            <button :disabled="isFormInvalid" class="grow-0" @click="submitForm">
                 Registrer deg
             </button>
             <p>{{ errorMessage }}</p>
@@ -64,4 +125,4 @@ watch(
     </div>
 </template>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>

src/stores/userStore.ts

@@ -6,22 +6,37 @@ import router from '@/router'
 
 export const useUserStore = defineStore('user', () => {
     const defaultUser: User = {
+        firstname: 'Firstname',
+        lastname: 'Lastname',
         username: 'Username'
     }
 
     const user = ref<User>(defaultUser)
     const errorMessage = ref<string>('')
 
-    async function register(username: string, password: string) {
+    async function register(
+        firstname: string,
+        lastname: string,
+        email: string,
+        username: string,
+        password: string
+    ) {
         try {
             const response = await axios.post(`http://localhost:8080/auth/register`, {
+                firstname: firstname,
+                lastname: lastname,
+                email: email,
                 username: username,
                 password: password
             })
 
             sessionStorage.setItem('accessToken', response.data.accessToken)
             localStorage.setItem('refreshToken', response.data.refreshToken)
+
+            user.value.firstname = firstname
+            user.value.lastname = lastname
             user.value.username = username
+
             await router.push('/')
         } catch (error) {
             const axiosError = error as AxiosError

src/types/user.ts

 export interface User {
+    firstname: string
+    lastname: string
     username: string
 }

src/views/RegisterLoginView.vue

@@ -10,7 +10,6 @@ const isLogin = ref<boolean>(true)
     <div class="flex flex-col items-center gap-5 justify-center sm:flex-row">
         <div class="border-2 border-black flex items-center">
             <h1>Dette er et bilde</h1>
-            <button class="border border-black">Test</button>
         </div>
         <div class="flex flex-col">
             <div class="flex flex-row gap-5 justify-center">