This commit is contained in:
parent
fa2be029a2
commit
724d70e58b
3339 changed files with 1075535 additions and 0 deletions
258
frontend/src/components/SetupWizard.tsx
Normal file
258
frontend/src/components/SetupWizard.tsx
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { HardDrive, Lock, User, ArrowRight, Check } from 'lucide-react';
|
||||
import api from '@/lib/api';
|
||||
|
||||
interface SetupWizardProps {
|
||||
onComplete: () => void;
|
||||
}
|
||||
|
||||
export default function SetupWizard({ onComplete }: SetupWizardProps) {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [step, setStep] = useState(1);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
if (step === 1) {
|
||||
if (username.length < 3) {
|
||||
setError('Username must be at least 3 characters');
|
||||
return;
|
||||
}
|
||||
setStep(2);
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
setError('Password must be at least 8 characters');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setError('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await api.setup(username, password);
|
||||
if (result.error) {
|
||||
setError(result.error);
|
||||
} else {
|
||||
setStep(3);
|
||||
setTimeout(onComplete, 1500);
|
||||
}
|
||||
} catch {
|
||||
setError('Failed to complete setup');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen p-4"
|
||||
style={{ backgroundColor: 'var(--color-bg-primary)' }}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, ease: 'easeOut' }}
|
||||
className="w-full max-w-md"
|
||||
>
|
||||
{/* Logo & Title */}
|
||||
<div className="text-center mb-8">
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.2, type: 'spring', stiffness: 200 }}
|
||||
className="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-4"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, var(--color-accent), #8b5cf6)',
|
||||
boxShadow: 'var(--shadow-glow)',
|
||||
}}
|
||||
>
|
||||
<HardDrive className="w-8 h-8 text-white" />
|
||||
</motion.div>
|
||||
<h1 className="text-2xl font-bold" style={{ color: 'var(--color-text-primary)' }}>
|
||||
Welcome to Drive
|
||||
</h1>
|
||||
<p className="mt-2 text-sm" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
{step === 3 ? 'Setup complete!' : "Let's set up your account"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Indicator */}
|
||||
<div className="flex items-center justify-center gap-2 mb-8">
|
||||
{[1, 2, 3].map((s) => (
|
||||
<div
|
||||
key={s}
|
||||
className="h-1.5 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: step >= s ? '2rem' : '0.75rem',
|
||||
backgroundColor: step >= s ? 'var(--color-accent)' : 'var(--color-border)',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Card */}
|
||||
<div
|
||||
className="rounded-2xl p-8"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-elevated)',
|
||||
border: '1px solid var(--color-border)',
|
||||
boxShadow: 'var(--shadow-lg)',
|
||||
}}
|
||||
>
|
||||
{step === 3 ? (
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
className="flex flex-col items-center gap-4 py-8"
|
||||
>
|
||||
<div
|
||||
className="w-16 h-16 rounded-full flex items-center justify-center"
|
||||
style={{ backgroundColor: 'rgba(34, 197, 94, 0.15)' }}
|
||||
>
|
||||
<Check className="w-8 h-8" style={{ color: 'var(--color-success)' }} />
|
||||
</div>
|
||||
<p className="font-medium" style={{ color: 'var(--color-text-primary)' }}>
|
||||
Account created successfully!
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
Redirecting to login...
|
||||
</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<motion.div
|
||||
key={step}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
{step === 1 && (
|
||||
<div className="space-y-4">
|
||||
<label className="block">
|
||||
<span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
Username
|
||||
</span>
|
||||
<div className="relative mt-1.5">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} />
|
||||
<input
|
||||
id="setup-username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="Choose a username"
|
||||
autoFocus
|
||||
className="w-full pl-10 pr-4 py-3 rounded-xl text-sm outline-none transition-all"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-tertiary)',
|
||||
border: '1px solid var(--color-border)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<div className="space-y-4">
|
||||
<label className="block">
|
||||
<span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
Password
|
||||
</span>
|
||||
<div className="relative mt-1.5">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} />
|
||||
<input
|
||||
id="setup-password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Create a strong password"
|
||||
autoFocus
|
||||
className="w-full pl-10 pr-4 py-3 rounded-xl text-sm outline-none transition-all"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-tertiary)',
|
||||
border: '1px solid var(--color-border)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-xs font-medium uppercase tracking-wider" style={{ color: 'var(--color-text-secondary)' }}>
|
||||
Confirm Password
|
||||
</span>
|
||||
<div className="relative mt-1.5">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: 'var(--color-text-tertiary)' }} />
|
||||
<input
|
||||
id="setup-confirm-password"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="Confirm your password"
|
||||
className="w-full pl-10 pr-4 py-3 rounded-xl text-sm outline-none transition-all"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-tertiary)',
|
||||
border: '1px solid var(--color-border)',
|
||||
color: 'var(--color-text-primary)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{error && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="mt-4 text-sm px-3 py-2 rounded-lg"
|
||||
style={{
|
||||
color: 'var(--color-danger)',
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||||
}}
|
||||
>
|
||||
{error}
|
||||
</motion.p>
|
||||
)}
|
||||
|
||||
<button
|
||||
id="setup-submit"
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full mt-6 py-3 rounded-xl text-sm font-semibold text-white flex items-center justify-center gap-2 transition-all duration-200 hover:opacity-90 disabled:opacity-50"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, var(--color-accent), #8b5cf6)',
|
||||
boxShadow: 'var(--shadow-glow)',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="w-5 h-5 rounded-full border-2 border-white border-t-transparent" style={{ animation: 'spin 0.8s linear infinite' }} />
|
||||
) : (
|
||||
<>
|
||||
{step === 1 ? 'Continue' : 'Create Account'}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in a new issue