Montime/SadmMontime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add OTP and password login with profile password setup.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mahdi
2026-05-23 13:14:44 +03:30
co-authored by Cursor
parent ebae7687af
commit be26c6d89a
5 changed files with 196 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/auth.ts
+21
View File
@@ -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),
});
}
src/api/types.ts
+1
View File
@@ -6,6 +6,7 @@ export type User = {
fullName: string | null;
role: UserRole;
isActive: boolean;
hasPassword?: boolean;
createdAt?: string;
updatedAt?: string;
};
src/components/auth/AuthModeSwitch.vue
+27
View File
@@ -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>
src/views/LoginView.vue
+50 -12
View File
@@ -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;
}
src/views/ProfileView.vue
+97 -16
View File
@@ -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>