Require email account authentication

apps/web/components/AppShell.vue

@@ -4,12 +4,12 @@ const { session, restore, signOut } = useDngAuth()
 onMounted(() => void restore())
 
 const initials = computed(() => {
-  const email = session.value?.user.email ?? ''
-  return email.slice(0, 2).toUpperCase() || 'G'
+  const displayName = session.value?.user.user_metadata?.display_name
+  const source = typeof displayName === 'string' && displayName.trim() ? displayName : session.value?.user.email ?? ''
+  return source.trim().split(/\s+/).map(part => part[0]).join('').slice(0, 2).toUpperCase() || 'D&G'
 })
 
 async function leave() {
-  if (session.value?.user.is_anonymous && !window.confirm('This guest account cannot be recovered after sign out. Leave anyway?')) return
   await signOut()
   await navigateTo('/')
 }
@@ -22,7 +22,7 @@ async function leave() {
       <div class="topbar-center"><span class="status-dot" /> PRIVATE ALPHA <b v-if="section">/ {{ section }}</b></div>
       <div class="topbar-actions">
         <NuxtLink to="/dashboard" class="icon-link" aria-label="Dashboard">⌂</NuxtLink>
-        <button v-if="session" class="avatar" :title="session.user.is_anonymous ? 'Guest session — sign out' : `Sign out ${session.user.email ?? ''}`" @click="leave">{{ initials }}</button>
+        <button v-if="session" class="avatar" :title="`Sign out ${session.user.email ?? ''}`" @click="leave">{{ initials }}</button>
         <div v-else class="avatar">D&G</div>
       </div>
     </header>

apps/web/components/AuthCard.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  eyebrow: string
+  title: string
+  subtitle: string
+}>()
+</script>
+
+<template>
+  <main class="auth-page noise">
+    <div class="brand"><AppMark /></div>
+    <section class="auth-card">
+      <header>
+        <small>{{ eyebrow }}</small>
+        <h1>{{ title }}</h1>
+        <p>{{ subtitle }}</p>
+      </header>
+      <slot />
+      <footer><slot name="footer" /></footer>
+    </section>
+    <p class="security-note"><i /> PRIVATE WORLDS · SECURE SUPABASE ACCOUNT</p>
+  </main>
+</template>
+
+<style scoped>
+.auth-page{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:28px;padding:42px 20px}.auth-card{width:min(480px,calc(100vw - 40px));padding:clamp(28px,5vw,48px);border:1px solid var(--line);background:linear-gradient(145deg,#11110f,#090909);box-shadow:0 35px 100px rgba(0,0,0,.48)}header small{font:600 8px var(--mono);letter-spacing:.18em;color:var(--acid)}header h1{margin:14px 0 12px;font:600 clamp(32px,6vw,52px)/1 var(--display);letter-spacing:-.06em}header p{margin:0 0 30px;color:var(--muted);font-size:12px;line-height:1.7}footer{margin-top:25px;padding-top:22px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:11px}.security-note{font:500 7px var(--mono);letter-spacing:.13em;color:var(--muted)}.security-note i{display:inline-block;width:5px;height:5px;margin-right:8px;border-radius:50%;background:var(--acid)}
+:deep(.auth-form){display:grid;gap:15px}:deep(.auth-form label){display:grid;gap:8px;font:600 8px var(--mono);letter-spacing:.11em;color:#b5b5ae}:deep(.auth-form input){box-sizing:border-box;width:100%;min-height:48px;padding:0 14px;border:1px solid #373732;background:#0a0a09;color:var(--ink);font:12px var(--body);outline:none}:deep(.auth-form input:focus){border-color:var(--acid)}:deep(.auth-form button){min-height:50px;border:0;background:var(--acid);color:#080808;font:700 9px var(--mono);letter-spacing:.12em}:deep(.auth-form button:disabled){opacity:.45;cursor:wait}:deep(.form-error),:deep(.form-success){margin:0;padding:12px 14px;border:1px solid #6b372e;background:#221310;color:#ffab98;font:500 9px/1.55 var(--mono)}:deep(.form-success){border-color:#526425;background:#151a0d;color:var(--acid)}:deep(.form-link){color:var(--acid);text-decoration:none;font-weight:600}:deep(.field-row){display:flex;align-items:center;justify-content:space-between}:deep(.field-row a){color:var(--muted);font:500 8px var(--mono)}
+</style>