feat: initial admin panel (Vue + Tailwind)
This commit is contained in:
@@ -0,0 +1 @@
|
||||
VITE_API_URL=https://api.montime.ir
|
||||
@@ -0,0 +1,5 @@
|
||||
node_modules
|
||||
dist
|
||||
.env
|
||||
.env.local
|
||||
*.log
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<html lang="fa" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>مونتایم — پنل مدیریت</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+2700
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "montime-adm",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "vue-tsc --noEmit -p tsconfig.app.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^12.8.2",
|
||||
"pinia": "^2.3.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "~5.7.3",
|
||||
"vite": "^6.0.7",
|
||||
"vue-tsc": "^2.2.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
@@ -0,0 +1,37 @@
|
||||
import { api } from './client';
|
||||
|
||||
export type User = {
|
||||
id: string;
|
||||
mobile: string;
|
||||
fullName: string | null;
|
||||
role: string;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
export type RequestOtpResponse = {
|
||||
expiresInSeconds: number;
|
||||
otpCode?: string;
|
||||
};
|
||||
|
||||
export type VerifyOtpResponse = {
|
||||
accessToken: string;
|
||||
user: User;
|
||||
};
|
||||
|
||||
export function requestOtp(mobile: string) {
|
||||
return api<RequestOtpResponse>('/auth/request-otp', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ mobile }),
|
||||
});
|
||||
}
|
||||
|
||||
export function verifyOtp(mobile: string, code: string) {
|
||||
return api<VerifyOtpResponse>('/auth/verify-otp', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ mobile, code }),
|
||||
});
|
||||
}
|
||||
|
||||
export function fetchMe(token: string) {
|
||||
return api<User>('/auth/me', { token });
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
const baseUrl = import.meta.env.VITE_API_URL ?? 'http://localhost:3000';
|
||||
|
||||
export class ApiError extends Error {
|
||||
constructor(
|
||||
readonly status: number,
|
||||
message: string,
|
||||
) {
|
||||
super(message);
|
||||
this.name = 'ApiError';
|
||||
}
|
||||
}
|
||||
|
||||
type ApiOptions = RequestInit & {
|
||||
token?: string;
|
||||
};
|
||||
|
||||
const TOKEN_KEY = 'montime_admin_access_token';
|
||||
|
||||
export function getApiToken(): string | null {
|
||||
return localStorage.getItem(TOKEN_KEY);
|
||||
}
|
||||
|
||||
export async function api<T>(path: string, options: ApiOptions = {}): Promise<T> {
|
||||
const token = options.token ?? getApiToken() ?? undefined;
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...(options.headers as Record<string, string> | undefined),
|
||||
};
|
||||
|
||||
if (token) {
|
||||
headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
const { token: _token, ...fetchOptions } = options;
|
||||
|
||||
const res = await fetch(`${baseUrl}${path}`, {
|
||||
...fetchOptions,
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const body = (await res.json().catch(() => null)) as
|
||||
| { message?: string | string[] }
|
||||
| null;
|
||||
const msg = Array.isArray(body?.message)
|
||||
? body.message.join(', ')
|
||||
: body?.message ?? res.statusText;
|
||||
throw new ApiError(res.status, msg);
|
||||
}
|
||||
|
||||
if (res.status === 204) {
|
||||
return undefined as T;
|
||||
}
|
||||
|
||||
return res.json() as Promise<T>;
|
||||
}
|
||||
|
||||
export { TOKEN_KEY };
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="mx-auto flex min-h-dvh w-full max-w-app flex-col bg-surface shadow-xl shadow-black/5 dark:shadow-black/30"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<button
|
||||
:type="type"
|
||||
class="inline-flex w-full items-center justify-center rounded-xl px-4 py-3 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-50"
|
||||
:class="variantClass"
|
||||
:disabled="disabled || loading"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
variant?: 'primary' | 'ghost' | 'danger';
|
||||
type?: 'button' | 'submit';
|
||||
disabled?: boolean;
|
||||
loading?: boolean;
|
||||
}>(),
|
||||
{ variant: 'primary', type: 'button', disabled: false, loading: false },
|
||||
);
|
||||
|
||||
const variantClass = computed(() => {
|
||||
switch (props.variant) {
|
||||
case 'ghost':
|
||||
return 'bg-transparent text-muted hover:bg-surface-3 hover:text-text';
|
||||
case 'danger':
|
||||
return 'bg-red-500/15 text-red-600 dark:text-red-400 hover:bg-red-500/25';
|
||||
default:
|
||||
return 'bg-brand-600 text-white hover:bg-brand-700';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="space-y-1.5">
|
||||
<label v-if="label" :for="id" class="block text-sm font-medium text-muted">
|
||||
{{ label }}
|
||||
</label>
|
||||
<input
|
||||
:id="id"
|
||||
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none transition placeholder:text-muted focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
|
||||
:class="ltr ? 'text-left' : ''"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({ inheritAttrs: false });
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
label?: string;
|
||||
id?: string;
|
||||
ltr?: boolean;
|
||||
}>(),
|
||||
{ ltr: false },
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-surface-2 text-muted transition hover:text-text"
|
||||
:aria-label="isDark ? 'حالت روشن' : 'حالت تاریک'"
|
||||
@click="toggle"
|
||||
>
|
||||
<span v-if="isDark" aria-hidden="true">☀️</span>
|
||||
<span v-else aria-hidden="true">🌙</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useTheme } from '@/composables/useTheme';
|
||||
|
||||
const { isDark: mode, toggle } = useTheme();
|
||||
const isDark = computed(() => mode.value === 'dark');
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useColorMode } from '@vueuse/core';
|
||||
|
||||
export function useTheme() {
|
||||
const mode = useColorMode({
|
||||
storageKey: 'montime-adm-theme',
|
||||
attribute: 'class',
|
||||
modes: {
|
||||
light: 'light',
|
||||
dark: 'dark',
|
||||
},
|
||||
});
|
||||
|
||||
function toggle() {
|
||||
mode.value = mode.value === 'dark' ? 'light' : 'dark';
|
||||
}
|
||||
|
||||
return { isDark: mode, toggle };
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<AppShell>
|
||||
<header
|
||||
class="sticky top-0 z-10 flex items-center justify-between border-b border-brand-500/30 bg-surface/95 px-4 py-3 backdrop-blur"
|
||||
>
|
||||
<div>
|
||||
<p class="font-bold text-text">پنل مدیریت</p>
|
||||
<p class="text-xs text-brand-600 dark:text-brand-500">adm.montime.ir</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl px-3 py-2 text-sm text-muted hover:bg-surface-3"
|
||||
@click="onLogout"
|
||||
>
|
||||
خروج
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-1 space-y-4 px-4 py-4">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<nav class="sticky bottom-0 border-t border-border bg-surface/95 px-2 py-2">
|
||||
<div class="grid grid-cols-3 gap-1">
|
||||
<RouterLink
|
||||
v-for="item in items"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="flex flex-col items-center rounded-xl py-2 text-xs"
|
||||
:class="
|
||||
route.name === item.name
|
||||
? 'bg-brand-500/15 text-brand-700 dark:text-brand-500'
|
||||
: 'text-muted hover:bg-surface-3'
|
||||
"
|
||||
>
|
||||
<span class="text-lg">{{ item.icon }}</span>
|
||||
{{ item.label }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</nav>
|
||||
</AppShell>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import AppShell from '@/components/shell/AppShell.vue';
|
||||
import ThemeToggle from '@/components/ui/ThemeToggle.vue';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const items = [
|
||||
{ to: '/', name: 'dashboard', label: 'داشبورد', icon: '📊' },
|
||||
{ to: '/businesses', name: 'businesses', label: 'کسبوکار', icon: '🏪' },
|
||||
{ to: '/users', name: 'users', label: 'کاربران', icon: '👥' },
|
||||
];
|
||||
|
||||
function onLogout() {
|
||||
useAuthStore().logout();
|
||||
router.push({ name: 'login' });
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<AppShell>
|
||||
<header class="flex items-center justify-between px-4 py-3">
|
||||
<div>
|
||||
<p class="text-lg font-bold text-text">{{ title }}</p>
|
||||
<p v-if="subtitle" class="text-sm text-muted">{{ subtitle }}</p>
|
||||
</div>
|
||||
<ThemeToggle />
|
||||
</header>
|
||||
<main class="flex flex-1 flex-col px-4 pb-8">
|
||||
<slot />
|
||||
</main>
|
||||
</AppShell>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AppShell from '@/components/shell/AppShell.vue';
|
||||
import ThemeToggle from '@/components/ui/ThemeToggle.vue';
|
||||
|
||||
defineProps<{
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
}>();
|
||||
</script>
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import './styles/main.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(createPinia());
|
||||
app.use(router);
|
||||
app.mount('#app');
|
||||
@@ -0,0 +1,61 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { useAuthStore } from '@/stores/auth';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/views/LoginView.vue'),
|
||||
meta: { guest: true },
|
||||
},
|
||||
{
|
||||
path: '/verify',
|
||||
name: 'verify',
|
||||
component: () => import('@/views/VerifyOtpView.vue'),
|
||||
meta: { guest: true },
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'dashboard',
|
||||
component: () => import('@/views/DashboardView.vue'),
|
||||
meta: { requiresAuth: true, requiresAdmin: true },
|
||||
},
|
||||
{
|
||||
path: '/businesses',
|
||||
name: 'businesses',
|
||||
component: () => import('@/views/BusinessesView.vue'),
|
||||
meta: { requiresAuth: true, requiresAdmin: true },
|
||||
},
|
||||
{
|
||||
path: '/users',
|
||||
name: 'users',
|
||||
component: () => import('@/views/UsersView.vue'),
|
||||
meta: { requiresAuth: true, requiresAdmin: true },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
router.beforeEach(async (to) => {
|
||||
const auth = useAuthStore();
|
||||
|
||||
if (auth.token && !auth.user) {
|
||||
await auth.loadUser();
|
||||
}
|
||||
|
||||
if (to.meta.requiresAuth && !auth.isLoggedIn) {
|
||||
return { name: 'login' };
|
||||
}
|
||||
|
||||
if (to.meta.requiresAdmin && auth.isLoggedIn && !auth.isAdmin) {
|
||||
auth.logout();
|
||||
return { name: 'login' };
|
||||
}
|
||||
|
||||
if (to.meta.guest && auth.isLoggedIn && auth.isAdmin) {
|
||||
return { name: 'dashboard' };
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
@@ -0,0 +1,46 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { computed, ref } from 'vue';
|
||||
import type { User } from '@/api/auth';
|
||||
import { fetchMe } from '@/api/auth';
|
||||
import { TOKEN_KEY } from '@/api/client';
|
||||
|
||||
export const useAuthStore = defineStore('auth', () => {
|
||||
const token = ref<string | null>(localStorage.getItem(TOKEN_KEY));
|
||||
const user = ref<User | null>(null);
|
||||
|
||||
const isLoggedIn = computed(() => Boolean(token.value));
|
||||
const isAdmin = computed(() => user.value?.role === 'admin');
|
||||
|
||||
function setSession(accessToken: string, profile: User) {
|
||||
token.value = accessToken;
|
||||
user.value = profile;
|
||||
localStorage.setItem(TOKEN_KEY, accessToken);
|
||||
}
|
||||
|
||||
function logout() {
|
||||
token.value = null;
|
||||
user.value = null;
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
}
|
||||
|
||||
async function loadUser() {
|
||||
if (!token.value) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
user.value = await fetchMe(token.value);
|
||||
} catch {
|
||||
logout();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
token,
|
||||
user,
|
||||
isLoggedIn,
|
||||
isAdmin,
|
||||
setSession,
|
||||
logout,
|
||||
loadUser,
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-2: #fffbeb;
|
||||
--color-surface-3: #fef3c7;
|
||||
--color-border: #fde68a;
|
||||
--color-text: #0f172a;
|
||||
--color-muted: #64748b;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--color-surface: #0f1419;
|
||||
--color-surface-2: #1a2332;
|
||||
--color-surface-3: #243044;
|
||||
--color-border: #334155;
|
||||
--color-text: #f1f5f9;
|
||||
--color-muted: #94a3b8;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-surface-2 font-sans text-text;
|
||||
}
|
||||
|
||||
#app {
|
||||
@apply min-h-dvh;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<AdminLayout>
|
||||
<h1 class="text-xl font-bold text-text">کسبوکارها</h1>
|
||||
<div
|
||||
class="mt-4 rounded-2xl border border-dashed border-border bg-surface-2 p-6 text-center text-sm text-muted"
|
||||
>
|
||||
بهزودی — CRUD و واگذاری مدیر کسبوکار
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<AdminLayout>
|
||||
<h1 class="text-xl font-bold text-text">داشبورد</h1>
|
||||
<p class="mt-2 text-sm text-muted">سوپر ادمین — مونتایم</p>
|
||||
<div class="mt-6 grid gap-3 sm:grid-cols-2">
|
||||
<div class="rounded-2xl border border-border bg-surface-2 p-4">
|
||||
<p class="text-xs text-muted">کسبوکارها</p>
|
||||
<p class="mt-1 text-2xl font-bold text-text">—</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-border bg-surface-2 p-4">
|
||||
<p class="text-xs text-muted">کاربران</p>
|
||||
<p class="mt-1 text-2xl font-bold text-text">—</p>
|
||||
</div>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<AuthLayout title="پنل مدیریت" subtitle="ورود سوپر ادمین">
|
||||
<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="mt-auto space-y-4" @submit.prevent="onSubmit">
|
||||
<AppInput
|
||||
id="mobile"
|
||||
v-model="mobile"
|
||||
label="شماره موبایل"
|
||||
type="tel"
|
||||
inputmode="numeric"
|
||||
placeholder="09121234567"
|
||||
autocomplete="tel"
|
||||
ltr
|
||||
required
|
||||
/>
|
||||
<AppButton type="submit" :loading="loading">دریافت کد تأیید</AppButton>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { requestOtp } from '@/api/auth';
|
||||
import { ApiError } from '@/api/client';
|
||||
import AppButton from '@/components/ui/AppButton.vue';
|
||||
import AppInput from '@/components/ui/AppInput.vue';
|
||||
import AuthLayout from '@/layouts/AuthLayout.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const mobile = ref('');
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
|
||||
async function onSubmit() {
|
||||
error.value = '';
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await requestOtp(mobile.value.trim());
|
||||
await router.push({
|
||||
name: 'verify',
|
||||
query: {
|
||||
mobile: mobile.value.trim(),
|
||||
expires: String(res.expiresInSeconds),
|
||||
...(res.otpCode ? { devCode: res.otpCode } : {}),
|
||||
},
|
||||
});
|
||||
} catch (e) {
|
||||
error.value =
|
||||
e instanceof ApiError ? e.message : 'خطا در ارسال درخواست. دوباره تلاش کنید.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<AdminLayout>
|
||||
<h1 class="text-xl font-bold text-text">کاربران</h1>
|
||||
<div
|
||||
class="mt-4 rounded-2xl border border-dashed border-border bg-surface-2 p-6 text-center text-sm text-muted"
|
||||
>
|
||||
بهزودی
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AdminLayout from '@/layouts/AdminLayout.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,120 @@
|
||||
<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: '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 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 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: '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());
|
||||
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 : 'کد نامعتبر است. دوباره تلاش کنید.';
|
||||
} 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>
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Vazirmatn', 'ui-sans-serif', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#fffbeb',
|
||||
100: '#fef3c7',
|
||||
500: '#f59e0b',
|
||||
600: '#d97706',
|
||||
700: '#b45309',
|
||||
},
|
||||
surface: {
|
||||
DEFAULT: 'var(--color-surface)',
|
||||
2: 'var(--color-surface-2)',
|
||||
3: 'var(--color-surface-3)',
|
||||
},
|
||||
border: 'var(--color-border)',
|
||||
text: 'var(--color-text)',
|
||||
muted: 'var(--color-muted)',
|
||||
},
|
||||
maxWidth: {
|
||||
app: '768px',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"jsx": "preserve",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"exclude": ["dist", "node_modules"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"noEmit": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import { fileURLToPath, URL } from 'node:url';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 5174,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user