maaz519
205418fc4e
Fix blank /org/login (and /admin/login): the guarded portal layout was wrapping its own login route, rendering null when unauthenticated. Move each portal's authed pages into a (authed)/(chapter) route group so login pages live outside the guard. Structure: - app/(chapter)/* — chapter admin pages + guarded layout (was root-level) - app/org/(authed)/* — org pages + guarded layout; /org/login now free - app/admin/(authed)/* — admin pages + guarded layout; /admin/login free - Root layout slimmed to providers only (no shared sidebar) - Convert moved files' relative imports to @/app alias Design system: - PortalShell: shared sidebar shell (brand mark, themed active nav with accent bar, avatar dropdown user menu, loading skeletons) - portal-theme.ts: per-portal theme tokens (violet/slate/blue/emerald) - PortalLoginShell redesigned: two-column with gradient branding panel, dotted pattern, value-prop highlights, built-in back link - New shadcn components: Avatar, DropdownMenu, Skeleton - Move shared DraftCard to _components/draft-card.tsx (used by 2 portals) - Portal selector: remove Super Admin card, icon tiles, hover lift - All 4 login pages use react-hook-form + Zod + themed shell - Member nav restored to full 11-section list with icons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
import Link from 'next/link';
|
|
import { cn } from '../_lib/utils';
|
|
import { PORTAL_THEMES, type PortalTheme } from './portal-theme';
|
|
import { Check, ArrowLeft } from 'lucide-react';
|
|
|
|
interface PortalLoginShellProps {
|
|
title: string;
|
|
subtitle: string;
|
|
theme: PortalTheme;
|
|
/** Short value-prop bullets shown on the branding panel */
|
|
highlights?: string[];
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
}
|
|
|
|
export function PortalLoginShell({ title, subtitle, theme, highlights = [], children, footer }: PortalLoginShellProps) {
|
|
const t = PORTAL_THEMES[theme];
|
|
|
|
return (
|
|
<div className="min-h-screen grid lg:grid-cols-2">
|
|
{/* Branding panel */}
|
|
<div className={cn('relative hidden lg:flex flex-col justify-between p-12 text-white overflow-hidden', t.gradient)}>
|
|
{/* decorative pattern */}
|
|
<div
|
|
className="absolute inset-0 opacity-10"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)',
|
|
backgroundSize: '24px 24px',
|
|
}}
|
|
/>
|
|
<div className="relative flex items-center gap-3">
|
|
<div className="size-9 rounded-xl bg-white/15 backdrop-blur flex items-center justify-center font-bold">T</div>
|
|
<span className="font-semibold text-lg tracking-tight">TOWER</span>
|
|
</div>
|
|
|
|
<div className="relative space-y-6">
|
|
<h2 className="text-3xl font-bold leading-tight max-w-sm">{title}</h2>
|
|
{highlights.length > 0 && (
|
|
<ul className="space-y-3">
|
|
{highlights.map((h) => (
|
|
<li key={h} className="flex items-center gap-3 text-sm text-white/90">
|
|
<span className="size-5 rounded-full bg-white/15 flex items-center justify-center shrink-0">
|
|
<Check className="size-3" />
|
|
</span>
|
|
{h}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
<p className="relative text-sm text-white/60">Community Knowledge Infrastructure Platform</p>
|
|
</div>
|
|
|
|
{/* Form panel */}
|
|
<div className="flex items-center justify-center p-6 sm:p-8 bg-background">
|
|
<div className="w-full max-w-sm space-y-8">
|
|
{/* Mobile logo */}
|
|
<div className="flex items-center gap-2 lg:hidden">
|
|
<div className={cn('size-8 rounded-lg flex items-center justify-center text-white font-bold text-sm', t.gradient)}>T</div>
|
|
<span className="font-semibold">TOWER</span>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h1 className="text-2xl font-bold tracking-tight">{title}</h1>
|
|
<p className="text-sm text-muted-foreground">{subtitle}</p>
|
|
</div>
|
|
|
|
{children}
|
|
|
|
<div className="space-y-3 text-center">
|
|
{footer}
|
|
<Link
|
|
href="/"
|
|
className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<ArrowLeft className="size-3" />
|
|
Back to portal selector
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|