feat: initial Vue web app with OTP login

.env.example

@@ -0,0 +1,2 @@
+# API base URL (no trailing slash)
+VITE_API_URL=http://localhost:3000

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.env
+.env.local
+*.log

.npmrc

@@ -0,0 +1,2 @@
+registry=https://mirror-npm.runflare.com
+strict-ssl=false

index.html

@@ -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>

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "montime-web",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^2.3.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "~5.7.3",
+    "vite": "^6.0.7",
+    "vue-tsc": "^2.2.0"
+  }
+}

src/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="app-shell">
+    <RouterView />
+  </div>
+</template>
+
+<script setup lang="ts"></script>

src/api/auth.ts

@@ -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 });
+}

src/api/client.ts

@@ -0,0 +1,49 @@
+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;
+};
+
+export async function api<T>(path: string, options: ApiOptions = {}): Promise<T> {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...(options.headers as Record<string, string> | undefined),
+  };
+
+  if (options.token) {
+    headers.Authorization = `Bearer ${options.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>;
+}

src/main.ts

@@ -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');

src/router/index.ts

@@ -0,0 +1,48 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import { useAuthStore } from '@/stores/auth';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      redirect: '/login',
+    },
+    {
+      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: '/home',
+      name: 'home',
+      component: () => import('@/views/HomeView.vue'),
+      meta: { requiresAuth: 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.guest && auth.isLoggedIn) {
+    return { name: 'home' };
+  }
+});
+
+export default router;

src/stores/auth.ts

@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import type { User } from '@/api/auth';
+import { fetchMe } from '@/api/auth';
+
+const TOKEN_KEY = 'montime_access_token';
+
+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));
+
+  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,
+    setSession,
+    logout,
+    loadUser,
+  };
+});

src/styles/main.css

@@ -0,0 +1,168 @@
+:root {
+  --bg: #0f1419;
+  --surface: #1a2332;
+  --surface-2: #243044;
+  --text: #f0f4f8;
+  --muted: #94a3b8;
+  --accent: #22c55e;
+  --accent-hover: #16a34a;
+  --danger: #f87171;
+  --border: rgba(148, 163, 184, 0.2);
+  --radius: 12px;
+  --shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  min-height: 100%;
+}
+
+body {
+  font-family: 'Vazirmatn', system-ui, sans-serif;
+  background: radial-gradient(ellipse at top, #1e3a2f 0%, var(--bg) 55%);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.app-shell {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+
+.card {
+  width: 100%;
+  max-width: 420px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2rem;
+  box-shadow: var(--shadow);
+}
+
+.logo {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem;
+  letter-spacing: -0.02em;
+}
+
+.subtitle {
+  color: var(--muted);
+  margin: 0 0 1.75rem;
+  font-size: 0.95rem;
+}
+
+.field {
+  margin-bottom: 1rem;
+}
+
+.field label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--muted);
+}
+
+.field input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  color: var(--text);
+  font: inherit;
+  direction: ltr;
+  text-align: left;
+}
+
+.field input:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.btn {
+  width: 100%;
+  padding: 0.85rem 1rem;
+  border: none;
+  border-radius: 8px;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: #052e16;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--muted);
+  margin-top: 0.75rem;
+}
+
+.error {
+  background: rgba(248, 113, 113, 0.12);
+  border: 1px solid rgba(248, 113, 113, 0.35);
+  color: var(--danger);
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+}
+
+.timer {
+  text-align: center;
+  color: var(--muted);
+  font-size: 0.875rem;
+  margin-top: 1rem;
+}
+
+.home-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.user-card {
+  background: var(--surface-2);
+  border-radius: 8px;
+  padding: 1rem;
+}
+
+.user-card dt {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.user-card dd {
+  margin: 0.25rem 0 0.75rem;
+  font-weight: 500;
+}
+
+.user-card dd:last-child {
+  margin-bottom: 0;
+}

src/views/HomeView.vue

@@ -0,0 +1,40 @@
+<template>
+  <main class="card">
+    <header class="home-header">
+      <div>
+        <h1 class="logo">مون‌تایم</h1>
+        <p class="subtitle" style="margin: 0">خوش آمدید</p>
+      </div>
+      <button type="button" class="btn btn-ghost" style="width: auto" @click="logout">
+        خروج
+      </button>
+    </header>
+
+    <dl v-if="auth.user" class="user-card">
+      <dt>موبایل</dt>
+      <dd dir="ltr">{{ auth.user.mobile }}</dd>
+      <dt>نام</dt>
+      <dd>{{ auth.user.fullName ?? '—' }}</dd>
+      <dt>نقش</dt>
+      <dd>{{ auth.user.role }}</dd>
+    </dl>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAuthStore } from '@/stores/auth';
+
+const auth = useAuthStore();
+const router = useRouter();
+
+onMounted(async () => {
+  await auth.loadUser();
+});
+
+function logout() {
+  auth.logout();
+  router.push({ name: 'login' });
+}
+</script>

src/views/LoginView.vue

@@ -0,0 +1,59 @@
+<template>
+  <main class="card">
+    <h1 class="logo">مون‌تایم</h1>
+    <p class="subtitle">ورود با شماره موبایل</p>
+
+    <p v-if="error" class="error">{{ error }}</p>
+
+    <form @submit.prevent="onSubmit">
+      <div class="field">
+        <label for="mobile">شماره موبایل</label>
+        <input
+          id="mobile"
+          v-model="mobile"
+          type="tel"
+          inputmode="numeric"
+          placeholder="09121234567"
+          autocomplete="tel"
+          required
+        />
+      </div>
+      <button class="btn btn-primary" type="submit" :disabled="loading">
+        {{ loading ? 'در حال ارسال…' : 'دریافت کد تأیید' }}
+      </button>
+    </form>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { requestOtp } from '@/api/auth';
+import { ApiError } from '@/api/client';
+
+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>

src/views/VerifyOtpView.vue

@@ -0,0 +1,127 @@
+<template>
+  <main class="card">
+    <h1 class="logo">کد تأیید</h1>
+    <p class="subtitle">کد ارسال‌شده به {{ mobile }} را وارد کنید</p>
+
+    <p v-if="devCode" class="error" style="border-color: var(--accent); color: var(--accent)">
+      حالت توسعه — کد: {{ devCode }}
+    </p>
+
+    <p v-if="error" class="error">{{ error }}</p>
+
+    <form @submit.prevent="onSubmit">
+      <div class="field">
+        <label for="code">کد ۶ رقمی</label>
+        <input
+          id="code"
+          v-model="code"
+          type="text"
+          inputmode="numeric"
+          maxlength="8"
+          placeholder="123456"
+          autocomplete="one-time-code"
+          required
+        />
+      </div>
+      <button class="btn btn-primary" type="submit" :disabled="loading">
+        {{ loading ? 'در حال بررسی…' : 'ورود' }}
+      </button>
+    </form>
+
+    <p v-if="secondsLeft > 0" class="timer">
+      ارسال مجدد تا {{ secondsLeft }} ثانیه
+    </p>
+    <button
+      v-else
+      type="button"
+      class="btn btn-ghost"
+      :disabled="resendLoading"
+      @click="resend"
+    >
+      {{ resendLoading ? 'در حال ارسال…' : 'ارسال مجدد کد' }}
+    </button>
+
+    <button type="button" class="btn btn-ghost" @click="router.push({ name: 'login' })">
+      تغییر شماره موبایل
+    </button>
+  </main>
+</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 { 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());
+    auth.setSession(res.accessToken, res.user);
+    await router.replace({ name: '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>

src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "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,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

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: 5173,
+  },
+});