feat: add authenticated admin shell

apps/web/src/pages/AdminHomePage.stories.js

@@ -0,0 +1,4 @@
+import AdminHomePage from './AdminHomePage.vue';
+
+export default { title: 'Pages/AdminHomePage', component: AdminHomePage };
+export const Overview = {};

apps/web/src/pages/AdminHomePage.vue

@@ -0,0 +1,3 @@
+<template>
+  <section class="admin-page"><p class="catalog-kicker">Overview</p><h1>Collector workspace</h1><p class="detail-notes">Select an inventory item to manage its images and listing details.</p></section>
+</template>

apps/web/src/pages/AdminShell.stories.js

@@ -0,0 +1,8 @@
+import AdminShell from './AdminShell.vue';
+
+export default {
+  title: 'Pages/AdminShell',
+  component: AdminShell,
+};
+
+export const Navigation = { args: { routed: false } };

apps/web/src/pages/AdminShell.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { RouterView } from 'vue-router';
+
+import { useAuth } from '@/composables/useAuth.js';
+
+defineProps({ routed: { type: Boolean, default: true } });
+const { principal, signOut } = useAuth();
+
+async function logout() {
+  await signOut();
+  window.location.href = '/login';
+}
+</script>
+
+<template>
+  <main class="admin-shell">
+    <aside class="admin-sidebar">
+      <p class="catalog-kicker">Collector workspace</p>
+      <h1>Inventory</h1>
+      <nav aria-label="Admin navigation">
+        <a href="/admin">Overview</a>
+      </nav>
+      <div class="admin-sidebar__footer">
+        <span>{{ principal?.email }}</span>
+        <button class="button button--secondary" type="button" @click="logout">Sign out</button>
+      </div>
+    </aside>
+    <section class="admin-shell__content"><RouterView v-if="routed" /></section>
+  </main>
+</template>

apps/web/src/pages/LoginPage.stories.js

@@ -0,0 +1,5 @@
+import LoginPage from './LoginPage.vue';
+
+export default { title: 'Pages/LoginPage', component: LoginPage };
+export const Empty = {};
+export const Loading = { parameters: { docs: { description: { story: 'Submit state is exercised through the live form.' } } } };

apps/web/src/pages/LoginPage.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useAuth } from '@/composables/useAuth.js';
+
+const router = useRouter();
+const { signIn, isLoading, error } = useAuth();
+const email = ref('');
+const password = ref('');
+
+async function submit() {
+  try {
+    await signIn(email.value, password.value);
+    await router.push({ name: 'admin-home' });
+  } catch {
+    // Error is exposed by the auth composable for the live form state.
+  }
+}
+</script>
+
+<template>
+  <main class="auth-page">
+    <form class="auth-panel" @submit.prevent="submit">
+      <p class="catalog-kicker">Private workspace</p>
+      <h1>Sign in</h1>
+      <p class="detail-notes">Manage your collection, images, and listings.</p>
+      <label class="fixture-label" for="admin-email">Email</label>
+      <input id="admin-email" v-model="email" class="fixture-input" type="email" autocomplete="username" required />
+      <label class="fixture-label" for="admin-password">Password</label>
+      <input id="admin-password" v-model="password" class="fixture-input" type="password" autocomplete="current-password" required />
+      <p v-if="error" class="state state--error" role="alert">{{ error.message }}</p>
+      <button class="button button--primary" type="submit" :disabled="isLoading">{{ isLoading ? 'Signing in...' : 'Sign in' }}</button>
+    </form>
+  </main>
+</template>