Require email account authentication

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>