115 lines
4.1 KiB
Vue
115 lines
4.1 KiB
Vue
<template>
|
||
<div class="verify-area pt-120 pb-120">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-6 col-md-8">
|
||
<div class="verify-content text-center shadow-lg p-5 rounded bg-white">
|
||
|
||
<div v-if="loading" class="text-center py-5">
|
||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
||
<span class="visually-hidden">Yükleniyor...</span>
|
||
</div>
|
||
<p class="mt-3 text-muted fs-5">E-posta adresiniz doğrulanıyor...</p>
|
||
</div>
|
||
|
||
<div v-else-if="success">
|
||
<div class="mb-4">
|
||
<div class="success-icon d-inline-flex align-items-center justify-content-center bg-success text-white rounded-circle"
|
||
style="width: 80px; height: 80px;">
|
||
<i class="fas fa-check fa-3x"></i>
|
||
</div>
|
||
</div>
|
||
<h3 class="mb-3 text-success">Doğrulama Başarılı!</h3>
|
||
<p class="text-muted mb-4 fs-5">Hesabınız başarıyla doğrulandı. Artık giriş yapabilirsiniz.
|
||
</p>
|
||
<NuxtLink to="/auth/login" class="btn btn-primary btn-lg w-100">
|
||
Giriş Yap
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<div class="mb-4">
|
||
<div class="error-icon d-inline-flex align-items-center justify-content-center bg-danger text-white rounded-circle"
|
||
style="width: 80px; height: 80px;">
|
||
<i class="fas fa-times fa-3x"></i>
|
||
</div>
|
||
</div>
|
||
<h3 class="mb-3 text-danger">Doğrulama Hatası</h3>
|
||
<p class="text-muted mb-4 fs-5">{{ displayError }}</p>
|
||
<NuxtLink to="/auth/login" class="btn btn-outline-primary">
|
||
Giriş sayfasına dön
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const route = useRoute();
|
||
const config = useRuntimeConfig();
|
||
|
||
definePageMeta({
|
||
middleware: 'guest-only',
|
||
auth: { unauthenticatedOnly: true, navigateAuthenticatedTo: '/' }
|
||
});
|
||
|
||
const loading = ref(true);
|
||
const success = ref(false);
|
||
const errorMessage = ref('');
|
||
|
||
const displayError = computed(() => {
|
||
return errorMessage.value || 'Doğrulama işlemi sırasında bir hata oluştu.';
|
||
});
|
||
|
||
onMounted(async () => {
|
||
const token = route.query.token as string;
|
||
|
||
if (!token) {
|
||
loading.value = false;
|
||
errorMessage.value = "Geçersiz doğrulama bağlantısı (token eksik).";
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const apiUrl = config.public.NUXT_PUBLIC_API_BASE || 'http://127.0.0.1:8080';
|
||
|
||
// Backend API: GET /api/v1/auth/verify-email?token=...
|
||
const response = await fetch(`${apiUrl}/api/v1/auth/verify-email?token=${token}`, {
|
||
method: 'GET',
|
||
headers: {
|
||
'accept': 'application/json'
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
success.value = true;
|
||
} else {
|
||
const data = await response.json();
|
||
errorMessage.value = data.message || 'Token geçersiz veya süresi dolmuş.';
|
||
}
|
||
} catch (error) {
|
||
console.error("Verify error:", error);
|
||
errorMessage.value = 'Sunucu ile bağlantı kurulamadı.';
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.verify-area {
|
||
background-color: #f8f9fa;
|
||
min-height: 80vh;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.verify-content {
|
||
border-top: 5px solid #0d6efd;
|
||
}
|
||
</style>
|