Initial commit: fabric-trade-user Vue 3 app with mobile and desktop layouts

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-03 09:57:24 +02:00
commit fd3e5e5126
142 changed files with 19798 additions and 0 deletions
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import BaseInput from '@/components/ui/BaseInput.vue'
+import FormErrorBanner from '@/components/ui/FormErrorBanner.vue'
+import BaseButton from '@/components/ui/BaseButton.vue'
+import {
+  FORM_VALIDATION_SUMMARY,
+  clearFieldError,
+  hasFieldErrors,
+  type FieldErrors,
+} from '@/utils/formErrors'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+
+const phone = computed(() => (route.query.phone as string) ?? '')
+const code = ref('')
+const fieldErrors = ref<FieldErrors>({})
+const formError = ref('')
+
+function clearCodeError() {
+  fieldErrors.value = clearFieldError(fieldErrors.value, 'code')
+  if (!hasFieldErrors(fieldErrors.value)) formError.value = ''
+}
+
+async function submit() {
+  fieldErrors.value = {}
+  formError.value = ''
+
+  const errors: FieldErrors = {}
+  if (code.value.length < 4) {
+    errors.code = 'کد تأیید را وارد کنید.'
+  }
+
+  if (hasFieldErrors(errors)) {
+    fieldErrors.value = errors
+    formError.value = FORM_VALIDATION_SUMMARY
+    return
+  }
+
+  const result = await auth.confirmOtp(phone.value, code.value)
+  if (result.success) {
+    router.replace('/')
+  } else {
+    formError.value = result.message ?? 'کد تأیید نامعتبر است.'
+  }
+}
+
+async function resend() {
+  const isRegister = route.query.mode === 'register'
+  await auth.requestOtp(phone.value, { isRegister })
+}
+</script>
+
+<template>
+  <div class="page auth-page">
+    <div class="page__scroll auth-page__scroll">
+      <div class="auth-header">
+        <h1 class="page-title">تأیید شماره موبایل</h1>
+        <p class="page-subtitle">کد ارسال‌شده به {{ phone }} را وارد کنید</p>
+      </div>
+
+      <div class="card">
+        <FormErrorBanner :message="formError" />
+
+        <BaseInput
+          v-model="code"
+          label="کد تأیید"
+          type="text"
+          placeholder="۱۲۳۴۵۶"
+          maxlength="6"
+          :error="fieldErrors.code"
+          hint="در نسخه آزمایشی: 123456"
+          @update:model-value="clearCodeError"
+        />
+        <BaseButton block :loading="auth.loading" @click="submit">تأیید و ورود</BaseButton>
+        <BaseButton block variant="ghost" class="mt-2" @click="resend">ارسال مجدد کد</BaseButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.auth-page {
+  overflow: hidden;
+}
+
+.auth-page__scroll {
+  padding-top: 36px;
+  padding-bottom: 24px;
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+</style>