64 lines
1.9 KiB
Vue
64 lines
1.9 KiB
Vue
<!-- components/form/login.vue -->
|
|
|
|
<template>
|
|
<div class="flex flex-col items-start justify-center w-full">
|
|
<CommonLogo class="h-[40px]" />
|
|
<h2 class="font-bold text-xl md:text-2xl my-4">
|
|
Login user
|
|
</h2>
|
|
<form
|
|
@submit.prevent="handleSubmitLogin"
|
|
class="flex gap-4 flex-wrap w-full">
|
|
|
|
<div class="w-full">
|
|
<label class="text-sm block">Email address:</label>
|
|
<InputText
|
|
@blur="validateEmail"
|
|
v-model="data.email.value"
|
|
:invalid="!!data.email.error"
|
|
size="small" class="w-full" type="email" name="email" placeholder="Email address" />
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<label class="text-sm block">Confirm Password:</label>
|
|
<InputText
|
|
@blur="validatePassword"
|
|
v-model="data.password.value"
|
|
:invalid="!!data.password.error"
|
|
size="small" class="w-full" type="password" name="password" placeholder="Password" />
|
|
</div>
|
|
|
|
<div class="error-message">
|
|
<p class="text-[12px] text-red-500" v-if="!!data.email.error">{{data.email.error}}</p>
|
|
<p class="text-[12px] text-red-500" v-if="!!data.password.error">{{data.password.error}}</p>
|
|
<p class="text-[12px] text-red-500" v-if="status === 'error'">
|
|
{{error}}
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
:loading="status === 'loading'"
|
|
:disabled="status === 'loading' || !isFormValid"
|
|
class="text-sm md:text-md w-full justify-center h-[48px]">Login</Button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import useLogin from "~/composables/auth/userAuth";
|
|
|
|
const { data , status, error, login , isFormValid, validatePassword, validateEmail } = useLogin()
|
|
|
|
async function handleSubmitLogin() {
|
|
await login()
|
|
if(status.value === 'success') {
|
|
navigateTo('/dashboard', { replace: true })
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="css">
|
|
|
|
</style> |