Moved userLogout() to composables

frontend/composables/user.ts

@@ -5,6 +5,10 @@ const userSchema = z.object({
     password: z.string().min(6),
 })
 
+const loggedInUserSchema = z.object({
+    name: z.string(),
+})
+
 const userLogin = async (email: String, password: String) => {
     await getUser()
     if (useUser().value) return
@@ -32,10 +36,11 @@ const getUser = async () => {
         })
 }
 
-const loggedInUserSchema = z.object({
-	name: z.string(),
-})
+const userLogout = async () => {
+    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

@@ -31,11 +31,6 @@ const login = async () => {
     setTimeout(() => (isSigningIn.value = false), 500)
 }
 
-const logoutAxios = async () => {
-	await request.post('/logout')
-	user.value = ''
-}
-
 watch(
     () => user.value,
     () => {
@@ -45,43 +40,28 @@ watch(
 </script>
 
 <template>
-	<div>
+    <div class="absolute flex h-screen w-screen items-center justify-center">
         <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>
-			<input
-				type="text"
-				v-model="userCredential.email"
-				class="w-full rounded-md border border-lightgray p-2" />
-			<span
-				v-if="errors.email"
-				class="w-full text-red-400">
+            <input type="text" v-model="userCredential.email" class="w-full rounded-md border border-lightgray p-2" />
+            <span v-if="errors.email" class="w-full text-red-400">
                 {{ errors.email }}
             </span>
 
             <label class="mt-2 w-full"> Password </label>
-			<input
-				type="password"
-				v-model="userCredential.password"
+            <input type="password" v-model="userCredential.password"
                 class="w-full rounded-md border border-lightgray p-2" />
-			<span
-				v-if="errors.password"
-				class="w-full text-red-400">
+            <span v-if="errors.password" class="w-full text-red-400">
                 {{ errors.password }}
             </span>
 
-			<div
-				v-if="errors.user"
-				class="mt-4 text-red-400">
+            <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">
-				<Icon
-					v-if="isSigningIn"
-					name="loading" />
+            <button @click="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>
             </button>
         </div>