fix(templates): ensure template use frontend css

this fix the nextcloud login + drive selector (chroot)
    fix also invitation / magic link

    also correct the UX: once user has logged in nextcloud, show an explicita page

frontend/package.json

@@ -9,6 +9,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
+    "postbuild": "node scripts/emit-askama-common.mjs",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && eslint . && stylelint \"src/**/*.{css,svelte}\" && prettier --check .",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

frontend/scripts/emit-askama-common.mjs

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/*
+ * Emit `static-dist/askama-common.css` from the SvelteKit design-token
+ * source of truth (`src/lib/styles/base/variables.css`) plus the auth-page
+ * component styles (`src/lib/styles/askama-common.css`).
+ *
+ * WHY A POST-BUILD SCRIPT:
+ *   Vite's `writeBundle` hooks fire mid-build, before
+ *   `@sveltejs/adapter-static` copies the finalised site to
+ *   `../static-dist/`. Anything written to that directory during
+ *   Vite gets wiped when adapter-static runs. A `postbuild` script
+ *   runs after everything the SvelteKit build owns, so its output
+ *   survives — one predictable moment, no ordering trap.
+ *
+ * WHAT IT PRODUCES:
+ *   A single stable-named CSS file at `static-dist/askama-common.css`
+ *   containing:
+ *     1. Every design token declared in `base/variables.css` (:root,
+ *        `light-dark(...)`, dark-mode blocks, etc.)
+ *     2. The auth-page component rules from `askama-common.css`
+ *   Concatenated, prefixed with a "do not edit" header, written UTF-8.
+ *
+ * SINGLE SOURCE OF TRUTH:
+ *   If a token changes in `variables.css`, one rebuild propagates it to
+ *   both the SPA (via Svelte's normal build pipeline) AND the askama
+ *   templates (via this file). Two consumers, one source. No manual
+ *   sync step.
+ *
+ * SERVER SIDE:
+ *   Server-rendered askama templates reference:
+ *     <link rel="stylesheet" href="/askama-common.css">
+ *   The Rust web layer serves `static-dist/askama-common.css` at that
+ *   URL through the same ServeDir the SPA uses. No route wiring needed.
+ */
+
+import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const stylesDir = resolve(__dirname, '../src/lib/styles');
+const outputFile = resolve(__dirname, '../../static-dist/askama-common.css');
+
+const header =
+	'/* Auto-generated by frontend/scripts/emit-askama-common.mjs.\n' +
+	' * Do NOT edit by hand — regenerated on every `npm run build`.\n' +
+	' * Sources: src/lib/styles/base/variables.css (design tokens)\n' +
+	' *          src/lib/styles/askama-common.css (auth components)\n' +
+	' */\n\n';
+
+const tokens = readFileSync(resolve(stylesDir, 'base/variables.css'), 'utf8');
+const components = readFileSync(resolve(stylesDir, 'askama-common.css'), 'utf8');
+
+mkdirSync(dirname(outputFile), { recursive: true });
+writeFileSync(outputFile, header + tokens + '\n' + components, 'utf8');
+
+const bytes = Buffer.byteLength(header + tokens + '\n' + components, 'utf8');
+console.log(`emit-askama-common: wrote ${bytes} bytes → ${outputFile}`);

frontend/src/lib/styles/askama-common.css

