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>