boursecu_user/src/views/login/desktop/components/DesktopLoginForm.vue

<script setup lang="ts">
import { mobileValidation, required } from '@/utils/inputRules'
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import SmsOtpField from '@/components/SmsOtpField.vue'
import { useConfigStore } from '@/store/configStore'
import { useLoginPageContext } from '../../composables/useLoginPage'
import DesktopPwaGuideModal from './DesktopPwaGuideModal.vue'
import router from '@/router'
import {isTWA} from "@/utils/config";
import {useSettingsStore} from "@/store/settingsStore";

const emit = defineEmits<{
  register: [val: boolean]
}>()
const setting=useSettingsStore()
const config = useConfigStore()
const {
  time,
  enableSendAgainCode,
  stepTwoVerify,
  formRef,
  refOtpInput,
  isSMS,
  isRegister,
  showPWAInstallGuide,
  userFormState,
  loading,
  submitLabel,
  showFingerprint,
  setIsSMS,
  reSendCode,
  enterFingerPrint,
  handleOnChange,
  handleOnComplete,
  phoneVerification,
  editPhoneNumber,
  installWebApp,
  proceedWithInstall,
} = useLoginPageContext().loginForm

function goToEducate() {
  router.push({ name: 'educate' })
}

function goToAboutUs() {
  router.push('/aboutUs')
}
</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>

    <div class="dauth-toggle">
      <button
        type="button"
        class="dauth-toggle__btn"
        :class="{ 'dauth-toggle__btn--active': isSMS }"
        @click="setIsSMS(true)"
      >
        ورود با پیامک
      </button>
      <button
        type="button"
        class="dauth-toggle__btn"
        :class="{ 'dauth-toggle__btn--active': !isSMS }"
        @click="setIsSMS(false)"
      >
        ورود با کلمه عبور
      </button>
    </div>

    <a-form
      ref="formRef"
      :model="userFormState"
      layout="vertical"
      class="dauth-form"
      name="desktop-login"
      @finish="phoneVerification"
    >
      <a-form-item
        v-if="!stepTwoVerify"
        :rules="[required('شماره تلفن'), mobileValidation('شماره تلفن')]"
        :validate-trigger="['change', 'blur']"
        label="شماره تلفن"
        name="mobile"
      >
        <BasicInput
          v-model:value="userFormState.mobile"
          place-holder="۰۹۱۲۳۴۵۶۷۸۹"
          size="large"
          inputmode="numeric"
          type="tel"
        />
      </a-form-item>

      <a-form-item
        v-if="!isSMS"
        :rules="[required('کلمه عبور')]"
        label="کلمه عبور"
        name="password"
      >
        <BasicInput
          v-model:value="userFormState.password"
          is-password
          place-holder="کلمه عبور"
          size="large"
        />
      </a-form-item>

      <template v-if="isSMS && stepTwoVerify">
        <AFormItem
          :rules="[
            { required: true, message: 'کد ارسال شده را وارد نمایید' },
            { min: 4, max: 4, message: 'کد ارسال شده را وارد نمایید' },
          ]"
          class="error-token"
          name="token"
          style="position: relative"
        >
          <SmsOtpField
            ref="refOtpInput"
            v-model="userFormState.token"
            class="dauth-otp"
            @change="handleOnChange"
            @complete="handleOnComplete"
          />
        </AFormItem>

        <div class="dauth-phone-edit">
          <span class="dauth-phone-edit__number">{{ userFormState.mobile }}</span>
          <button type="button" class="dauth-phone-edit__btn" @click="editPhoneNumber">
            <span>ویرایش شماره</span>
            <BasicIcon icon="vuesax-linear:edit" size="16" />
          </button>
        </div>

        <div class="dauth-resend">
          <AButton :disabled="!enableSendAgainCode" class="w-full" type="dashed" @click="reSendCode">
            <span v-if="!enableSendAgainCode">
              ارسال مجدد کد در <span class="text-primary mx-1">{{ time }}</span> دیگر
            </span>
            <span v-else>ارسال مجدد کد تایید</span>
          </AButton>
        </div>
      </template>

      <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>{{ submitLabel }}</span>
        </BasicButton>

        <BasicButton
          v-if="showFingerprint"
          :disabled="loading"
          class="w-full"
          @click="enterFingerPrint"
        >
          ورود با اثر انگشت
        </BasicButton>

        <div v-if="!isTWA() && !!setting.getSettingByKey('apk_download_link')" class="dauth-actions-row ">
          <a
              class="dauth-link-btn dauth-link-btn--primary !hover:text-primary  "
              :href="setting.getSettingByKey('apk_download_link')"
          >
            دانلود اپ اندروید
          </a>
        </div>

      </div>

      <div v-if="isRegister" class="dauth-switch">
        <span>حساب کاربری ندارید؟</span>
        <button type="button" class="dauth-switch__link" @click="emit('register', true)">
          ثبت نام کنید
        </button>
      </div>
    </a-form>

    <DesktopPwaGuideModal v-model:show="showPWAInstallGuide" @confirm="proceedWithInstall" />
  </div>
</template>