107 lines
5 KiB
TypeScript
107 lines
5 KiB
TypeScript
import { useState } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { useAuth } from './useAuth'
|
|
|
|
export const SetupForm = () => {
|
|
const [password, setPassword] = useState('')
|
|
const [confirmPassword, setConfirmPassword] = useState('')
|
|
const [localError, setLocalError] = useState('')
|
|
const { setup, error, isLoading } = useAuth()
|
|
const navigate = useNavigate()
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setLocalError('')
|
|
|
|
if (password.length < 8) {
|
|
setLocalError('Password must be at least 8 characters long')
|
|
return
|
|
}
|
|
|
|
if (password !== confirmPassword) {
|
|
setLocalError('Passwords do not match')
|
|
return
|
|
}
|
|
|
|
try {
|
|
await setup({ password })
|
|
navigate('/')
|
|
} catch {
|
|
// Error is handled by the store
|
|
}
|
|
}
|
|
|
|
const displayError = localError || error
|
|
|
|
return (
|
|
<div className="w-full max-w-md p-10 space-y-8 bg-white/80 dark:bg-gray-800/80 backdrop-blur-2xl rounded-[2rem] shadow-2xl shadow-accent-500/10 border border-white/50 dark:border-gray-700 transition-all">
|
|
<div className="text-center">
|
|
<div className="mx-auto w-16 h-16 bg-gradient-to-br from-accent-400 to-accent-600 rounded-2xl flex items-center justify-center shadow-lg shadow-accent-500/30 mb-6 transform -rotate-6 hover:rotate-0 transition-transform duration-300">
|
|
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-4xl font-heading font-bold tracking-tight text-gray-900 dark:text-white mb-2">
|
|
Set up PaperJet
|
|
</h2>
|
|
<p className="text-base text-gray-500 dark:text-gray-400 font-medium">
|
|
Create a master password to secure your documents. Make sure you remember it!
|
|
</p>
|
|
</div>
|
|
|
|
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 ml-1">
|
|
Master Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
className="w-full px-5 py-4 rounded-full border-2 border-transparent bg-white/60 dark:bg-gray-700/60 text-gray-900 dark:text-white focus:bg-white focus:ring-4 focus:ring-accent-500/20 focus:border-accent-400 outline-none transition-all placeholder-gray-400 dark:placeholder-gray-500 shadow-inner text-lg font-medium"
|
|
placeholder="••••••••"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2 ml-1">
|
|
Confirm Password
|
|
</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
className="w-full px-5 py-4 rounded-full border-2 border-transparent bg-white/60 dark:bg-gray-700/60 text-gray-900 dark:text-white focus:bg-white focus:ring-4 focus:ring-accent-500/20 focus:border-accent-400 outline-none transition-all placeholder-gray-400 dark:placeholder-gray-500 shadow-inner text-lg font-medium"
|
|
placeholder="••••••••"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
disabled={isLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{displayError && (
|
|
<div className="p-4 text-sm font-semibold text-red-600 bg-red-50 dark:bg-red-900/30 dark:text-red-400 rounded-2xl animate-in fade-in slide-in-from-top-2 border border-red-100 dark:border-red-800/50">
|
|
{displayError}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading || !password || !confirmPassword}
|
|
className="w-full flex justify-center py-4 px-6 border-2 border-transparent rounded-full shadow-lg text-lg font-bold text-white bg-gradient-to-r from-accent-500 to-accent-600 hover:from-accent-600 hover:to-accent-700 focus:outline-none focus:ring-4 focus:ring-accent-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-all active:scale-[0.98] hover:-translate-y-0.5"
|
|
>
|
|
{isLoading ? (
|
|
<svg className="animate-spin -ml-1 mr-3 h-6 w-6 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
) : (
|
|
'Complete Setup'
|
|
)}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|