feat(frontend): add a terminal theme and three-way theme switcher

Adds the cyber theme to the console and login page, replaces the dark/light toggle with a theme switcher, and moves the login page script to /login.js so it is served under the existing CSP.

packages/api/public/login.js

@@ -0,0 +1,112 @@
+(() => {
+    const root = document.documentElement;
+    const buttons = document.querySelectorAll('.tg button');
+    const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    function setTheme(theme) {
+        root.setAttribute('data-theme', theme);
+        try {
+            localStorage.setItem('thecloud-theme', theme);
+        } catch (ignored) {
+            // Theme persistence is optional when browser storage is unavailable.
+        }
+        buttons.forEach((button) => button.classList.toggle('on', button.dataset.t === theme));
+    }
+
+    let initialTheme = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+    try {
+        const savedTheme = localStorage.getItem('thecloud-theme');
+        if (savedTheme === 'dark' || savedTheme === 'light' || savedTheme === 'cyber') {
+            initialTheme = savedTheme;
+        }
+    } catch (ignored) {
+        // The OS preference remains the fallback when browser storage is unavailable.
+    }
+    setTheme(initialTheme);
+
+    buttons.forEach((button) => button.addEventListener('click', () => setTheme(button.dataset.t)));
+    document.addEventListener('keydown', (event) => {
+        if ((event.key === 't' || event.key === 'T') && !event.metaKey && !event.ctrlKey && !event.altKey && !/INPUT|TEXTAREA/.test(event.target.tagName)) {
+            const themes = ['dark', 'light', 'cyber'];
+            setTheme(themes[(themes.indexOf(root.getAttribute('data-theme')) + 1) % themes.length]);
+        }
+    });
+
+    const lines = ['hello, engineer.', 'aws s3 mb s3://my-bucket', 'your own AWS, on your own hardware.', 'sfn start-execution --local', 'welcome to TheCloud.'];
+    const typewriter = document.getElementById('tw');
+    let line = 0;
+    let count = 0;
+    let deleting = false;
+    if (reducedMotion) {
+        typewriter.textContent = lines[2];
+    } else {
+        function type() {
+            const word = lines[line];
+            if (deleting) {
+                count--;
+                typewriter.textContent = word.slice(0, count);
+                if (count === 0) {
+                    deleting = false;
+                    line = (line + 1) % lines.length;
+                    setTimeout(type, 400);
+                    return;
+                }
+                setTimeout(type, 35);
+                return;
+            }
+            count++;
+            typewriter.textContent = word.slice(0, count);
+            if (count === word.length) {
+                deleting = true;
+                setTimeout(type, 2200);
+                return;
+            }
+            setTimeout(type, 75 + Math.random() * 50);
+        }
+        type();
+    }
+
+    const hero = document.getElementById('top');
+    const glow = document.getElementById('grid-glow');
+    if (!reducedMotion) {
+        hero.addEventListener('mousemove', (event) => {
+            const rect = hero.getBoundingClientRect();
+            glow.style.left = `${event.clientX - rect.left}px`;
+            glow.style.top = `${event.clientY - rect.top}px`;
+            glow.style.opacity = '1';
+        });
+        hero.addEventListener('mouseleave', () => {
+            glow.style.opacity = '0';
+        });
+    }
+
+    const progress = document.getElementById('bar');
+    addEventListener('scroll', () => {
+        const height = document.documentElement.scrollHeight - innerHeight;
+        progress.style.width = `${height > 0 ? scrollY / height * 100 : 0}%`;
+    }, {passive: true});
+
+    const form = document.querySelector('[data-sso-form]');
+    if (form) {
+        form.addEventListener('submit', () => {
+            const button = form.querySelector('.btn');
+            button.classList.add('is-loading');
+            button.disabled = true;
+            document.getElementById('label').textContent = 'Redirecting...';
+        });
+    }
+
+    const copy = document.getElementById('cp');
+    if (copy) {
+        copy.addEventListener('click', () => {
+            navigator.clipboard.writeText(document.getElementById('code').innerText).then(() => {
+                copy.textContent = 'copied';
+                copy.classList.add('ok');
+                setTimeout(() => {
+                    copy.textContent = 'copy';
+                    copy.classList.remove('ok');
+                }, 1800);
+            });
+        });
+    }
+})();

packages/api/src/auth.ts

@@ -288,7 +288,7 @@ function loginErrorMessage(code: string | undefined): string | null {
     return 'We could not complete your sign-in. Please try again.'
 }
 
-function isPublic(path: string): boolean { return path === '/login' || path === '/TheCloud.png' || path === '/authentik.svg' || path.startsWith('/aws-icons/') || path === '/api/auth/login' || path === '/api/auth/oidc/login' || path === '/api/auth/oidc/callback' || path === '/api/auth/session' || path === '/api/health' }
+function isPublic(path: string): boolean { return path === '/login' || path === '/login.js' || path === '/TheCloud.png' || path === '/authentik.svg' || path.startsWith('/aws-icons/') || path === '/api/auth/login' || path === '/api/auth/oidc/login' || path === '/api/auth/oidc/callback' || path === '/api/auth/session' || path === '/api/health' }
 function unauthenticated(c: Context): Response { return c.req.path.startsWith('/api/') ? c.json({error: 'Authentication required'}, 401) : c.redirect(`/login?returnTo=${encodeURIComponent(safeReturnTo(c.req.path + new URL(c.req.url).search))}`, 302) }
 function safeReturnTo(value?: string): string { return value && value.startsWith('/') && !value.startsWith('//') ? value : '/console/aws' }
 function escapeHtml(value: string): string { return value.replace(/[&<>'"]/g, (character) => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;'}[character] ?? character)) }
