148 lines
2.8 KiB
Vue
148 lines
2.8 KiB
Vue
<script setup>
|
|
import { computed, onMounted } from 'vue'
|
|
import { RouterLink, RouterView } from 'vue-router'
|
|
|
|
import { useAuthStore } from './stores/authStore'
|
|
|
|
const auth = useAuthStore()
|
|
|
|
const accountLabel = computed(() => auth.user?.name || auth.user?.email || 'Account')
|
|
|
|
onMounted(() => {
|
|
auth.bootstrap()
|
|
})
|
|
|
|
async function handleLogout() {
|
|
await auth.logout()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-shell">
|
|
<header class="app-header">
|
|
<RouterLink to="/" class="brand">Luna Photobooth</RouterLink>
|
|
<nav class="app-nav">
|
|
<RouterLink to="/" class="nav-link">Home</RouterLink>
|
|
<RouterLink to="/capture" class="nav-link">Capture</RouterLink>
|
|
|
|
<RouterLink v-if="auth.isAuthenticated" to="/account" class="nav-link">{{ accountLabel }}</RouterLink>
|
|
<RouterLink v-else to="/login" class="nav-link">Login</RouterLink>
|
|
|
|
<button v-if="auth.isAuthenticated" type="button" class="nav-link nav-button" @click="handleLogout">
|
|
Logout
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="app-main">
|
|
<RouterView />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Fredoka+One&display=swap');
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
font-family: 'Poppins', sans-serif;
|
|
--blush-900: #8e2c4a;
|
|
--blush-700: #c85a7c;
|
|
--blush-500: #f1a3ba;
|
|
--blush-300: #f6c7d7;
|
|
--blush-150: #fbe6ef;
|
|
--cream: #fff7fb;
|
|
--ink: #33222b;
|
|
--muted: #6f4b58;
|
|
--surface: #ffffff;
|
|
--soft-shadow: 0 20px 60px rgba(219, 146, 170, 0.25);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: radial-gradient(circle at top, #ffffff 0%, #ffeaf2 40%, #f9cfdc 100%);
|
|
color: var(--ink);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button {
|
|
font-family: inherit;
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Fredoka One', sans-serif;
|
|
}
|
|
|
|
.app-shell {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px 24px 56px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.app-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.brand {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.app-nav {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 8px 14px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(200, 90, 124, 0.25);
|
|
background: rgba(255, 255, 255, 0.6);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-button {
|
|
cursor: pointer;
|
|
font: inherit;
|
|
}
|
|
|
|
.nav-link.router-link-exact-active,
|
|
.nav-link:hover {
|
|
background: #fff;
|
|
border-color: rgba(200, 90, 124, 0.5);
|
|
box-shadow: 0 12px 30px rgba(200, 90, 124, 0.2);
|
|
}
|
|
|
|
.app-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.app-shell {
|
|
padding: 20px 16px 48px;
|
|
}
|
|
|
|
.app-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
</style>
|