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>

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