webMontime/src/views/auth/LoginView.vue

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

    <AuthModeSwitch v-model="mode" />

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

      <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 { 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('');

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>