fix

2026-06-05 14:41:38 +03:30
parent d42b7aaa7b
commit 1c665830b0
27 changed files with 565 additions and 617 deletions
@@ -27,30 +27,18 @@
          <div class="edit-profile__row">
            <div class="edit-profile__cell edit-profile__cell--third">
              <TextField
-                v-model="form.firstName"
-                name="firstName"
-                label="نام"
-                :error="errors.firstName"
-                @blur="validateAt('firstName', form.firstName)"
-              >
-                <template #appendIcon>
-                  <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
-                </template>
-              </TextField>
-            </div>
-            <div class="edit-profile__cell edit-profile__cell--third">
-              <TextField
-                v-model="form.lastName"
-                name="lastName"
-                label="نام خانوادگی"
-                :error="errors.lastName"
-                @blur="validateAt('lastName', form.lastName)"
+                v-model="form.name"
+                name="name"
+                label="نام و نام خانوادگی"
+                :error="errors.name"
+                @blur="validateAt('name', form.name)"
              >
                <template #appendIcon>
                  <SvgIcon name="user" :size="20" color="var(--color-thd-gray)" />
                </template>
              </TextField>
            </div>
+
            <div class="edit-profile__cell edit-profile__cell--third">
              <DatePickerField
                v-model="form.birthDate"
@@ -60,6 +48,22 @@
                :error="errors.birthDate"
              />
            </div>
+            <div class="edit-profile__cell edit-profile__cell--third">
+              <TextField
+                v-model="form.phone"
+                name="phone"
+                label="شماره تلفن همراه"
+                inputmode="numeric"
+                :convert-digits="true"
+                :disabled="!!initialPhoneNumber"
+                :error="errors.phone"
+                @blur="validateAt('phone', form.phone)"
+              >
+                <template #appendIcon>
+                  <SvgIcon name="phone" :size="20" color="var(--color-thd-gray)" />
+                </template>
+              </TextField>
+            </div>
            <div class="edit-profile__cell edit-profile__cell--third">
              <TextField
                v-model="form.nationalCode"
@@ -78,8 +82,8 @@
            </div>
            <div class="edit-profile__cell edit-profile__cell--third">
              <SelectField
-                v-model="form.maritalStatus"
-                name="maritalStatus"
+                v-model="form.marriageStatus"
+                name="marriageStatus"
                label="وضعیت تاهل"
                :options="maritalStatusOptions"
                option-label="label"
@@ -96,29 +100,10 @@
                option-value="value"
              />
            </div>
-            <div class="edit-profile__cell edit-profile__cell--full">
-              <TextareaField v-model="form.bio" name="bio" label="زندگی نامه" :row="3" />
-            </div>
          </div>

-          <LineTitleBlock title="اطلاعات تماس" title-en="Contact Details" />
+          <LineTitleBlock title="مشخصات محل سکونت" title-en="Address Details" />
          <div class="edit-profile__row">
-            <div class="edit-profile__cell edit-profile__cell--third">
-              <TextField
-                v-model="form.phoneNumber"
-                name="phoneNumber"
-                label="شماره تلفن همراه"
-                inputmode="numeric"
-                :convert-digits="true"
-                :disabled="!!initialPhoneNumber"
-                :error="errors.phoneNumber"
-                @blur="validateAt('phoneNumber', form.phoneNumber)"
-              >
-                <template #appendIcon>
-                  <SvgIcon name="phone" :size="20" color="var(--color-thd-gray)" />
-                </template>
-              </TextField>
-            </div>
            <div class="edit-profile__cell edit-profile__cell--third">
              <SelectField
                v-model="form.provinceId"
@@ -155,24 +140,40 @@
          <div class="edit-profile__row">
            <div class="edit-profile__cell edit-profile__cell--half">
              <PasswordField
-                v-model="form.password"
+                v-model="passwordForm.password"
                name="password"
                label="رمز عبور"
-                :error="errors.password"
-                @blur="validateAt('password', form.password)"
+                :error="passwordErrors.password"
+                @blur="validateAtPassword('password', passwordForm.password)"
              />
            </div>
            <div class="edit-profile__cell edit-profile__cell--half">
              <PasswordField
-                v-model="form.passwordConfirmation"
+                v-model="passwordForm.passwordConfirmation"
                name="passwordConfirmation"
                label="تکرار رمز عبور"
