task 9 done

src/router/index.js

@@ -1,7 +1,7 @@
 import { createWebHistory, createRouter } from 'vue-router'
 import LogInView from '../views/LogIn.vue'
 import UserProfileView from '../views/UserProfile.vue'
-import { useAuthUser } from '@/composables/useAuthUser'
+import { useAuthUser } from '@/stores/useAuthUser'
 
 const routes = [
     { path: '/', component: UserProfileView, meta: { requiresAuth: true } },
@@ -14,8 +14,9 @@ export const router = createRouter({
 })
 
 router.beforeEach((to) => {
-    const { user } = useAuthUser()
-    if (to.meta.requiresAuth && !user.value) {
+    const { isLoggedIn } = useAuthUser()()
+
+    if (to.meta.requiresAuth && !isLoggedIn) {
         return '/login'
     }
 })

src/stores/useAuthUser.ts

@@ -0,0 +1,59 @@
+import { defineStore } from 'pinia'
+import { useRouter } from 'vue-router'
+
+interface User {
+    id: number
+    username: string
+    name: string
+    avatar: string
+}
+
+interface UserToCheck extends User {
+    password: string
+}
+
+interface Payload {
+    username: string
+    password: string
+}
+
+export const useAuthUser = () => {
+    const router = useRouter()
+
+    return defineStore('user', {
+        state: (): { user: User | null } => ({
+            user: null,
+        }),
+        getters: {
+            isLoggedIn: (state) => !!state.user,
+        },
+        actions: {
+            async login(payload: Payload): Promise<void> {
+                if (this.isLoggedIn) return
+
+                const { username, password } = payload
+                const res = await fetch('/api/users.json')
+                const users = await res.json()
+
+                this.user = users.find(
+                    (record: UserToCheck) =>
+                        record.username === username &&
+                        record.password === password,
+                )
+
+                if (!this.user) {
+                    throw new Error('Invalid username or password')
+                }
+
+                await router.push('/')
+            },
+            async logout(): Promise<void> {
+                if (!this.isLoggedIn) return
+
+                this.user = null
+
+                await router.push('/login')
+            },
+        },
+    })
+}

src/views/LogIn.vue

@@ -1,16 +1,16 @@
 <script setup>
-import { useAuthUser } from '@/composables/useAuthUser'
+import { useAuthUser } from '@/stores/useAuthUser'
 import { useRouter } from 'vue-router'
 import { ref } from 'vue'
 
 const router = useRouter()
-const { login } = useAuthUser()
+const { login } = useAuthUser()()
 
 const error = ref('')
 
 const form = ref({
-    username: '',
-    password: '',
+    username: 'johndoe',
+    password: 'vueisawesome',
 })
 
 async function handleSubmit() {

src/views/UserProfile.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { useAuthUser } from '@/composables/useAuthUser'
-const { user, logout } = useAuthUser()
+import { useAuthUser } from '@/stores/useAuthUser'
+
+const { isLoggedIn, user, logout } = useAuthUser()()
 </script>
 <template>
-    <div class="card" v-if="user">
+    <div class="card" v-if="isLoggedIn">
         <div class="card-body">
             <div class="flex items-center gap-5">
                 <div class="avatar">