fix: bugs

src/features/auth/components/AuthHeading.vue

@@ -2,7 +2,11 @@
   <div class="auth-heading">
     <img :src="logo" alt="banu" class="auth-heading__logo" />
     <h2 class="auth-heading__title">{{ title }}</h2>
-    <p v-if="subtitle" class="auth-heading__subtitle">
+    <p v-if="step === 'otp'" class="auth-heading__subtitle">
+      <span class="auth-heading__phone-label">ارسال کد فعال‌سازی به شماره</span>
+      <span class="auth-heading__phone">{{ phoneNumber || '*******' }}</span>
+    </p>
+    <p v-else-if="subtitle" class="auth-heading__subtitle">
       <slot name="subtitle">{{ subtitle }}</slot>
     </p>
     <slot name="below" />
@@ -15,6 +19,8 @@ import { gallery } from '@/utils/gallery'
 defineProps({
   title: { type: String, required: true },
   subtitle: { type: String, default: '' },
+  step: { type: String, default: '' },
+  phoneNumber: { type: String, default: '' },
 })
 
 const logo = gallery.authLogo
@@ -49,5 +55,18 @@ const logo = gallery.authLogo
     color: #a7a7a7;
     margin: 0.25rem 0 0;
   }
+
+  &__phone-label {
+    padding-inline-end: 0.75rem;
+    color: #a7a7a7;
+    font-family: var(--font-family-fa);
+    border-left: 1px solid #a7a7a7;
+  }
+
+  &__phone {
+    padding-inline-start: 0.75rem;
+    color: var(--color-prim-gray);
+    font-family: var(--font-family-number-fa);
+  }
 }
 </style>

src/features/auth/components/LoginForm.vue

@@ -18,9 +18,6 @@
       </TextField>
 
       <div class="login-form__password-wrap">
-        <button type="button" class="login-form__forgot" @click="goForgotPassword">
-          رمز عبور خودم را فراموش کرده ام
-        </button>
         <PasswordField
           v-model="form.password"
           name="password"
@@ -30,6 +27,10 @@
         />
       </div>
 
+      <button type="button" class="login-form__forgot" @click="goForgotPassword">
+        رمز عبور خودم را فراموش کرده ام
+      </button>
+
       <BaseButton
         type="submit"
         text="تایید اطلاعات"
