Files
social-media/src/views/LoginView.vue
2024-03-11 22:08:24 -04:00

68 lines
2.1 KiB
Vue

<template>
<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>
</v-container>
</v-col>
</v-row>
</template>
<script setup>
import { useClient } from '@/plugins/clientPlugin';
import { useAuthStore } from '@/plugins/store/authStore';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const authStore = useAuthStore();
const client = useClient();
const router = useRouter()
let user = ref({});
let errorSnackBar = ref(false);
const goHome = () => {
router.push('/');
}
async function login(){
try {
await authStore.login(client, user.value.email, user.value.password)
router.push('/');
} catch (error) {
console.log(error);
errorSnackBar.value = true;
}
}
</script>