Added client to call backend authentication logic

src/views/LoginView.vue

@@ -1,47 +1,68 @@
 <template>
-    <div class="max-w-7x1 max-auto grid grid-cols-2 gap-4">
-        <div class="main-left">
-            <div class="p-12 bg-white border border-gray-200 rounded-lg">
-                <h1 class="mb-6 text-2xl font-bold">Log in</h1>
+    <v-row align="center" justify="center">
+        <v-col cols="4">
+            <v-container>
+                <v-card>
+                <v-toolbar color="primary" :dark="true">
+                    <v-toolbar-title>Login</v-toolbar-title>
+                </v-toolbar>
+                <v-card-text>
+                    <v-form>
+                    <v-text-field prepend-icon="person" type="text" v-model="user.email" label="E-mail"></v-text-field>
+                    <v-text-field
+                        prepend-icon="lock"
+                        type="password"
+                        v-model="user.password"
+                        label="password"
+                    ></v-text-field>
+                    </v-form>
+                    <v-snackbar v-model="errorSnackBar">
+                        Email ou mot de passe invalide.
+                        <template v-slot:actions>
+                            <v-btn color="red" variant="text" @click="errorSnackBar = false">
+                            Fermer
+                            </v-btn>
+                        </template>
+                    </v-snackbar>
+                </v-card-text>
+                <v-card-actions>
+                    <div class="flex-grow-1"></div>
+                    <v-btn color="primary" @click="login">Login</v-btn>
+                </v-card-actions>
+                </v-card>
+                <v-btn color="red" @click="goHome()">Continuer sans se connecter</v-btn>
 
-                <p class="mb-6 texte-gray-500"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
-                    took a galley of type and scrambled it to make a type specimen book. It has survived not only five
-                    centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
-                    popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
-                    recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
+        </v-container>
+        </v-col>
+    </v-row>
+      
+</template>
 
-                <p class="font-bold"> Don't have an account ? <RouterLink :to="{ 'name': 'signup' }" class="underline">Click
-                        here</RouterLink> to create one! </p>
-            </div>
-        </div>
+<script setup>
+import { useAuthStore } from '@/plugins/store/authStore';
+import { useClient } from '@/plugins/clientPlugin'
+import { ref } from 'vue';
+import { useRouter } from 'vue-router'
+const authStore = useAuthStore();
+const client = useClient();
+const router = useRouter()
 
-        <div class="main-right">
-            <div class="p-12 bg-white border border-gray-200 rounded-lg">
-                <form class="space-y-6">
+let user = ref({});
 
-                    <div>
-                        <label>E-mail</label> <br>
-                        <input type="email" placeholder="Your e-mail adress"
-                            class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
+let errorSnackBar = ref(false);
 
-                    </div>
+const goHome = () => {
+    router.push('/');
+}
 
-                    <div>
-                        <label>Password</label> <br>
-                        <input type="password" placeholder="Your password"
-                            class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
+async function login(){
+    try {
+        await authStore.login(client, user.value.email, user.value.password)
+        router.push('/');
+    } catch (error) {
+        console.log(error);
+        errorSnackBar.value = true;
+    }
+}
 
-                    </div>
-
-
-                    <div>
-                        <button class="py-4 px-6 bg-purple-600 text-white rounded-lg"> Log in</button>
-                    </div>
-
-                </form>
-            </div>
-        </div>
-
-    </div>
-</template>
+</script>