@@ -0,0 +1,221 @@
+/*
+ * askama-common.css — component styles for server-rendered askama pages.
+ *
+ * BUILD PIPELINE:
+ *   `vite.config.ts` prepends `base/variables.css` at build time (the
+ *   `emitAskamaCommon` plugin) and writes the result to
+ *   `static-dist/askama-common.css`. That output is the single non-hashed
+ *   URL every askama template references:
+ *
+ *     <link rel="stylesheet" href="/askama-common.css">
+ *
+ * SINGLE SOURCE OF TRUTH:
+ *   Design tokens (`--color-*`, `--space-*`, `--radius-*`, `--text-*`,
+ *   etc.) live in `base/variables.css`. This file only carries the
+ *   component-level rules for the class vocabulary the askama templates
+ *   actually use. Update tokens in ONE place; the build packages both.
+ *
+ * NO JAVASCRIPT:
+ *   Dark-mode detection uses `light-dark()` + the `color-scheme` on
+ *   :root (declared in `variables.css`). Askama pages are pre-auth flows
+ *   (login / magic-link error) — no per-user override needed. Browsers
+ *   older than Chrome 123 / Safari 17.5 / Firefox 120 fall back to the
+ *   light values; the pages are readable either way.
+ *
+ * CLASS VOCABULARY (mirrors `grep 'class=' templates/**\/*.html`):
+ *   .auth-container .auth-panel
+ *   .auth-logo .auth-logo-icon .auth-logo-text
+ *   .auth-title .auth-subtitle
+ *   .auth-form .auth-button
+ *   .auth-drive-option .auth-drive-name .auth-drive-badge
+ *   .magic-note
+ */
+
+/* ── Reset ─────────────────────────────────────────────────────── */
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+	height: 100%;
+}
+
+body {
+	font-family: var(--font-sans);
+	font-size: var(--text-base);
+	line-height: var(--leading-normal);
+	background: var(--color-bg-page);
+	color: var(--color-text);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+/* ── Layout shell ──────────────────────────────────────────────── */
+
+.auth-container {
+	min-height: 100dvh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--space-6);
+}
+
+.auth-panel {
+	width: min(400px, 100%);
+	background: var(--color-bg-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-2xl);
+	box-shadow: var(--shadow-md);
+	padding: var(--space-8);
+}
+
+/* ── Logo strip ───────────────────────────────────────────────── */
+
+.auth-logo {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	margin-bottom: var(--space-6);
+}
+
+.auth-logo-icon {
+	width: 40px;
+	height: 40px;
+	border-radius: var(--radius-lg);
+	background: var(--color-accent);
+	display: grid;
+	place-items: center;
+}
+
+.auth-logo-icon svg {
+	width: 26px;
+	height: 26px;
+}
+
+.auth-logo-text {
+	font-size: var(--text-lg);
+	font-weight: var(--weight-semibold);
+	color: var(--color-text-heading);
+}
+
+/* ── Title strip ──────────────────────────────────────────────── */
+
+.auth-title {
+	margin: 0 0 var(--space-2);
+	font-size: var(--text-xl);
+	font-weight: var(--weight-semibold);
+	color: var(--color-text-heading);
+	line-height: var(--leading-snug);
+}
+
+.auth-subtitle {
+	margin: 0 0 var(--space-5);
+	color: var(--color-text-secondary);
+	font-size: var(--text-sm);
+}
+
+.auth-subtitle a {
+	color: var(--color-accent);
+	text-decoration: none;
+}
+
+.auth-subtitle a:hover {
+	text-decoration: underline;
+}
+
+/* ── Form + button ────────────────────────────────────────────── */
+
+.auth-form {
+	display: flex;
+	flex-direction: column;
+	gap: var(--space-2);
+}
+
+.auth-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	margin-top: var(--space-3);
+	padding: var(--space-3) var(--space-4);
+	border: 0;
+	border-radius: var(--radius-lg);
+	background: var(--color-accent);
+	color: var(--color-on-accent);
+	font: inherit;
+	font-weight: var(--weight-semibold);
+	cursor: pointer;
+	transition: background 0.12s ease;
+}
+
+.auth-button:hover {
+	background: var(--color-accent-hover);
+}
+
+.auth-button:focus-visible {
+	outline: 2px solid var(--color-accent);
+	outline-offset: 2px;
+}
+
+/* ── Drive picker radios ──────────────────────────────────────── */
+
+.auth-drive-option {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	padding: var(--space-3) var(--space-4);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-lg);
+	cursor: pointer;
+	transition:
+		border-color 0.12s ease,
+		background 0.12s ease;
+}
+
+.auth-drive-option:hover {
+	border-color: var(--color-border-medium);
+	background: var(--color-bg-hover);
+}
+
+.auth-drive-option:has(input:checked) {
+	border-color: var(--color-accent);
+	background: var(--color-accent-ring);
+}
+
+.auth-drive-option input[type='radio'] {
+	accent-color: var(--color-accent);
+	margin: 0;
+}
+
+.auth-drive-name {
+	flex: 1;
+	font-weight: var(--weight-medium);
+}
+
+.auth-drive-badge {
+	padding: 2px var(--space-2);
+	border-radius: 999px;
+	background: var(--color-accent);
+	color: var(--color-on-accent);
+	font-size: 0.6875rem;
+	font-weight: var(--weight-semibold);
+	text-transform: uppercase;
+	letter-spacing: 0.03em;
+}
+
+/* ── Magic-link note block ────────────────────────────────────── */
+
+.magic-note {
+	margin-top: var(--space-5);
+	padding: var(--space-3) var(--space-4);
+	border-radius: var(--radius-md);
+	background: var(--color-bg-input);
+	border: 1px solid var(--color-border);
+	color: var(--color-text-secondary);
+	font-size: var(--text-sm);
+}

