47 lines
1.5 KiB
Vue
47 lines
1.5 KiB
Vue
<script setup>
|
|
import { Button, InputText, Message } from 'primevue';
|
|
import { ref } from 'vue';
|
|
import { useAuthStore } from '@/store/auth';
|
|
import Loader from '@/components/Loader.vue';
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
const email = ref('')
|
|
const password = ref('')
|
|
|
|
const signin = async () => {
|
|
await authStore.auth('signIn',{ email: email.value, password: password.value })
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<h2>Sign In</h2>
|
|
<form class="flex flex-column gap-3" @submit.prevent="signin">
|
|
<transition-group name="p-message" tag="div" class="flex flex-col">
|
|
<Message v-if="authStore.error" closable icon="pi pi-times-circle" class="flex-1" severity="error">{{authStore.error}}</Message>
|
|
</transition-group>
|
|
|
|
<div class="p-inputgroup flex align-items-center gap-4">
|
|
<span class="p-inputgroup-addon">
|
|
<i class="pi pi-user"></i>
|
|
</span>
|
|
<InputText type="email" class="flex-1" v-model="email" placeholder="Your Email" />
|
|
</div>
|
|
|
|
<div class="p-inputgroup flex align-items-center gap-4">
|
|
<span class="p-inputgroup-addon">
|
|
<i class="pi pi-at"></i>
|
|
</span>
|
|
<InputText type="password" class="flex-1" v-model="password" placeholder="Password" />
|
|
</div>
|
|
|
|
<div class="flex flex-column gap-3">
|
|
<Loader v-if="authStore.loading" />
|
|
<Button v-else label="Signin" type="submit" />
|
|
|
|
<span>Are you not registered yet? <router-link to="/sign-up">Sign up</router-link></span>
|
|
</div>
|
|
</form>
|
|
</template>
|