From dec8d7d9c704b61c9a5501c9f48ac0523dd5433c Mon Sep 17 00:00:00 2001
From: Irwan Cahyono <irwan.l.cahyono@gmail.com>
Date: Wed, 6 Aug 2025 09:40:55 +0700
Subject: [PATCH] register

---
 middleware/auth.global.ts               |   6 +-
 pages/auth/activation/[uid]/[token].vue |  93 +++++++++++
 pages/auth/cover-lockscreen.vue         | 129 ---------------
 pages/auth/cover-password-reset.vue     | 124 ---------------
 pages/auth/register.vue                 | 199 ------------------------
 5 files changed, 98 insertions(+), 453 deletions(-)
 create mode 100644 pages/auth/activation/[uid]/[token].vue
 delete mode 100644 pages/auth/cover-lockscreen.vue
 delete mode 100644 pages/auth/cover-password-reset.vue
 delete mode 100644 pages/auth/register.vue

diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index abfd7da..08c31f8 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -1,7 +1,11 @@
 export default defineNuxtRouteMiddleware((to, from) => {
     const accessToken = useCookie('access_token').value;
 
-    if (!accessToken && to.path !== '/auth/login') {
+    const isPublicRoute =
+        ['/auth/login'].includes(to.path) ||
+        to.path.startsWith('/auth/activation/');
+
+    if (!accessToken && !isPublicRoute) {
         return navigateTo('/auth/login');
     }
 })
\ No newline at end of file
diff --git a/pages/auth/activation/[uid]/[token].vue b/pages/auth/activation/[uid]/[token].vue
new file mode 100644
index 0000000..b91914f
--- /dev/null
+++ b/pages/auth/activation/[uid]/[token].vue
@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <div v-if="loading" class="min-h-screen flex items-center justify-center">
+            <p class="text-lg">Memproses aktivasi akun...</p>
+        </div>
+
+        <div v-else>
+
+            <div class="absolute inset-0">
+                <img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
+            </div>
+
+            <div
+                class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
+            >
+                <img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
+                <img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
+                <img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
+                <img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
+                <div
+                    class="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]"
+                >
+                    <div class="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]">
+                        
+                        <div class="mx-auto w-full max-w-[440px]">
+                            <div class="mb-7">
+                                <h1 class="mb-3 text-2xl font-bold !leading-snug dark:text-white">Aktivasi</h1>
+                                <p>{{ message }}</p>
+                            </div>
+                            
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    import { computed } from 'vue';
+    import appSetting from '@/app-setting';
+    import { useAppStore } from '@/stores/index';
+    import { useRouter } from 'vue-router';
+    useHead({ title: 'Aktivasi' });
+
+    const router = useRouter();
+    const route = useRoute();
+    const loading = ref(true);
+    const message = ref('');
+
+    definePageMeta({
+        layout: 'auth-layout',
+    });
+    const store = useAppStore();
+    const config = useRuntimeConfig();
+    
+    onMounted(async () => {
+        const uid = route.params.uid as string | undefined;
+        if (!uid) {
+            message.value = 'UID tidak valid atau hilang.';
+            loading.value = false;
+            return;
+        }   
+        const token = route.params.token as string | undefined;
+        if (!token) {
+            message.value = 'Token tidak valid atau hilang.';
+            loading.value = false;
+            return;
+        }
+
+        try {
+            const data = await $fetch(`${config.public.apiBase}/auth/users/activation/`, {
+                method: 'POST',
+                body: { "uid": uid, "token": token }, 
+            });
+
+            message.value = 'Akun kamu telah berhasil diaktivasi dan siap digunakan!';
+        } catch (err) {
+            console.error('Error during activation:', err);
+            if (err.response && err.response.status === 400) {
+                message.value = 'Aktivasi akun gagal. Pastikan link aktivasi yang kamu gunakan benar.';
+            } else if (err.response && err.response.status === 403) {
+                message.value = 'Aktivasi akun gagal. Token mungkin sudah kadaluarsa atau tidak valid.';
+            }   else if (err.response && err.response.status === 404) {
+                message.value = 'Akun tidak ditemukan atau sudah diaktivasi.';
+            } else {
+                message.value = 'Terjadi kesalahan saat menghubungi server.';
+            }
+        } finally {
+            loading.value = false;
+        }
+    });
+</script>
diff --git a/pages/auth/cover-lockscreen.vue b/pages/auth/cover-lockscreen.vue
deleted file mode 100644
index 5502796..0000000
--- a/pages/auth/cover-lockscreen.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-    <div>
-        <div class="absolute inset-0">
-            <img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
-        </div>
-        <div
-            class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
-        >
-            <img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
-            <img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
-            <img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
-            <img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
-            <div
-                class="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"
-            >
-                <div
-                    class="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,rgba(239,18,98,1)_0%,rgba(67,97,238,1)_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"
-                >
-                    <div
-                        class="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"
-                    ></div>
-                    <div class="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
-                        <NuxtLink to="/" class="ms-10 block w-48 lg:w-72">
-                            <img src="/assets/images/auth/logo-white.svg" alt="Logo" class="w-full" />
-                        </NuxtLink>
-                        <div class="mt-24 hidden w-full max-w-[430px] lg:block">
-                            <img src="/assets/images/auth/unlock.svg" alt="Cover Image" class="w-full" />
-                        </div>
-                    </div>
-                </div>
-                <div class="relative flex w-full flex-col items-center justify-center gap-6 px-4 pb-16 pt-6 sm:px-6 lg:max-w-[667px]">
-                    <div class="flex w-full max-w-[440px] items-center gap-2 lg:absolute lg:end-6 lg:top-6 lg:max-w-full">
-                        <NuxtLink to="/" class="block w-8 lg:hidden">
-                            <img src="/assets/images/logo.svg" alt="Logo" class="mx-auto w-10" />
-                        </NuxtLink>
-                        <div class="dropdown ms-auto w-max">
-                            <client-only>
-                                <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="8">
-                                    <button
-                                        type="button"
-                                        class="flex items-center gap-2.5 rounded-lg border border-white-dark/30 bg-white px-2 py-1.5 text-white-dark hover:border-primary hover:text-primary dark:bg-black"
-                                    >
-                                        <div>
-                                            <img :src="currentFlag" alt="image" class="h-5 w-5 rounded-full object-cover" />
-                                        </div>
-                                        <div class="text-base font-bold uppercase">{{ store.locale }}</div>
-                                        <span class="shrink-0">
-                                            <icon-caret-down />
-                                        </span>
-                                    </button>
-                                    <template #content="{ close }">
-                                        <ul
-                                            class="grid w-[280px] grid-cols-2 gap-2 !px-2 font-semibold text-dark dark:text-white-dark dark:text-white-light/90"
-                                        >
-                                            <template v-for="item in store.languageList" :key="item.code">
-                                                <li>
-                                                    <button
-                                                        type="button"
-                                                        class="w-full hover:text-primary"
-                                                        :class="{ 'bg-primary/10 text-primary': store.locale === item.code }"
-                                                        @click="changeLanguage(item), close()"
-                                                    >
-                                                        <img
-                                                            class="h-5 w-5 rounded-full object-cover"
-                                                            :src="`/assets/images/flags/${item.code.toUpperCase()}.svg`"
-                                                            alt=""
-                                                        />
-                                                        <span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
-                                                    </button>
-                                                </li>
-                                            </template>
-                                        </ul>
-                                    </template>
-                                </Popper>
-                            </client-only>
-                        </div>
-                    </div>
-                    <div class="w-full max-w-[440px] lg:mt-16">
-                        <div class="mb-10 flex items-center">
-                            <div class="flex h-16 w-16 items-end justify-center overflow-hidden rounded-full bg-[#00AB55] ltr:mr-4 rtl:ml-4">
-                                <img src="/assets/images/auth/user.png" class="w-full object-cover" alt="images" />
-                            </div>
-                            <div class="flex-1">
-                                <h4 class="text-2xl dark:text-white">Shaun Park</h4>
-                                <p class="text-white-dark">Enter your password to unlock your ID</p>
-                            </div>
-                        </div>
-                        <form class="space-y-5 dark:text-white" @submit.prevent="router.push('/')">
-                            <div>
-                                <label for="Password">Password</label>
-                                <div class="relative text-white-dark">
-                                    <input id="Password" type="password" placeholder="Enter Password" class="form-input ps-10 placeholder:text-white-dark" />
-                                    <span class="absolute start-4 top-1/2 -translate-y-1/2">
-                                        <icon-lock-dots :fill="true" />
-                                    </span>
-                                </div>
-                            </div>
-                            <button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
-                                UNLOCK
-                            </button>
-                        </form>
-                    </div>
-                    <p class="absolute bottom-6 w-full text-center dark:text-white">© {{ new Date().getFullYear() }}.VRISTO All Rights Reserved.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script lang="ts" setup>
-    import { computed } from 'vue';
-    import appSetting from '@/app-setting';
-    import { useAppStore } from '@/stores/index';
-    import { useRouter } from 'vue-router';
-    useHead({ title: 'Lockscreen Cover' });
-    const router = useRouter();
-    definePageMeta({
-        layout: 'auth-layout',
-    });
-    const store = useAppStore();
-    const { setLocale } = useI18n();
-
-    // multi language
-    const changeLanguage = (item: any) => {
-        appSetting.toggleLanguage(item, setLocale);
-    };
-    const currentFlag = computed(() => {
-        return `/assets/images/flags/${store.locale?.toUpperCase()}.svg`;
-    });
-</script>
diff --git a/pages/auth/cover-password-reset.vue b/pages/auth/cover-password-reset.vue
deleted file mode 100644
index c3a5584..0000000
--- a/pages/auth/cover-password-reset.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-    <div>
-        <div class="absolute inset-0">
-            <img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
-        </div>
-        <div
-            class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
-        >
-            <img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
-            <img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
-            <img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
-            <img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
-            <div
-                class="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"
-            >
-                <div
-                    class="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,rgba(239,18,98,1)_0%,rgba(67,97,238,1)_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"
-                >
-                    <div
-                        class="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"
-                    ></div>
-                    <div class="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
-                        <NuxtLink to="/" class="ms-10 block w-48 lg:w-72">
-                            <img src="/assets/images/auth/logo-white.svg" alt="Logo" class="w-full" />
-                        </NuxtLink>
-                        <div class="mt-24 hidden w-full max-w-[430px] lg:block">
-                            <img src="/assets/images/auth/reset-password.svg" alt="Cover Image" class="w-full" />
-                        </div>
-                    </div>
-                </div>
-                <div class="relative flex w-full flex-col items-center justify-center gap-6 px-4 pb-16 pt-6 sm:px-6 lg:max-w-[667px]">
-                    <div class="flex w-full max-w-[440px] items-center gap-2 lg:absolute lg:end-6 lg:top-6 lg:max-w-full">
-                        <NuxtLink to="/" class="block w-8 lg:hidden">
-                            <img src="/assets/images/logo.svg" alt="Logo" class="mx-auto w-10" />
-                        </NuxtLink>
-                        <div class="dropdown ms-auto w-max">
-                            <client-only>
-                                <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="8">
-                                    <button
-                                        type="button"
-                                        class="flex items-center gap-2.5 rounded-lg border border-white-dark/30 bg-white px-2 py-1.5 text-white-dark hover:border-primary hover:text-primary dark:bg-black"
-                                    >
-                                        <div>
-                                            <img :src="currentFlag" alt="image" class="h-5 w-5 rounded-full object-cover" />
-                                        </div>
-                                        <div class="text-base font-bold uppercase">{{ store.locale }}</div>
-                                        <span class="shrink-0">
-                                            <icon-caret-down />
-                                        </span>
-                                    </button>
-                                    <template #content="{ close }">
-                                        <ul
-                                            class="grid w-[280px] grid-cols-2 gap-2 !px-2 font-semibold text-dark dark:text-white-dark dark:text-white-light/90"
-                                        >
-                                            <template v-for="item in store.languageList" :key="item.code">
-                                                <li>
-                                                    <button
-                                                        type="button"
-                                                        class="w-full hover:text-primary"
-                                                        :class="{ 'bg-primary/10 text-primary': store.locale === item.code }"
-                                                        @click="changeLanguage(item), close()"
-                                                    >
-                                                        <img
-                                                            class="h-5 w-5 rounded-full object-cover"
-                                                            :src="`/assets/images/flags/${item.code.toUpperCase()}.svg`"
-                                                            alt=""
-                                                        />
-                                                        <span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
-                                                    </button>
-                                                </li>
-                                            </template>
-                                        </ul>
-                                    </template>
-                                </Popper>
-                            </client-only>
-                        </div>
-                    </div>
-                    <div class="w-full max-w-[440px] lg:mt-16">
-                        <div class="mb-7">
-                            <h1 class="mb-3 text-2xl font-bold !leading-snug dark:text-white">Password Reset</h1>
-                            <p>Enter your email to recover your ID</p>
-                        </div>
-                        <form class="space-y-5" @submit.prevent="router.push('/')">
-                            <div>
-                                <label for="Email">Email</label>
-                                <div class="relative text-white-dark">
-                                    <input id="Email" type="email" placeholder="Enter Email" class="form-input pl-10 placeholder:text-white-dark" />
-                                    <span class="absolute left-4 top-1/2 -translate-y-1/2">
-                                        <icon-mail :fill="true" />
-                                    </span>
-                                </div>
-                            </div>
-                            <button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
-                                RECOVER
-                            </button>
-                        </form>
-                    </div>
-                    <p class="absolute bottom-6 w-full text-center dark:text-white">© {{ new Date().getFullYear() }}.VRISTO All Rights Reserved.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script lang="ts" setup>
-    import { computed } from 'vue';
-    import appSetting from '@/app-setting';
-    import { useAppStore } from '@/stores/index';
-    import { useRouter } from 'vue-router';
-    useHead({ title: 'Reset Password Cover' });
-    const router = useRouter();
-    definePageMeta({
-        layout: 'auth-layout',
-    });
-    const store = useAppStore();
-    const { setLocale } = useI18n();
-
-    // multi language
-    const changeLanguage = (item: any) => {
-        appSetting.toggleLanguage(item, setLocale);
-    };
-    const currentFlag = computed(() => {
-        return `/assets/images/flags/${store.locale?.toUpperCase()}.svg`;
-    });
-</script>
diff --git a/pages/auth/register.vue b/pages/auth/register.vue
deleted file mode 100644
index f5951cd..0000000
--- a/pages/auth/register.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-    <div>
-        <div class="absolute inset-0">
-            <img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
-        </div>
-        <div
-            class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
-        >
-            <img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
-            <img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
-            <img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
-            <img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
-            <div
-                class="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"
-            >
-                <div
-                    class="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,rgba(239,18,98,1)_0%,rgba(67,97,238,1)_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"
-                >
-                    <div
-                        class="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"
-                    ></div>
-                    <div class="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
-                        <NuxtLink to="/" class="ms-10 block w-48 lg:w-72">
-                            <img src="/assets/images/auth/logo-white.svg" alt="Logo" class="w-full" />
-                        </NuxtLink>
-                        <div class="mt-24 hidden w-full max-w-[430px] lg:block">
-                            <img src="/assets/images/auth/register.svg" alt="Cover Image" class="w-full" />
-                        </div>
-                    </div>
-                </div>
-                <div class="relative flex w-full flex-col items-center justify-center gap-6 px-4 pb-16 pt-6 sm:px-6 lg:max-w-[667px]">
-                    <div class="flex w-full max-w-[440px] items-center gap-2 lg:absolute lg:end-6 lg:top-6 lg:max-w-full">
-                        <NuxtLink to="/" class="block w-8 lg:hidden">
-                            <img src="/assets/images/logo.svg" alt="Logo" class="mx-auto w-10" />
-                        </NuxtLink>
-                        <div class="dropdown ms-auto w-max">
-                            <client-only>
-                                <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="8">
-                                    <button
-                                        type="button"
-                                        class="flex items-center gap-2.5 rounded-lg border border-white-dark/30 bg-white px-2 py-1.5 text-white-dark hover:border-primary hover:text-primary dark:bg-black"
-                                    >
-                                        <div>
-                                            <img :src="currentFlag" alt="image" class="h-5 w-5 rounded-full object-cover" />
-                                        </div>
-                                        <div class="text-base font-bold uppercase">{{ store.locale }}</div>
-                                        <span class="shrink-0">
-                                            <icon-caret-down />
-                                        </span>
-                                    </button>
-                                    <template #content="{ close }">
-                                        <ul
-                                            class="grid w-[280px] grid-cols-2 gap-2 !px-2 font-semibold text-dark dark:text-white-dark dark:text-white-light/90"
-                                        >
-                                            <template v-for="item in store.languageList" :key="item.code">
-                                                <li>
-                                                    <button
-                                                        type="button"
-                                                        class="w-full hover:text-primary"
-                                                        :class="{ 'bg-primary/10 text-primary': store.locale === item.code }"
-                                                        @click="changeLanguage(item), close()"
-                                                    >
-                                                        <img
-                                                            class="h-5 w-5 rounded-full object-cover"
-                                                            :src="`/assets/images/flags/${item.code.toUpperCase()}.svg`"
-                                                            alt=""
-                                                        />
-                                                        <span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
-                                                    </button>
-                                                </li>
-                                            </template>
-                                        </ul>
-                                    </template>
-                                </Popper>
-                            </client-only>
-                        </div>
-                    </div>
-                    <div class="w-full max-w-[440px] lg:mt-16">
-                        <div class="mb-10">
-                            <h1 class="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign Up</h1>
-                            <p class="text-base font-bold leading-normal text-white-dark">Enter your email and password to register</p>
-                        </div>
-                        <form class="space-y-5 dark:text-white" @submit.prevent="router.push('/')">
-                            <div>
-                                <label for="Name">Name</label>
-                                <div class="relative text-white-dark">
-                                    <input id="Name" type="text" placeholder="Enter Name" class="form-input ps-10 placeholder:text-white-dark" />
-                                    <span class="absolute start-4 top-1/2 -translate-y-1/2">
-                                        <icon-user :fill="true" />
-                                    </span>
-                                </div>
-                            </div>
-                            <div>
-                                <label for="Email">Email</label>
-                                <div class="relative text-white-dark">
-                                    <input id="Email" type="email" placeholder="Enter Email" class="form-input ps-10 placeholder:text-white-dark" />
-                                    <span class="absolute start-4 top-1/2 -translate-y-1/2">
-                                        <icon-mail :fill="true" />
-                                    </span>
-                                </div>
-                            </div>
-                            <div>
-                                <label for="Password">Password</label>
-                                <div class="relative text-white-dark">
-                                    <input id="Password" type="password" placeholder="Enter Password" class="form-input ps-10 placeholder:text-white-dark" />
-                                    <span class="absolute start-4 top-1/2 -translate-y-1/2">
-                                        <icon-lock-dots :fill="true" />
-                                    </span>
-                                </div>
-                            </div>
-                            <div>
-                                <label class="flex cursor-pointer items-center">
-                                    <input type="checkbox" class="form-checkbox bg-white dark:bg-black" />
-                                    <span class="text-white-dark">Subscribe to weekly newsletter</span>
-                                </label>
-                            </div>
-                            <button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
-                                Sign Up
-                            </button>
-                        </form>
-
-                        <div class="relative my-7 text-center md:mb-9">
-                            <span class="absolute inset-x-0 top-1/2 h-px w-full -translate-y-1/2 bg-white-light dark:bg-white-dark"></span>
-                            <span class="relative bg-white px-2 font-bold uppercase text-white-dark dark:bg-dark dark:text-white-light">or</span>
-                        </div>
-                        <div class="mb-10 md:mb-[60px]">
-                            <ul class="flex justify-center gap-3.5">
-                                <li>
-                                    <a
-                                        href="javascript:"
-                                        class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
-                                        style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
-                                    >
-                                        <icon-instagram />
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href="javascript:"
-                                        class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
-                                        style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
-                                    >
-                                        <icon-facebook-circle />
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href="javascript:"
-                                        class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
-                                        style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
-                                    >
-                                        <icon-twitter :fill="true" />
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href="javascript:"
-                                        class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
-                                        style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
-                                    >
-                                        <icon-google />
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="text-center dark:text-white">
-                            Already have an account ?
-                            <NuxtLink to="/auth/cover-login" class="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
-                                SIGN IN
-                            </NuxtLink>
-                        </div>
-                    </div>
-                    <p class="absolute bottom-6 w-full text-center dark:text-white">© {{ new Date().getFullYear() }}.VRISTO All Rights Reserved.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script lang="ts" setup>
-    import { computed } from 'vue';
-    import appSetting from '@/app-setting';
-    import { useAppStore } from '@/stores/index';
-    import { useRouter } from 'vue-router';
-    useHead({ title: 'Register Cover' });
-    const router = useRouter();
-    definePageMeta({
-        layout: 'auth-layout',
-    });
-    const store = useAppStore();
-    const { setLocale } = useI18n();
-
-    // multi language
-    const changeLanguage = (item: any) => {
-        appSetting.toggleLanguage(item, setLocale);
-    };
-    const currentFlag = computed(() => {
-        return `/assets/images/flags/${store.locale?.toUpperCase()}.svg`;
-    });
-</script>