47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<template>
|
|
<div class="gatekeeper">
|
|
<div v-if="isLoading">
|
|
<p class="animate-pulse">Loading permissions...</p>
|
|
</div>
|
|
|
|
<div v-else-if="!user" class="text-center p-8 glass-panel rounded-xl">
|
|
<h2 class="text-2xl font-bold mb-4">🔐 Locked Area</h2>
|
|
<p class="mb-6">Sign in with your Google account to access this content.</p>
|
|
<button @click="login" class="btn btn-primary">
|
|
Sign in with Google
|
|
</button>
|
|
</div>
|
|
|
|
<div v-else-if="!isAllowed" class="text-center p-8 glass-panel rounded-xl border border-red-500/30">
|
|
<h2 class="text-2xl font-bold mb-4 text-red-400">🚫 Access Pending</h2>
|
|
<p class="mb-6">
|
|
Hi <strong>{{ user.displayName }}</strong>. Your account ({{ user.email }}) is not yet on the guest list.
|
|
</p>
|
|
<p class="text-sm opacity-70">
|
|
Please ask the admin to add "<strong>{{ user.email }}</strong>" to the allowlist.
|
|
</p>
|
|
<button @click="logout" class="btn btn-sm btn-ghost mt-4">
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAuth } from '../composables/useAuth'
|
|
|
|
const { user, isAllowed, isLoading, login, logout } = useAuth()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
</style>
|