@@ -336,4 +336,4 @@ function parseTrustedProxies(value: string | undefined): BlockList | null {
     }
     return proxies
 }
-function applySecurityHeaders(c: Context, config: AuthConfig, styleNonce: string): void { c.header('Content-Security-Policy', `default-src 'self'; script-src 'self' 'nonce-${styleNonce}' 'sha256-mgwziK4YXYUt2nNB711bt/nNzs3je0rpErGfX/6eqmc='; style-src 'self' 'nonce-${styleNonce}' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; base-uri 'self'; frame-ancestors 'none'; object-src 'none'`); c.header('X-Frame-Options', 'DENY'); c.header('X-Content-Type-Options', 'nosniff'); c.header('Referrer-Policy', 'same-origin'); if (config.secureCookies) c.header('Strict-Transport-Security', 'max-age=31536000; includeSubDomains') }
+function applySecurityHeaders(c: Context, config: AuthConfig, styleNonce: string): void { c.header('Content-Security-Policy', `default-src 'self'; script-src 'self' 'nonce-${styleNonce}' 'sha256-AbRSUfgtaJwJXaS+/FXX4ATIx390dHnVN1Z7G7jqB8s='; style-src 'self' 'nonce-${styleNonce}' https://fonts.googleapis.com; style-src-attr 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; base-uri 'self'; frame-ancestors 'none'; object-src 'none'`); c.header('X-Frame-Options', 'DENY'); c.header('X-Content-Type-Options', 'nosniff'); c.header('Referrer-Policy', 'same-origin'); if (config.secureCookies) c.header('Strict-Transport-Security', 'max-age=31536000; includeSubDomains') }

packages/api/src/loginPage.ts

@@ -19,6 +19,7 @@ export function renderLoginPage(options: LoginPageOptions): string {
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="color-scheme" content="dark light">
+<link rel="icon" href="/TheCloud.png" />
 <title>Sign in · TheCloud</title>
 <style nonce="${options.styleNonce}">
 :root[data-theme=dark]{--bg:#07111d;--rail:#091727;--panel:#0c1a2b;--fg:#e8f1fa;--dim:#bdd0e3;--mut:#8aa3bc;--ac:#6cc4ff;--acr:108,196,255;--ac2:#ffb547;--bd:rgba(232,241,250,.1);--bd2:rgba(232,241,250,.2);--on:#06223a;--err:#ff9a9a;--errbg:#3a1822}
@@ -42,7 +43,7 @@ export function renderLoginPage(options: LoginPageOptions): string {
 <span class="f">aws</span> sqs create-queue <span class="o">--queue-name</span> fulfilment-queue
 <span class="f">aws</span> stepfunctions list-state-machines</code></pre></div></section>
 <footer class="mono"><div><span><span class="prompt">$</span> TheCloud</span><span>press <kbd>T</kbd> to switch theme</span></div></footer></div></div>
-<script nonce="${options.styleNonce}">(function(){var root=document.documentElement,btns=document.querySelectorAll('.tg button'),still=matchMedia('(prefers-reduced-motion: reduce)').matches;function setTheme(t){root.setAttribute('data-theme',t);try{localStorage.setItem('thecloud-theme',t)}catch(e){}btns.forEach(function(b){b.classList.toggle('on',b.dataset.t===t)})}var initial=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';try{var saved=localStorage.getItem('thecloud-theme');if(saved==='dark'||saved==='light'||saved==='cyber')initial=saved}catch(e){}setTheme(initial);btns.forEach(function(b){b.addEventListener('click',function(){setTheme(b.dataset.t)})});document.addEventListener('keydown',function(e){if((e.key==='t'||e.key==='T')&&!e.metaKey&&!e.ctrlKey&&!e.altKey&&!/INPUT|TEXTAREA/.test(e.target.tagName)){var themes=['dark','light','cyber'];setTheme(themes[(themes.indexOf(root.getAttribute('data-theme'))+1)%themes.length])}});var lines=['hello, engineer.','aws s3 mb s3://my-bucket','your own AWS, on your own hardware.','sfn start-execution --local','welcome to TheCloud.'],el=document.getElementById('tw'),line=0,count=0,deleting=false;if(still){el.textContent=lines[2]}else{(function type(){var word=lines[line];if(deleting){count--;el.textContent=word.slice(0,count);if(count===0){deleting=false;line=(line+1)%lines.length;setTimeout(type,400);return}setTimeout(type,35);return}count++;el.textContent=word.slice(0,count);if(count===word.length){deleting=true;setTimeout(type,2200);return}setTimeout(type,75+Math.random()*50)})()}var hero=document.getElementById('top'),glow=document.getElementById('grid-glow');if(!still){hero.addEventListener('mousemove',function(e){var rect=hero.getBoundingClientRect();glow.style.left=(e.clientX-rect.left)+'px';glow.style.top=(e.clientY-rect.top)+'px';glow.style.opacity='1'});hero.addEventListener('mouseleave',function(){glow.style.opacity='0'})}var bar=document.getElementById('bar');addEventListener('scroll',function(){var height=document.documentElement.scrollHeight-innerHeight;bar.style.width=(height>0?scrollY/height*100:0)+'%'},{passive:true});var form=document.querySelector('[data-sso-form]');if(form)form.addEventListener('submit',function(){var button=form.querySelector('.btn');button.classList.add('is-loading');button.disabled=true;document.getElementById('label').textContent='Redirecting...' });var copy=document.getElementById('cp');if(copy)copy.addEventListener('click',function(){navigator.clipboard.writeText(document.getElementById('code').innerText).then(function(){copy.textContent='copied';copy.classList.add('ok');setTimeout(function(){copy.textContent='copy';copy.classList.remove('ok')},1800)})})})()</script>
+<script defer src="/login.js"></script>
 </body>
 </html>`
 }