mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 11:51:14 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
234
components/auth/PasswordResetForm.tsx
Normal file
234
components/auth/PasswordResetForm.tsx
Normal file
@@ -0,0 +1,234 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { authService } from '@/lib/services/auth';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { AlertCircle, Loader2, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
const resetRequestSchema = z.object({
|
||||
email: z.string().email('Invalid email address'),
|
||||
});
|
||||
|
||||
const resetConfirmSchema = z
|
||||
.object({
|
||||
password: z
|
||||
.string()
|
||||
.min(8, 'Password must be at least 8 characters')
|
||||
.regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
|
||||
.regex(/[a-z]/, 'Password must contain at least one lowercase letter')
|
||||
.regex(/[0-9]/, 'Password must contain at least one number'),
|
||||
confirmPassword: z.string(),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords don't match",
|
||||
path: ['confirmPassword'],
|
||||
});
|
||||
|
||||
type ResetRequestData = z.infer<typeof resetRequestSchema>;
|
||||
type ResetConfirmData = z.infer<typeof resetConfirmSchema>;
|
||||
|
||||
interface PasswordResetFormProps {
|
||||
token?: string;
|
||||
uid?: string;
|
||||
onSuccess?: () => void;
|
||||
onBack?: () => void;
|
||||
}
|
||||
|
||||
export function PasswordResetForm({ token, uid, onSuccess, onBack }: PasswordResetFormProps) {
|
||||
const [error, setError] = useState<string>('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const {
|
||||
register: registerRequest,
|
||||
handleSubmit: handleSubmitRequest,
|
||||
formState: { errors: requestErrors },
|
||||
} = useForm<ResetRequestData>({
|
||||
resolver: zodResolver(resetRequestSchema),
|
||||
});
|
||||
|
||||
const {
|
||||
register: registerConfirm,
|
||||
handleSubmit: handleSubmitConfirm,
|
||||
formState: { errors: confirmErrors },
|
||||
} = useForm<ResetConfirmData>({
|
||||
resolver: zodResolver(resetConfirmSchema),
|
||||
});
|
||||
|
||||
const onSubmitRequest = async (data: ResetRequestData) => {
|
||||
setError('');
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await authService.requestPasswordReset(data.email);
|
||||
setSuccess(true);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Failed to send reset email');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmitConfirm = async (data: ResetConfirmData) => {
|
||||
if (!token || !uid) {
|
||||
setError('Invalid reset link');
|
||||
return;
|
||||
}
|
||||
|
||||
setError('');
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
await authService.confirmPasswordReset({
|
||||
uid,
|
||||
token,
|
||||
new_password: data.password,
|
||||
});
|
||||
setSuccess(true);
|
||||
setTimeout(() => {
|
||||
onSuccess?.();
|
||||
}, 2000);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Failed to reset password');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<div className="text-center space-y-4">
|
||||
<div className="mx-auto w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
|
||||
<CheckCircle2 className="h-6 w-6 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">
|
||||
{token ? 'Password Reset!' : 'Email Sent!'}
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
{token
|
||||
? 'Your password has been reset successfully. You can now log in with your new password.'
|
||||
: 'Check your email for a link to reset your password. If it doesn\'t appear within a few minutes, check your spam folder.'}
|
||||
</p>
|
||||
</div>
|
||||
{onBack && (
|
||||
<Button onClick={onBack} variant="outline">
|
||||
Back to Login
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Reset confirmation form (when token and uid are provided)
|
||||
if (token && uid) {
|
||||
return (
|
||||
<form onSubmit={handleSubmitConfirm(onSubmitConfirm)} className="space-y-4">
|
||||
<div className="text-center mb-4">
|
||||
<h3 className="text-lg font-semibold">Set New Password</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Enter your new password below
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">New Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
{...registerConfirm('password')}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{confirmErrors.password && (
|
||||
<p className="text-sm text-destructive">{confirmErrors.password.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm Password</Label>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
{...registerConfirm('confirmPassword')}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
{confirmErrors.confirmPassword && (
|
||||
<p className="text-sm text-destructive">{confirmErrors.confirmPassword.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Reset Password
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
// Reset request form (default)
|
||||
return (
|
||||
<form onSubmit={handleSubmitRequest(onSubmitRequest)} className="space-y-4">
|
||||
<div className="text-center mb-4">
|
||||
<h3 className="text-lg font-semibold">Reset Password</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Enter your email and we'll send you a link to reset your password
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
{...registerRequest('email')}
|
||||
disabled={isLoading}
|
||||
autoFocus
|
||||
/>
|
||||
{requestErrors.email && (
|
||||
<p className="text-sm text-destructive">{requestErrors.email.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isLoading}>
|
||||
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Send Reset Link
|
||||
</Button>
|
||||
|
||||
{onBack && (
|
||||
<div className="text-sm text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
disabled={isLoading}
|
||||
>
|
||||
Back to login
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user