Moved userLogout() to composables

frontend/composables/user.ts

@@ -1,41 +1,46 @@
 import { z } from 'zod'
 
 const userSchema = z.object({
-	email: z.string().email(),
+    email: z.string().email(),
-	password: z.string().min(6),
+    password: z.string().min(6),
+})
+
+const loggedInUserSchema = z.object({
+    name: z.string(),
 })
 
 const userLogin = async (email: String, password: String) => {
-	await getUser()
+    await getUser()
-	if (useUser().value) return
+    if (useUser().value) return
 
-	const user = userSchema.safeParse({ email, password })
+    const user = userSchema.safeParse({ email, password })
 
-	if (!user.success) return user.error.format()
+    if (!user.success) return user.error.format()
 
-	await request.get('/sanctum/csrf-cookie')
+    await request.get('/sanctum/csrf-cookie')
-	await request.post('/login', user.data)
+    await request.post('/login', user.data)
 
-	await getUser()
+    await getUser()
 }
 
 const getUser = async () => {
-	await request
+    await request
-		.get('/api/user')
+        .get('/api/user')
-		.then(({ data }) => {
+        .then(({ data }) => {
-			const parsed = loggedInUserSchema.safeParse(data)
+            const parsed = loggedInUserSchema.safeParse(data)
-			if (!parsed.success) return
+            if (!parsed.success) return
-			useUser().value = parsed.data.name
+            useUser().value = parsed.data.name
-		})
+        })
-		.catch((error) => {
+        .catch((error) => {
-			console.log(error)
+            console.log(error)
-		})
+        })
 }
 
-const loggedInUserSchema = z.object({
+const userLogout = async () => {
-	name: z.string(),
+    await request.post('/logout')
-})
+    useUser().value = ''
+}
 
 const useUser = () => useState<String>('user', () => '')
 
-export { userLogin, useUser, getUser }
+export { userLogin, useUser, getUser, userLogout }

frontend/pages/login/index.vue

@@ -1,89 +1,69 @@
 <script setup lang="ts">
 definePageMeta({
-	middleware: ['auth'],
+    middleware: ['auth'],
 })
 
 const user = useUser()
 
 const userCredential = reactive({
-	email: '',
+    email: '',
-	password: '',
+    password: '',
 })
 
 const isSigningIn = ref<Boolean>(false)
 
 const errors = reactive({
-	email: '',
+    email: '',
-	password: '',
+    password: '',
-	user: '',
+    user: '',
 })
 
 const login = async () => {
-	isSigningIn.value = true
+    isSigningIn.value = true
-	const error = await userLogin(userCredential.email, userCredential.password)
+    const error = await userLogin(userCredential.email, userCredential.password)
 
-	if (error) {
+    if (error) {
-		errors.email = error.email ? error.email._errors.join(',') : ''
+        errors.email = error.email ? error.email._errors.join(',') : ''
-		errors.password = error.password ? error.password._errors.join(',') : ''
+        errors.password = error.password ? error.password._errors.join(',') : ''
-		// errors.user = error.user ? error.user._errors.join(',') : ''
+        // errors.user = error.user ? error.user._errors.join(',') : ''
-	}
+    }
 
-	setTimeout(() => (isSigningIn.value = false), 500)
+    setTimeout(() => (isSigningIn.value = false), 500)
-}
-
-const logoutAxios = async () => {
-	await request.post('/logout')
-	user.value = ''
 }
 
 watch(
-	() => user.value,
+    () => user.value,
-	() => {
+    () => {
-		if (user.value) useRouter().push('/')
+        if (user.value) useRouter().push('/')
-	}
+    }
 )
 </script>
 
 <template>
-	<div>
+    <div class="absolute flex h-screen w-screen items-center justify-center">
-		<div
+        <div
-			class="absolute flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
+            class="flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
-			<label class="mt-2 w-full"> Email </label>
+            <label class="mt-2 w-full"> Email </label>
-			<input
+            <input type="text" v-model="userCredential.email" class="w-full rounded-md border border-lightgray p-2" />
-				type="text"
+            <span v-if="errors.email" class="w-full text-red-400">
-				v-model="userCredential.email"
+                {{ errors.email }}
-				class="w-full rounded-md border border-lightgray p-2" />
+            </span>
-			<span
-				v-if="errors.email"
-				class="w-full text-red-400">
-				{{ errors.email }}
-			</span>
 
-			<label class="mt-2 w-full"> Password </label>
+            <label class="mt-2 w-full"> Password </label>
-			<input
+            <input type="password" v-model="userCredential.password"
-				type="password"
+                class="w-full rounded-md border border-lightgray p-2" />
-				v-model="userCredential.password"
+            <span v-if="errors.password" class="w-full text-red-400">
-				class="w-full rounded-md border border-lightgray p-2" />
+                {{ errors.password }}
-			<span
+            </span>
-				v-if="errors.password"
-				class="w-full text-red-400">
-				{{ errors.password }}
-			</span>
 
-			<div
+            <div v-if="errors.user" class="mt-4 text-red-400">
-				v-if="errors.user"
+                {{ errors.user }}
-				class="mt-4 text-red-400">
+            </div>
-				{{ errors.user }}
-			</div>
 
-			<button
+            <button @click="login()" class="mt-6 flex gap-2 rounded-full border border-lightgray bg-blue-500 px-6 py-2">
-				@click="login()"
+                <Icon v-if="isSigningIn" name="loading" />
-				class="mt-6 flex gap-2 rounded-full border border-lightgray bg-blue-500 px-6 py-2">
+                <div> Sign In </div>
-				<Icon
+            </button>
-					v-if="isSigningIn"
+        </div>
-					name="loading" />
+    </div>
-				<div> Sign In </div>
-			</button>
-		</div>
-	</div>
 </template>