nuxt-layer-core 2.0.1

package/app/layers/solution/app/pages/cap-nhat-thong-tin/index.vue

@@ -0,0 +1,302 @@
+<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-lg">
+      <!-- Header -->
+      <div class="mb-8 text-center">
+        <h1 class="font-['Montserrat'] font-extrabold text-2xl text-slate-900 mb-2">Thông tin cá nhân</h1>
+        <p class="text-slate-500 text-sm">Cập nhật thông tin tài khoản và đặt mật khẩu.</p>
+      </div>
+
+      <!-- Loading skeleton -->
+      <div v-if="pageLoading" class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-8 space-y-5">
+        <div v-for="i in 4" :key="i" class="space-y-1.5">
+          <div class="h-4 w-24 bg-slate-200 rounded animate-pulse" />
+          <div class="h-11 bg-slate-100 rounded-[10px] animate-pulse" />
+        </div>
+      </div>
+
+      <!-- Form card -->
+      <div v-else class="bg-white rounded-2xl shadow-sm border border-slate-200/80 p-8">
+
+        <!-- Not logged in -->
+        <div v-if="!accessToken" class="text-center space-y-4 py-4">
+          <div class="w-14 h-14 rounded-[10px] bg-amber-50 flex items-center justify-center mx-auto">
+            <Icon name="lucide:lock" class="text-amber-500 text-[24px]" />
+          </div>
+          <p class="text-slate-600 text-sm">Bạn cần đăng nhập để cập nhật thông tin.</p>
+          <NuxtLink to="/dang-nhap"
+            class="inline-flex items-center gap-2 bg-[#004AC6] hover:bg-[#1D4ED8] text-white font-bold px-6 py-3 rounded-[10px] transition-all">
+            Đăng nhập ngay
+          </NuxtLink>
+        </div>
+
+        <!-- Success state -->
+        <div v-else-if="success" class="text-center space-y-4 py-4">
+          <div class="w-16 h-16 rounded-[10px] bg-emerald-50 flex items-center justify-center mx-auto">
+            <Icon name="lucide:check-circle" class="text-emerald-500 text-[32px]" />
+          </div>
+          <h3 class="font-['Montserrat'] font-bold text-lg text-slate-900">Cập nhật thành công!</h3>
+          <p class="text-slate-500 text-sm">Thông tin tài khoản đã được lưu.</p>
+          <NuxtLink to="/"
+            class="inline-flex items-center gap-2 bg-[#004AC6] hover:bg-[#1D4ED8] text-white font-bold px-6 py-3 rounded-[10px] transition-all">
+            Về trang chủ
+          </NuxtLink>
+        </div>
+
+        <!-- Update form -->
+        <form v-else @submit.prevent="onSubmit" class="space-y-5">
+          <!-- Avatar placeholder -->
+          <div class="flex items-center gap-4 pb-4 border-b border-slate-100">
+            <div
+              class="w-14 h-14 rounded-[10px] bg-gradient-to-br from-[#004AC6] to-[#1D4ED8] flex items-center justify-center text-white font-bold text-xl shrink-0">
+              {{ avatarInitial }}
+            </div>
+            <div>
+              <p class="font-semibold text-slate-900 text-sm">{{ form.fullName || 'Chưa cập nhật' }}</p>
+              <p class="text-xs text-slate-400 mt-0.5">{{ form.phone }}</p>
+            </div>
+          </div>
+
+          <!-- 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>
+
+          <!-- Email -->
+          <div>
+            <label for="email" class="block text-sm font-semibold text-slate-700 mb-1.5">Email</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="email" v-model="form.email" type="email" autocomplete="email" placeholder="email@example.com"
+                :class="[
+                  'w-full pl-10 pr-4 py-3 rounded-[10px] border text-sm outline-none transition-all',
+                  errors.email
+                    ? '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.email" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+              <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ errors.email }}
+            </p>
+          </div>
+
+          <!-- Phone (readonly) -->
+          <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" :value="form.phone" type="tel" readonly
+                class="w-full pl-10 pr-4 py-3 rounded-[10px] border border-slate-200 bg-slate-100 text-slate-500 text-sm cursor-not-allowed" />
+            </div>
+          </div>
+
+          <!-- Password -->
+          <div class="pt-2 border-t border-slate-100">
+            <p class="text-xs text-slate-400 mb-4">Đặt mật khẩu để đăng nhập lần sau</p>
+
+            <div class="space-y-5">
+              <div>
+                <label for="password" 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="password"
+                    v-model="form.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',
+                      errors.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="errors.password" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+                  <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ errors.password }}
+                </p>
+              </div>
+
+              <div>
+                <label for="confirmPassword" 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="confirmPassword"
+                    v-model="form.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',
+                      errors.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="errors.confirmPassword" class="mt-1 text-xs text-red-500 flex items-center gap-1">
+                  <Icon name="lucide:alert-circle" class="text-[13px]" /> {{ errors.confirmPassword }}
+                </p>
+              </div>
+            </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>
+
+          <!-- Submit -->
+          <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">Cập nhật thông tin</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>
+      </div>
+    </div>
+    <TheFooter/>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'default' })
+
+useHead({ title: 'Cập nhật thông tin — Long Vân' })
+
+const { updateInfo, getUserByToken } = useAuthApi()
+const { getCookie } = useCookieHelper()
+const config = useRuntimeConfig()
+
+const tokenKey = config.public.ACCESSTOKEN_NAME as string
+const accessToken = ref('')
+const pageLoading = ref(true)
+const loading = ref(false)
+const success = ref(false)
+const apiError = ref('')
+const showPassword = ref(false)
+const showConfirm = ref(false)
+
+const form = reactive({ fullName: '', email: '', phone: '', password: '', confirmPassword: '' })
+const errors = reactive({ fullName: '', email: '', phone: '', password: '', confirmPassword: '' })
+
+const avatarInitial = computed(() => {
+  const name = form.fullName.trim()
+  if (!name) return '?'
+  return name.charAt(0).toUpperCase()
+})
+
+function validate() {
+  errors.fullName = ''
+  errors.email = ''
+  errors.password = ''
+  errors.confirmPassword = ''
+  let valid = true
+
+  if (!form.fullName.trim()) {
+    errors.fullName = 'Vui lòng nhập họ và tên'
+    valid = false
+  }
+  if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
+    errors.email = 'Email không hợp lệ'
+    valid = false
+  }
+  if (form.password && form.password.length < 6) {
+    errors.password = 'Mật khẩu tối thiểu 6 ký tự'
+    valid = false
+  }
+  if (form.password && form.password !== form.confirmPassword) {
+    errors.confirmPassword = 'Mật khẩu xác nhận không khớp'
+    valid = false
+  }
+  return valid
+}
+
+async function onSubmit() {
+  if (!validate()) return
+  loading.value = true
+  apiError.value = ''
+
+  try {
+    await updateInfo(
+      accessToken.value,
+      {
+        fullName: form.fullName.trim(),
+        phone: form.phone,
+        email: form.email.trim() || undefined,
+      },
+      '',
+      form.password || ''
+    )
+    success.value = true
+  } 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
+  }
+}
+
+onMounted(async () => {
+  const token = getCookie(tokenKey)
+  if (!token) {
+    pageLoading.value = false
+    return
+  }
+
+  accessToken.value = token
+
+  try {
+    const res = await getUserByToken(token)
+    if (res) {
+      form.fullName = res.fullName || ''
+      form.email = res.email || ''
+      form.phone = res.phone || ''
+    }
+  } catch (e) {
+    // Token expired or invalid
+  } finally {
+    pageLoading.value = false
+  }
+})
+</script>