Implement authentication store using Pinia; create auth store with login,...

Implement authentication store using Pinia; create auth store with login, logout, and user fetching functionalities.

Update main entry point to reflect new store structure; change import path for auth store.

Add TypeScript support for Vue components; create shims-vue.d.ts for .vue file declarations.

Create Login and Register views with authentication logic; implement user login and registration forms with error handling.

Refactor HomeView to utilize authentication store; display user information and logout functionality based on authentication state.

frontend/src/stores/counter.ts

@@ -2,11 +2,11 @@ import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
+    const count = ref(0)
+    const doubleCount = computed(() => count.value * 2)
+    function increment() {
+        count.value++
+    }
 
-  return { count, doubleCount, increment }
+    return { count, doubleCount, increment }
 })

frontend/src/views/AboutView.vue

 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
+    <div class="about">
+        <h1>This is an about page</h1>
+    </div>
 </template>
 
 <style>
 @media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
+    .about {
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+    }
 }
 </style>

frontend/src/views/HomeView.vue

-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
+<script lang="ts">
+import { useAuthStore } from '../stores/auth'
+import { useRouter } from 'vue-router'
+
+export default {
+    setup() {
+        const authStore = useAuthStore()
+        const router = useRouter()
+
+        return {
+            authStore,
+            router,
+        }
+    },
+    methods: {
+        async logout() {
+            try {
+                await this.authStore.logout(this.$router)
+            } catch (error) {
+                console.error(error)
+            }
+        },
+    },
+    async mounted() {
+        await this.authStore.fetchUser()
+    },
+}
 </script>
 
 <template>
-  <main>
-    <TheWelcome />
-  </main>
+    <h1>Welcome to the home page</h1>
+    <div v-if="authStore.isAuthenticated">
+        <p>Hi there {{ authStore.user?.username }}!</p>
+        <p>You are logged in .</p>
+        <button @click="logout">Logout</button>
+    </div>
+    <p v-else>You are not logged in . <router-link to="/login"> Login </router-link></p>
 </template>

frontend/src/views/HomeViewOLD.vue

+<script setup lang="ts">
+import TheWelcome from '../components/TheWelcome.vue'
+</script>
+
+<template>
+    <main>
+        <TheWelcome />
+    </main>
+</template>

frontend/src/views/LoginView.vue

+<script lang="ts">
+import { useAuthStore } from '../stores/auth'
+
+export default {
+    setup() {
+        const authStore = useAuthStore()
+        return {
+            authStore,
+        }
+    },
+    data() {
+        return {
+            email: '',
+            password: '',
+            error: '',
+        }
+    },
+    methods: {
+        async login() {
+            await this.authStore.login(this.email, this.password, this.$router)
+            if (!this.authStore.isAuthenticated) {
+                this.error = 'Login failed. Please check your credentials.'
+            }
+        },
+        resetError() {
+            this.error = ''
+        },
+    },
+}
+</script>
+
+<template>
+    <div class="login">
+        <h1>Login</h1>
+        <form @submit.prevent="login">
+            <div>
+                <label for="email"> Email: </label>
+                <input v-model="email" id="email" type="text" required @input="resetError" />
+            </div>
+            <div>
+                <label for="password"> Password: </label>
+                <input
+                    v-model="password"
+                    id="password"
+                    type="password"
+                    required
+                    @input="resetError"
+                />
+            </div>
+            <button type="submit">Login</button>
+        </form>
+        <p v-if="error" class="error">{{ error }}</p>
+    </div>
+    <p v-if="error" class="error">{{ error }}</p>
+</template>

frontend/src/views/RegisterView.vue

+<script lang="ts">
+import { getCSRFToken } from '../stores/auth'
+
+export default {
+    data() {
+        return {
+            email: '',
+            password: '',
+            error: '',
+            success: '',
+        }
+    },
+    methods: {
+        async register() {
+            try {
+                const response = await fetch('http://localhost:8000/api/register', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': getCSRFToken(),
+                    },
+                    body: JSON.stringify({
+                        email: this.email,
+                        password: this.password,
+                    }),
+                    credentials: 'include',
+                })
+                const data = await response.json()
+                if (response.ok) {
+                    this.success = 'Registration successful! Please log in.'
+                    setTimeout(() => {
+                        this.$router.push('/login')
+                    }, 1000)
+                } else {
+                    this.error = data.error || 'Registration failed'
+                }
+            } catch (err) {
+                this.error = 'An error occurred during registration: ' + err
+            }
+        },
+    },
+}
+</script>
+
+<template>
+    <div>
+        <h2>Register</h2>
+        <form @submit.prevent="register">
+            <div>
+                <label for="email"> Email: </label>
+                <input v-model="email" id="email" type="email" required />
+            </div>
+            <div>
+                <label for="password"> Password: </label>
+                <input v-model="password" id="password" type="password" required />
+            </div>
+            <button type="submit">Register</button>
+        </form>
+        <p v-if="error">{{ error }}</p>
+        <p v-if="success">{{ success }}</p>
+    </div>
+</template>