nuxt-layer-core 2.0.1

package/app/layers/solution/app/pages/dang-ky/index.vue

@@ -0,0 +1,627 @@
+<template>
+  <div>
+    <TheHeader />
+    <div class="min-h-[calc(50vh-4rem)] flex items-start justify-center pt-20 pb-16 px-6">
+      <div class="w-full max-w-md">
+      <!-- Header -->
+      <div class="mb-8 text-center">
+        <h1 class="font-['Montserrat'] font-extrabold text-2xl text-slate-900 mb-2">Tạo tài khoản</h1>
+        <p class="text-slate-500 text-sm">Đăng ký để bắt đầu hành trình học tập của bạn.</p>
+      </div>
+
+      <!-- Step indicator -->
+      <div class="flex items-center gap-2 mb-8">
+        <template v-for="(label, i) in steps" :key="i">
+          <div class="flex items-center gap-1.5">
+            <div
+              :class="[
+                'w-7 h-7 rounded-[10px] flex items-center justify-center text-xs font-bold transition-all',
+                step > i + 1
+                  ? 'bg-emerald-500 text-white'
+                  : step === i + 1
+                    ? 'bg-[#004AC6] text-white ring-4 ring-blue-100'
+                    : 'bg-slate-200 text-slate-500'
+              ]"
+            >
+              <Icon v-if="step > i + 1" name="lucide:check" class="text-[13px]" />
+              <span v-else>{{ i + 1 }}</span>
+            </div>
+            <span :class="['text-xs font-medium hidden sm:block', step === i + 1 ? 'text-[#004AC6]' : 'text-slate-400']">
+              {{ label }}
+            </span>
+          </div>
+          <div v-if="i < steps.length - 1" class="flex-1 h-px bg-slate-200 mx-1" />
+        </template>
+      </div>
+
+      <!-- Card -->
+      <div class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-8">
+
+        <!-- Step 1: Enter info -->
+        <form v-if="step === 1" @submit.prevent="onSubmit" class="space-y-5">
+          <!-- Full name -->
+          <div>
+            <label for="fullName" class="block text-sm font-semibold text-slate-700 mb-1.5">Họ và tên</label>
+            <div class="relative">
+              <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                <Icon name="lucide:user" class="text-[17px]" />
+              </span>
+              <input
+                id="fullName"
+                v-model="form.fullName"
+                type="text"
+                autocomplete="name"
+                placeholder="Nhập họ và tên"
+                :class="[
+                  'w-full pl-10 pr-4 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                  errors.fullName
+                    ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-2 focus:ring-red-100'
+                    : 'border-slate-200 bg-slate-50 focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white'
+                ]"
+              />
+            </div>
+            <p v-if="errors.fullName" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+              <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ errors.fullName }}
+            </p>
+          </div>
+
+          <!-- Phone -->
+          <div>
+            <label for="phone" class="block text-sm font-semibold text-slate-700 mb-1.5">Số điện thoại</label>
+            <div class="relative">
+              <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                <Icon name="lucide:phone" class="text-[17px]" />
+              </span>
+              <input
+                id="phone"
+                v-model="form.phone"
+                type="tel"
+                autocomplete="tel"
+                placeholder="VD: 0901234567"
+                :class="[
+                  'w-full pl-10 pr-4 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                  errors.phone
+                    ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-2 focus:ring-red-100'
+                    : 'border-slate-200 bg-slate-50 focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white'
+                ]"
+              />
+            </div>
+            <p v-if="errors.phone" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+              <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ errors.phone }}
+            </p>
+          </div>
+
+          <div v-if="apiError" class="flex items-start gap-2 bg-red-50 border border-red-200 rounded-[10px] px-4 py-3 text-sm text-red-700">
+            <Icon name="lucide:alert-triangle" class="text-[16px] mt-0.5 shrink-0" />
+            <span>{{ apiError }}</span>
+          </div>
+
+          <button
+            type="submit"
+            :disabled="loading"
+            class="w-full flex items-center justify-center gap-2 bg-[#004AC6] hover:bg-[#1D4ED8] active:scale-[.98] text-white font-bold py-3.5 rounded-[10px] transition-all shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            <span v-if="!loading">Tiếp theo</span>
+            <span v-else class="flex items-center gap-2">
+              <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+              </svg>
+              Đang kiểm tra...
+            </span>
+          </button>
+        </form>
+
+        <!-- Step 2: OTP Verification -->
+        <div v-else-if="step === 2" class="space-y-5">
+          <div class="text-center mb-2">
+            <div class="w-14 h-14 rounded-[10px] bg-blue-50 flex items-center justify-center mx-auto mb-3">
+              <Icon name="lucide:message-square" class="text-[#004AC6] text-[24px]" />
+            </div>
+            <p class="text-sm text-slate-600">
+              Mã OTP đã được gửi qua <strong class="text-[#004AC6]">{{ selectedMethod === 'zalo' ? 'Zalo' : 'SMS' }}</strong> đến <strong class="text-slate-900">{{ form.phone }}</strong>
+            </p>
+          </div>
+
+          <!-- OTP inputs -->
+          <div class="flex gap-3 justify-center">
+            <input
+              v-for="(_, i) in otpDigits"
+              :key="i"
+              :ref="(el) => setOtpRef(el, i)"
+              v-model="otpDigits[i]"
+              type="text"
+              inputmode="numeric"
+              maxlength="1"
+              @input="onOtpInput(i)"
+              @keydown="onOtpKeydown($event, i)"
+              @paste.prevent="onOtpPaste($event)"
+              :class="[
+                'w-12 h-14 text-center text-xl font-bold rounded-xl border-2 outline-none transition-all',
+                otpDigits[i]
+                  ? 'border-[#004AC6] bg-blue-50 text-[#004AC6]'
+                  : 'border-slate-200 bg-slate-50 text-slate-900 focus:border-[#004AC6] focus:bg-white focus:ring-2 focus:ring-blue-100'
+              ]"
+            />
+          </div>
+
+          <!-- Resend & method selection -->
+          <div class="text-center text-sm space-y-2">
+            <span v-if="countdown > 0" class="text-slate-400">
+              Gửi lại mã sau <strong class="text-slate-600">{{ countdown }}s</strong>
+            </span>
+            <div v-else class="flex flex-col items-center gap-2">
+              <button
+                @click="resendOtp"
+                :disabled="loading"
+                class="text-[#004AC6] font-semibold hover:underline disabled:opacity-50"
+              >
+                Gửi lại mã OTP
+              </button>
+              <button
+                @click="showMethodDialog = true"
+                class="text-slate-500 hover:text-[#004AC6] transition-colors"
+              >
+                Chọn phương thức xác thực khác
+              </button>
+            </div>
+          </div>
+
+          <div v-if="apiError" class="flex items-start gap-2 bg-red-50 border border-red-200 rounded-[10px] px-4 py-3 text-sm text-red-700">
+            <Icon name="lucide:alert-triangle" class="text-[16px] mt-0.5 shrink-0" />
+            <span>{{ apiError }}</span>
+          </div>
+
+          <button
+            @click="onVerifyOtp"
+            :disabled="loading || otpCode.length < 6"
+            class="w-full flex items-center justify-center gap-2 bg-[#004AC6] hover:bg-[#1D4ED8] active:scale-[.98] text-white font-bold py-3.5 rounded-[10px] transition-all shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            <span v-if="!loading">Xác thực OTP</span>
+            <span v-else class="flex items-center gap-2">
+              <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+              </svg>
+              Đang xác thực...
+            </span>
+          </button>
+
+          <button @click="step = 1" class="w-full text-center text-sm text-slate-500 hover:text-slate-700">
+            ← Quay lại
+          </button>
+        </div>
+
+        <!-- Step 3: Update info -->
+        <form v-else-if="step === 3" @submit.prevent="onUpdateInfo" class="space-y-5">
+          <div class="text-center mb-2">
+            <div class="w-14 h-14 rounded-[10px] bg-emerald-50 flex items-center justify-center mx-auto mb-3">
+              <Icon name="lucide:user-check" class="text-emerald-500 text-[24px]" />
+            </div>
+            <p class="text-sm text-slate-600">Hoàn tất thông tin và đặt mật khẩu</p>
+          </div>
+
+          <!-- Email -->
+          <div>
+            <label for="regEmail" class="block text-sm font-semibold text-slate-700 mb-1.5">Email <span class="text-slate-400 font-normal">(tùy chọn)</span></label>
+            <div class="relative">
+              <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                <Icon name="lucide:mail" class="text-[17px]" />
+              </span>
+              <input
+                id="regEmail"
+                v-model="profileForm.email"
+                type="email"
+                autocomplete="email"
+                placeholder="email@example.com"
+                class="w-full pl-10 pr-4 py-3 rounded-[10px] border border-slate-200 bg-slate-50 text-sm outline-none focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white transition-all"
+              />
+            </div>
+          </div>
+
+          <!-- Password -->
+          <div>
+            <label for="regPassword" class="block text-sm font-semibold text-slate-700 mb-1.5">Mật khẩu</label>
+            <div class="relative">
+              <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                <Icon name="lucide:lock" class="text-[17px]" />
+              </span>
+              <input
+                id="regPassword"
+                v-model="profileForm.password"
+                :type="showPassword ? 'text' : 'password'"
+                autocomplete="new-password"
+                placeholder="Tối thiểu 6 ký tự"
+                :class="[
+                  'w-full pl-10 pr-11 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                  profileErrors.password
+                    ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-2 focus:ring-red-100'
+                    : 'border-slate-200 bg-slate-50 focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white'
+                ]"
+              />
+              <button type="button" @click="showPassword = !showPassword" class="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors">
+                <Icon :name="showPassword ? 'lucide:eye-off' : 'lucide:eye'" class="text-[17px]" />
+              </button>
+            </div>
+            <p v-if="profileErrors.password" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+              <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ profileErrors.password }}
+            </p>
+          </div>
+
+          <!-- Confirm password -->
+          <div>
+            <label for="regConfirmPassword" class="block text-sm font-semibold text-slate-700 mb-1.5">Xác nhận mật khẩu</label>
+            <div class="relative">
+              <span class="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400">
+                <Icon name="lucide:lock" class="text-[17px]" />
+              </span>
+              <input
+                id="regConfirmPassword"
+                v-model="profileForm.confirmPassword"
+                :type="showConfirm ? 'text' : 'password'"
+                autocomplete="new-password"
+                placeholder="Nhập lại mật khẩu"
+                :class="[
+                  'w-full pl-10 pr-11 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                  profileErrors.confirmPassword
+                    ? 'border-red-400 bg-red-50 focus:border-red-500 focus:ring-2 focus:ring-red-100'
+                    : 'border-slate-200 bg-slate-50 focus:border-[#004AC6] focus:ring-2 focus:ring-blue-100 focus:bg-white'
+                ]"
+              />
+              <button type="button" @click="showConfirm = !showConfirm" class="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors">
+                <Icon :name="showConfirm ? 'lucide:eye-off' : 'lucide:eye'" class="text-[17px]" />
+              </button>
+            </div>
+            <p v-if="profileErrors.confirmPassword" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+              <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ profileErrors.confirmPassword }}
+            </p>
+          </div>
+
+          <div v-if="apiError" class="flex items-start gap-2 bg-red-50 border border-red-200 rounded-[10px] px-4 py-3 text-sm text-red-700">
+            <Icon name="lucide:alert-triangle" class="text-[16px] mt-0.5 shrink-0" />
+            <span>{{ apiError }}</span>
+          </div>
+
+          <button
+            type="submit"
+            :disabled="loading"
+            class="w-full flex items-center justify-center gap-2 bg-[#004AC6] hover:bg-[#1D4ED8] active:scale-[.98] text-white font-bold py-3.5 rounded-[10px] transition-all shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            <span v-if="!loading">Hoàn tất đăng ký</span>
+            <span v-else class="flex items-center gap-2">
+              <svg class="animate-spin w-4 h-4" viewBox="0 0 24 24" fill="none">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
+              </svg>
+              Đang lưu...
+            </span>
+          </button>
+        </form>
+      </div>
+
+      <!-- Login link -->
+      <p class="text-center text-sm text-slate-500 mt-6">
+        Đã có tài khoản?
+        <NuxtLink :to="{ path: '/dang-nhap', query: { redirectUrl } }" class="text-[#004AC6] font-semibold hover:underline ml-1">
+          Đăng nhập
+        </NuxtLink>
+      </p>
+      </div>
+
+      <!-- Method selection dialog -->
+      <Teleport to="body">
+        <Transition
+          enter-active-class="transition ease-out duration-200"
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-active-class="transition ease-in duration-150"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+        >
+          <div v-if="showMethodDialog" class="fixed inset-0 z-[100] flex items-center justify-center p-4">
+            <div class="absolute inset-0 bg-black/40" @click="showMethodDialog = false" />
+            <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 space-y-5">
+              <h3 class="font-['Montserrat'] font-bold text-lg text-slate-900 text-center">Chọn phương thức nhận OTP</h3>
+
+              <div class="space-y-3">
+                <button
+                  @click="pendingMethod = 'zalo'"
+                  :class="[
+                    'w-full flex items-center gap-3 p-4 rounded-xl border-2 transition-all',
+                    pendingMethod === 'zalo'
+                      ? 'border-[#004AC6] bg-blue-50'
+                      : 'border-slate-200 hover:border-slate-300'
+                  ]"
+                >
+                  <span class="w-10 h-10 rounded-[10px] bg-blue-100 flex items-center justify-center">
+                    <Icon name="lucide:message-circle" class="text-[#004AC6] text-[20px]" />
+                  </span>
+                  <div class="text-left">
+                    <p class="font-semibold text-sm text-slate-900">Tin nhắn Zalo</p>
+                    <p class="text-xs text-slate-500">Nhận mã qua Zalo</p>
+                  </div>
+                  <Icon
+                    v-if="pendingMethod === 'zalo'"
+                    name="lucide:check-circle"
+                    class="text-[#004AC6] text-[20px] ml-auto"
+                  />
+                </button>
+
+                <button
+                  @click="pendingMethod = 'sms'"
+                  :class="[
+                    'w-full flex items-center gap-3 p-4 rounded-xl border-2 transition-all',
+                    pendingMethod === 'sms'
+                      ? 'border-[#004AC6] bg-blue-50'
+                      : 'border-slate-200 hover:border-slate-300'
+                  ]"
+                >
+                  <span class="w-10 h-10 rounded-[10px] bg-emerald-100 flex items-center justify-center">
+                    <Icon name="lucide:message-square" class="text-emerald-600 text-[20px]" />
+                  </span>
+                  <div class="text-left">
+                    <p class="font-semibold text-sm text-slate-900">Tin nhắn SMS</p>
+                    <p class="text-xs text-slate-500">Nhận mã qua SMS</p>
+                  </div>
+                  <Icon
+                    v-if="pendingMethod === 'sms'"
+                    name="lucide:check-circle"
+                    class="text-[#004AC6] text-[20px] ml-auto"
+                  />
+                </button>
+              </div>
+
+              <div class="flex gap-3">
+                <button
+                  @click="showMethodDialog = false"
+                  class="flex-1 py-3 rounded-[10px] border border-slate-200 text-slate-600 font-semibold text-sm hover:bg-slate-50 transition-colors"
+                >
+                  Hủy
+                </button>
+                <button
+                  @click="confirmMethodSelection"
+                  :disabled="loading"
+                  class="flex-1 py-3 rounded-[10px] bg-[#004AC6] text-white font-bold text-sm hover:bg-[#1D4ED8] transition-colors disabled:opacity-60"
+                >
+                  Xác nhận
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </Teleport>
+    </div>
+    <TheFooter/>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+definePageMeta({ layout: 'default' })
+
+useHead({ title: 'Đăng ký — Long Vân' })
+
+const { getUserLoginByUserLoginId, register, sendOTP, validateOTP, getAccessTokenByOTP, updateInfo } = useAuthApi()
+const { setCookie, getCookie } = useCookieHelper()
+const { setUser } = useAuthState()
+const config = useRuntimeConfig()
+const route = useRoute()
+const router = useRouter()
+
+const tokenKey = config.public.ACCESSTOKEN_NAME as string
+const redirectUrl = computed(() => route.query.redirectUrl as string || '/')
+const steps = ['Thông tin', 'Xác thực OTP', 'Cập nhật']
+const step = ref(1)
+const loading = ref(false)
+const apiError = ref('')
+const countdown = ref(0)
+let countdownTimer: ReturnType<typeof setInterval> | null = null
+
+// Step 1 form
+const form = reactive({ fullName: '', phone: '' })
+const errors = reactive({ fullName: '', phone: '' })
+
+// Step 3 form
+const profileForm = reactive({ email: '', password: '', confirmPassword: '' })
+const profileErrors = reactive({ password: '', confirmPassword: '' })
+const showPassword = ref(false)
+const showConfirm = ref(false)
+
+// OTP
+const otpDigits = ref(['', '', '', '', '', ''])
+const otpRefs: (HTMLInputElement | null)[] = []
+const otpCode = computed(() => otpDigits.value.join(''))
+
+// Method selection
+const selectedMethod = ref<'sms' | 'zalo'>('zalo')
+const pendingMethod = ref<'sms' | 'zalo'>('zalo')
+const showMethodDialog = ref(false)
+
+function setOtpRef(el: any, i: number) {
+  otpRefs[i] = el as HTMLInputElement
+}
+
+function onOtpInput(i: number) {
+  const val = otpDigits.value[i]
+  if (val && i < 5) nextTick(() => otpRefs[i + 1]?.focus())
+}
+
+function onOtpKeydown(e: KeyboardEvent, i: number) {
+  if (e.key === 'Backspace' && !otpDigits.value[i] && i > 0) {
+    otpRefs[i - 1]?.focus()
+  }
+}
+
+function onOtpPaste(e: ClipboardEvent) {
+  const text = e.clipboardData?.getData('text') || ''
+  const digits = text.replace(/\D/g, '').slice(0, 6)
+  digits.split('').forEach((d, i) => { otpDigits.value[i] = d })
+  nextTick(() => otpRefs[Math.min(digits.length, 5)]?.focus())
+}
+
+function startCountdown(seconds = 60) {
+  countdown.value = seconds
+  if (countdownTimer) clearInterval(countdownTimer)
+  countdownTimer = setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0 && countdownTimer) clearInterval(countdownTimer)
+  }, 1000)
+}
+
+// Step 1: Check user & register
+async function onSubmit() {
+  errors.fullName = ''
+  errors.phone = ''
+  apiError.value = ''
+
+  if (!form.fullName.trim()) {
+    errors.fullName = 'Vui lòng nhập họ và tên'
+    return
+  }
+  if (!form.phone.trim()) {
+    errors.phone = 'Vui lòng nhập số điện thoại'
+    return
+  }
+  if (!/^(0[3-9])\d{8}$/.test(form.phone.trim())) {
+    errors.phone = 'Số điện thoại không hợp lệ'
+    return
+  }
+
+  loading.value = true
+
+  try {
+    const phone = form.phone.trim()
+    const name = form.fullName.trim()
+
+    const existingUser = await getUserLoginByUserLoginId(phone)
+
+    if (existingUser) {
+      if (existingUser.status === 'VERIFIED') {
+        apiError.value = 'Số điện thoại đã được đăng ký!'
+        return
+      }
+    } else {
+      await register({ username: phone, fullName: name })
+    }
+
+    pendingMethod.value = 'zalo'
+    showMethodDialog.value = true
+  } catch (err: any) {
+    if (err?.extensions?.debugInfo?.errorCode === 'USER_LOGIN_NEED_VERIFY_SMS') {
+      pendingMethod.value = 'zalo'
+      showMethodDialog.value = true
+      return
+    }
+    apiError.value = err?.message || 'Đã có lỗi xảy ra. Vui lòng thử lại.'
+  } finally {
+    loading.value = false
+  }
+}
+
+// Confirm method selection & send OTP
+async function confirmMethodSelection() {
+  selectedMethod.value = pendingMethod.value
+  showMethodDialog.value = false
+  loading.value = true
+  apiError.value = ''
+
+  try {
+    await sendOTP(form.phone.trim(), selectedMethod.value)
+    startCountdown(60)
+    step.value = 2
+  } catch (err: any) {
+    if (selectedMethod.value === 'zalo') {
+      apiError.value = 'Gửi qua Zalo thất bại. Bạn có thể thử gửi qua SMS.'
+      pendingMethod.value = 'sms'
+      showMethodDialog.value = true
+    } else {
+      apiError.value = err?.message || 'Không thể gửi OTP. Vui lòng thử lại.'
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+// Resend OTP - show method selection again
+async function resendOtp() {
+  pendingMethod.value = selectedMethod.value
+  showMethodDialog.value = true
+}
+
+// Step 2: Verify OTP → get access token → move to step 3
+async function onVerifyOtp() {
+  if (otpCode.value.length < 6) return
+  loading.value = true
+  apiError.value = ''
+
+  try {
+    const res = await validateOTP(otpCode.value, form.phone.trim(), selectedMethod.value)
+    if (!res) {
+      apiError.value = 'Mã OTP không đúng hoặc đã hết hạn.'
+      return
+    }
+
+    const tokenRes = await getAccessTokenByOTP(otpCode.value, form.phone.trim(), selectedMethod.value)
+    if (tokenRes) {
+      setCookie(tokenKey, tokenRes, 30)
+    }
+
+    step.value = 3
+  } catch (err: any) {
+    apiError.value = err?.message || 'Xác thực thất bại. Vui lòng thử lại.'
+  } finally {
+    loading.value = false
+  }
+}
+
+// Step 3: Update info with password
+async function onUpdateInfo() {
+  profileErrors.password = ''
+  profileErrors.confirmPassword = ''
+  apiError.value = ''
+
+  if (profileForm.password && profileForm.password.length < 6) {
+    profileErrors.password = 'Mật khẩu tối thiểu 6 ký tự'
+    return
+  }
+  if (profileForm.password && profileForm.password !== profileForm.confirmPassword) {
+    profileErrors.confirmPassword = 'Mật khẩu xác nhận không khớp'
+    return
+  }
+
+  loading.value = true
+
+  try {
+    const token = getCookie(tokenKey)
+    if (!token) {
+      apiError.value = 'Phiên đăng ký đã hết hạn. Vui lòng thử lại.'
+      return
+    }
+
+    await updateInfo(
+      token,
+      {
+        fullName: form.fullName.trim(),
+        phone: form.phone.trim(),
+        email: profileForm.email.trim() || undefined,
+      },
+      '',
+      profileForm.password || ''
+    )
+
+    // Update auth state for Header
+    setUser(form.fullName.trim())
+
+    // Redirect to target page
+    router.push(redirectUrl.value)
+  } catch (err: any) {
+    apiError.value = err?.message || 'Cập nhật thất bại. Vui lòng thử lại.'
+  } finally {
+    loading.value = false
+  }
+}
+
+onUnmounted(() => {
+  if (countdownTimer) clearInterval(countdownTimer)
+})
+</script>