298 lines
10 KiB
TypeScript
298 lines
10 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { useState, useEffect } from 'react'
|
||
|
|
import { useRouter } from 'next/navigation'
|
||
|
|
import { useSession } from 'next-auth/react'
|
||
|
|
import { Button } from '@/components/ui/button'
|
||
|
|
import { Input } from '@/components/ui/input'
|
||
|
|
import { Label } from '@/components/ui/label'
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from '@/components/ui/card'
|
||
|
|
import { Progress } from '@/components/ui/progress'
|
||
|
|
import { Loader2, Lock, CheckCircle2, AlertCircle, Eye, EyeOff } from 'lucide-react'
|
||
|
|
import { trpc } from '@/lib/trpc/client'
|
||
|
|
|
||
|
|
export default function SetPasswordPage() {
|
||
|
|
const [password, setPassword] = useState('')
|
||
|
|
const [confirmPassword, setConfirmPassword] = useState('')
|
||
|
|
const [showPassword, setShowPassword] = useState(false)
|
||
|
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false)
|
||
|
|
const [isLoading, setIsLoading] = useState(false)
|
||
|
|
const [error, setError] = useState<string | null>(null)
|
||
|
|
const [isSuccess, setIsSuccess] = useState(false)
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const { data: session, update: updateSession } = useSession()
|
||
|
|
|
||
|
|
const setPasswordMutation = trpc.user.setPassword.useMutation({
|
||
|
|
onSuccess: async () => {
|
||
|
|
setIsSuccess(true)
|
||
|
|
// Update the session to reflect the password has been set
|
||
|
|
await updateSession()
|
||
|
|
// Redirect after a short delay
|
||
|
|
setTimeout(() => {
|
||
|
|
if (session?.user?.role === 'JURY_MEMBER') {
|
||
|
|
router.push('/jury')
|
||
|
|
} else if (session?.user?.role === 'SUPER_ADMIN' || session?.user?.role === 'PROGRAM_ADMIN') {
|
||
|
|
router.push('/admin')
|
||
|
|
} else {
|
||
|
|
router.push('/')
|
||
|
|
}
|
||
|
|
}, 2000)
|
||
|
|
},
|
||
|
|
onError: (err) => {
|
||
|
|
setError(err.message || 'Failed to set password. Please try again.')
|
||
|
|
setIsLoading(false)
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
// Redirect if not authenticated
|
||
|
|
useEffect(() => {
|
||
|
|
if (session === null) {
|
||
|
|
router.push('/login')
|
||
|
|
}
|
||
|
|
}, [session, router])
|
||
|
|
|
||
|
|
// Password validation
|
||
|
|
const validatePassword = (pwd: string) => {
|
||
|
|
const errors: string[] = []
|
||
|
|
if (pwd.length < 8) errors.push('At least 8 characters')
|
||
|
|
if (!/[A-Z]/.test(pwd)) errors.push('One uppercase letter')
|
||
|
|
if (!/[a-z]/.test(pwd)) errors.push('One lowercase letter')
|
||
|
|
if (!/[0-9]/.test(pwd)) errors.push('One number')
|
||
|
|
return errors
|
||
|
|
}
|
||
|
|
|
||
|
|
const passwordErrors = validatePassword(password)
|
||
|
|
const isPasswordValid = passwordErrors.length === 0
|
||
|
|
const doPasswordsMatch = password === confirmPassword && password.length > 0
|
||
|
|
|
||
|
|
// Password strength
|
||
|
|
const getPasswordStrength = (pwd: string): { score: number; label: string; color: string } => {
|
||
|
|
let score = 0
|
||
|
|
if (pwd.length >= 8) score++
|
||
|
|
if (pwd.length >= 12) score++
|
||
|
|
if (/[a-z]/.test(pwd) && /[A-Z]/.test(pwd)) score++
|
||
|
|
if (/[0-9]/.test(pwd)) score++
|
||
|
|
if (/[^a-zA-Z0-9]/.test(pwd)) score++
|
||
|
|
|
||
|
|
const normalizedScore = Math.min(4, score)
|
||
|
|
const labels = ['Very Weak', 'Weak', 'Fair', 'Strong', 'Very Strong']
|
||
|
|
const colors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500', 'bg-green-600']
|
||
|
|
|
||
|
|
return {
|
||
|
|
score: normalizedScore,
|
||
|
|
label: labels[normalizedScore],
|
||
|
|
color: colors[normalizedScore],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const strength = getPasswordStrength(password)
|
||
|
|
|
||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
||
|
|
e.preventDefault()
|
||
|
|
setError(null)
|
||
|
|
|
||
|
|
if (!isPasswordValid) {
|
||
|
|
setError('Password does not meet requirements.')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!doPasswordsMatch) {
|
||
|
|
setError('Passwords do not match.')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
setIsLoading(true)
|
||
|
|
setPasswordMutation.mutate({ password, confirmPassword })
|
||
|
|
}
|
||
|
|
|
||
|
|
// Loading state while checking session
|
||
|
|
if (session === undefined) {
|
||
|
|
return (
|
||
|
|
<Card className="w-full max-w-md">
|
||
|
|
<CardContent className="flex items-center justify-center py-12">
|
||
|
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
// Success state
|
||
|
|
if (isSuccess) {
|
||
|
|
return (
|
||
|
|
<Card className="w-full max-w-md">
|
||
|
|
<CardHeader className="text-center">
|
||
|
|
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
|
||
|
|
<CheckCircle2 className="h-6 w-6 text-green-600" />
|
||
|
|
</div>
|
||
|
|
<CardTitle className="text-xl">Password Set Successfully</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
Your password has been set. You can now sign in with your email and
|
||
|
|
password.
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="text-center">
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
Redirecting you to the dashboard...
|
||
|
|
</p>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="w-full max-w-md">
|
||
|
|
<CardHeader className="text-center">
|
||
|
|
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
|
||
|
|
<Lock className="h-6 w-6 text-primary" />
|
||
|
|
</div>
|
||
|
|
<CardTitle className="text-xl">Set Your Password</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
Create a secure password to sign in to your account in the future.
|
||
|
|
</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||
|
|
{error && (
|
||
|
|
<div className="flex items-center gap-2 rounded-md bg-destructive/10 p-3 text-sm text-destructive">
|
||
|
|
<AlertCircle className="h-4 w-4 shrink-0" />
|
||
|
|
<p>{error}</p>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="password">New Password</Label>
|
||
|
|
<div className="relative">
|
||
|
|
<Input
|
||
|
|
id="password"
|
||
|
|
type={showPassword ? 'text' : 'password'}
|
||
|
|
placeholder="Enter a secure password"
|
||
|
|
value={password}
|
||
|
|
onChange={(e) => setPassword(e.target.value)}
|
||
|
|
required
|
||
|
|
disabled={isLoading}
|
||
|
|
autoComplete="new-password"
|
||
|
|
autoFocus
|
||
|
|
className="pr-10"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||
|
|
onClick={() => setShowPassword(!showPassword)}
|
||
|
|
>
|
||
|
|
{showPassword ? (
|
||
|
|
<EyeOff className="h-4 w-4" />
|
||
|
|
) : (
|
||
|
|
<Eye className="h-4 w-4" />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Password strength indicator */}
|
||
|
|
{password.length > 0 && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Progress
|
||
|
|
value={(strength.score / 4) * 100}
|
||
|
|
className={`h-2 ${strength.color}`}
|
||
|
|
/>
|
||
|
|
<span className="text-xs text-muted-foreground whitespace-nowrap">
|
||
|
|
{strength.label}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Requirements checklist */}
|
||
|
|
<div className="grid grid-cols-2 gap-1 text-xs">
|
||
|
|
{[
|
||
|
|
{ label: '8+ characters', met: password.length >= 8 },
|
||
|
|
{ label: 'Uppercase', met: /[A-Z]/.test(password) },
|
||
|
|
{ label: 'Lowercase', met: /[a-z]/.test(password) },
|
||
|
|
{ label: 'Number', met: /[0-9]/.test(password) },
|
||
|
|
].map((req) => (
|
||
|
|
<div
|
||
|
|
key={req.label}
|
||
|
|
className={`flex items-center gap-1 ${
|
||
|
|
req.met ? 'text-green-600' : 'text-muted-foreground'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{req.met ? (
|
||
|
|
<CheckCircle2 className="h-3 w-3" />
|
||
|
|
) : (
|
||
|
|
<div className="h-3 w-3 rounded-full border border-current" />
|
||
|
|
)}
|
||
|
|
{req.label}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="confirmPassword">Confirm Password</Label>
|
||
|
|
<div className="relative">
|
||
|
|
<Input
|
||
|
|
id="confirmPassword"
|
||
|
|
type={showConfirmPassword ? 'text' : 'password'}
|
||
|
|
placeholder="Confirm your password"
|
||
|
|
value={confirmPassword}
|
||
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||
|
|
required
|
||
|
|
disabled={isLoading}
|
||
|
|
autoComplete="new-password"
|
||
|
|
className="pr-10"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||
|
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||
|
|
>
|
||
|
|
{showConfirmPassword ? (
|
||
|
|
<EyeOff className="h-4 w-4" />
|
||
|
|
) : (
|
||
|
|
<Eye className="h-4 w-4" />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{confirmPassword.length > 0 && (
|
||
|
|
<p
|
||
|
|
className={`text-xs ${
|
||
|
|
doPasswordsMatch ? 'text-green-600' : 'text-destructive'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{doPasswordsMatch
|
||
|
|
? 'Passwords match'
|
||
|
|
: 'Passwords do not match'}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
className="w-full"
|
||
|
|
disabled={isLoading || !isPasswordValid || !doPasswordsMatch}
|
||
|
|
>
|
||
|
|
{isLoading ? (
|
||
|
|
<>
|
||
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||
|
|
Setting password...
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<Lock className="mr-2 h-4 w-4" />
|
||
|
|
Set Password
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|