feat(ui): implement OAuth login flow and dashboard components
Some checks failed
CI / build-and-test (push) Failing after -32m0s
Some checks failed
CI / build-and-test (push) Failing after -32m0s
* Add OAuth login handling in app and UI components * Create new components for login and dashboard pages * Refactor sidebar and navigation structure * Introduce types for access entries and status responses
This commit is contained in:
@@ -1,67 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { getApiURL } from '@warkypublic/svelix';
|
||||
import LoginPage from './components/auth/LoginPage.svelte';
|
||||
import AdminShell from './components/shell/AdminShell.svelte';
|
||||
import type { ShellPage, StatusResponse } from './types';
|
||||
import { fromStore } from 'svelte/store';
|
||||
import {
|
||||
buildOAuthAuthorizationURL,
|
||||
ensureApiURL,
|
||||
exchangeOAuthCode,
|
||||
GlobalStateStore,
|
||||
isLoggedInStore,
|
||||
setCurrentPath
|
||||
} from './shellState';
|
||||
|
||||
type AccessEntry = {
|
||||
key_id: string;
|
||||
last_accessed_at: string;
|
||||
last_path: string;
|
||||
user_agent: string;
|
||||
request_count: number;
|
||||
};
|
||||
|
||||
type StatusResponse = {
|
||||
title: string;
|
||||
description: string;
|
||||
version: string;
|
||||
build_date: string;
|
||||
commit: string;
|
||||
connected_count: number;
|
||||
total_known: number;
|
||||
connected_window: string;
|
||||
oauth_enabled: boolean;
|
||||
entries: AccessEntry[];
|
||||
};
|
||||
|
||||
type NavItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{
|
||||
id: 'dashboard',
|
||||
label: 'Dashboard',
|
||||
description: 'System overview and status snapshots.'
|
||||
},
|
||||
{
|
||||
id: 'projects',
|
||||
label: 'Projects',
|
||||
description: 'First management module for AMCS projects.'
|
||||
},
|
||||
{
|
||||
id: 'thoughts',
|
||||
label: 'Thoughts',
|
||||
description: 'Thought management arrives after projects.',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
id: 'files',
|
||||
label: 'Files',
|
||||
description: 'File inventory and attachment views.',
|
||||
disabled: true
|
||||
}
|
||||
];
|
||||
|
||||
let authMessage = $state('');
|
||||
let authError = $state('');
|
||||
let authBusy = $state(false);
|
||||
@@ -69,14 +20,13 @@
|
||||
let data = $state<StatusResponse | null>(null);
|
||||
let loading = $state(false);
|
||||
let error = $state('');
|
||||
let currentPage = $state<'dashboard' | 'projects'>('dashboard');
|
||||
let currentPage = $state<ShellPage>('dashboard');
|
||||
|
||||
ensureApiURL(import.meta.env.VITE_API_URL);
|
||||
|
||||
const isLoggedIn = $derived(GlobalStateStore.isLoggedIn());
|
||||
const isLoggedIn = fromStore(isLoggedInStore);
|
||||
const currentPath = $derived(typeof window !== 'undefined' ? window.location.pathname : '/');
|
||||
const isOAuthCallback = $derived(currentPath === '/oauth/callback');
|
||||
const oauthAuthorizeURL = $derived(`${getApiURL()}/oauth/authorize`);
|
||||
|
||||
async function startOAuthLogin(): Promise<void> {
|
||||
authBusy = true;
|
||||
@@ -112,9 +62,7 @@
|
||||
}
|
||||
|
||||
const token = await exchangeOAuthCode(code, returnedState);
|
||||
await GlobalStateStore.getState().login(token, {
|
||||
username: 'OAuth operator'
|
||||
});
|
||||
await GlobalStateStore.getState().login(token, { username: 'OAuth operator' });
|
||||
|
||||
authMessage = 'OAuth login complete. Welcome back.';
|
||||
window.history.replaceState({}, '', '/');
|
||||
@@ -149,10 +97,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Date(value).toLocaleString();
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
setCurrentPath(window.location.pathname);
|
||||
@@ -163,7 +107,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (isLoggedIn) {
|
||||
if (isLoggedIn.current) {
|
||||
await loadStatus();
|
||||
}
|
||||
});
|
||||
@@ -174,248 +118,24 @@
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen bg-slate-950 text-slate-100">
|
||||
{#if !isLoggedIn}
|
||||
<main class="mx-auto flex min-h-screen max-w-6xl items-center px-4 py-10 sm:px-6 lg:px-8">
|
||||
<section class="grid w-full gap-8 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
<div class="rounded-3xl border border-cyan-400/20 bg-slate-900/80 p-8 shadow-2xl shadow-slate-950/40">
|
||||
<div class="inline-flex items-center gap-2 rounded-full border border-cyan-400/20 bg-cyan-400/10 px-3 py-1 text-sm font-medium text-cyan-200">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
|
||||
AMCS Control Interface
|
||||
</div>
|
||||
<h1 class="mt-6 text-4xl font-semibold tracking-tight text-white">
|
||||
{#if isOAuthCallback}
|
||||
Completing login
|
||||
{:else}
|
||||
Login
|
||||
{/if}
|
||||
</h1>
|
||||
<p class="mt-3 max-w-2xl text-base leading-7 text-slate-300">
|
||||
Origin-style operator access for the AMCS admin interface. ResolveSpec OAuth is the front door now,
|
||||
not the old login shortcut.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 grid gap-4 sm:grid-cols-2">
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">Primary module</p>
|
||||
<p class="mt-2 text-2xl font-semibold text-white">Projects</p>
|
||||
<p class="mt-2 text-sm text-slate-400">Projects are the first real admin screen in this rollout.</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">OAuth path</p>
|
||||
<p class="mt-2 text-2xl font-semibold text-white">ResolveSpec</p>
|
||||
<p class="mt-2 text-sm text-slate-400">Client registration, authorize, callback, token exchange.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-3xl border border-white/10 bg-slate-900 p-6 shadow-xl shadow-slate-950/30 sm:p-8">
|
||||
{#if isOAuthCallback}
|
||||
<h2 class="text-xl font-semibold text-white">Authorizing operator session</h2>
|
||||
<p class="mt-2 text-sm leading-6 text-slate-400">
|
||||
Finishing the ResolveSpec handshake and exchanging the returned code for an AMCS token.
|
||||
</p>
|
||||
|
||||
<div class="mt-6 rounded-2xl border border-cyan-400/20 bg-cyan-400/5 px-4 py-6 text-sm text-cyan-100">
|
||||
{#if callbackBusy}
|
||||
Working the callback doohickey…
|
||||
{:else if authError}
|
||||
Callback failed. Fix the route or try the login run again.
|
||||
{:else}
|
||||
Callback processed.
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<h2 class="text-xl font-semibold text-white">Operator login</h2>
|
||||
<p class="mt-1 text-sm text-slate-400">Authenticate through AMCS ResolveSpec OAuth endpoints.</p>
|
||||
|
||||
<div class="mt-6 space-y-4">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex w-full items-center justify-center rounded-xl border border-cyan-300/20 bg-cyan-400/10 px-4 py-3 text-sm font-semibold text-cyan-100 transition hover:border-cyan-300/40 hover:bg-cyan-400/20 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
onclick={startOAuthLogin}
|
||||
disabled={authBusy}
|
||||
>
|
||||
{#if authBusy}Starting OAuth login…{:else}Login with ResolveSpec OAuth{/if}
|
||||
</button>
|
||||
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-slate-300">
|
||||
<p class="font-semibold text-white">Routes in play</p>
|
||||
<ul class="mt-3 space-y-2 text-slate-400">
|
||||
<li>• discovery: <code class="text-cyan-100">/api/.well-known/oauth-authorization-server</code></li>
|
||||
<li>• registration: <code class="text-cyan-100">/api/oauth/register</code></li>
|
||||
<li>• authorize: <code class="text-cyan-100">{oauthAuthorizeURL}</code></li>
|
||||
<li>• callback: <code class="text-cyan-100">/oauth/callback</code></li>
|
||||
<li>• token: <code class="text-cyan-100">/api/oauth/token</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{#if authError}
|
||||
<p class="text-sm text-rose-300">{authError}</p>
|
||||
{/if}
|
||||
{#if authMessage}
|
||||
<p class="text-sm text-emerald-300">{authMessage}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{#if !isLoggedIn.current}
|
||||
<LoginPage
|
||||
{isOAuthCallback}
|
||||
{callbackBusy}
|
||||
{authBusy}
|
||||
{authError}
|
||||
{authMessage}
|
||||
onstartLogin={startOAuthLogin}
|
||||
/>
|
||||
{:else}
|
||||
<div class="grid min-h-screen lg:grid-cols-[17rem_1fr]">
|
||||
<aside class="border-r border-white/10 bg-slate-900/90 p-6">
|
||||
<div>
|
||||
<p class="text-xs uppercase tracking-[0.3em] text-cyan-300">AMCS</p>
|
||||
<h1 class="mt-2 text-2xl font-semibold text-white">Admin</h1>
|
||||
<p class="mt-2 text-sm text-slate-400">Origin-style shell, starting with Projects.</p>
|
||||
</div>
|
||||
|
||||
<nav class="mt-8 space-y-2">
|
||||
{#each navItems as item}
|
||||
<button
|
||||
class={`w-full rounded-2xl border px-4 py-3 text-left transition ${item.disabled ? 'cursor-not-allowed border-white/5 bg-white/[0.02] text-slate-600' : currentPage === item.id ? 'border-cyan-300/30 bg-cyan-400/10 text-cyan-100' : 'border-white/10 bg-white/5 text-slate-200 hover:bg-white/10'}`}
|
||||
disabled={item.disabled}
|
||||
onclick={() => {
|
||||
if (!item.disabled && (item.id === 'dashboard' || item.id === 'projects')) {
|
||||
currentPage = item.id;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="text-sm font-semibold">{item.label}</div>
|
||||
<div class="mt-1 text-xs text-slate-400">{item.description}</div>
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<button
|
||||
class="mt-8 inline-flex w-full items-center justify-center rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm font-medium text-slate-200 transition hover:bg-white/10"
|
||||
onclick={logout}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<main class="px-4 py-6 sm:px-6 lg:px-8">
|
||||
{#if currentPage === 'dashboard'}
|
||||
<section class="rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold text-white">System overview</h2>
|
||||
<p class="mt-1 text-sm text-slate-400">Current AMCS status behind the admin shell.</p>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-white/10"
|
||||
onclick={loadStatus}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="mt-6 rounded-2xl border border-dashed border-white/10 bg-slate-950/40 px-4 py-10 text-center text-slate-400">
|
||||
Loading status…
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="mt-6 rounded-2xl border border-rose-400/30 bg-rose-400/10 px-4 py-6 text-sm text-rose-100">
|
||||
<p class="font-semibold">Couldn’t load the status snapshot.</p>
|
||||
<p class="mt-1 text-rose-100/80">{error}</p>
|
||||
</div>
|
||||
{:else if data}
|
||||
<div class="mt-6 grid gap-4 sm:grid-cols-3">
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">Connected users</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">{data.connected_count}</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">Known principals</p>
|
||||
<p class="mt-2 text-3xl font-semibold text-white">{data.total_known}</p>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-5">
|
||||
<p class="text-sm uppercase tracking-[0.2em] text-slate-400">Version</p>
|
||||
<p class="mt-2 break-all text-2xl font-semibold text-white">{data.version}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
{:else}
|
||||
<section class="rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold text-white">Projects</h2>
|
||||
<p class="mt-1 text-sm text-slate-400">First module scaffold. Grid/Form wiring comes next.</p>
|
||||
</div>
|
||||
<span class="inline-flex items-center rounded-full border border-amber-300/20 bg-amber-400/10 px-3 py-1 text-xs font-medium text-amber-200">
|
||||
Structure phase
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 grid gap-4 lg:grid-cols-[1.35fr_0.65fr]">
|
||||
<div class="rounded-2xl border border-dashed border-cyan-400/20 bg-cyan-400/5 p-6">
|
||||
<h3 class="text-lg font-semibold text-white">Project grid placeholder</h3>
|
||||
<p class="mt-2 text-sm leading-6 text-slate-300">
|
||||
This is the landing zone for the Origin-style projects grid using Svelix and GridlerFull.
|
||||
Next pass: wire ResolveSpec-backed project list, row actions, and editor flow.
|
||||
</p>
|
||||
<ul class="mt-4 space-y-2 text-sm text-slate-400">
|
||||
<li>• Project list and search</li>
|
||||
<li>• Project detail/edit drawer or modal</li>
|
||||
<li>• Create/archive actions</li>
|
||||
<li>• Link-outs to related thoughts and skills</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-white/10 bg-white/5 p-6">
|
||||
<h3 class="text-lg font-semibold text-white">Build notes</h3>
|
||||
<dl class="mt-4 space-y-3 text-sm text-slate-300">
|
||||
<div>
|
||||
<dt class="text-slate-500">Auth path</dt>
|
||||
<dd class="mt-1">ResolveSpec OAuth packages</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-slate-500">Page pattern</dt>
|
||||
<dd class="mt-1">Mapped toward Origin login and shell</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-slate-500">First module</dt>
|
||||
<dd class="mt-1">Projects</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if data && currentPage === 'dashboard' && data.entries.length > 0}
|
||||
<section class="mt-6 rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
|
||||
<h3 class="text-xl font-semibold text-white">Recent access</h3>
|
||||
<div class="mt-6 overflow-hidden rounded-2xl border border-white/10">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-white/10 text-left text-sm text-slate-300">
|
||||
<thead class="bg-white/5 text-xs uppercase tracking-[0.2em] text-slate-500">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-medium">Principal</th>
|
||||
<th class="px-4 py-3 font-medium">Last accessed</th>
|
||||
<th class="px-4 py-3 font-medium">Last path</th>
|
||||
<th class="px-4 py-3 font-medium">Agent</th>
|
||||
<th class="px-4 py-3 font-medium">Requests</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-white/5 bg-slate-950/30">
|
||||
{#each data.entries as entry}
|
||||
<tr class="hover:bg-white/[0.03]">
|
||||
<td class="px-4 py-3 align-top"><code class="rounded bg-white/5 px-2 py-1 font-mono text-xs text-cyan-100">{entry.key_id}</code></td>
|
||||
<td class="px-4 py-3 align-top text-slate-200">{formatDate(entry.last_accessed_at)}</td>
|
||||
<td class="px-4 py-3 align-top"><code class="text-slate-100">{entry.last_path}</code></td>
|
||||
<td class="max-w-[16rem] truncate px-4 py-3 align-top text-xs text-slate-400">{entry.user_agent ?? '—'}</td>
|
||||
<td class="px-4 py-3 align-top font-semibold text-white">{entry.request_count}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
<AdminShell
|
||||
{currentPage}
|
||||
{data}
|
||||
{loading}
|
||||
{error}
|
||||
onlogout={logout}
|
||||
onnavigate={(page) => { currentPage = page; }}
|
||||
onrefresh={loadStatus}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user