84 lines
4.5 KiB
Vue
84 lines
4.5 KiB
Vue
<script setup>
|
|
import {Link} from '@inertiajs/inertia-vue3';
|
|
import {useAuthStore} from "../../store/Auth.js";
|
|
|
|
const AuthStore = useAuthStore();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-white px-6 h-[100vh] flex items-center">
|
|
<div class="p-6 bg-white rounded-3xl shadow-all w-full xl:!w-1/3 mx-auto">
|
|
<div class="text-center mb-8">
|
|
<div class="text-client-Fontcolor text-2xl font-extrabold mb-4">ورود به حساب کاربری</div>
|
|
<span class="text-client-Fontcolor text-xs font-black leading-normal">قبلا حساب ساختی؟</span>
|
|
<Link href="/auth/register" class="font-medium no-underline mr-2 text-xs text-client-Fontcolor cursor-pointer">ایجاد حساب جدید</Link>
|
|
</div>
|
|
<div class="text-white grid pb-6 grid-cols-2 gap-2">
|
|
<a class="border-[1px] bg-[#4875e9] flex justify-between px-4 items-center rounded-lg h-11">
|
|
<span class="text-sm font-normal">ورود با گوگل</span>
|
|
<i class="fi fi-brands-google flex"></i>
|
|
</a>
|
|
<a class="border-[1px] flex items-center px-4 justify-between bg-client-sidebar-background rounded-lg h-11">
|
|
<span class="text-sm font-normal">ورود با گیتهاب</span>
|
|
<i class="fi fi-brands-github flex"></i>
|
|
</a>
|
|
</div>
|
|
<div class="grid grid-cols-[1fr_auto_1fr] gap-2 h-10 mb-6 items-center">
|
|
<div class="h-[1px] bg-client-gray/10"></div>
|
|
<div class="text-client-Fontcolor/90 px-4">یا</div>
|
|
<div class="h-[1px] bg-client-gray/10"></div>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<div>
|
|
<FloatLabel variant="on"
|
|
class="!w-full">
|
|
<InputText id="email1" type="text"
|
|
appendTo="self"
|
|
v-model="AuthStore.loginForm.email"
|
|
class="placeholder:!font-light !text-sm !bg-white h-12 !text-client-Fontcolor w-full"/>
|
|
<label for="email1" class="!text-client-Fontcolor !text-sm !bg-white font-light">ایمیل</label>
|
|
</FloatLabel>
|
|
<Message v-if="AuthStore.errorsLoginForm.email"
|
|
class="h-7 mt-1 !text-xs px-1"
|
|
variant="simple"
|
|
severity="error" size="small">{{AuthStore.errorsLoginForm.email[0]}}</Message>
|
|
</div>
|
|
|
|
<div>
|
|
<FloatLabel variant="on"
|
|
class="!w-full">
|
|
<Password id="password" type="password" :feedback="false"
|
|
appendTo="self" toggleMask v-model="AuthStore.loginForm.password"
|
|
class="placeholder:!font-light !text-sm !bg-white h-12 !text-client-Fontcolor "/>
|
|
<label for="on_label" class="!text-client-Fontcolor !bg-white !text-sm font-light">کلمه عبور</label>
|
|
</FloatLabel>
|
|
<Message v-if="AuthStore.errorsLoginForm.password"
|
|
class="h-7 mt-1 !text-xs px-1"
|
|
variant="simple"
|
|
severity="error" size="small">{{AuthStore.errorsLoginForm.password[0]}}</Message>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2a items-center justify-start mb-12">
|
|
<div class="flex items-center gap-2 !text-client-Fontcolor">
|
|
<Checkbox inputId="remember1"
|
|
class="custom-checkbox"
|
|
v-model="AuthStore.loginForm.remember"
|
|
binary />
|
|
<label class="!text-sm cursor-pointer !font-normal" for="remember1">مرا به خاطر بسپار</label>
|
|
</div>
|
|
</div>
|
|
<Button @click="AuthStore.login()" :loading="AuthStore.loaderLoginForm" label="ورود به سایت" icon="pi pi-user !text-md flex !leading-none" severity="secondary"
|
|
class="w-1/2 m-auto flex flex-row-reverse items-center !font-normal" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="css">
|
|
.p-password{
|
|
@apply !w-full
|
|
}
|
|
.p-password-input{
|
|
@apply !w-full
|
|
}
|
|
</style>
|