@@ -138,9 +139,7 @@ const goForgotPassword = () => emit('next', { mode: 'forgotPassword' })
 }
 
 .login-form__forgot {
-  position: absolute;
-  inset-inline-start: 0;
-  top: -0.25rem;
+  width: 100%;
   z-index: 10;
   background: transparent;
   border: none;
@@ -149,6 +148,7 @@ const goForgotPassword = () => emit('next', { mode: 'forgotPassword' })
   font-weight: 500;
   font-size: 0.75rem;
   color: var(--color-prim-gray);
+  text-align: right;
 
   &:hover {
     text-decoration: underline;
@@ -168,15 +168,19 @@ const goForgotPassword = () => emit('next', { mode: 'forgotPassword' })
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 0.5rem;
+
+  @media (min-width: 768px) {
+    margin-top: auto;
+  }
 }
 
 .login-form__link {
   display: inline-flex;
-  align-items: center;
   gap: 0.25rem;
   font-family: var(--font-family-fa);
   font-size: 0.75rem;
   color: #a7a7a7;
+  align-items: start;
 
   a {
     color: var(--color-sec-gray);

src/features/auth/components/LoginWithVerifyCodeForm.vue

@@ -35,9 +35,11 @@
         </template>
       </BaseButton>
 
-      <button type="button" class="login-otp__back" @click="emit('back')">
-        بازگشت به ورود با رمز عبور
-      </button>
+      <div class="login-otp__links">
+        <button type="button" class="login-otp__back" @click="emit('back')">
+          بازگشت به ورود با رمز عبور
+        </button>
+      </div>
     </div>
 
     <div class="auth-form__footer">
@@ -124,8 +126,18 @@ const onSubmit = async () => {
   width: 100%;
 }
 
+.login-otp__links {
+  margin-top: 1.5rem;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+
+  @media (min-width: 768px) {
+    margin-top: auto;
+  }
+}
+
 .login-otp__back {
-  margin-top: 1rem;
   background: transparent;
   border: none;
   cursor: pointer;

src/features/auth/components/PatternSection.vue

@@ -26,7 +26,7 @@ defineProps({
     height: 100dvh;
     background-size: contain;
     background-position-x: right;
-    background-repeat: no-repeat;
+    background-repeat: repeat;
 
     @media (min-width: 768px) {
       flex-basis: 66.6667%;

src/features/auth/components/SignupForm.vue

@@ -160,7 +160,7 @@ const onSubmit = async () => {
 }
 
 .signup-form__login-link {
-  margin-top: 1rem;
+  margin-top: 1.5rem;
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -168,6 +168,10 @@ const onSubmit = async () => {
   font-size: 0.75rem;
   color: #a7a7a7;
 
+  @media (min-width: 768px) {
+    margin-top: auto;
+  }
+
   a {
     color: var(--color-sec-gray);
     text-decoration: underline;

src/features/auth/components/VerifyCodeForm.vue

@@ -1,11 +1,7 @@
 <template>
   <form class="auth-form" @submit.prevent="onSubmit">
     <div class="auth-form__body">
-      <AuthHeading title="کد تایید">
-        <template #subtitle>
-          <span class="verify__phone-label">ارسال کد فعال‌سازی به شماره</span>
-          <span class="verify__phone">{{ phoneNumber || '*******' }}</span>
-        </template>
+      <AuthHeading title="کد تایید" step="otp" :phone-number="phoneNumber">
         <template #below>
           <button type="button" class="verify__resend" @click="onResend" :disabled="resending">
             {{ resending ? 'در حال ارسال...' : 'ارسال مجدد کد تایید' }}
@@ -33,9 +29,20 @@
         </template>
       </BaseButton>
 
-      <button type="button" class="verify__back" @click="emit('back')">
-        تغییر شماره تلفن همراه
-      </button>
+      <div class="verify__links">
+        <div class="verify__link">
+          <SvgIcon name="user" :size="12" color="#A7A7A7" />
+          <button type="button" class="verify__link-btn" @click="emit('password-login')">
+            ورود با رمز عبور
+          </button>
+        </div>
+        <div class="verify__link">
+          <SvgIcon name="phone" :size="12" color="#A7A7A7" />
+          <button type="button" class="verify__link-btn" @click="emit('back')">
+            تغییر شماره تلفن همراه
+          </button>
+        </div>
+      </div>
     </div>
 
     <div class="auth-form__footer">
@@ -71,7 +78,7 @@ const props = defineProps({
   mode: { type: String, default: 'loginWithCode' },
 })
 
-const emit = defineEmits(['back', 'verified'])
+const emit = defineEmits(['back', 'verified', 'password-login'])
 
 const schema = verifyCodeSchema
 const form = ref({ code: '' })
@@ -170,18 +177,6 @@ const onResend = async () => {
   }
 }
 
-.verify__phone-label {
-  padding-inline-end: 0.75rem;
-  color: #a7a7a7;
-  font-family: var(--font-family-fa);
-}
-
-.verify__phone {
-  padding-inline-start: 0.75rem;
-  color: var(--color-prim-gray);
-  font-family: var(--font-family-number-fa);
-}
-
 .verify__resend {
   margin-top: 0.5rem;
   background: transparent;
@@ -205,14 +200,36 @@ const onResend = async () => {
   width: 100%;
 }
 
-.verify__back {
-  margin-top: 1rem;
+.verify__links {
+  margin-top: 1.5rem;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+
+  @media (min-width: 768px) {
+    margin-top: auto;
+  }
+}
+
+.verify__link {
+  display: inline-flex;
+  align-items: start;
+  gap: 0.25rem;
+  font-family: var(--font-family-fa);
+  font-size: 0.75rem;
+  color: #a7a7a7;
+}
+
+.verify__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;

src/features/auth/pages/LoginPage.vue

@@ -12,6 +12,7 @@
       :phone-number="phoneNumber"
       :mode="mode"
       @back="step = LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE"
+      @password-login="step = LOGIN_STEPS.LOGIN"
     />
   </AuthShell>
 </template>
@@ -33,7 +34,7 @@ const handleNext = ({ mode: newMode }) => {
   step.value = LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE
 }
 
-const handleCodeSent = ({ phoneNumber: phone, mode: newMode }) => {
+const handleCodeSent = ({ phone, mode: newMode }) => {
   phoneNumber.value = phone
   mode.value = newMode
   step.value = LOGIN_STEPS.VERIFY_CODE

src/features/auth/pages/SignupPage.vue

@@ -7,6 +7,7 @@
       mode="signup"
       @back="step = SIGNUP_STEPS.SIGNUP"
       @verified="handleVerified"
+      @password-login="router.push({ name: 'login' })"
     />
   </AuthShell>
 </template>