complete Complete User Request Submission section RAD-1
This commit is contained in:
@@ -0,0 +1,83 @@
|
||||
<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>
|
||||
@@ -0,0 +1,99 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user