first commit
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="auth-copyright">
|
||||
<a href="https://mugweb.ir/" target="_blank" rel="noopener">
|
||||
<p class="auth-copyright__fa">تمام حقوق مادی و معنوی این وبسایت محفوظ هست</p>
|
||||
<p class="auth-copyright__en">All Rights Reserved. 2026</p>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.auth-copyright {
|
||||
border-top: 1px solid var(--color-thd-gray);
|
||||
padding-top: 0.5rem;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__fa {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__en {
|
||||
font-family: var(--font-family-en);
|
||||
font-size: 0.65rem;
|
||||
color: var(--color-prim-gray);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="auth-heading">
|
||||
<img :src="logo" alt="banu" class="auth-heading__logo" />
|
||||
<h2 class="auth-heading__title">{{ title }}</h2>
|
||||
<p v-if="subtitle" class="auth-heading__subtitle">
|
||||
<slot name="subtitle">{{ subtitle }}</slot>
|
||||
</p>
|
||||
<slot name="below" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { gallery } from '@/utils/gallery'
|
||||
|
||||
defineProps({
|
||||
title: { type: String, required: true },
|
||||
subtitle: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const logo = gallery.authLogo
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.auth-heading {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
&__logo {
|
||||
margin: 0 auto 0.5rem;
|
||||
max-height: 59px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
height: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-prim-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
color: #a7a7a7;
|
||||
margin: 0.25rem 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="auth-shell">
|
||||
<div class="auth-shell__form-area">
|
||||
<div class="auth-shell__bg-mobile" :style="{ backgroundImage: `url(${bgPatternMobile})` }" />
|
||||
<div class="auth-shell__form">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div class="auth-shell__pattern">
|
||||
<PatternSection :front-image="logoPattern" :bg-image="bgPattern" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PatternSection from '@/features/auth/components/PatternSection.vue'
|
||||
import { gallery } from '@/utils/gallery'
|
||||
|
||||
const bgPattern = gallery.loginPattern
|
||||
const bgPatternMobile = gallery.loginPatternMobile
|
||||
const logoPattern = gallery.loginPatternWithLogo
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.auth-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
min-height: 100vh;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&__form-area {
|
||||
flex-basis: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-basis: 58.3333%;
|
||||
}
|
||||
}
|
||||
|
||||
&__bg-mobile {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
background-position: bottom;
|
||||
background-position-x: right;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
margin-inline-start: auto;
|
||||
width: 100%;
|
||||
padding: 0 1.25rem;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
max-width: 300px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
max-width: 514px;
|
||||
}
|
||||
}
|
||||
|
||||
&__pattern {
|
||||
display: none;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
display: block;
|
||||
flex-basis: 41.6667%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<form class="auth-form" @submit.prevent="onSubmit">
|
||||
<div class="auth-form__body">
|
||||
<AuthHeading title="ورود" subtitle="در این قسمت اطلاعات خود را وارد کنید." />
|
||||
|
||||
<TextField
|
||||
v-model="form.phoneNumber"
|
||||
name="phoneNumber"
|
||||
label="شماره تلفن همراه"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.phoneNumber"
|
||||
@blur="validateAt('phoneNumber', form.phoneNumber)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="phone" :size="22" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
|
||||
<div class="login-form__password-wrap">
|
||||
<button type="button" class="login-form__forgot" @click="goForgotPassword">
|
||||
رمز عبور خودم را فراموش کرده ام
|
||||
</button>
|
||||
<PasswordField
|
||||
v-model="form.password"
|
||||
name="password"
|
||||
label="رمز عبور"
|
||||
:error="errors.password"
|
||||
@blur="validateAt('password', form.password)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BaseButton
|
||||
type="submit"
|
||||
text="تایید اطلاعات"
|
||||
:loading="loginMutation.isPending.value"
|
||||
custom-class="login-form__submit"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="22" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
|
||||
<div class="login-form__links">
|
||||
<div class="login-form__link">
|
||||
<SvgIcon name="user" :size="12" color="#A7A7A7" />
|
||||
<span>حساب کاربری ندارم</span>
|
||||
<RouterLink :to="{ name: 'signup' }">ثبت نام</RouterLink>
|
||||
</div>
|
||||
<div class="login-form__link">
|
||||
<SvgIcon name="check" :size="12" color="#A7A7A7" />
|
||||
<button type="button" class="login-form__link-btn" @click="goLoginWithCode">
|
||||
ورود با کد تایید
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-form__footer">
|
||||
<AuthCopyright />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
|
||||
import AuthHeading from '@/features/auth/components/AuthHeading.vue'
|
||||
import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import PasswordField from '@/components/form/PasswordField.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useYup from '@/composables/useYup'
|
||||
import useAuth from '@/composables/useAuth'
|
||||
import { useLoginMutation } from '@/services/query/auth'
|
||||
import { loginSchema } from '@/features/auth/schema'
|
||||
import { useRedirectAfterLogin } from '@/features/auth/composables/useRedirectAfterLogin'
|
||||
|
||||
const emit = defineEmits(['next'])
|
||||
|
||||
const schema = loginSchema
|
||||
|
||||
const form = ref({ phoneNumber: '', password: '' })
|
||||
const { validate, validateAt, errors } = useYup(schema)
|
||||
|
||||
const loginMutation = useLoginMutation()
|
||||
const { applySession } = useAuth()
|
||||
const redirectAfterLogin = useRedirectAfterLogin()
|
||||
|
||||
const onSubmit = async () => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
const response = await loginMutation.mutateAsync(payload)
|
||||
applySession(response?.data ?? response)
|
||||
redirectAfterLogin()
|
||||
}
|
||||
|
||||
const goLoginWithCode = () => emit('next', { mode: 'loginWithCode' })
|
||||
const goForgotPassword = () => emit('next', { mode: 'forgotPassword' })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form__password-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form__forgot {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: -0.25rem;
|
||||
z-index: 10;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-prim-gray);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--color-sec-gray);
|
||||
}
|
||||
}
|
||||
|
||||
.login-form__submit {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form__links {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.login-form__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
color: #a7a7a7;
|
||||
|
||||
a {
|
||||
color: var(--color-sec-gray);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form__link-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
color: #a7a7a7;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--color-sec-gray);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<form class="auth-form" @submit.prevent="onSubmit">
|
||||
<div class="auth-form__body">
|
||||
<AuthHeading
|
||||
:title="isForgotPassword ? 'بازیابی رمز عبور' : 'ورود با کد تایید'"
|
||||
:subtitle="
|
||||
isForgotPassword
|
||||
? 'شماره موبایل خود را وارد کنید تا کد تایید برای شما ارسال شود'
|
||||
: 'شماره موبایل خود را وارد کنید'
|
||||
"
|
||||
/>
|
||||
|
||||
<TextField
|
||||
v-model="form.phoneNumber"
|
||||
name="phoneNumber"
|
||||
label="شماره تلفن همراه"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.phoneNumber"
|
||||
@blur="validateAt('phoneNumber', form.phoneNumber)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="phone" :size="22" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
|
||||
<BaseButton
|
||||
type="submit"
|
||||
text="ارسال کد تایید"
|
||||
:loading="loading"
|
||||
custom-class="login-otp__submit"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="22" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
|
||||
<button type="button" class="login-otp__back" @click="emit('back')">
|
||||
بازگشت به ورود با رمز عبور
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="auth-form__footer">
|
||||
<AuthCopyright />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import AuthHeading from '@/features/auth/components/AuthHeading.vue'
|
||||
import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useYup from '@/composables/useYup'
|
||||
import useAuth from '@/composables/useAuth'
|
||||
import { useForgotPasswordMutation, useLoginWithCodeMutation } from '@/services/query/auth'
|
||||
import { loginWithCodeSchema } from '@/features/auth/schema'
|
||||
|
||||
const props = defineProps({
|
||||
mode: { type: String, default: 'loginWithCode' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['next', 'back'])
|
||||
|
||||
const isForgotPassword = computed(() => props.mode === 'forgotPassword')
|
||||
|
||||
const schema = loginWithCodeSchema
|
||||
const form = ref({ phoneNumber: '' })
|
||||
const { validate, validateAt, errors } = useYup(schema)
|
||||
|
||||
const { savePhoneNumber } = useAuth()
|
||||
const loginCodeMutation = useLoginWithCodeMutation()
|
||||
const forgotPasswordMutation = useForgotPasswordMutation()
|
||||
|
||||
const loading = computed(
|
||||
() => loginCodeMutation.isPending.value || forgotPasswordMutation.isPending.value
|
||||
)
|
||||
|
||||
const onSubmit = async () => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
if (isForgotPassword.value) {
|
||||
await forgotPasswordMutation.mutateAsync(payload)
|
||||
} else {
|
||||
await loginCodeMutation.mutateAsync(payload)
|
||||
}
|
||||
savePhoneNumber(payload.phoneNumber)
|
||||
emit('next', { phoneNumber: payload.phoneNumber, mode: props.mode })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-otp__submit {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-otp__back {
|
||||
margin-top: 1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
color: #a7a7a7;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--color-sec-gray);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="pattern-section">
|
||||
<div class="pattern-section__bg" :style="{ backgroundImage: `url(${bgImage})` }" />
|
||||
<div class="pattern-section__front">
|
||||
<img :src="frontImage" alt="banu" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
bgImage: { type: String, default: '' },
|
||||
frontImage: { type: String, default: '' },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pattern-section {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
&__bg {
|
||||
flex-basis: 75%;
|
||||
height: 100dvh;
|
||||
background-size: contain;
|
||||
background-position-x: right;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-basis: 66.6667%;
|
||||
}
|
||||
}
|
||||
|
||||
&__front {
|
||||
flex-basis: 25%;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-height: fit-content;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-basis: 33.3333%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 658px;
|
||||
min-height: 300px;
|
||||
min-width: 150px;
|
||||
aspect-ratio: 1 / 2;
|
||||
object-fit: cover;
|
||||
border-radius: 1rem;
|
||||
z-index: 10;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<form class="auth-form" @submit.prevent="onSubmit">
|
||||
<div class="auth-form__body">
|
||||
<AuthHeading title="ثبت نام" subtitle="در این قسمت اطلاعات خود را به صورت کامل وارد کنید" />
|
||||
|
||||
<TextField
|
||||
v-model="form.firstName"
|
||||
name="firstName"
|
||||
label="نام"
|
||||
:error="errors.firstName"
|
||||
@blur="validateAt('firstName', form.firstName)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="user" :size="22" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
v-model="form.lastName"
|
||||
name="lastName"
|
||||
label="نام خانوادگی"
|
||||
:error="errors.lastName"
|
||||
@blur="validateAt('lastName', form.lastName)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="user" :size="22" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
v-model="form.phoneNumber"
|
||||
name="phoneNumber"
|
||||
label="شماره موبایل"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.phoneNumber"
|
||||
@blur="validateAt('phoneNumber', form.phoneNumber)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="phone" :size="22" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
|
||||
<PasswordField
|
||||
v-model="form.password"
|
||||
name="password"
|
||||
label="رمز عبور"
|
||||
:error="errors.password"
|
||||
@blur="validateAt('password', form.password)"
|
||||
/>
|
||||
|
||||
<PasswordField
|
||||
v-model="form.passwordConfirmation"
|
||||
name="passwordConfirmation"
|
||||
label="تکرار رمز عبور"
|
||||
:error="errors.passwordConfirmation"
|
||||
@blur="validateAt('passwordConfirmation', form.passwordConfirmation)"
|
||||
/>
|
||||
|
||||
<BaseButton
|
||||
type="submit"
|
||||
text="تایید اطلاعات"
|
||||
:loading="registerMutation.isPending.value"
|
||||
custom-class="signup-form__submit"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="22" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
|
||||
<div class="signup-form__login-link">
|
||||
<SvgIcon name="user" :size="12" color="#A7A7A7" />
|
||||
<span>حساب کاربری دارم</span>
|
||||
<RouterLink :to="{ name: 'login' }">ورود</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="auth-form__footer">
|
||||
<AuthCopyright />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import AuthHeading from '@/features/auth/components/AuthHeading.vue'
|
||||
import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import PasswordField from '@/components/form/PasswordField.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useYup from '@/composables/useYup'
|
||||
import useAuth from '@/composables/useAuth'
|
||||
import { useRegisterMutation } from '@/services/query/auth'
|
||||
import { signupSchema } from '@/features/auth/schema'
|
||||
|
||||
const emit = defineEmits(['next'])
|
||||
|
||||
const schema = signupSchema
|
||||
|
||||
const form = ref({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
phoneNumber: '',
|
||||
password: '',
|
||||
passwordConfirmation: '',
|
||||
})
|
||||
const { validate, validateAt, errors } = useYup(schema)
|
||||
|
||||
const registerMutation = useRegisterMutation()
|
||||
const { savePhoneNumber } = useAuth()
|
||||
|
||||
const onSubmit = async () => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
await registerMutation.mutateAsync(payload)
|
||||
savePhoneNumber(payload.phoneNumber)
|
||||
emit('next', { phoneNumber: payload.phoneNumber })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.signup-form__submit {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signup-form__login-link {
|
||||
margin-top: 1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
color: #a7a7a7;
|
||||
|
||||
a {
|
||||
color: var(--color-sec-gray);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<form class="auth-form" @submit.prevent="onSubmit">
|
||||
<div class="auth-form__body">
|
||||
<AuthHeading title="کد تایید">
|
||||
<template #subtitle>
|
||||
<span class="verify__phone-label">ارسال کد فعالسازی به شماره</span>
|
||||
<span class="verify__phone">{{ phoneNumber || '*******' }}</span>
|
||||
</template>
|
||||
<template #below>
|
||||
<button type="button" class="verify__resend" @click="onResend" :disabled="resending">
|
||||
{{ resending ? 'در حال ارسال...' : 'ارسال مجدد کد تایید' }}
|
||||
</button>
|
||||
</template>
|
||||
</AuthHeading>
|
||||
|
||||
<TextField
|
||||
v-model="form.verifyCode"
|
||||
name="verifyCode"
|
||||
label="کد تایید را وارد کنید"
|
||||
inputmode="numeric"
|
||||
:convert-digits="true"
|
||||
:error="errors.verifyCode"
|
||||
@blur="validateAt('verifyCode', form.verifyCode)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="check" :size="22" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
|
||||
<BaseButton type="submit" text="تایید کد" :loading="submitting" custom-class="verify__submit">
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="22" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
|
||||
<button type="button" class="verify__back" @click="emit('back')">
|
||||
تغییر شماره تلفن همراه
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="auth-form__footer">
|
||||
<AuthCopyright />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import AuthHeading from '@/features/auth/components/AuthHeading.vue'
|
||||
import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useYup from '@/composables/useYup'
|
||||
import useAuth from '@/composables/useAuth'
|
||||
import {
|
||||
useForgotPasswordMutation,
|
||||
useLoginWithCodeMutation,
|
||||
useResendVerificationCodeMutation,
|
||||
useVerifyCodeMutation,
|
||||
useVerifyForgotPasswordCodeMutation,
|
||||
} from '@/services/query/auth'
|
||||
import { useRedirectAfterLogin } from '@/features/auth/composables/useRedirectAfterLogin'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { verifyCodeSchema } from '@/features/auth/schema'
|
||||
|
||||
const props = defineProps({
|
||||
phoneNumber: { type: String, default: '' },
|
||||
mode: { type: String, default: 'loginWithCode' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['back', 'verified'])
|
||||
|
||||
const schema = verifyCodeSchema
|
||||
const form = ref({ verifyCode: '' })
|
||||
const { validate, validateAt, errors } = useYup(schema)
|
||||
|
||||
const { applySession } = useAuth()
|
||||
const router = useRouter()
|
||||
const redirectAfterLogin = useRedirectAfterLogin()
|
||||
|
||||
const verifyLoginMutation = useLoginWithCodeMutation()
|
||||
const verifySignupMutation = useVerifyCodeMutation()
|
||||
const verifyForgotMutation = useVerifyForgotPasswordCodeMutation()
|
||||
const resendCodeMutation = useResendVerificationCodeMutation()
|
||||
const forgotMutation = useForgotPasswordMutation()
|
||||
const loginCodeMutation = useLoginWithCodeMutation()
|
||||
|
||||
const submitting = computed(
|
||||
() =>
|
||||
verifyLoginMutation.isPending.value ||
|
||||
verifySignupMutation.isPending.value ||
|
||||
verifyForgotMutation.isPending.value
|
||||
)
|
||||
|
||||
const resending = computed(
|
||||
() =>
|
||||
resendCodeMutation.isPending.value ||
|
||||
forgotMutation.isPending.value ||
|
||||
loginCodeMutation.isPending.value
|
||||
)
|
||||
|
||||
const onSubmit = async () => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
const body = { phoneNumber: props.phoneNumber, verifyCode: payload.verifyCode }
|
||||
|
||||
if (props.mode === 'loginWithCode') {
|
||||
const response = await verifyLoginMutation.mutateAsync(body)
|
||||
applySession(response?.data ?? response)
|
||||
redirectAfterLogin()
|
||||
return
|
||||
}
|
||||
|
||||
if (props.mode === 'forgotPassword') {
|
||||
await verifyForgotMutation.mutateAsync(body)
|
||||
router.push({ name: 'reset-password' })
|
||||
return
|
||||
}
|
||||
|
||||
await verifySignupMutation.mutateAsync(body)
|
||||
emit('verified', body)
|
||||
}
|
||||
|
||||
const onResend = async () => {
|
||||
if (!props.phoneNumber) return
|
||||
const body = { phoneNumber: props.phoneNumber }
|
||||
if (props.mode === 'forgotPassword') await forgotMutation.mutateAsync(body)
|
||||
else if (props.mode === 'loginWithCode') await loginCodeMutation.mutateAsync(body)
|
||||
else await resendCodeMutation.mutateAsync(body)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.verify__phone-label {
|
||||
padding-inline-end: 0.75rem;
|
||||
color: #a7a7a7;
|
||||
font-family: var(--font-family-fa);
|
||||
}
|
||||
|
||||
.verify__phone {
|
||||
padding-inline-start: 0.75rem;
|
||||
color: var(--color-prim-gray);
|
||||
font-family: var(--font-family-number-fa);
|
||||
}
|
||||
|
||||
.verify__resend {
|
||||
margin-top: 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 300;
|
||||
font-size: 0.75rem;
|
||||
color: #a7a7a7;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.verify__submit {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.verify__back {
|
||||
margin-top: 1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.75rem;
|
||||
color: #a7a7a7;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--color-sec-gray);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
|
||||
export const useRedirectAfterLogin = () => {
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
|
||||
return () => {
|
||||
const redirect = route.query.redirect
|
||||
if (redirect && typeof redirect === 'string') {
|
||||
router.push(redirect).catch(() => router.push('/'))
|
||||
return
|
||||
}
|
||||
const target =
|
||||
auth.role === 'admin' ? { name: 'admin-dashboard' } : { name: 'student-dashboard' }
|
||||
router.push(target).catch(() => router.push('/'))
|
||||
}
|
||||
}
|
||||
|
||||
export default useRedirectAfterLogin
|
||||
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<AuthShell>
|
||||
<LoginForm v-if="step === LOGIN_STEPS.LOGIN" @next="handleNext" />
|
||||
<LoginWithVerifyCodeForm
|
||||
v-else-if="step === LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE"
|
||||
:mode="mode"
|
||||
@next="handleCodeSent"
|
||||
@back="step = LOGIN_STEPS.LOGIN"
|
||||
/>
|
||||
<VerifyCodeForm
|
||||
v-else-if="step === LOGIN_STEPS.VERIFY_CODE"
|
||||
:phone-number="phoneNumber"
|
||||
:mode="mode"
|
||||
@back="step = LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE"
|
||||
/>
|
||||
</AuthShell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
import AuthShell from '@/features/auth/components/AuthShell.vue'
|
||||
import LoginForm from '@/features/auth/components/LoginForm.vue'
|
||||
import LoginWithVerifyCodeForm from '@/features/auth/components/LoginWithVerifyCodeForm.vue'
|
||||
import VerifyCodeForm from '@/features/auth/components/VerifyCodeForm.vue'
|
||||
import { LOGIN_STEPS } from '@/enums'
|
||||
|
||||
const step = ref(LOGIN_STEPS.LOGIN)
|
||||
const mode = ref('loginWithCode')
|
||||
const phoneNumber = ref('')
|
||||
|
||||
const handleNext = ({ mode: newMode }) => {
|
||||
mode.value = newMode
|
||||
step.value = LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE
|
||||
}
|
||||
|
||||
const handleCodeSent = ({ phoneNumber: phone, mode: newMode }) => {
|
||||
phoneNumber.value = phone
|
||||
mode.value = newMode
|
||||
step.value = LOGIN_STEPS.VERIFY_CODE
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<AuthShell>
|
||||
<form class="auth-form" @submit.prevent="onSubmit">
|
||||
<div class="auth-form__body">
|
||||
<AuthHeading title="تغییر رمز عبور" subtitle="در این قسمت رمز عبور جدید خود را وارد کنید" />
|
||||
|
||||
<TextField
|
||||
v-model="form.phoneNumber"
|
||||
name="phoneNumber"
|
||||
label="شماره موبایل"
|
||||
:disabled="!!user?.phoneNumber"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="phone" :size="22" color="var(--color-thd-gray)" />
|
||||
</template>
|
||||
</TextField>
|
||||
|
||||
<PasswordField
|
||||
v-model="form.password"
|
||||
name="password"
|
||||
label="رمز عبور"
|
||||
:error="errors.password"
|
||||
@blur="validateAt('password', form.password)"
|
||||
/>
|
||||
|
||||
<PasswordField
|
||||
v-model="form.passwordConfirmation"
|
||||
name="passwordConfirmation"
|
||||
label="تکرار رمز عبور"
|
||||
:error="errors.passwordConfirmation"
|
||||
@blur="validateAt('passwordConfirmation', form.passwordConfirmation)"
|
||||
/>
|
||||
|
||||
<BaseButton
|
||||
type="submit"
|
||||
text="تایید رمز عبور"
|
||||
:loading="resetMutation.isPending.value"
|
||||
custom-class="reset__submit"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="22" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<div class="auth-form__footer">
|
||||
<AuthCopyright />
|
||||
</div>
|
||||
</form>
|
||||
</AuthShell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import AuthShell from '@/features/auth/components/AuthShell.vue'
|
||||
import AuthHeading from '@/features/auth/components/AuthHeading.vue'
|
||||
import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import PasswordField from '@/components/form/PasswordField.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import useYup from '@/composables/useYup'
|
||||
import useAuth from '@/composables/useAuth'
|
||||
import { useResetPasswordMutation } from '@/services/query/auth'
|
||||
import { useRedirectAfterLogin } from '@/features/auth/composables/useRedirectAfterLogin'
|
||||
import { resetPasswordSchema } from '@/features/auth/schema'
|
||||
|
||||
const { user, applySession } = useAuth()
|
||||
const redirectAfterLogin = useRedirectAfterLogin()
|
||||
|
||||
const schema = resetPasswordSchema
|
||||
|
||||
const form = ref({
|
||||
phoneNumber: user.value?.phoneNumber || '',
|
||||
password: '',
|
||||
passwordConfirmation: '',
|
||||
})
|
||||
const { validate, validateAt, errors } = useYup(schema)
|
||||
|
||||
const resetMutation = useResetPasswordMutation()
|
||||
|
||||
const onSubmit = async () => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
const response = await resetMutation.mutateAsync(payload)
|
||||
applySession(response?.data ?? response)
|
||||
redirectAfterLogin()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.reset__submit {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<AuthShell>
|
||||
<SignupForm v-if="step === SIGNUP_STEPS.SIGNUP" @next="handleNext" />
|
||||
<VerifyCodeForm
|
||||
v-else
|
||||
:phone-number="phoneNumber"
|
||||
mode="signup"
|
||||
@back="step = SIGNUP_STEPS.SIGNUP"
|
||||
@verified="handleVerified"
|
||||
/>
|
||||
</AuthShell>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import AuthShell from '@/features/auth/components/AuthShell.vue'
|
||||
import SignupForm from '@/features/auth/components/SignupForm.vue'
|
||||
import VerifyCodeForm from '@/features/auth/components/VerifyCodeForm.vue'
|
||||
import { SIGNUP_STEPS } from '@/enums'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const step = ref(SIGNUP_STEPS.SIGNUP)
|
||||
const phoneNumber = ref('')
|
||||
|
||||
const handleNext = ({ phoneNumber: phone }) => {
|
||||
phoneNumber.value = phone
|
||||
step.value = SIGNUP_STEPS.VERIFY_CODE
|
||||
}
|
||||
|
||||
const handleVerified = () => {
|
||||
router.push({ name: 'student-register' }).catch(() => router.push('/'))
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
export default [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/features/auth/pages/LoginPage.vue'),
|
||||
meta: { public: true, requiresGuest: true, layout: 'public', title: 'ورود' },
|
||||
},
|
||||
{
|
||||
path: '/signup',
|
||||
name: 'signup',
|
||||
component: () => import('@/features/auth/pages/SignupPage.vue'),
|
||||
meta: { public: true, requiresGuest: true, layout: 'public', title: 'ثبت نام' },
|
||||
},
|
||||
{
|
||||
path: '/reset-password',
|
||||
name: 'reset-password',
|
||||
component: () => import('@/features/auth/pages/ResetPasswordPage.vue'),
|
||||
meta: { public: true, layout: 'public', title: 'تنظیم رمز عبور جدید' },
|
||||
},
|
||||
]
|
||||
@@ -0,0 +1,31 @@
|
||||
import { object, string } from 'yup'
|
||||
|
||||
import { phoneNumberRule } from '@/constants/rules/phoneNumberRule'
|
||||
import { passwordRule } from '@/constants/rules/passwordRule'
|
||||
import { passwordConfirmationRule } from '@/constants/rules/passwordConfirmationRule'
|
||||
|
||||
export const loginSchema = object().shape({
|
||||
phoneNumber: phoneNumberRule,
|
||||
password: string().required(),
|
||||
})
|
||||
|
||||
export const loginWithCodeSchema = object().shape({
|
||||
phoneNumber: phoneNumberRule,
|
||||
})
|
||||
|
||||
export const signupSchema = object().shape({
|
||||
firstName: string().required().min(3),
|
||||
lastName: string().required().min(3),
|
||||
phoneNumber: phoneNumberRule,
|
||||
password: passwordRule,
|
||||
passwordConfirmation: passwordConfirmationRule,
|
||||
})
|
||||
|
||||
export const verifyCodeSchema = object().shape({
|
||||
verifyCode: string().required().max(5),
|
||||
})
|
||||
|
||||
export const resetPasswordSchema = object().shape({
|
||||
password: passwordRule,
|
||||
passwordConfirmation: passwordConfirmationRule,
|
||||
})
|
||||
Reference in New Issue
Block a user