boursecu_user/src/views/login/desktop/components/DesktopRegisterForm.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'

const emit = defineEmits<{
  register: [val: boolean]
}>()

const config = useConfigStore()
const settingsStore = useSettingsStore()
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 goToAboutSoftware() {
  router.push({ name: 'aboutSoftware' })
}

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"
        :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 type="button" class="dauth-link-btn" @click="goToAboutSoftware">
          درباره نرم‌افزار
        </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>