-                :error="errors.passwordConfirmation"
-                @blur="validateAt('passwordConfirmation', form.passwordConfirmation)"
+                :error="passwordErrors.passwordConfirmation"
+                @blur="
+                  validateAtPassword('passwordConfirmation', passwordForm.passwordConfirmation)
+                "
              />
            </div>
          </div>

+          <div class="edit-profile__password-actions">
+            <BaseButton
+              type="button"
+              text="تغییر رمز عبور"
+              :loading="resetPasswordMutation.isPending.value"
+              custom-class="edit-profile__btn-reset"
+              @click="onResetPassword"
+            >
+              <template #appendIcon>
+                <SvgIcon name="arrows-clockwise" :size="20" color="#fff" />
+              </template>
+            </BaseButton>
+          </div>
+
          <div class="edit-profile__actions">
            <BaseButton
              variant="transparent"
@@ -212,18 +213,20 @@ import SvgIcon from '@/components/icons/SvgIcon.vue'
 import TextField from '@/components/form/TextField.vue'
 import SelectField from '@/components/form/SelectField.vue'
 import LineTitleBlock from '@/components/LineTitleBlock.vue'
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import ImageCropper from '@/components/form/ImageCropper.vue'
 import { objectToFormData } from '@/utils/object-to-formdata'
+import { applyValidationErrors } from '@/utils/error-handler'
 import TextareaField from '@/components/form/TextareaField.vue'
 import PasswordField from '@/components/form/PasswordField.vue'
 import DatePickerField from '@/components/form/DatePickerField.vue'
-import { studentProfileSchema } from '@/features/student/profile/schema'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
 import { useGetCitiesOfProvinceQuery, useGetProvincesQuery } from '@/services/query/common'
+import { studentProfileSchema, studentResetPasswordSchema } from '@/features/student/profile/schema'
 import {
  authKeys,
  useGetMeQuery,
+  useResetPasswordMutation,
  useUpdateProfileMutation,
  useUploadMediaMutation,
 } from '@/services/query/auth'
@@ -246,29 +249,23 @@ const maritalStatusOptions = Object.entries(MARITAL_STATUS).map(([value, label])
 }))
 const genderOptions = Object.entries(GENDER).map(([value, label]) => ({ value, label }))

-const { data: provinces = ref([]) } = useGetProvincesQuery()
-
-const provinceIdRef = ref(null)
-const { data: cities = ref([]) } = useGetCitiesOfProvinceQuery(provinceIdRef, {
-  enabled: () => !!provinceIdRef.value,
-})
-
 const initialNationalCode = ref('')
 const initialPhoneNumber = ref('')

 const form = ref({
-  firstName: '',
-  lastName: '',
+  name: '',
  birthDate: '',
  nationalCode: '',
-  maritalStatus: '',
+  marriageStatus: '',
  gender: '',
-  bio: '',
-  phoneNumber: '',
+  phone: '',
  provinceId: '',
  cityId: '',
  address: '',
-  avatarId: null,
+  avatarMediaId: null,
+})
+
+const passwordForm = ref({
  password: '',
  passwordConfirmation: '',
 })
@@ -278,44 +275,47 @@ const avatar = ref(null)
 const schema = studentProfileSchema

 const { validate, validateAt, errors } = useYup(schema)
+const {
+  validate: validatePassword,
+  validateAt: validateAtPassword,
+  errors: passwordErrors,
+  resetErrors: resetPasswordErrors,
+  setError: setPasswordError,
+} = useYup(studentResetPasswordSchema, () => ({
+  ...passwordForm.value,
+  phone: form.value.phone,
+}))
+
+const { data: provinces = ref([]) } = useGetProvincesQuery()
+
+const provinceIdRef = computed(() => form.value.provinceId)
+const { data: cities = ref([]) } = useGetCitiesOfProvinceQuery(provinceIdRef, {
+  enabled: () => !!provinceIdRef.value,
+})

 const onProvinceChange = () => {
-  provinceIdRef.value = form.value.provinceId
  form.value.cityId = ''
 }