frontend/src/routes/nextcloud/error/+page.svelte

@@ -67,7 +67,7 @@
 <svelte:head><title>{view.title} · OxiCloud</title></svelte:head>
 
 <main class="nc-status">
-	<Icon name="ban" class="nc-status__icon nc-status__icon--err" />
+	<Icon name="exclamation-circle" class="nc-status__icon nc-status__icon--err" />
 	<h1>{view.title}</h1>
 	<p>{view.message}</p>
 	<button
@@ -80,7 +80,13 @@
 
 <style>
 	.nc-status {
-		min-height: 100vh;
+		/* `base/reset.css` sets `body { display: flex }`. Public
+		   `/nextcloud/*` routes render children directly (bypassing
+		   AppShell), so <main> is a flex item on the body's row axis
+		   and needs to claim the full slot for its own centering to
+		   land in the viewport middle. */
+		flex: 1;
+		min-height: 100dvh;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -95,7 +101,12 @@
 	}
 
 	:global(.nc-status__icon--err) {
-		color: var(--color-danger-text);
+		/* `--color-danger-text` is white — it's the foreground for text
+		   sitting on a red button bg, not the standalone red glyph
+		   colour. `--color-error-text` is the light-dark(...) red pair
+		   designed for standalone use on the page background: darker
+		   red in light mode, softer coral in dark mode. */
+		color: var(--color-error-text);
 	}
 
 	.nc-status__action {

frontend/src/routes/nextcloud/success/+page.svelte

@@ -8,8 +8,12 @@
 	}
 
 	onMount(() => {
-		// Mirror the legacy flow: auto-close the popup shortly after success so
+		// Auto-close the tab a few seconds after landing. NC clients
-		// the user is returned to their Nextcloud client without an extra click.
+		// receive their credentials through the LFv2 poll endpoint
+		// (`/login/v2/poll`) in the backchannel — this browser tab is
+		// only useful as a "flow succeeded" landing. Users who want
+		// to keep it around click nothing; users who want it gone
+		// get it gone automatically.
 		const timer = setTimeout(closeWindow, 3000);
 		return () => clearTimeout(timer);
 	});
