101 lines
2.6 KiB
Vue
101 lines
2.6 KiB
Vue
 
|
<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>
|