first commit

2026-05-13 01:43:05 +03:30
commit d2a577f254
297 changed files with 36274 additions and 0 deletions
@@ -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>