feat(auth): redesign Login and Setup pages with split-panel branding layout (#153)

Replace plain Card-based Login and Setup forms with a professional
split-panel layout: always-dark branding panel (dot grid texture, logo,
tagline, cyan accent line) on the left, theme-aware form on the right.
Mobile collapses to single column with compact logo header.

- Add optional admin email field on Setup for license recovery
- Backend accepts and stores admin_email in setup endpoint
- Fix data-stacks-loaded attribute forwarding (wrap in div, use string values)

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+* **auth:** Login and Setup pages redesigned with split-panel branding layout (dark branding panel + theme-aware form)
+* **auth:** Optional admin email field on Setup for future license recovery
+* **ui:** Mobile-responsive login/setup with compact logo header
+
+### Fixed
+
+* **e2e:** Use explicit `data-stacks-loaded` string values for reliable attribute selector matching
+
 ## [0.3.1](https://github.com/AnsoCode/Sencho/compare/v0.3.0...v0.3.1) (2026-03-25)
 
 

backend/src/index.ts

@@ -277,7 +277,7 @@ app.post('/api/auth/setup', authRateLimiter, async (req: Request, res: Response)
       return;
     }
 
-    const { username, password, confirmPassword } = req.body;
+    const { username, password, confirmPassword, admin_email } = req.body;
 
     // Validation
     if (!username || !password || !confirmPassword) {
@@ -307,6 +307,10 @@ app.post('/api/auth/setup', authRateLimiter, async (req: Request, res: Response)
     dbSvc.updateGlobalSetting('auth_password_hash', passwordHash);
     dbSvc.updateGlobalSetting('auth_jwt_secret', jwtSecret);
 
+    if (admin_email && typeof admin_email === 'string') {
+      dbSvc.updateGlobalSetting('admin_email', admin_email.trim());
+    }
+
     // Issue JWT and log user in
     const token = jwt.sign({ username }, jwtSecret, { expiresIn: '24h' });
     res.cookie(COOKIE_NAME, token, getCookieOptions(req));

frontend/src/App.tsx

@@ -17,19 +17,11 @@ function AppContent() {
   }
 
   if (needsSetup) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background p-4">
-        <Setup className="w-full max-w-sm" onComplete={completeSetup} />
-      </div>
-    );
+    return <Setup onComplete={completeSetup} />;
   }
 
   if (!isAuthenticated) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-background p-4">
-        <Login className="w-full max-w-sm" />
-      </div>
-    );
+    return <Login />;
   }
 
   return (

frontend/src/components/EditorLayout.tsx

@@ -1009,7 +1009,8 @@ export default function EditorLayout() {
           </div>
           <h3 className="text-sm font-semibold text-muted-foreground px-4 py-2 mt-2 flex-none">STACKS</h3>
           <ScrollArea className="flex-1 px-2 pb-2">
-            <CommandList className="max-h-none overflow-visible" data-stacks-loaded={!isLoading}>
+            <div data-stacks-loaded={isLoading ? "false" : "true"}>
+            <CommandList className="max-h-none overflow-visible">
               {isLoading ? (
                 <div className="space-y-2 px-2 mt-2">
                   <Skeleton className="h-12 w-full" />
@@ -1059,6 +1060,7 @@ export default function EditorLayout() {
                 ))
               )}
             </CommandList>
+            </div>
           </ScrollArea>
         </Command>
       </div>

frontend/src/components/Login.tsx

@@ -2,13 +2,6 @@ import { useState } from 'react';
 import { useAuth } from '@/context/AuthContext';
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
@@ -28,26 +21,64 @@ export function Login({
     setIsLoading(true);
 
     const result = await login(username, password);
-    
+
     if (!result.success) {
       setError(result.error || 'Login failed');
     }
-    
+
     setIsLoading(false);
   };
 
   return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-2xl">Sencho</CardTitle>
-          <CardDescription>
-            Enter your credentials to access the dashboard
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
+    <div className={cn("grid min-h-svh md:grid-cols-2", className)} {...props}>
+      {/* ── Left: Branding Panel (desktop only) ── */}
+      <div className="relative hidden md:flex flex-col items-center justify-center bg-zinc-950 overflow-hidden">
+        {/* Dot grid texture */}
+        <div
+          className="absolute inset-0 opacity-[0.15]"
+          style={{
+            backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px)',
+            backgroundSize: '24px 24px',
+          }}
+        />
+
+        {/* Branding content */}
+        <div className="relative z-10 flex flex-col items-center gap-6 px-12">
+          <img
+            src="/sencho-logo-dark.png"
+            alt="Sencho"
+            className="w-28 h-28"
+            draggable={false}
+          />
+          <div className="text-center">
+            <h1 className="text-4xl font-bold text-white tracking-tight">Sencho</h1>
+            <p className="text-base text-zinc-400 mt-2">Docker Compose Management</p>
+          </div>
+        </div>
+
+        {/* Brand accent line */}
+        <div className="absolute bottom-0 left-0 right-0 h-px bg-brand" />
+      </div>
+
+      {/* ── Right: Form Panel ── */}
+      <div className="flex flex-col items-center justify-center bg-background px-6 py-12">
+        {/* Mobile logo header */}
+        <div className="flex items-center gap-2.5 mb-10 md:hidden">
+          <img src="/sencho-logo-light.png" alt="Sencho" className="w-8 h-8 dark:hidden" draggable={false} />
+          <img src="/sencho-logo-dark.png" alt="Sencho" className="w-8 h-8 hidden dark:block" draggable={false} />
+          <span className="text-lg font-semibold tracking-tight">Sencho</span>
+        </div>
+
+        <div className="w-full max-w-sm">
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold tracking-tight">Welcome back</h2>
+            <p className="text-sm text-muted-foreground mt-1">
+              Sign in to your Sencho instance
+            </p>
+          </div>
+
           <form onSubmit={handleSubmit}>
-            <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-5">
               <div className="grid gap-2">
                 <Label htmlFor="username">Username</Label>
                 <Input
@@ -79,8 +110,8 @@ export function Login({
               </Button>
             </div>
           </form>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/components/Setup.tsx

@@ -1,13 +1,6 @@
 import { useState } from 'react';
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
@@ -23,6 +16,7 @@ export function Setup({
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [adminEmail, setAdminEmail] = useState('');
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
 
@@ -55,7 +49,12 @@ export function Setup({
           'Content-Type': 'application/json',
         },
         credentials: 'include',
-        body: JSON.stringify({ username, password, confirmPassword }),
+        body: JSON.stringify({
+          username,
+          password,
+          confirmPassword,
+          admin_email: adminEmail || undefined,
+        }),
       });
 
       const data = await response.json();
@@ -73,17 +72,55 @@ export function Setup({
   };
 
   return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-2xl">Welcome to Sencho</CardTitle>
-          <CardDescription>
-            Create your admin account to get started
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
+    <div className={cn("grid min-h-svh md:grid-cols-2", className)} {...props}>
+      {/* ── Left: Branding Panel (desktop only) ── */}
+      <div className="relative hidden md:flex flex-col items-center justify-center bg-zinc-950 overflow-hidden">
+        {/* Dot grid texture */}
+        <div
+          className="absolute inset-0 opacity-[0.15]"
+          style={{
+            backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.7) 1px, transparent 1px)',
+            backgroundSize: '24px 24px',
+          }}
+        />
+
+        {/* Branding content */}
+        <div className="relative z-10 flex flex-col items-center gap-6 px-12">
+          <img
+            src="/sencho-logo-dark.png"
+            alt="Sencho"
+            className="w-28 h-28"
+            draggable={false}
+          />
+          <div className="text-center">
+            <h1 className="text-4xl font-bold text-white tracking-tight">Sencho</h1>
+            <p className="text-base text-zinc-400 mt-2">Docker Compose Management</p>
+          </div>
+        </div>
+
+        {/* Brand accent line */}
+        <div className="absolute bottom-0 left-0 right-0 h-px bg-brand" />
+      </div>
+
+      {/* ── Right: Form Panel ── */}
+      <div className="flex flex-col items-center justify-center bg-background px-6 py-12">
+        {/* Mobile logo header */}
+        <div className="flex items-center gap-2.5 mb-10 md:hidden">
+          <img src="/sencho-logo-light.png" alt="Sencho" className="w-8 h-8 dark:hidden" draggable={false} />
+          <img src="/sencho-logo-dark.png" alt="Sencho" className="w-8 h-8 hidden dark:block" draggable={false} />
+          <span className="text-lg font-semibold tracking-tight">Sencho</span>
+        </div>
+
+        <div className="w-full max-w-sm">
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold tracking-tight">Create your account</h2>
+            <p className="text-sm text-muted-foreground mt-1">
+              Set up the admin credentials for your Sencho instance
+            </p>
+          </div>
+
           <form onSubmit={handleSubmit}>
-            <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-5">
               <div className="grid gap-2">
                 <Label htmlFor="username">Username</Label>
                 <Input
@@ -115,6 +152,21 @@ export function Setup({
                   onChange={(e) => setConfirmPassword(e.target.value)}
                 />
               </div>
+              <div className="grid gap-2">
+                <Label htmlFor="adminEmail">
+                  Email <span className="text-muted-foreground font-normal">(optional)</span>
+                </Label>
+                <Input
+                  id="adminEmail"
+                  type="email"
+                  placeholder="you@example.com"
+                  value={adminEmail}
+                  onChange={(e) => setAdminEmail(e.target.value)}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Used for license recovery. Never shared with third parties.
+                </p>
+              </div>
               {error && (
                 <div className="text-sm text-red-500 text-center">
                   {error}
@@ -125,8 +177,8 @@ export function Setup({
               </Button>
             </div>
           </form>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   );
 }