chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate auth pages to new design system

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 19:25:54 -05:00
parent c47484c4cf
commit 4d92e0aeed
4 changed files with 84 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/pages/ChangePasswordPage.tsx
View File

@@ -66,7 +66,7 @@ export function ChangePasswordPage() {
<BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
</div>
</div>
<h1 className="text-3xl font-bold text-white tracking-tight">
<h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
Change Password
</h1>
{isForced && (
@@ -77,7 +77,7 @@ export function ChangePasswordPage() {
</div>
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="glass-card rounded-2xl p-6 space-y-4">
<div className="bg-card border border-border rounded-xl p-6 space-y-4">
{error && (
<div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
{error}
@@ -85,7 +85,7 @@ export function ChangePasswordPage() {
)}
<div>
<label htmlFor="current-password" className="mb-1 block text-sm font-medium text-white">
<label htmlFor="current-password" className="mb-1 block text-sm font-medium text-foreground">
Current Password
</label>
<PasswordInput
@@ -95,16 +95,16 @@ export function ChangePasswordPage() {
value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)}
className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors'
)}
/>
</div>
<div>
<label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white">
<label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
New Password
</label>
<PasswordInput
@@ -114,20 +114,20 @@ export function ChangePasswordPage() {
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors'
)}
placeholder="At least 10 characters"
/>
<p className="mt-1 text-xs text-white/40">
<p className="mt-1 text-xs text-muted-foreground">
Must include uppercase, lowercase, and a digit.
</p>
</div>
<div>
<label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white">
<label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
Confirm New Password
</label>
<PasswordInput
@@ -137,9 +137,9 @@ export function ChangePasswordPage() {
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors'
)}
/>
@@ -150,8 +150,8 @@ export function ChangePasswordPage() {
disabled={isLoading}
className={cn(
'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
'bg-white text-black hover:bg-white/90',
'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
'disabled:cursor-not-allowed disabled:opacity-50',
'transition-all'
)}

34
frontend/src/pages/LoginPage.tsx
View File

@@ -51,19 +51,19 @@ export function LoginPage() {
<BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
</div>
</div>
<h1 className="text-3xl font-bold text-white tracking-tight">
<h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
ResolutionFlow
</h1>
<p className="mt-2 text-base font-medium text-white/60 sm:mt-3 sm:text-lg">
<p className="mt-2 text-base font-medium text-muted-foreground sm:mt-3 sm:text-lg">
Decision Tree Platform
</p>
<p className="mt-1 text-sm text-white/40 sm:mt-2">
<p className="mt-1 text-sm text-muted-foreground sm:mt-2">
Sign in to your account
</p>
</div>
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="glass-card rounded-2xl p-6 space-y-4">
<div className="bg-card border border-border rounded-xl p-6 space-y-4">
{(error || localError) && (
<div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
{localError || error}
@@ -71,7 +71,7 @@ export function LoginPage() {
)}
<div>
<label htmlFor="email" className="mb-1 block text-sm font-medium text-white">
<label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
Email address
</label>
<input
@@ -83,9 +83,9 @@ export function LoginPage() {
value={email}
onChange={(e) => setEmail(e.target.value)}
className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors'
)}
placeholder="you@example.com"
@@ -93,7 +93,7 @@ export function LoginPage() {
</div>
<div>
<label htmlFor="password" className="mb-1 block text-sm font-medium text-white">
<label htmlFor="password" className="mb-1 block text-sm font-medium text-foreground">
Password
</label>
<PasswordInput
@@ -104,9 +104,9 @@ export function LoginPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors'
)}
placeholder="••••••••••"
@@ -114,7 +114,7 @@ export function LoginPage() {
</div>
<div className="text-right">
<Link to="/forgot-password" className="text-xs text-white/40 hover:text-white/60 transition-colors">
<Link to="/forgot-password" className="text-xs text-muted-foreground hover:text-foreground transition-colors">
Forgot password?
</Link>
</div>
@@ -124,8 +124,8 @@ export function LoginPage() {
disabled={isLoading}
className={cn(
'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
'bg-white text-black hover:bg-white/90',
'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
'disabled:cursor-not-allowed disabled:opacity-50',
'transition-all'
)}
@@ -134,9 +134,9 @@ export function LoginPage() {
</button>
</div>
<p className="text-center text-sm text-white/40">
<p className="text-center text-sm text-muted-foreground">
Don't have an account?{' '}
<Link to="/register" className="font-medium text-white hover:underline">
<Link to="/register" className="font-medium text-foreground hover:underline">
Register
</Link>
</p>

62
frontend/src/pages/RegisterPage.tsx
View File

@@ -87,19 +87,19 @@ export function RegisterPage() {
<BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
</div>
</div>
<h1 className="text-3xl font-bold text-white tracking-tight">
<h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
ResolutionFlow
</h1>
<p className="mt-2 text-base font-medium text-white/60 sm:mt-3 sm:text-lg">
<p className="mt-2 text-base font-medium text-muted-foreground sm:mt-3 sm:text-lg">
Decision Tree Platform
</p>
<p className="mt-1 text-sm text-white/40 sm:mt-2">
<p className="mt-1 text-sm text-muted-foreground sm:mt-2">
Create your account
</p>
</div>
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="glass-card rounded-2xl p-6 space-y-4">
<div className="bg-card border border-border rounded-xl p-6 space-y-4">
{(error || localError) && (
<div className="rounded-xl border border-red-400/20 bg-red-400/10 p-3 text-sm text-red-400">
{localError || error}
@@ -107,7 +107,7 @@ export function RegisterPage() {
)}
<div>
<label htmlFor="inviteCode" className="block text-sm font-medium text-white">
<label htmlFor="inviteCode" className="block text-sm font-medium text-foreground">
Invite code
</label>
<input
@@ -121,18 +121,18 @@ export function RegisterPage() {
}}
onBlur={(e) => validateInviteCode(e.target.value)}
className={cn(
'mt-1 block w-full rounded-xl border bg-black/50 px-3 py-2 font-mono tracking-wider',
'text-white placeholder:text-white/30',
'mt-1 block w-full rounded-xl border bg-card px-3 py-2 font-mono tracking-wider',
'text-foreground placeholder:text-muted-foreground',
'focus:outline-none focus:ring-1',
inviteCodeStatus === 'valid' && 'border-emerald-400/50 focus:border-emerald-400 focus:ring-emerald-400/30',
inviteCodeStatus === 'invalid' && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/30',
inviteCodeStatus === 'idle' && 'border-white/10 focus:border-white/30 focus:ring-white/20',
inviteCodeStatus === 'checking' && 'border-white/10 focus:border-white/30 focus:ring-white/20'
inviteCodeStatus === 'idle' && 'border-border focus:border-primary focus:ring-primary/20',
inviteCodeStatus === 'checking' && 'border-border focus:border-primary focus:ring-primary/20'
)}
placeholder="ABCD1234"
/>
{inviteCodeStatus === 'checking' && (
<p className="mt-1 text-xs text-white/40">Validating...</p>
<p className="mt-1 text-xs text-muted-foreground">Validating...</p>
)}
{inviteCodeStatus === 'valid' && (
<p className="mt-1 text-xs text-emerald-400">{inviteCodeMessage}</p>
@@ -143,7 +143,7 @@ export function RegisterPage() {
</div>
<div>
<label htmlFor="name" className="block text-sm font-medium text-white">
<label htmlFor="name" className="block text-sm font-medium text-foreground">
Full name
</label>
<input
@@ -155,16 +155,16 @@ export function RegisterPage() {
value={name}
onChange={(e) => setName(e.target.value)}
className={cn(
'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
placeholder="John Smith"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-white">
<label htmlFor="email" className="block text-sm font-medium text-foreground">
Email address
</label>
<input
@@ -176,16 +176,16 @@ export function RegisterPage() {
value={email}
onChange={(e) => setEmail(e.target.value)}
className={cn(
'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
placeholder="you@example.com"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-white">
<label htmlFor="password" className="block text-sm font-medium text-foreground">
Password
</label>
<PasswordInput
@@ -196,19 +196,19 @@ export function RegisterPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
className={cn(
'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
placeholder="••••••••••"
/>
<p className="mt-1 text-xs text-white/30">
<p className="mt-1 text-xs text-muted-foreground">
Must be at least 10 characters
</p>
</div>
<div>
<label htmlFor="confirmPassword" className="block text-sm font-medium text-white">
<label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
Confirm password
</label>
<PasswordInput
@@ -219,9 +219,9 @@ export function RegisterPage() {
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className={cn(
'mt-1 block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
'mt-1 block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
placeholder="••••••••••"
/>
@@ -232,8 +232,8 @@ export function RegisterPage() {
disabled={isLoading}
className={cn(
'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
'bg-white text-black hover:bg-white/90',
'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
'disabled:cursor-not-allowed disabled:opacity-50',
'transition-all'
)}
@@ -242,9 +242,9 @@ export function RegisterPage() {
</button>
</div>
<p className="text-center text-sm text-white/40">
<p className="text-center text-sm text-muted-foreground">
Already have an account?{' '}
<Link to="/login" className="font-medium text-white hover:underline">
<Link to="/login" className="font-medium text-foreground hover:underline">
Sign in
</Link>
</p>

38
frontend/src/pages/ResetPasswordPage.tsx
View File

@@ -82,24 +82,24 @@ export function ResetPasswordPage() {
<BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
</div>
</div>
<h1 className="text-3xl font-bold text-white tracking-tight">
<h1 className="text-3xl font-bold font-heading text-foreground tracking-tight">
Reset Password
</h1>
</div>
{verifying ? (
<div className="glass-card rounded-2xl p-6 text-center">
<p className="text-white/60">Verifying reset link...</p>
<div className="bg-card border border-border rounded-xl p-6 text-center">
<p className="text-muted-foreground">Verifying reset link...</p>
</div>
) : !token || !valid ? (
<div className="glass-card rounded-2xl p-6 space-y-4">
<div className="bg-card border border-border rounded-xl p-6 space-y-4">
<div className="rounded-xl border border-red-400/20 bg-red-400/10 p-4 text-sm text-red-400">
This reset link is invalid or has expired. Please request a new one.
</div>
<div className="text-center">
<Link
to="/forgot-password"
className="text-sm text-white/60 hover:text-white transition-colors"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Request new reset link
</Link>
@@ -107,10 +107,10 @@ export function ResetPasswordPage() {
</div>
) : (
<form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="glass-card rounded-2xl p-6 space-y-4">
<div className="bg-card border border-border rounded-xl p-6 space-y-4">
{email && (
<p className="text-sm text-white/60">
Resetting password for <span className="font-medium text-white">{email}</span>
<p className="text-sm text-muted-foreground">
Resetting password for <span className="font-medium text-foreground">{email}</span>
</p>
)}
@@ -121,7 +121,7 @@ export function ResetPasswordPage() {
)}
<div>
<label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white">
<label htmlFor="new-password" className="mb-1 block text-sm font-medium text-foreground">
New Password
</label>
<PasswordInput
@@ -131,20 +131,20 @@ export function ResetPasswordPage() {
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors'
)}
placeholder="At least 10 characters"
/>
<p className="mt-1 text-xs text-white/40">
<p className="mt-1 text-xs text-muted-foreground">
Must include uppercase, lowercase, and a digit.
</p>
</div>
<div>
<label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white">
<label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-foreground">
Confirm New Password
</label>
<PasswordInput
@@ -154,9 +154,9 @@ export function ResetPasswordPage() {
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/30',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors'
)}
/>
@@ -167,8 +167,8 @@ export function ResetPasswordPage() {
disabled={isLoading}
className={cn(
'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
'bg-white text-black hover:bg-white/90',
'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black',
'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-black',
'disabled:cursor-not-allowed disabled:opacity-50',
'transition-all'
)}