refactored Authentication

This commit is contained in:
2026-02-17 16:51:47 +00:00
parent 13e8866875
commit d32d0f5c03
45 changed files with 1322 additions and 66 deletions
+73
View File
@@ -0,0 +1,73 @@
import { BrowserRouter, Routes, Route, Navigate } from 'react-router';
import { LandingPage, AuthLayout } from './Screens/LandingPage';
import { Home } from './Screens/Dashboard/Home';
import { ProfileSettings } from './Screens/Dashboard/Settings/ProfileSettings';
import { ClaudeChat, OpenCodeChat, NewChat } from './Screens/Dashboard/Chat';
import { Plans } from './Screens/Dashboard/Plans';
import { Skills } from './Screens/Dashboard/Skills';
import { Tasks } from './Screens/Dashboard/Tasks';
import { Processes } from './Screens/Dashboard/Processes';
import { TaskLogs } from './Screens/Dashboard/TaskLogs';
import { SignoutScreen } from './Screens/Dashboard/SignoutScreen';
import { Screen as Files } from 'plugins/FileBrowser/client';
import { Screen as Terminal } from 'plugins/Terminal/client';
import { AISettings } from './Screens/Dashboard/Settings/AISettings';
import { ServerSettings } from './Screens/Dashboard/Settings/ServerSettings';
import { ResourceSettings } from './Screens/Dashboard/Settings/ResourceSettings';
import { OnboardingAdmin } from './Screens/Dashboard/OnboardingAdmin';
import { ChatList } from './Screens/Dashboard/Chat/ChatList';
import { useAuth } from 'hooks/useAuth';
import { useServerSettings } from '@/state/useServerSettings';
import { useInitialData } from '@/state/useInitialData';
export function App() {
const { isLoading, isAuthenticated } = useAuth();
const { onboardingComplete, plugins, isLoading: isServerSettingsLoading } = useServerSettings();
useInitialData();
if (isLoading || isServerSettingsLoading) return null;
return (
<BrowserRouter>
{!isAuthenticated && (
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/auth/*" element={<AuthLayout />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
)}
{isAuthenticated && !onboardingComplete && (
<Routes>
<Route path="/onboarding-admin" element={<OnboardingAdmin />} />
<Route path="/auth/signout" element={<SignoutScreen />} />
<Route path="*" element={<Navigate to="/onboarding-admin" replace />} />
</Routes>
)}
{isAuthenticated && onboardingComplete && (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/settings/profile" element={<ProfileSettings />} />
<Route path="/settings/ai" element={<AISettings />} />
<Route path="/settings/server" element={<ServerSettings />} />
<Route path="/settings/resources" element={<ResourceSettings />} />
<Route path="/chat" element={<ChatList />} />
<Route path="/chat/new" element={<NewChat />} />
<Route path="/chat/:sessionId" element={<ClaudeChat />} />
<Route path="/chat/opencode/new" element={<OpenCodeChat />} />
<Route path="/chat/opencode/:sessionId" element={<OpenCodeChat />} />
<Route path="/files" element={<Files />} />
<Route path="/terminal" element={<Terminal />} />
<Route path="/plans" element={<Plans />} />
<Route path="/skills" element={<Skills />} />
<Route path="/tasks" element={<Tasks />} />
<Route path="/processes" element={<Processes />} />
<Route path="/task-logs" element={<TaskLogs />} />
<Route path="/auth/signout" element={<SignoutScreen />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
)}
</BrowserRouter>
);
}
+50 -48
View File
@@ -1,24 +1,12 @@
import { BrowserRouter, Routes, Route, Navigate } from 'react-router';
import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router';
import * as Authentication from './Screens/Authentication';
// import { Home } from './Screens/Dashboard/Home';
// import { ChatList } from './Screens/Dashboard/Chat/ChatList';
import { useAuth } from 'hooks/useAuth';
import { useServerSettings } from '@/state/useServerSettings';
import { useInitialData } from '@/state/useInitialData';
import { LandingPage, AuthLayout } from './Screens/LandingPage';
import { Home } from './Screens/Dashboard/Home';
import { ProfileSettings } from './Screens/Dashboard/Settings/ProfileSettings';
import { ClaudeChat, OpenCodeChat, NewChat } from './Screens/Dashboard/Chat';
import { Screen as ClaudeSessions } from 'plugins/ChatHistory/client';
import { Plans } from './Screens/Dashboard/Plans';
import { Skills } from './Screens/Dashboard/Skills';
import { Tasks } from './Screens/Dashboard/Tasks';
import { Processes } from './Screens/Dashboard/Processes';
import { TaskLogs } from './Screens/Dashboard/TaskLogs';
import { SignoutScreen } from './Screens/Dashboard/SignoutScreen';
import { Screen as Files } from 'plugins/FileBrowser/client';
import { Screen as Terminal } from 'plugins/Terminal/client';
import { AISettings } from './Screens/Dashboard/Settings/AISettings';
import { ServerSettings } from './Screens/Dashboard/Settings/ServerSettings';
import { ResourceSettings } from './Screens/Dashboard/Settings/ResourceSettings';
import { OnboardingAdmin } from './Screens/Dashboard/OnboardingAdmin';
export function App() {
const { isLoading, isAuthenticated } = useAuth();
@@ -30,42 +18,56 @@ export function App() {
return (
<BrowserRouter>
{!isAuthenticated && (
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/auth/*" element={<AuthLayout />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
)}
{isAuthenticated && !onboardingComplete && (
<Routes>
<Route path="/onboarding-admin" element={<OnboardingAdmin />} />
<Route path="/auth/signout" element={<SignoutScreen />} />
<Route path="*" element={<Navigate to="/onboarding-admin" replace />} />
</Routes>
<Authentication.AuthenticationLayout>
<Routes>
<Route path="/" element={<Authentication.LandingPage />} />
<Route path="/auth/verify" element={<Authentication.VerifyScreen />} />
<Route path="/auth/forgot-password" element={<Authentication.ForgotPassword />} />
<Route path="/auth/reset-password" element={<Authentication.ResetPassword />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</Authentication.AuthenticationLayout>
)}
{/* {isAuthenticated && !onboardingComplete && ( */}
{/* <Routes> */}
{/* <Route path="/onboarding-admin" element={<OnboardingAdmin />} /> */}
{/* <Route path="/auth/signout" element={<SignoutScreen />} /> */}
{/* <Route path="*" element={<Navigate to="/onboarding-admin" replace />} /> */}
{/* </Routes> */}
{/* )} */}
{isAuthenticated && onboardingComplete && (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/settings/profile" element={<ProfileSettings />} />
<Route path="/settings/ai" element={<AISettings />} />
<Route path="/settings/server" element={<ServerSettings />} />
<Route path="/settings/resources" element={<ResourceSettings />} />
<Route path="/chat" element={<ClaudeSessions />} />
<Route path="/chat/new" element={<NewChat />} />
<Route path="/chat/:sessionId" element={<ClaudeChat />} />
<Route path="/chat/opencode/new" element={<OpenCodeChat />} />
<Route path="/chat/opencode/:sessionId" element={<OpenCodeChat />} />
<Route path="/files" element={<Files />} />
<Route path="/terminal" element={<Terminal />} />
<Route path="/plans" element={<Plans />} />
<Route path="/skills" element={<Skills />} />
<Route path="/tasks" element={<Tasks />} />
<Route path="/processes" element={<Processes />} />
<Route path="/task-logs" element={<TaskLogs />} />
<Route path="/auth/signout" element={<SignoutScreen />} />
<Route path="/" element={<HomeScreen />} />
{/* <Route path="/settings/profile" element={<ProfileSettings />} /> */}
{/* <Route path="/settings/ai" element={<AISettings />} /> */}
{/* <Route path="/settings/server" element={<ServerSettings />} /> */}
{/* <Route path="/settings/resources" element={<ResourceSettings />} /> */}
{/* <Route path="/chat" element={<ChatList />} /> */}
{/* <Route path="/chat/new" element={<NewChat />} /> */}
{/* <Route path="/chat/:sessionId" element={<ClaudeChat />} /> */}
{/* <Route path="/chat/opencode/new" element={<OpenCodeChat />} /> */}
{/* <Route path="/chat/opencode/:sessionId" element={<OpenCodeChat />} /> */}
{/* <Route path="/files" element={<Files />} /> */}
{/* <Route path="/terminal" element={<Terminal />} /> */}
{/* <Route path="/plans" element={<Plans />} /> */}
{/* <Route path="/skills" element={<Skills />} /> */}
{/* <Route path="/tasks" element={<Tasks />} /> */}
{/* <Route path="/processes" element={<Processes />} /> */}
{/* <Route path="/task-logs" element={<TaskLogs />} /> */}
<Route path="/auth/signout" element={<Authentication.SignoutScreen />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
)}
</BrowserRouter>
);
}
const HomeScreen = () => {
return (
<div>
<h1>Home</h1>
<Link to="/auth/signout">Signout</Link>
</div>
);
};
@@ -0,0 +1,90 @@
import { useState } from 'react';
import { Link } from 'react-router';
import { toast } from 'sonner';
import { useClient } from 'hooks/useClient';
import { useForm } from 'hooks/useForm';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/Card';
export function ForgotPassword() {
const client = useClient('/api/auth');
const [isSubmitting, setIsSubmitting] = useState(false);
const [done, setDone] = useState(false);
const { formRef, state, isValid } = useForm<ForgotPasswordFormState>({}, (s) => !!s.email);
const handleSubmit = async (ev: React.FormEvent) => {
ev.preventDefault();
if (!isValid || isSubmitting) return;
setIsSubmitting(true);
try {
await client.post('/forgot-password', { email: state.email!.trim() });
setDone(true);
} catch (ex) {
const error = ex as { message?: string };
toast.error(error.message || 'Something went wrong. Please try again.');
} finally {
setIsSubmitting(false);
}
};
return (
<Card className="md:py-12 md:px-24 flex flex-col gap-6">
{done ? (
<div className="text-center">
<h2 className="text-2xl font-bold text-duck-dark mb-2">Check your email</h2>
<div className="text-sm text-duck-dark/60">
<p>
A password reset link has been sent to <strong>{state.email}</strong>.
</p>
<p>Click it to reset your password.</p>
</div>
</div>
) : (
<>
<div className="text-center">
<div className="text-duck-dark text-2xl font-bold">Forgot Password</div>
<div className="text-duck-dark/60">Enter your email to receive a reset link</div>
</div>
<form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
<Label className="grid gap-2">
<span className="text-duck-dark/70">Email</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="email"
name="email"
placeholder="you@example.com"
autoComplete="email"
/>
</Label>
<div className="pt-2">
<Button
type="submit"
disabled={!isValid || isSubmitting}
className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
>
{isSubmitting ? 'Sending...' : 'Send Reset Link'}
</Button>
</div>
<div className="text-center text-sm text-duck-dark/60">
<p>
<Link to="/" className="text-duck-forest underline hover:text-duck-forest/80">
Back to login
</Link>
</p>
</div>
</form>
</>
)}
</Card>
);
}
type ForgotPasswordFormState = {
email?: string;
};
@@ -0,0 +1,75 @@
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/Card';
import { cn } from '@/lib/utils';
import { useResetPassword } from './useResetPassword';
export function ResetPassword() {
const { formRef, isValid, tokenStatus, isSubmitting, handleSubmit } = useResetPassword();
const loading = tokenStatus === 'loading';
const invalid = tokenStatus === 'invalid';
const hideform = loading || invalid;
return (
<>
{loading && (
<Card className="py-12 px-24 flex flex-col gap-6">
<div className="text-center text-duck-dark/60">Verifying...</div>
</Card>
)}
{invalid && (
<Card className="py-12 px-24 flex flex-col gap-6">
<div className="text-center">
<div className="text-duck-dark text-2xl font-bold">Invalid Link</div>
<div className="text-duck-dark/60">This reset link is invalid or has expired.</div>
</div>
</Card>
)}
<Card className={cn("flex flex-col gap-6", hideform && "hidden")}>
<div className="text-center">
<div className="text-duck-dark text-2xl font-bold">Reset Password</div>
<div className="text-duck-dark/60">Enter your new password</div>
</div>
<form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
<div className="grid md:flex gap-4">
<Label className="grid gap-2 flex-1">
<span className="text-duck-dark/70">Password</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="password"
name="password"
placeholder="Min 12 characters"
autoComplete="new-password"
/>
</Label>
<Label className="grid gap-2 flex-1">
<span className="text-duck-dark/70">Confirm Password</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="password"
name="confirmPassword"
placeholder="Confirm your password"
autoComplete="new-password"
/>
</Label>
</div>
<div className="pt-2">
<Button
type="submit"
disabled={!isValid || isSubmitting}
className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
>
{isSubmitting ? 'Resetting...' : 'Reset Password'}
</Button>
</div>
</form>
</Card>
</>
);
}
@@ -0,0 +1,2 @@
export { ForgotPassword } from './ForgotPassword';
export { ResetPassword } from './ResetPassword';
@@ -0,0 +1,72 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import { toast } from 'sonner';
import { useMounted } from 'hooks/useMounted';
import { useForm } from 'hooks/useForm';
import { useClient } from 'hooks/useClient';
export const useResetPassword = () => {
const isMounted = useMounted();
const navigate = useNavigate();
const client = useClient('/api/auth');
const { state, formRef, isValid } = useForm<ResetPasswordFormState>({}, validateForm);
const [verificationCode] = useState(() => new URL(window.location.href).searchParams.get('verificationCode') ?? '');
const [tokenStatus, setTokenStatus] = useState<TokenStatus>('loading');
const [isSubmitting, setIsSubmitting] = useState(false);
const verifyToken = async () => {
if (!verificationCode) return;
try {
const data = await client.post<{ ok: boolean }>('/verify-token', { verificationCode });
setTokenStatus(data.ok ? 'valid' : 'invalid');
} catch {
setTokenStatus('invalid');
}
};
useEffect(() => {
if (!isMounted) return;
if (!verificationCode) {
setTokenStatus('invalid');
return;
}
verifyToken();
}, [isMounted]);
const handleSubmit = async (ev: React.FormEvent) => {
ev.preventDefault();
if (!isValid || isSubmitting) return;
setIsSubmitting(true);
try {
await client.post('/reset-password', {
password: state.password,
verificationCode,
});
toast.success('Password reset successfully. Please sign in.');
navigate('/');
} catch (ex) {
const error = ex as { message?: string };
toast.error(error.message || 'Failed to reset password. Please try again.');
} finally {
setIsSubmitting(false);
}
};
return { formRef, isValid, tokenStatus, isSubmitting, handleSubmit };
};
type ResetPasswordFormState = {
password?: string;
confirmPassword?: string;
};
type TokenStatus = 'loading' | 'valid' | 'invalid';
const validateForm = (state: Partial<ResetPasswordFormState>) => {
const { password, confirmPassword } = state;
if (!password || !confirmPassword) return false;
if (password !== confirmPassword) return false;
return true;
};
@@ -0,0 +1,63 @@
import { useState } from 'react';
import { toast } from 'sonner';
import { useClient } from 'hooks/useClient';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/Card';
import { useForm } from 'hooks/useForm';
export function Bootstrap() {
const authClient = useClient('/api/auth');
const [isSubmitting, setIsSubmitting] = useState(false);
const [done, setDone] = useState(false);
const { formRef, state, isValid } = useForm({}, (state) => !!state.email);
const handleBootstrap = async () => {
const trimmed = state.email.trim();
if (!trimmed || isSubmitting) return;
setIsSubmitting(true);
try {
await authClient.post('/bootstrap', { email: trimmed });
setDone(true);
} catch (ex) {
const error = ex as { message?: string };
toast.error(error.message || 'Bootstrap failed. Please try again.');
} finally {
setIsSubmitting(false);
}
};
return (
<Card>
{done ? (
<div className="text-center">
<h2 className="text-2xl font-bold text-duck-dark mb-2">Check your email</h2>
<div className="text-sm text-duck-dark/60">
<p>A verification link has been sent to <strong>{state.email}</strong>.</p>
<p>Click it to activate your account.</p>
</div>
</div>
) : (
<>
<h2 className="text-2xl font-bold text-duck-dark mb-2">Welcome, Admin</h2>
<p className="text-sm text-duck-dark/60 mb-6">Enter your email to create your administrator account.</p>
<form ref={formRef} className="flex gap-2">
<input
type="email"
name="email"
placeholder="admin@example.com"
className="flex-1 px-4 py-2.5 rounded-lg border-2 border-duck-dark/20 text-sm text-duck-dark placeholder:!text-duck-dark/30 focus:outline-none focus:border-duck-teal/50"
/>
<Button
onClick={handleBootstrap}
disabled={!isValid || isSubmitting}
className="bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold px-6 py-2.5 rounded-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
>
{isSubmitting ? 'Sending...' : 'Bootstrap'}
</Button>
</form>
</>
)}
</Card>
);
}
@@ -0,0 +1,27 @@
import { OfficerSvgLogo } from '@/components/Logos';
import { useLandingPage } from '@/state/useLandingPage';
import { Bootstrap } from './Bootstrap';
import { Login } from './Login';
export function LandingPage() {
const { registrationOpen, isLoading } = useLandingPage();
if (isLoading) return null;
return (
<div className="relative overflow-hidden h-dvh outline-none inset-0">
<header className="pt-12 md:pt-20 lg:pt-24 xl:pt-0 z-20 flex justify-center">
<div className="hidden md:block md:pt-28">
<OfficerSvgLogo size="2xl" />
</div>
<div className="block md:hidden">
<OfficerSvgLogo size="lg" />
</div>
</header>
<div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-0 md:pb-12">
{registrationOpen ? <Bootstrap /> : <Login />}
</div>
</div>
);
}
@@ -0,0 +1,103 @@
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Link } from 'react-router';
import { Card } from '@/components/Card';
import { useNavigate } from 'react-router';
import { useState } from 'react';
import { toast } from 'sonner';
import { useForm } from 'hooks/useForm';
import { useAuth } from 'hooks/useAuth';
export function Login() {
const navigate = useNavigate();
const [isSubmitting, setIsSubmitting] = useState(false);
const { state, formRef, update, isValid } = useForm<LoginFormState>({}, validateForm);
const { signin } = useAuth();
const handleSubmit = async (ev: React.FormEvent) => {
ev.preventDefault();
if (!isValid || isSubmitting) return;
setIsSubmitting(true);
try {
await signin({ email: state.email!, password: state.password! });
window.location.href = '/';
} catch (ex) {
const error = ex as { message?: string };
toast.error(error.message || 'Login failed. Please try again.');
update({ ...state, password: '' });
} finally {
setIsSubmitting(false);
}
};
return (
<Card className="md:py-12 md:px-24 flex flex-col gap-6">
<div className="text-center">
<div className="text-duck-dark text-2xl font-bold">Welcome Back</div>
<div className="text-duck-dark/60">Sign in to your account</div>
</div>
<form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
<Label className="grid gap-2">
<span className="text-duck-dark/70">Email</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="email"
name="email"
placeholder="you@example.com"
autoComplete="email"
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70">Password</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="password"
name="password"
placeholder="Your password"
autoComplete="current-password"
/>
</Label>
<div className="pt-2">
<Button
type="submit"
disabled={!isValid || isSubmitting}
className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
>
{isSubmitting ? 'Signing in...' : 'Sign In'}
</Button>
</div>
<div className="text-center text-sm text-duck-dark/60 grid gap-1">
{/* <p> */}
{/* Don't have an account?{' '} */}
{/* <Link to="/auth/register" className="text-duck-forest underline hover:text-duck-forest/80"> */}
{/* Register */}
{/* </Link> */}
{/* </p> */}
<p>
<Link to="/auth/forgot-password" className="text-duck-forest underline hover:text-duck-forest/80">
Forgot password?
</Link>
</p>
</div>
</form>
</Card>
);
}
type LoginFormState = {
email?: string;
password?: string;
};
const validateForm = (state: Partial<LoginFormState>) => {
const { email, password } = state;
if (!email || !password) return false;
return true;
};
@@ -0,0 +1 @@
export * from './LandingPage';
@@ -0,0 +1,21 @@
import { Background } from './Background';
type AuthenticationLayoutProps = {
children?: React.ReactNode;
};
export function AuthenticationLayout({ children }: AuthenticationLayoutProps) {
return (
<div className="relative overflow-hidden h-dvh outline-none inset-0">
<section className="relative h-dvh snap-start overflow-hidden">
<Background />
<div className="absolute inset-0 z-520">
<div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-8 md:pb-12">
{children}
</div>
</div>
</section>
</div>
);
};
@@ -0,0 +1,19 @@
import { DuckAvatar } from "./DuckAvatar";
import { PixelGrid } from "@/components/PixelGrid";
import landscapebg from './landscape1.jpg';
export function Background() {
return (
<div
className="absolute inset-0 z-0"
style={{
backgroundImage: `url(${landscapebg})`,
backgroundSize: 'cover',
backgroundPosition: 'center center',
}}
>
<PixelGrid />
<DuckAvatar showDebug={false} fullControlMode={false} currentSection={0} />
</div>
);
};
@@ -72,12 +72,12 @@ export function DuckAvatar({ showDebug, fullControlMode, currentSection }: DuckA
const [isLoaded, setIsLoaded] = useState(false);
const heroClasses = 'fixed bottom-0 left-1/2 -translate-x-1/2 w-[60vh] h-[75vh]';
const heroClasses = 'fixed top-12 md:top-auto md:bottom-0 left-1/2 -translate-x-1/2 w-[60vh] h-[75vh]';
const miniClasses = 'fixed bottom-4 right-4 w-[20vh] h-[25vh]';
return (
<div
className={`${isHeroSection ? heroClasses : miniClasses} overflow-visible z-[510] pointer-events-none`}
className={`${isHeroSection ? heroClasses : miniClasses} overflow-visible z-1 pointer-events-none`}
style={{
background: 'transparent',
opacity: isLoaded ? 1 : 0,
@@ -0,0 +1 @@
export * from './AuthenticationLayout';
@@ -14,3 +14,4 @@ export const SignoutScreen = () => {
return null;
};
@@ -0,0 +1,94 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import { toast } from 'sonner';
import { DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { useForm } from 'hooks/useForm';
import { useAuth } from 'hooks/useAuth';
import { useClient } from 'hooks/useClient';
export const Verify = () => {
const navigate = useNavigate();
const client = useClient('/api/auth');
const { verify } = useAuth();
const { state, formRef, update, isValid } = useForm<VerifyFormState>({}, validateForm);
const [verificationCode] = useState(() => new URL(window.location.href).searchParams.get('verificationCode') ?? '');
const [tokenStatus, setTokenStatus] = useState<TokenStatus>('loading');
const [isSubmitting, setIsSubmitting] = useState(false);
const [verified, setVerified] = useState(false);
const [resending, setResending] = useState(false);
const [resent, setResent] = useState(false);
const handleResend = async () => {
if (!email || resending) return;
setResending(true);
try {
await client.post('/resend-verification', { email });
setResent(true);
} catch (ex) {
const error = ex as { message?: string };
toast.error(error.message || 'Failed to resend. Please try again.');
} finally {
setResending(false);
}
};
useEffect(() => {
// if (!open || !verificationCode) {
// if (!verificationCode) setTokenStatus('invalid');
// return;
// }
//
// window.history.replaceState(null, '', '/auth/verify');
//
// client
// .post<{ email: string }>('/verify-token', { verificationCode })
// .then((data) => {
// setEmail(data.email);
// setTokenStatus('valid');
// })
// .catch(() => {
// // Try to decode email from expired token for resend
// try {
// const payload = JSON.parse(atob(verificationCode.split('.')[1]!));
// if (payload.email) setEmail(payload.email);
// } catch {
// // ignore
// }
// setTokenStatus('invalid');
// });
}, [open]);
// Redirect after successful verification
useEffect(() => {
// if (!verified) return;
// const timer = setTimeout(() => navigate('/'), 3000);
// return () => clearTimeout(timer);
}, [verified]);
return (
<div className="flex flex-col items-center justify-center h-dvh">
<div className="text-center">
<div className="text-duck-dark text-2xl font-bold">Verify your account</div>
<div className="text-duck-dark/60">Enter your verification code</div>
</div>
</div>
);
};
const validateForm = (state: Partial<VerifyFormState>) => {
const { name, password, confirmPassword } = state;
if (!name || !password || !confirmPassword) return false;
if (password !== confirmPassword) return false;
return true;
};
type VerifyFormState = {
name?: string;
password?: string;
confirmPassword?: string;
};
type TokenStatus = 'loading' | 'valid' | 'invalid';
@@ -0,0 +1,107 @@
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/Card';
import { cn } from '@/lib/utils';
import { useVerifyScreen } from './useVerifyScreen';
export const VerifyScreen = () => {
const { formRef, isValid, tokenStatus, isSubmitting, handleSubmit } = useVerifyScreen();
const loading = tokenStatus === 'loading';
const invalid = tokenStatus === 'invalid';
const hideform = loading || invalid;
return (
<>
{loading && (
<Card className="py-12 px-24 flex flex-col gap-6">
<div className="text-center text-duck-dark/60">Verifying...</div>
</Card>
)}
{invalid && (
<Card className="py-12 px-24 flex flex-col gap-6">
<div className="text-center">
<div className="text-duck-dark text-2xl font-bold">Invalid Link</div>
<div className="text-duck-dark/60">This verification link is invalid or has expired.</div>
</div>
</Card>
)}
<Card className={cn("flex flex-col gap-6", hideform && "hidden")}>
<div className="text-center">
<div className="text-duck-dark text-2xl font-bold">Create Your Account</div>
<div className="text-duck-dark/60">Set up your administrator profile</div>
</div>
<form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
<Label className="grid gap-2">
<span className="text-duck-dark/70">Email</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="email"
name="email"
disabled
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70">Name</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="text"
name="name"
placeholder="Your name"
autoComplete="name"
/>
</Label>
<Label className="grid gap-2">
<span className="text-duck-dark/70">Username</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="text"
name="username"
placeholder="your-username"
autoComplete="username"
/>
</Label>
<div className="grid md:flex gap-4">
<Label className="grid gap-2 flex-1">
<span className="text-duck-dark/70">Password</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="password"
name="password"
placeholder="Min 12 characters"
autoComplete="new-password"
/>
</Label>
<Label className="grid gap-2 flex-1">
<span className="text-duck-dark/70">Confirm Password</span>
<Input
className="h-11 bg-white/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
type="password"
name="confirmPassword"
placeholder="Confirm your password"
autoComplete="new-password"
/>
</Label>
</div>
<div className="pt-2">
<Button
type="submit"
disabled={!isValid || isSubmitting}
className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
>
{isSubmitting ? 'Creating account...' : 'Create Account'}
</Button>
</div>
</form>
</Card >
</>
);
};
@@ -0,0 +1 @@
export * from './VerifyScreen';
@@ -0,0 +1,83 @@
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import { toast } from 'sonner';
import { useMounted } from 'hooks/useMounted';
import { useForm } from 'hooks/useForm';
import { useClient } from 'hooks/useClient';
export const useVerifyScreen = () => {
const isMounted = useMounted();
const navigate = useNavigate();
const client = useClient('/api/auth');
const { state, formRef, update, isValid } = useForm<VerifyFormState>({ email: '' }, validateForm);
const [verificationCode] = useState(() => new URL(window.location.href).searchParams.get('verificationCode') ?? '');
const [tokenStatus, setTokenStatus] = useState<TokenStatus>('loading');
const [isSubmitting, setIsSubmitting] = useState(false);
const verifyToken = async () => {
if (!verificationCode) return;
try {
const data = await client.post<{ ok: boolean; email: string }>('/verify-token', { verificationCode });
if (data.ok) {
setTokenStatus('valid');
requestAnimationFrame(() => update({ email: data.email }));
} else {
setTokenStatus('invalid');
}
} catch {
setTokenStatus('invalid');
}
};
useEffect(() => {
if (!isMounted) return;
if (!verificationCode) {
setTokenStatus('invalid');
return;
}
verifyToken();
}, [isMounted]);
const handleSubmit = async (ev: React.FormEvent) => {
ev.preventDefault();
if (!isValid || isSubmitting) return;
setIsSubmitting(true);
try {
await client.post('/bootstrap', {
token: verificationCode,
name: state.name,
username: state.username,
password: state.password,
confirmPassword: state.confirmPassword,
});
toast.success('Account created. Please sign in.');
navigate('/auth/login');
} catch (ex) {
const error = ex as { message?: string };
toast.error(error.message || 'Failed to create account. Please try again.');
} finally {
setIsSubmitting(false);
}
};
return { formRef, state, isValid, tokenStatus, isSubmitting, handleSubmit };
};
type VerifyFormState = {
email?: string;
name?: string;
username?: string;
password?: string;
confirmPassword?: string;
};
type TokenStatus = 'loading' | 'valid' | 'invalid';
const validateForm = (state: Partial<VerifyFormState>) => {
const { name, username, password, confirmPassword } = state;
if (!name || !username || !password || !confirmPassword) return false;
if (password !== confirmPassword) return false;
return true;
};
@@ -0,0 +1,14 @@
import { AuthenticationLayout } from './Layout';
import { LandingPage } from './LandingPage';
import { SignoutScreen } from './Signout';
import { VerifyScreen } from './VerifyScreen';
import { ForgotPassword, ResetPassword } from './ForgotPassword';
export {
AuthenticationLayout,
LandingPage,
SignoutScreen,
VerifyScreen,
ForgotPassword,
ResetPassword,
};
@@ -0,0 +1,11 @@
import { DashboardLayout } from '@/Screens/Dashboard/Layout';
export const ChatList = () => {
return (
<DashboardLayout mobileFull>
<h1>ChatList</h1>
</DashboardLayout>
);
};
@@ -1,7 +1,7 @@
import type { ReactNode } from 'react';
import { useLocation, useNavigate } from 'react-router';
import { useAuth } from 'hooks/useAuth';
import { PixelGrid } from './components/PixelGrid';
import { PixelGrid } from '../../../../workspaces/components/PixelGrid';
import { DuckAvatar } from './components/DuckAvatar';
import { SignupModal } from './components/SignupModal';
import { LoginModal } from './components/LoginModal';
@@ -0,0 +1,15 @@
import { useQuery } from '@tanstack/react-query';
import { useClient } from 'hooks/useClient';
export const useLandingPage = () => {
const apiClient = useClient();
const { data: setupData, isLoading } = useQuery({
queryKey: ['LANDING_PAGE_DATA'],
queryFn: () => apiClient.get<{ registrationOpen: boolean }>('/landing-page-data'),
});
return {
isLoading,
registrationOpen: setupData?.registrationOpen,
};
};
@@ -0,0 +1 @@
ALTER TABLE "users" ADD COLUMN "username" varchar(128);
@@ -0,0 +1,275 @@
{
"id": "7c0d3634-8b25-41e9-b6f3-24fad2005532",
"prevId": "b9130f42-0743-4c4b-aaf1-dce52e708e22",
"version": "7",
"dialect": "postgresql",
"tables": {
"public.users": {
"name": "users",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "bigserial",
"primaryKey": true,
"notNull": true
},
"email": {
"name": "email",
"type": "varchar(256)",
"primaryKey": false,
"notNull": true
},
"password": {
"name": "password",
"type": "varchar(256)",
"primaryKey": false,
"notNull": false
},
"role": {
"name": "role",
"type": "user_roles",
"typeSchema": "public",
"primaryKey": false,
"notNull": false,
"default": "'Member'"
},
"status": {
"name": "status",
"type": "user_status",
"typeSchema": "public",
"primaryKey": false,
"notNull": false,
"default": "'Unverified'"
},
"name": {
"name": "name",
"type": "varchar(128)",
"primaryKey": false,
"notNull": false
},
"username": {
"name": "username",
"type": "varchar(128)",
"primaryKey": false,
"notNull": false
},
"avatar": {
"name": "avatar",
"type": "varchar(512000)",
"primaryKey": false,
"notNull": false
},
"password_changed_at": {
"name": "password_changed_at",
"type": "bigint",
"primaryKey": false,
"notNull": false
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {
"users_email_unique": {
"name": "users_email_unique",
"nullsNotDistinct": false,
"columns": [
"email"
]
}
},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.passkeys": {
"name": "passkeys",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "bigserial",
"primaryKey": true,
"notNull": true
},
"email": {
"name": "email",
"type": "varchar(256)",
"primaryKey": false,
"notNull": true
},
"origin": {
"name": "origin",
"type": "varchar(256)",
"primaryKey": false,
"notNull": false
},
"credential_id": {
"name": "credential_id",
"type": "text",
"primaryKey": false,
"notNull": false
},
"public_key": {
"name": "public_key",
"type": "text",
"primaryKey": false,
"notNull": false
},
"counter": {
"name": "counter",
"type": "integer",
"primaryKey": false,
"notNull": true,
"default": 0
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.passkey_challenges": {
"name": "passkey_challenges",
"schema": "",
"columns": {
"email": {
"name": "email",
"type": "varchar(255)",
"primaryKey": false,
"notNull": true
},
"origin": {
"name": "origin",
"type": "varchar(512)",
"primaryKey": false,
"notNull": true
},
"challenge": {
"name": "challenge",
"type": "varchar(512)",
"primaryKey": false,
"notNull": true
},
"created_at": {
"name": "created_at",
"type": "timestamp with time zone",
"primaryKey": false,
"notNull": true,
"default": "now()"
}
},
"indexes": {
"idx_passkey_challenges_created_at": {
"name": "idx_passkey_challenges_created_at",
"columns": [
{
"expression": "created_at",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"foreignKeys": {},
"compositePrimaryKeys": {
"passkey_challenges_email_origin_pk": {
"name": "passkey_challenges_email_origin_pk",
"columns": [
"email",
"origin"
]
}
},
"uniqueConstraints": {},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.token_blacklist": {
"name": "token_blacklist",
"schema": "",
"columns": {
"jti": {
"name": "jti",
"type": "varchar(64)",
"primaryKey": true,
"notNull": true
},
"expires_at": {
"name": "expires_at",
"type": "bigint",
"primaryKey": false,
"notNull": true
}
},
"indexes": {
"idx_token_blacklist_expires_at": {
"name": "idx_token_blacklist_expires_at",
"columns": [
{
"expression": "expires_at",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
}
},
"enums": {
"public.user_roles": {
"name": "user_roles",
"schema": "public",
"values": [
"Member",
"Admin",
"Owner",
"Super Admin"
]
},
"public.user_status": {
"name": "user_status",
"schema": "public",
"values": [
"Unverified",
"Active",
"Prospect",
"Invited",
"Blocked",
"Banned",
"Deleted"
]
}
},
"schemas": {},
"sequences": {},
"roles": {},
"policies": {},
"views": {},
"_meta": {
"columns": {},
"schemas": {},
"tables": {}
}
}
@@ -8,6 +8,13 @@
"when": 1770915839349,
"tag": "0000_broken_gauntlet",
"breakpoints": true
},
{
"idx": 1,
"version": "7",
"when": 1771340427681,
"tag": "0001_fat_blonde_phantom",
"breakpoints": true
}
]
}
@@ -14,6 +14,7 @@ export const Users = pgTable('users', {
role: userRolesEnum('role').default(USER_ROLES[0]),
status: userStatusEnum('status').default(USER_STATUSES[0]),
name: varchar('name', { length: 128 }),
username: varchar('username', { length: 128 }),
avatar: varchar('avatar', { length: 512000 }),
passwordChangedAt: bigint('password_changed_at', { mode: 'number' }),
});
+2
View File
@@ -17,6 +17,7 @@ import { resendVerificationHandler } from './resend-verification';
import { changePasswordHandler } from './change-password';
import { forgotPasswordHandler } from './forgot-password';
import { resetPasswordHandler } from './reset-password';
import { bootstrapHandler } from './bootstrap';
import { usersMe } from './users-me';
import { passkeyRouter } from './passkey-router';
@@ -32,6 +33,7 @@ authRouter.get('/me', userMiddleware, usersMe);
authRouter.post('/signin', signinRateLimiter, signinHandler);
authRouter.post('/signout', userMiddleware, signoutHandler);
authRouter.post('/signup', signupRateLimiter, signupHandler);
authRouter.post('/bootstrap', signupRateLimiter, bootstrapHandler);
authRouter.post('/verify', verifyHandler);
authRouter.post('/verify-token', verifyTokenHandler);
authRouter.post('/resend-verification', resendVerificationHandler);
+63
View File
@@ -0,0 +1,63 @@
import type { Handler } from 'hono';
import { sendMail } from 'emailer';
import { officerdb, count, Users } from 'officerdb';
import { sign, verify } from '@@/jwt';
import argon2 from 'argon2';
import * as errors from '@@/custom-errors';
import { validatePassword } from './validate-password';
export const bootstrapHandler: Handler = async function (ctx) {
const body = ctx.get('body');
const origin = ctx.get('origin');
const token = body.token as string;
const email = body.email as string;
const result = await officerdb.select({ count: count() }).from(Users);
const userCount = result[0]?.count ?? 0;
if (userCount > 0) throw errors.FORBIDDEN('Registration is closed');
if (!token) {
if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
throw errors.BAD_REQUEST('Invalid email address');
}
const verificationCode = await sign({ email }, '24h');
const url = `${origin}/auth/verify?verificationCode=${verificationCode}`;
await sendMail({
template: 'VerifyAdmin',
subject: 'Verify your Officer account',
to: email,
data: { name: email, url },
});
return ctx.json({ ok: true });
}
const payload = await verify(token).catch(() => null) as { email: string } | null;
if (!payload?.email) throw errors.BAD_REQUEST('Invalid or expired token');
const name = body.name as string;
const username = body.username as string;
const password = body.password as string;
const confirmPassword = body.confirmPassword as string;
if (!name || !name.trim()) throw errors.BAD_REQUEST('Name is required');
if (!username || !username.trim()) throw errors.BAD_REQUEST('Username is required');
validatePassword(password);
if (password !== confirmPassword) throw errors.BAD_REQUEST('Passwords do not match');
const passwordHash = await argon2.hash(password);
const insertedUsers = await officerdb.insert(Users).values({
email: payload.email,
password: passwordHash,
name: name.trim(),
username: username.trim(),
role: 'Super Admin',
status: 'Active',
}).returning();
if (!insertedUsers || insertedUsers.length === 0) throw errors.INTERNAL_SERVER_ERROR('Failed to create user');
return ctx.json({ ok: true });
};
+1 -1
View File
@@ -13,7 +13,7 @@ export const forgotPasswordHandler: Handler = async function (ctx) {
});
if (!dbUser) return ctx.json({ ok: true });
const verificationCode = await sign({ id: dbUser.id, email }, '6h');
const verificationCode = await sign({ id: dbUser.id, email, purpose: 'reset-password' }, '6h');
const url = `${PUBLIC_URL}/auth/reset-password?verificationCode=${verificationCode}`;
await sendMail({
+9 -1
View File
@@ -15,13 +15,21 @@ export const verifyTokenHandler: Handler = async function (ctx) {
throw errors.BAD_REQUEST('Token is invalid or expired');
}
// Bootstrap token: has email but no id (user not yet created)
if (userInfo?.email && !userInfo?.id) {
return ctx.json({ ok: true, email: userInfo.email });
}
if (!userInfo?.id) throw errors.BAD_REQUEST('Token is invalid or expired');
const user = await officerdb.query.Users.findFirst({
where: eq(Users.id, userInfo.id),
});
if (!user) throw errors.NOT_FOUND('User not found');
if (user.status !== 'Unverified') throw errors.BAD_REQUEST('Account is already verified');
// Reset-password tokens skip the verification status check
const isResetToken = (userInfo as Record<string, unknown>).purpose === 'reset-password';
if (!isResetToken && user.status !== 'Unverified') throw errors.BAD_REQUEST('Account is already verified');
return ctx.json({ ok: true, email: user.email });
};
@@ -0,0 +1,10 @@
import { createRouter } from '../../create-router';
import { officerdb, count, Users } from 'officerdb';
export const landingPageDataRouter = createRouter();
landingPageDataRouter.get('/', async (ctx) => {
const result = await officerdb.select({ count: count() }).from(Users);
const userCount = result[0]?.count ?? 0;
return ctx.json({ registrationOpen: userCount === 0 });
});
@@ -23,12 +23,6 @@ serverSettingsRouter.route('/claude-code', claudeCodeRouter);
serverSettingsRouter.route('/opencode', opencodeRouter);
serverSettingsRouter.route('/applications', applicationsRouter);
serverSettingsRouter.get('/', async (ctx) => {
const result = await officerdb.select({ count: count() }).from(Users);
const userCount = result[0]?.count ?? 0;
return ctx.json({ registrationOpen: userCount === 0 });
});
serverSettingsRouter.get('/settings', async (ctx) => {
const settings = await Bun.file(settingsPath).json();
return ctx.json(settings);
+2
View File
@@ -4,6 +4,7 @@ import { createRouter } from './create-router';
import type { HonoVariables } from './create-router';
import { authRouter } from './api/auth';
import { serverSettingsRouter, settingsPath } from './api/server-settings/server-settings';
import { landingPageDataRouter } from './api/landing-page-data/landing-page-data';
import { updateUserHandler } from './api/users/update-user';
import { plansRouter } from './api/plans/plans';
import { skillsRouter } from './api/skills/skills';
@@ -37,6 +38,7 @@ honoServer.use(
honoServer.get('/api', (ctx) => ctx.json({ officerAPI: 'ok' }));
honoServer.route('/api/auth', authRouter);
honoServer.route('/api/server-settings', serverSettingsRouter);
honoServer.route('/api/landing-page-data', landingPageDataRouter);
const protectedRouter = createRouter();
protectedRouter.use(bodyParser());
+1 -1
View File
@@ -16,7 +16,7 @@ type CardProps = ComponentPropsWithoutRef<'div'>;
export const Card = ({ className, style, ...props }: CardProps) => {
return (
<div
className={cn('rounded-xl border-2 border-duck-dark/30 shadow-lg', className)}
className={cn('rounded-xl border-2 border-duck-dark/30 shadow-lg p-5', className)}
style={cardStyle(style)}
{...props}
/>
@@ -16,11 +16,6 @@ export const useAuth = (props: UseAuthProps = {}) => {
const apiClient = useClient(apiUrl);
const passKeyManager = usePasskeys();
const { data: setupData } = useQuery({
queryKey: ['AUTH_SETUP'],
queryFn: () => apiClient.get<{ registrationOpen: boolean }>('/server-settings'),
});
const registrationOpen = setupData?.registrationOpen ?? false;
const { isLoading } = useQuery<UserWithToken | null>({
queryKey: ['CURRENT_USER'],
@@ -115,7 +110,6 @@ export const useAuth = (props: UseAuthProps = {}) => {
user,
isAuthenticated: !!user,
isLoading,
registrationOpen,
refreshUser,
signin,
signout,
+20
View File
@@ -1,3 +1,23 @@
declare module '*.jpg' {
const src: string;
export default src;
}
declare module '*.jpeg' {
const src: string;
export default src;
}
declare module '*.png' {
const src: string;
export default src;
}
declare module '*.svg' {
const src: string;
export default src;
}
declare global {
type SelectOption = { value: number | string; label?: string; href?: string; hidden?: boolean };
+4
View File
@@ -5,6 +5,10 @@
"ESNext",
"DOM"
],
"types": [
"react",
"react-dom"
],
"target": "ESNext",
"module": "Preserve",
"moduleDetection": "force",