94 lines
4.1 KiB
Vue
94 lines
4.1 KiB
Vue
<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>
|