From be26c6d89a9edae76c39734531841cd3afb79b56 Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sat, 23 May 2026 13:14:44 +0330
Subject: [PATCH] Add OTP and password login with profile password setup.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/api/auth.ts                        |  21 +++++
 src/api/types.ts                       |   1 +
 src/components/auth/AuthModeSwitch.vue |  27 ++++++
 src/views/LoginView.vue                |  62 +++++++++++---
 src/views/ProfileView.vue              | 113 +++++++++++++++++++++----
 5 files changed, 196 insertions(+), 28 deletions(-)
 create mode 100644 src/components/auth/AuthModeSwitch.vue

diff --git a/src/api/auth.ts b/src/api/auth.ts
index 1483ef6..3bbf276 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -31,3 +31,24 @@ export function verifyOtp(mobile: string, code: string) {
 export function fetchMe(token: string) {
   return api<User>('/auth/me', { token });
 }
+
+export function loginWithPassword(mobile: string, password: string) {
+  return api<VerifyOtpResponse>('/auth/login-password', {
+    method: 'POST',
+    body: JSON.stringify({
+      mobile: normalizeIranMobile(mobile),
+      password,
+    }),
+  });
+}
+
+export function setPassword(payload: {
+  password: string;
+  confirmPassword: string;
+  currentPassword?: string;
+}) {
+  return api<User>('/auth/set-password', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
diff --git a/src/api/types.ts b/src/api/types.ts
index a8a8023..039b66a 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -6,6 +6,7 @@ export type User = {
   fullName: string | null;
   role: UserRole;
   isActive: boolean;
+  hasPassword?: boolean;
   createdAt?: string;
   updatedAt?: string;
 };
diff --git a/src/components/auth/AuthModeSwitch.vue b/src/components/auth/AuthModeSwitch.vue
new file mode 100644
index 0000000..714f8aa
--- /dev/null
+++ b/src/components/auth/AuthModeSwitch.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="mb-4 flex rounded-xl border border-border bg-surface-3 p-1">
+    <button
+      type="button"
+      class="flex-1 rounded-lg py-2 text-sm font-medium transition"
+      :class="modelValue === 'otp' ? 'bg-surface text-text shadow-sm' : 'text-muted'"
+      @click="emit('update:modelValue', 'otp')"
+    >
+      کد یکبارمصرف
+    </button>
+    <button
+      type="button"
+      class="flex-1 rounded-lg py-2 text-sm font-medium transition"
+      :class="modelValue === 'password' ? 'bg-surface text-text shadow-sm' : 'text-muted'"
+      @click="emit('update:modelValue', 'password')"
+    >
+      رمز عبور
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+export type AuthLoginMode = 'otp' | 'password';
+
+defineProps<{ modelValue: AuthLoginMode }>();
+const emit = defineEmits<{ 'update:modelValue': [value: AuthLoginMode] }>();
+</script>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 1cb8a17..17c9701 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -7,6 +7,8 @@
       {{ error }}
     </p>
 
+    <AuthModeSwitch v-model="mode" />
+
     <form class="mt-auto space-y-4" @submit.prevent="onSubmit">
       <AppInput
         id="mobile"
@@ -19,23 +21,47 @@
         ltr
         required
       />
-      <AppButton type="submit" :loading="loading">دریافت کد تأیید</AppButton>
+
+      <AppInput
+        v-if="mode === 'password'"
+        id="password"
+        v-model="password"
+        label="رمز عبور"
+        type="password"
+        autocomplete="current-password"
+        ltr
+        required
+      />
+
+      <AppButton type="submit" :loading="loading">
+        {{ mode === 'otp' ? 'دریافت کد تأیید' : 'ورود' }}
+      </AppButton>
     </form>
+
+    <p v-if="mode === 'password'" class="mt-3 text-center text-xs text-muted">
+      اولین بار؟ با کد یکبارمصرف وارد شوید و در پروفایل رمز بسازید.
+    </p>
   </AuthLayout>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { requestOtp } from '@/api/auth';
+import { loginWithPassword, requestOtp } from '@/api/auth';
 import { isValidIranMobile, normalizeIranMobile } from '@/utils/mobile';
 import { ApiError } from '@/api/client';
+import AuthModeSwitch from '@/components/auth/AuthModeSwitch.vue';
+import type { AuthLoginMode } from '@/components/auth/AuthModeSwitch.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
 import AuthLayout from '@/layouts/AuthLayout.vue';
+import { useAuthStore } from '@/stores/auth';
 
 const router = useRouter();
+const auth = useAuthStore();
+const mode = ref<AuthLoginMode>('otp');
 const mobile = ref('');
+const password = ref('');
 const loading = ref(false);
 const error = ref('');
 
@@ -48,18 +74,30 @@ async function onSubmit() {
       error.value = 'شماره موبایل معتبر نیست. مثال: 09121234567';
       return;
     }
-    const res = await requestOtp(normalized);
-    await router.push({
-      name: 'verify',
-      query: {
-        mobile: normalized,
-        expires: String(res.expiresInSeconds),
-        ...(res.otpCode ? { devCode: res.otpCode } : {}),
-      },
-    });
+
+    if (mode.value === 'otp') {
+      const res = await requestOtp(normalized);
+      await router.push({
+        name: 'verify',
+        query: {
+          mobile: normalized,
+          expires: String(res.expiresInSeconds),
+          ...(res.otpCode ? { devCode: res.otpCode } : {}),
+        },
+      });
+      return;
+    }
+
+    const res = await loginWithPassword(normalized, password.value);
+    if (res.user.role !== 'admin') {
+      error.value = 'دسترسی فقط برای سوپر ادمین است.';
+      return;
+    }
+    auth.setSession(res.accessToken, res.user);
+    await router.replace({ name: 'dashboard' });
   } catch (e) {
     error.value =
-      e instanceof ApiError ? e.message : 'خطا در ارسال درخواست. دوباره تلاش کنید.';
+      e instanceof ApiError ? e.message : 'خطا در ورود. دوباره تلاش کنید.';
   } finally {
     loading.value = false;
   }
diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue
index 6741413..38d8819 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ProfileView.vue
@@ -1,6 +1,6 @@
 <template>
   <AdminLayout>
-    <PageHeader title="پروفایل" subtitle="اطلاعات حساب سوپر ادمین" />
+    <PageHeader title="پروفایل" subtitle="اطلاعات حساب و رمز عبور" />
 
     <p
       v-if="message"
@@ -15,26 +15,68 @@
       {{ error }}
     </p>
 
-    <form v-if="auth.user" class="mt-6 space-y-4" @submit.prevent="onSave">
-      <div class="rounded-2xl border border-border bg-surface-2 p-4">
-        <p class="text-xs text-muted">موبایل</p>
-        <p class="mt-1 font-medium" dir="ltr">{{ auth.user.mobile }}</p>
-      </div>
+    <form v-if="auth.user" class="mt-6 space-y-6" @submit.prevent="onSaveProfile">
+      <section class="space-y-4 rounded-2xl border border-border bg-surface-2 p-4">
+        <h2 class="text-sm font-semibold text-text">اطلاعات حساب</h2>
+        <div>
+          <p class="text-xs text-muted">موبایل</p>
+          <p class="mt-1 font-medium" dir="ltr">{{ auth.user.mobile }}</p>
+        </div>
+        <div>
+          <p class="text-xs text-muted">نقش</p>
+          <p class="mt-1 font-medium">{{ roleLabel(auth.user.role) }}</p>
+        </div>
+        <AppInput id="fullName" v-model="fullName" label="نام نمایشی" placeholder="نام شما" />
+        <AppButton type="submit" :loading="savingProfile">ذخیره پروفایل</AppButton>
+      </section>
 
-      <div class="rounded-2xl border border-border bg-surface-2 p-4">
-        <p class="text-xs text-muted">نقش</p>
-        <p class="mt-1 font-medium">{{ roleLabel(auth.user.role) }}</p>
-      </div>
+      <section class="space-y-4 rounded-2xl border border-border bg-surface-2 p-4">
+        <h2 class="text-sm font-semibold text-text">
+          {{ auth.user.hasPassword ? 'تغییر رمز عبور' : 'تنظیم رمز عبور' }}
+        </h2>
+        <p class="text-xs text-muted">
+          بعد از تنظیم رمز، می‌توانید با «ورود با رمز عبور» وارد شوید یا همچنان از کد یکبارمصرف
+          استفاده کنید.
+        </p>
 
-      <AppInput id="fullName" v-model="fullName" label="نام نمایشی" placeholder="نام شما" />
+        <AppInput
+          v-if="auth.user.hasPassword"
+          id="currentPassword"
+          v-model="currentPassword"
+          label="رمز فعلی"
+          type="password"
+          autocomplete="current-password"
+          ltr
+        />
 
-      <AppButton type="submit" :loading="saving">ذخیره تغییرات</AppButton>
+        <AppInput
+          id="newPassword"
+          v-model="newPassword"
+          label="رمز جدید"
+          type="password"
+          autocomplete="new-password"
+          ltr
+        />
+        <AppInput
+          id="confirmPassword"
+          v-model="confirmPassword"
+          label="تکرار رمز جدید"
+          type="password"
+          autocomplete="new-password"
+          ltr
+        />
+
+        <AppButton type="button" variant="ghost" :loading="savingPassword" @click="onSavePassword">
+          {{ auth.user.hasPassword ? 'به‌روزرسانی رمز' : 'ذخیره رمز عبور' }}
+        </AppButton>
+      </section>
     </form>
   </AdminLayout>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
+import { setPassword } from '@/api/auth';
 import { updateUser } from '@/api/users';
 import { ApiError } from '@/api/client';
 import AppButton from '@/components/ui/AppButton.vue';
@@ -46,7 +88,11 @@ import { roleLabel } from '@/utils/format';
 
 const auth = useAuthStore();
 const fullName = ref('');
-const saving = ref(false);
+const currentPassword = ref('');
+const newPassword = ref('');
+const confirmPassword = ref('');
+const savingProfile = ref(false);
+const savingPassword = ref(false);
 const error = ref('');
 const message = ref('');
 
@@ -58,11 +104,11 @@ watch(
   { immediate: true },
 );
 
-async function onSave() {
+async function onSaveProfile() {
   if (!auth.user) return;
   error.value = '';
   message.value = '';
-  saving.value = true;
+  savingProfile.value = true;
   try {
     const updated = await updateUser(auth.user.id, {
       fullName: fullName.value.trim() || null,
@@ -72,7 +118,42 @@ async function onSave() {
   } catch (e) {
     error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره';
   } finally {
-    saving.value = false;
+    savingProfile.value = false;
+  }
+}
+
+async function onSavePassword() {
+  if (!auth.user) return;
+  error.value = '';
+  message.value = '';
+
+  if (newPassword.value.length < 8) {
+    error.value = 'رمز باید حداقل ۸ کاراکتر باشد.';
+    return;
+  }
+  if (newPassword.value !== confirmPassword.value) {
+    error.value = 'تکرار رمز با رمز جدید یکسان نیست.';
+    return;
+  }
+
+  savingPassword.value = true;
+  try {
+    const updated = await setPassword({
+      password: newPassword.value,
+      confirmPassword: confirmPassword.value,
+      ...(auth.user.hasPassword ? { currentPassword: currentPassword.value } : {}),
+    });
+    auth.setUser(updated);
+    currentPassword.value = '';
+    newPassword.value = '';
+    confirmPassword.value = '';
+    message.value = updated.hasPassword && currentPassword.value
+      ? 'رمز به‌روزرسانی شد.'
+      : 'رمز عبور ذخیره شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره رمز';
+  } finally {
+    savingPassword.value = false;
   }
 }
 </script>