banu-front/src/features/auth/components/SignupForm.vue

<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 useYup from '@/composables/useYup'
import useAuth from '@/composables/useAuth'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { signupSchema } from '@/features/auth/schema'
import TextField from '@/components/form/TextField.vue'
import { useRegisterMutation } from '@/services/query/auth'
import PasswordField from '@/components/form/PasswordField.vue'
import AuthHeading from '@/features/auth/components/AuthHeading.vue'
import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'

const emit = defineEmits(['next'])

const schema = signupSchema

const form = ref({
  firstName: '',
  lastName: '',
  phoneNumber: '',
  password: '',
  passwordConfirmation: '',
})
const { validate, validateAt, errors } = useYup(schema, () => form.value)

const registerMutation = useRegisterMutation()
const { savePhoneNumber } = useAuth()

const onSubmit = async () => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  const name = [payload.firstName, payload.lastName].filter(Boolean).join(' ').trim()
  await registerMutation.mutateAsync({
    name,
    phone: payload.phoneNumber,
    password: payload.password,
    passwordConfirmation: payload.passwordConfirmation,
  })
  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>