140 lines
3.9 KiB
Vue
140 lines
3.9 KiB
Vue
<template>
|
|
<AuthLayout title="کد تأیید" :subtitle="`کد ارسالشده به ${mobile}`">
|
|
<p
|
|
v-if="devCode"
|
|
class="mb-4 rounded-xl border border-brand-500/40 bg-brand-500/10 px-4 py-3 text-sm text-brand-700 dark:text-brand-500"
|
|
>
|
|
حالت توسعه — کد: {{ devCode }}
|
|
</p>
|
|
<p
|
|
v-if="error"
|
|
class="mb-4 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>
|
|
|
|
<form class="space-y-4" @submit.prevent="onSubmit">
|
|
<AppInput
|
|
id="code"
|
|
v-model="code"
|
|
label="کد ۶ رقمی"
|
|
type="text"
|
|
inputmode="numeric"
|
|
maxlength="8"
|
|
placeholder="123456"
|
|
autocomplete="one-time-code"
|
|
ltr
|
|
required
|
|
/>
|
|
<AppButton type="submit" :loading="loading">ورود</AppButton>
|
|
</form>
|
|
|
|
<p v-if="secondsLeft > 0" class="mt-4 text-center text-sm text-muted">
|
|
ارسال مجدد تا {{ secondsLeft }} ثانیه
|
|
</p>
|
|
<AppButton
|
|
v-else
|
|
variant="ghost"
|
|
class="mt-2"
|
|
:loading="resendLoading"
|
|
@click="resend"
|
|
>
|
|
ارسال مجدد کد
|
|
</AppButton>
|
|
|
|
<AppButton
|
|
variant="ghost"
|
|
class="mt-2"
|
|
@click="router.push({ name: isAdmin ? 'admin-login' : 'login' })"
|
|
>
|
|
تغییر شماره موبایل
|
|
</AppButton>
|
|
</AuthLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { requestOtp, verifyOtp } from '@/api/auth';
|
|
import { ApiError } from '@/api/client';
|
|
import { getAppMode } from '@/composables/useAppMode';
|
|
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 route = useRoute();
|
|
const router = useRouter();
|
|
const auth = useAuthStore();
|
|
const isAdmin = computed(() => getAppMode() === 'admin' || route.meta.adminAuth === true);
|
|
|
|
const mobile = computed(() => String(route.query.mobile ?? ''));
|
|
const devCode = computed(() => route.query.devCode as string | undefined);
|
|
|
|
const code = ref(devCode.value ?? '');
|
|
const loading = ref(false);
|
|
const resendLoading = ref(false);
|
|
const error = ref('');
|
|
const secondsLeft = ref(Number(route.query.expires) || 120);
|
|
let timer: ReturnType<typeof setInterval> | null = null;
|
|
|
|
onMounted(() => {
|
|
if (!mobile.value) {
|
|
router.replace({ name: isAdmin.value ? 'admin-login' : 'login' });
|
|
return;
|
|
}
|
|
timer = setInterval(() => {
|
|
if (secondsLeft.value > 0) secondsLeft.value -= 1;
|
|
}, 1000);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (timer) clearInterval(timer);
|
|
});
|
|
|
|
async function onSubmit() {
|
|
error.value = '';
|
|
loading.value = true;
|
|
try {
|
|
const res = await verifyOtp(mobile.value, code.value.trim());
|
|
auth.setSession(res.accessToken, res.user);
|
|
|
|
if (isAdmin.value) {
|
|
if (!auth.isAdmin) {
|
|
auth.logout();
|
|
error.value = 'دسترسی ادمین ندارید.';
|
|
return;
|
|
}
|
|
await router.replace({ name: 'admin-home' });
|
|
return;
|
|
}
|
|
|
|
await router.replace({ name: 'app-home' });
|
|
} catch (e) {
|
|
error.value =
|
|
e instanceof ApiError ? e.message : 'کد نامعتبر است. دوباره تلاش کنید.';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function resend() {
|
|
error.value = '';
|
|
resendLoading.value = true;
|
|
try {
|
|
const res = await requestOtp(mobile.value);
|
|
secondsLeft.value = res.expiresInSeconds;
|
|
if (res.otpCode) {
|
|
await router.replace({
|
|
query: { ...route.query, devCode: res.otpCode, expires: String(res.expiresInSeconds) },
|
|
});
|
|
}
|
|
} catch (e) {
|
|
error.value =
|
|
e instanceof ApiError ? e.message : 'ارسال مجدد ناموفق بود.';
|
|
} finally {
|
|
resendLoading.value = false;
|
|
}
|
|
}
|
|
</script>
|