Added frontend user sign up

frontend/composables/user.ts

@@ -23,6 +23,23 @@ const userLogin = async (email: String, password: String) => {
     await getUser()
 }
 
+const newUserSchema = z.object({
+    name: z.string(),
+    email: z.string().email(),
+    password: z.string().min(6),
+    password_confirmation: z.string().min(6),
+})
+
+const userSignup = async (data: unknown) => {
+    const newUser = newUserSchema.safeParse(data)
+
+    if (!newUser.success) return newUser.error.format()
+
+    await request.post('/register', newUser.data)
+
+    await getUser()
+}
+
 const getUser = async () => {
     await request
         .get('/api/user')
@@ -43,4 +60,4 @@ const userLogout = async () => {
 
 const useUser = () => useState<String>('user', () => '')
 
-export { userLogin, useUser, getUser, userLogout }
+export { userLogin, useUser, getUser, userLogout, userSignup }

frontend/pages/login/index.vue

@@ -6,11 +6,14 @@ definePageMeta({
 const user = useUser()
 
 const userCredential = reactive({
+    name: '',
     email: '',
     password: '',
+    password_confirmation: '',
 })
 
 const isSigningIn = ref<Boolean>(false)
+const isSignUp = ref<Boolean>(false)
 
 const errors = reactive({
     email: '',
@@ -31,6 +34,16 @@ const login = async () => {
     setTimeout(() => (isSigningIn.value = false), 500)
 }
 
+const toggleSignup = () => {
+    isSignUp.value = !isSignUp.value
+}
+
+const signup = async () => {
+    isSigningIn.value = true
+    const error = await userSignup(userCredential)
+    setTimeout(() => (isSigningIn.value = false), 500)
+}
+
 watch(
     () => user.value,
     () => {
@@ -43,6 +56,11 @@ watch(
     <div class="absolute flex h-screen w-screen items-center justify-center">
         <div
             class="flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
+            <label v-if="isSignUp" class="mt-2 w-full">
+                Name
+            </label>
+            <input v-if="isSignUp" type="text" v-model="userCredential.name" class="w-full rounded-md" />
+
             <label class="mt-2 w-full"> Email </label>
             <input type="text" v-model="userCredential.email" class="w-full rounded-md" />
             <span v-if="errors.email" class="w-full text-red-400">
@@ -55,14 +73,29 @@ watch(
                 {{ errors.password }}
             </span>
 
+            <label v-if="isSignUp" class="mt-2 w-full">
+                Password Confirmation
+            </label>
+            <input v-if="isSignUp" type="password" v-model="userCredential.password_confirmation"
+                class="w-full rounded-md" />
+
             <div v-if="errors.user" class="mt-4 text-red-400">
                 {{ errors.user }}
             </div>
 
-            <button @click="login()" class="mt-6 flex gap-2 rounded-full border border-lightgray bg-blue-500 px-6 py-2">
+            <button @click="isSignUp ? signup() : login()"
+                class="mt-6 flex gap-2 rounded-full border border-lightgray bg-blue-500 px-6 py-2">
                 <Icon v-if="isSigningIn" name="loading" />
-                <div> Sign In </div>
+                <div> {{ isSignUp ? 'Sign up' : 'Sign in' }} </div>
             </button>
+
+            <div @click="toggleSignup()" class="mt-4 text-blue-500 underline">
+                {{
+                    isSignUp
+                    ? 'Already have an account? Sign in'
+                    : 'No account? Sign up'
+                }}
+            </div>
         </div>
     </div>
 </template>