100 lines
5.5 KiB
Vue
100 lines
5.5 KiB
Vue
<script setup lang="ts">
|
|
import {Link} from "@inertiajs/inertia-vue3";
|
|
import {useAuthStore} from "../../store/Auth";
|
|
|
|
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 m-auto">
|
|
<div class="text-center py-4 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/login" 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="pi pi-google"></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="pi pi-github"></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="username" type="text"
|
|
appendTo="self"
|
|
v-model="AuthStore.registerForm.name"
|
|
class="placeholder:!font-light !text-sm !bg-white h-12 !border-gray-500/30 !text-client-Fontcolor w-full"/>
|
|
<label for="username" class="!text-client-Fontcolor !text-sm !bg-white font-light">نام کاربری</label>
|
|
</FloatLabel>
|
|
<Message v-if="AuthStore.errorsRegisterForm.name"
|
|
class="h-7 mt-1 !text-xs px-1"
|
|
variant="simple"
|
|
severity="error" size="small">{{AuthStore.errorsRegisterForm.name[0]}}</Message>
|
|
</div>
|
|
|
|
<div>
|
|
<FloatLabel variant="on"
|
|
class="!w-full">
|
|
<InputText id="email1" type="text"
|
|
appendTo="self"
|
|
v-model="AuthStore.registerForm.email"
|
|
class="placeholder:!font-light !text-sm !bg-white h-12 !border-gray-500/30 !text-client-Fontcolor w-full"/>
|
|
<label for="email1" class="!text-client-Fontcolor !text-sm !bg-white font-light">ایمیل</label>
|
|
</FloatLabel>
|
|
<Message v-if="AuthStore.errorsRegisterForm.email"
|
|
class="h-7 mt-1 !text-xs px-1"
|
|
variant="simple"
|
|
severity="error" size="small">{{AuthStore.errorsRegisterForm.email[0]}}</Message>
|
|
</div>
|
|
|
|
<div>
|
|
<FloatLabel variant="on" class="!w-full">
|
|
<Password id="password" type="password" :feedback="false"
|
|
appendTo="self" toggleMask
|
|
v-model="AuthStore.registerForm.password"
|
|
class="placeholder:!font-light !text-sm !bg-white h-12 !border-gray-500/20 !text-client-Fontcolor w-full"/>
|
|
<label for="on_label" class="!text-client-Fontcolor !bg-white !text-sm font-light">کلمه عبور</label>
|
|
</FloatLabel>
|
|
<Message v-if="AuthStore.errorsRegisterForm.password"
|
|
class="h-7 mt-1 !text-xs px-1"
|
|
variant="simple"
|
|
severity="error" size="small">{{AuthStore.errorsRegisterForm.password[0]}}</Message>
|
|
</div>
|
|
|
|
|
|
<FloatLabel variant="on" class="!w-full mb-6">
|
|
<Password id="password_confirmation" type="password" :feedback="false"
|
|
appendTo="self" toggleMask
|
|
v-model="AuthStore.registerForm.password_confirmation"
|
|
class="placeholder:!font-light !text-sm !bg-white h-12 !border-gray-500/20 !text-client-Fontcolor w-full"/>
|
|
<label for="password_confirmation" class="!text-client-Fontcolor !bg-white !text-sm font-light">تکرار کلمه عبور</label>
|
|
</FloatLabel>
|
|
|
|
|
|
<Button label="عضویت در سایت" @click="AuthStore.register()" :loading="AuthStore.loaderRegisterForm" 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>
|