159 lines
4.8 KiB
Vue
159 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { mobileValidation, required } from '@/utils/inputRules'
|
|
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import DialogVantOneButton from '@/components/DialogVantOneButton.vue'
|
|
import registerDelayImage from '@/assets/img/registerDelay.svg'
|
|
import { useConfigStore } from '@/store/configStore'
|
|
import { useSettingsStore } from '@/store/settingsStore'
|
|
import { useLoginPageContext } from '../../composables/useLoginPage'
|
|
import router from '@/router'
|
|
import { isTWA } from '@/utils/config'
|
|
import { usePwaInstall } from '@/composables/usePwaInstall'
|
|
|
|
const emit = defineEmits<{
|
|
register: [val: boolean]
|
|
}>()
|
|
|
|
const config = useConfigStore()
|
|
const settingsStore = useSettingsStore()
|
|
const { tryInstallOrOpenGuide: installWebApp } = usePwaInstall()
|
|
const referralIdRules = computed(() =>
|
|
settingsStore.isReferralRequired ? [required('کد معرف')] : [],
|
|
)
|
|
const referralIdPlaceholder = computed(() =>
|
|
settingsStore.isReferralRequired ? 'کد معرف' : 'کد معرف (اختیاری)',
|
|
)
|
|
const {
|
|
registeredInfo,
|
|
disableForm,
|
|
userFormState,
|
|
formRef,
|
|
loading,
|
|
registerAccount,
|
|
dismissSuccess,
|
|
} = useLoginPageContext().registerForm
|
|
|
|
function goToEducate() {
|
|
router.push({ name: 'educate' })
|
|
}
|
|
|
|
function goToAboutUs() {
|
|
router.push('/aboutUs')
|
|
}
|
|
|
|
function handleSuccessDismiss() {
|
|
dismissSuccess()
|
|
emit('register', false)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dauth-card">
|
|
<header class="dauth-card__header">
|
|
<p class="dauth-card__eyebrow">حساب جدید</p>
|
|
<h2 class="dauth-card__title">ثبت نام</h2>
|
|
<p class="dauth-card__subtitle">اطلاعات خود را برای ایجاد حساب وارد کنید</p>
|
|
</header>
|
|
|
|
<a-form
|
|
ref="formRef"
|
|
:model="userFormState"
|
|
layout="vertical"
|
|
class="dauth-form"
|
|
name="desktop-register"
|
|
@finish="registerAccount"
|
|
>
|
|
<a-form-item :rules="[required()]" label="نام" name="fname">
|
|
<BasicInput v-model:value="userFormState.fname" place-holder="نام" size="large" />
|
|
</a-form-item>
|
|
<a-form-item :rules="[required()]" label="نام خانوادگی" name="lname">
|
|
<BasicInput
|
|
v-model:value="userFormState.lname"
|
|
place-holder="نام خانوادگی"
|
|
size="large"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
:rules="[required(), mobileValidation('شماره تلفن')]"
|
|
label="شماره تلفن"
|
|
name="mobile"
|
|
>
|
|
<BasicInput
|
|
v-model:value="userFormState.mobile"
|
|
place-holder="۰۹۱۲۳۴۵۶۷۸۹"
|
|
size="large"
|
|
type="tel"
|
|
inputmode="numeric"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item :rules="[required()]" label="کلمه عبور" name="password">
|
|
<BasicInput
|
|
v-model:value="userFormState.password"
|
|
is-password
|
|
place-holder="کلمه عبور"
|
|
size="large"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
v-if="settingsStore.isReferralFieldVisible || disableForm"
|
|
:rules="referralIdRules"
|
|
label="کد معرف"
|
|
name="referral_id"
|
|
>
|
|
<BasicInput
|
|
v-model:value="userFormState.referral_id"
|
|
:disabled="disableForm"
|
|
:place-holder="referralIdPlaceholder"
|
|
size="large"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<div class="dauth-actions">
|
|
<BasicButton :disabled="loading" class="w-full" html-type="submit" type="primary">
|
|
<a-spin v-if="loading" size="small" />
|
|
<span v-else>ثبت نام</span>
|
|
</BasicButton>
|
|
<button
|
|
v-if="!isTWA()"
|
|
type="button"
|
|
class="dauth-btn-stack"
|
|
@click="installWebApp"
|
|
>
|
|
<span>نصب وب اپلیکیشن</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<div class="dauth-switch">
|
|
<span>حساب کاربری دارید؟</span>
|
|
<button type="button" class="dauth-switch__link" @click="emit('register', false)">
|
|
وارد شوید
|
|
</button>
|
|
</div>
|
|
</a-form>
|
|
|
|
<DialogVantOneButton
|
|
v-model:show="registeredInfo"
|
|
:closeOnClickOverlay="false"
|
|
:timeOut="-1"
|
|
>
|
|
<template #img>
|
|
<img :src="registerDelayImage" alt="" class="opacity-80" />
|
|
</template>
|
|
<template #title>
|
|
<div class="p-5 text-center text-sm">
|
|
ثبت نام شما با موفقیت انجام شد. شما میتوانید با اطلاعات خود، وارد اپلیکیشن شوید.
|
|
</div>
|
|
</template>
|
|
<template #button>
|
|
<div class="text-center" @click="handleSuccessDismiss">متوجه شدم</div>
|
|
</template>
|
|
</DialogVantOneButton>
|
|
</div>
|
|
</template>
|