-watch(
-  () => form.value.provinceId,
-  (val) => {
-    provinceIdRef.value = val
-  }
-)
-
 const { data: profile } = useGetMeQuery()

 watch(profile, (user) => {
  if (!user) return
-  const nameParts = String(user.name || '')
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean)
-  const firstName = user.firstName || nameParts[0] || ''
-  const lastName = user.lastName || nameParts.slice(1).join(' ') || ''
+  const fullName =
+    user.name || [user.firstName, user.lastName].filter(Boolean).join(' ').trim() || ''
  const phone = user.phone || user.phoneNumber || ''
  form.value = {
    ...form.value,
-    firstName,
-    lastName,
+    name: fullName,
    birthDate: user.profile?.birthDate || '',
    nationalCode: user.nationalCode || '',
-    maritalStatus: user.profile?.maritalStatus || '',
+    marriageStatus: user.profile?.marriageStatus || '',
    gender: user.profile?.gender || '',
-    bio: user.profile?.bio || '',
-    phoneNumber: phone,
+    phone,
    provinceId: user?.province?.id || '',
    cityId: user?.city?.id || '',
    address: user?.address || '',
-    avatarId: user.profile?.avatarId || null,
+    avatarMediaId: user.profile?.avatarMediaId || null,
  }
  initialNationalCode.value = user.nationalCode || ''
  initialPhoneNumber.value = phone
@@ -330,7 +330,7 @@ const onAvatarCropped = async (file) => {
    const response = await uploadMutation.mutateAsync(formData)
    const payload = response?.data ?? response
    avatar.value = { url: payload?.url, uploadId: payload?.uploadId, ...payload }
-    form.value.avatarId = payload?.uploadId || payload?.id
+    form.value.avatarMediaId = payload?.uploadId || payload?.id
  } catch {
    /* handled globally */
  }
@@ -339,23 +339,20 @@ const onAvatarCropped = async (file) => {
 const onAvatarError = (msg) => toast.error(msg)

 const updateMutation = useUpdateProfileMutation()
+const resetPasswordMutation = useResetPasswordMutation()

 const onSubmit = async () => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
-  // Backend PATCH /me accepts: name, email, phone, password (+confirmation),
-  // avatar_media_id. Other UI-only fields (province/city/address/birthDate/…)
-  // are not in the backend Postman doc and are dropped here.
-  const name = [payload.firstName, payload.lastName].filter(Boolean).join(' ').trim()
+  // Backend PATCH /me accepts: name, email, phone, avatar_media_id.
+  // Other UI-only fields (province/city/address/birthDate/…) are not in
+  // the backend Postman doc and are dropped here. Password is handled
+  // separately via POST /reset-password.
  const body = {
-    ...(name ? { name } : {}),
-    ...(payload.phoneNumber ? { phone: payload.phoneNumber } : {}),
+    ...(payload.name ? { name: payload.name } : {}),
+    ...(payload.phone ? { phone: payload.phone } : {}),
    ...(payload.email ? { email: payload.email } : {}),
-    ...(payload.avatarId ? { avatarMediaId: payload.avatarId } : {}),
-  }
-  if (payload.password) {
-    body.password = payload.password
-    body.passwordConfirmation = payload.passwordConfirmation
+    ...(payload.avatarMediaId ? { avatarMediaId: payload.avatarMediaId } : {}),
  }
  await updateMutation.mutateAsync(body)
  await queryClient.invalidateQueries({ queryKey: authKeys.me() })
@@ -363,6 +360,25 @@ const onSubmit = async () => {
  router.push({ name: 'student-dashboard' })
 }

+const onResetPassword = async () => {
+  resetPasswordErrors()
+  const { isValid, payload } = await validatePassword({
+    phone: form.value.phone,
+    password: passwordForm.value.password,
+    passwordConfirmation: passwordForm.value.passwordConfirmation,
+  })
+  if (!isValid) return
+  try {
+    await resetPasswordMutation.mutateAsync(payload)
+    passwordForm.value.password = ''
+    passwordForm.value.passwordConfirmation = ''
+    resetPasswordErrors()
+    toast.success('رمز عبور با موفقیت تغییر یافت')
+  } catch (error) {
+    applyValidationErrors(error, setPasswordError)
+  }
+}
+
 const onCancel = () => router.push({ name: 'student-dashboard' })
 </script>

@@ -457,6 +473,13 @@ const onCancel = () => router.push({ name: 'student-dashboard' })
    margin-top: 1rem;
  }

+  &__password-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
  &__btn-cancel {
    min-width: 9rem;
  }
@@ -464,5 +487,9 @@ const onCancel = () => router.push({ name: 'student-dashboard' })
  &__btn-submit {
    min-width: 12rem;
  }
+
+  &__btn-reset {
+    min-width: 12rem;
+  }
 }
 </style>