115 lines
3.6 KiB
Vue
115 lines
3.6 KiB
Vue
<template>
|
|
<AuthLayout brand subtitle="ورود به حساب کاربری">
|
|
<div class="flex flex-1 flex-col justify-start gap-8 pt-10">
|
|
<section class="flex flex-col items-center text-center">
|
|
<AppLogo variant="vertical" class="mb-3 h-28 w-auto object-contain" />
|
|
<AppWelcomeMessage />
|
|
</section>
|
|
|
|
<section class="flex flex-col gap-4">
|
|
<p
|
|
v-if="error"
|
|
class="rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600 dark:text-red-400"
|
|
>
|
|
{{ error }}
|
|
</p>
|
|
|
|
<div class="flex flex-col gap-8">
|
|
<AuthModeSwitch v-model="mode" />
|
|
|
|
<form class="flex flex-col gap-4" @submit.prevent="onSubmit">
|
|
<AppInput
|
|
id="mobile"
|
|
v-model="mobile"
|
|
label="شماره موبایل"
|
|
type="tel"
|
|
inputmode="numeric"
|
|
placeholder="09121234567"
|
|
autocomplete="tel"
|
|
ltr
|
|
required
|
|
/>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<p v-if="mode === 'password'" class="text-center text-xs text-muted">
|
|
اولین بار؟ با کد یکبارمصرف وارد شوید و در پروفایل رمز بسازید.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</AuthLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
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 AppLogo from '@/components/brand/AppLogo.vue';
|
|
import AppWelcomeMessage from '@/components/brand/AppWelcomeMessage.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('');
|
|
|
|
async function onSubmit() {
|
|
error.value = '';
|
|
loading.value = true;
|
|
try {
|
|
const normalized = normalizeIranMobile(mobile.value);
|
|
if (!isValidIranMobile(normalized)) {
|
|
error.value = 'شماره موبایل معتبر نیست. مثال: 09121234567';
|
|
return;
|
|
}
|
|
|
|
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);
|
|
auth.setSession(res.accessToken, res.user);
|
|
await router.replace({ name: 'app-home' });
|
|
} catch (e) {
|
|
error.value =
|
|
e instanceof ApiError ? e.message : 'خطا در ورود. دوباره تلاش کنید.';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
</script>
|