first commit

2026-05-13 01:43:05 +03:30
commit d2a577f254
297 changed files with 36274 additions and 0 deletions
@@ -0,0 +1,200 @@
+<template>
+  <form class="auth-form" @submit.prevent="onSubmit">
+    <div class="auth-form__body">
+      <AuthHeading title="ورود" subtitle="در این قسمت اطلاعات خود را وارد کنید." />
+
+      <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>
+
+      <div class="login-form__password-wrap">
+        <button type="button" class="login-form__forgot" @click="goForgotPassword">
+          رمز عبور خودم را فراموش کرده ام
+        </button>
+        <PasswordField
+          v-model="form.password"
+          name="password"
+          label="رمز عبور"
+          :error="errors.password"
+          @blur="validateAt('password', form.password)"
+        />
+      </div>
+
+      <BaseButton
+        type="submit"
+        text="تایید اطلاعات"
+        :loading="loginMutation.isPending.value"
+        custom-class="login-form__submit"
+      >
+        <template #appendIcon>
+          <SvgIcon name="arrow-left" :size="22" color="#fff" />
+        </template>
+      </BaseButton>
+
+      <div class="login-form__links">
+        <div class="login-form__link">
+          <SvgIcon name="user" :size="12" color="#A7A7A7" />
+          <span>حساب کاربری ندارم</span>
+          <RouterLink :to="{ name: 'signup' }">ثبت نام</RouterLink>
+        </div>
+        <div class="login-form__link">
+          <SvgIcon name="check" :size="12" color="#A7A7A7" />
+          <button type="button" class="login-form__link-btn" @click="goLoginWithCode">
+            ورود با کد تایید
+          </button>
+        </div>
+      </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 { useLoginMutation } from '@/services/query/auth'
+import { loginSchema } from '@/features/auth/schema'
+import { useRedirectAfterLogin } from '@/features/auth/composables/useRedirectAfterLogin'
+
+const emit = defineEmits(['next'])
+
+const schema = loginSchema
+
+const form = ref({ phoneNumber: '', password: '' })
+const { validate, validateAt, errors } = useYup(schema)
+
+const loginMutation = useLoginMutation()
+const { applySession } = useAuth()
+const redirectAfterLogin = useRedirectAfterLogin()
+
+const onSubmit = async () => {
+  const { isValid, payload } = await validate(form.value)
+  if (!isValid) return
+  const response = await loginMutation.mutateAsync(payload)
+  applySession(response?.data ?? response)
+  redirectAfterLogin()
+}
+
+const goLoginWithCode = () => emit('next', { mode: 'loginWithCode' })
+const goForgotPassword = () => emit('next', { mode: 'forgotPassword' })
+</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%;
+  }
+}
+
+.login-form__password-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.login-form__forgot {
+  position: absolute;
+  inset-inline-start: 0;
+  top: -0.25rem;
+  z-index: 10;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-family-fa);
+  font-weight: 500;
+  font-size: 0.75rem;
+  color: var(--color-prim-gray);
+
+  &:hover {
+    text-decoration: underline;
+    color: var(--color-sec-gray);
+  }
+}
+
+.login-form__submit {
+  margin-top: 1.5rem;
+  width: 100%;
+}
+
+.login-form__links {
+  margin-top: 1.5rem;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.login-form__link {
+  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;
+  }
+}
+
+.login-form__link-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-family-fa);
+  font-size: 0.75rem;
+  color: #a7a7a7;
+  padding: 0;
+
+  &:hover {
+    text-decoration: underline;
+    color: var(--color-sec-gray);
+  }
+}
+</style>