@@ -34,7 +38,13 @@
 
 <style>
 	.nc-status {
-		min-height: 100vh;
+		/* `base/reset.css` sets `body { display: flex }`. Public
+		   `/nextcloud/*` routes render children directly (bypassing
+		   AppShell), so <main> is a flex item on the body's row axis
+		   and needs to claim the full slot for its own centering to
+		   land in the viewport middle. */
+		flex: 1;
+		min-height: 100dvh;
 		display: flex;
 		flex-direction: column;
 		align-items: center;

frontend/vite.config.ts

@@ -3,6 +3,13 @@ import { defineConfig } from 'vitest/config';
 import istanbul from 'vite-plugin-istanbul';
 import { svelteTesting } from '@testing-library/svelte/vite';
 
+// `static-dist/askama-common.css` is emitted by `scripts/emit-askama-common.mjs`,
+// wired into `package.json` as a `postbuild` step. That runs AFTER
+// `@sveltejs/adapter-static` finalises `static-dist/`, avoiding the
+// wipe-and-copy race that would eat any file a `writeBundle` hook wrote
+// during the Vite build phase. See the script header for the pipeline
+// rationale and the single-source-of-truth invariant it preserves.
+
 // Backend dev server (cargo run) — the Vite dev server proxies API/protocol
 // traffic here so cookies, CSRF, and the auth-refresh flow are same-origin.
 const BACKEND = process.env.OXICLOUD_BACKEND ?? 'http://localhost:8086';

src/interfaces/nextcloud/login_v2_handler.rs

@@ -332,11 +332,30 @@ async fn complete_flow(
             base_url = %base_url,
             "Login Flow v2: flow completed successfully"
         );
-        let nc_url = format!(
+        // Redirect the browser to a visible success page. NC clients
-            "nc://login/server:{}&user:{}&password:{}",
+        // that use the LFv2 poll endpoint (the standard pattern) have
-            base_url, login_name, app_password
+        // already received the credentials server-to-server through
-        );
+        // `login_flow.complete()` above — they don't need any browser
-        axum::response::Redirect::to(&nc_url).into_response()
+        // hand-off.
+        //
+        // We deliberately do NOT redirect to `nc://login/…` here:
+        //   1. Plain browsers can't follow it → the tab looks stuck
+        //      on the picker → user clicks Continue again → second
+        //      click hits an already-consumed flow token → ends up
+        //      on `/nextcloud/error?type=session-expired`.
+        //   2. NC desktop clients that pick it up while their poll
+        //      has already succeeded try to complete the flow a
+        //      second time, which fails validation ("Impossible de
+        //      valider la requête") — the poll session is fine, the
+        //      dialog is spurious noise.
+        //
+        // If a client ever needs a frontchannel `nc://` handoff
+        // (older NC releases, mobile), reintroduce the URL as a
+        // client-side-only fragment (`#target=…`) and add a manual
+        // "Open Nextcloud" fallback on the success page. Keep the
+        // credentials out of the query string either way — the query
+        // string reaches server access logs.
+        axum::response::Redirect::to("/nextcloud/success").into_response()
     } else {
         tracing::error!(
             user = %user.username,

templates/magic_link/page_cross_browser_confirm.html

@@ -6,23 +6,19 @@
     <meta name="color-scheme" content="light dark">
     <title>OxiCloud</title>
     <link rel="icon" type="image/svg+xml" href="/logo/logo-plain.svg">
-    <script src="/js/core/theme-init.js"></script>
+    <link rel="stylesheet" href="/askama-common.css">
-    <link rel="stylesheet" href="/css/main.css">
-    <link rel="stylesheet" href="/css/views/auth.css">
     <style>
-      /* Cross-browser prompt is the one magic-link page that needs a
+      /* Cross-browser prompt overrides `.magic-note` with a warning
-         "warning" callout that auth.css doesn't ship. Inline because the
+         treatment — this is the only page where the note should shout.
-         shape is unique to this surface — keep the styling local rather
+         Tokens come from the shared design system (variables.css) via
-         than adding tokens that no other page reuses. */
+         askama-common.css above; both are the canonical warning names
+         (`--color-warning-bg` / `--color-warning-border`), replacing the
+         pre-SPA-migration placeholders `--color-warning-bg-light` /
+         `--color-warning-text-amber` which never existed. */
       .magic-note {
-        background: var(--color-warning-bg-light);
+        background: var(--color-warning-bg);
-        border-left: 3px solid var(--color-warning-text-amber);
+        border-left: 3px solid var(--color-warning-border);
         color: var(--color-text);
-        padding: 0.75em 1em;
-        margin: 1.5em 0;
-        border-radius: 8px;
-        font-size: 0.95em;
-        text-align: left;
       }
     </style>
   </head>

templates/magic_link/page_expired_or_used.html

@@ -6,9 +6,7 @@
     <meta name="color-scheme" content="light dark">
     <title>OxiCloud</title>
     <link rel="icon" type="image/svg+xml" href="/logo/logo-plain.svg">
-    <script src="/js/core/theme-init.js"></script>
+    <link rel="stylesheet" href="/askama-common.css">
-    <link rel="stylesheet" href="/css/main.css">
-    <link rel="stylesheet" href="/css/views/auth.css">
   </head>
   <body>
     <div class="auth-container">

templates/magic_link/page_generic_error.html

@@ -6,9 +6,7 @@
     <meta name="color-scheme" content="light dark">
     <title>OxiCloud</title>
     <link rel="icon" type="image/svg+xml" href="/logo/logo-plain.svg">
-    <script src="/js/core/theme-init.js"></script>
+    <link rel="stylesheet" href="/askama-common.css">
-    <link rel="stylesheet" href="/css/main.css">
-    <link rel="stylesheet" href="/css/views/auth.css">
   </head>
   <body>
     <div class="auth-container">

templates/magic_link/page_resend_confirmation.html

@@ -6,9 +6,7 @@
     <meta name="color-scheme" content="light dark">
     <title>OxiCloud</title>
     <link rel="icon" type="image/svg+xml" href="/logo/logo-plain.svg">
-    <script src="/js/core/theme-init.js"></script>
+    <link rel="stylesheet" href="/askama-common.css">
-    <link rel="stylesheet" href="/css/main.css">
-    <link rel="stylesheet" href="/css/views/auth.css">
   </head>
   <body>
     <div class="auth-container">

templates/nextcloud/drive_picker.html

@@ -6,9 +6,7 @@
     <meta name="color-scheme" content="light dark">
     <title>Choose a drive - OxiCloud</title>
     <link rel="icon" type="image/svg+xml" href="/logo/logo-plain.svg">
-    <script src="/js/core/theme-init.js"></script>
+    <link rel="stylesheet" href="/askama-common.css">
-    <link rel="stylesheet" href="/css/main.css">
-    <link rel="stylesheet" href="/css/views/auth.css">
   </head>
   <body>
     <div class="auth-container">