diff options
Diffstat (limited to 'src/app/settings/settings-form.tsx')
| -rw-r--r-- | src/app/settings/settings-form.tsx | 430 |
1 files changed, 6 insertions, 424 deletions
diff --git a/src/app/settings/settings-form.tsx b/src/app/settings/settings-form.tsx index 2417919..477473d 100644 --- a/src/app/settings/settings-form.tsx +++ b/src/app/settings/settings-form.tsx @@ -1,30 +1,10 @@ "use client" -import { useState, useRef } from "react" import { useSession } from "next-auth/react" -import { zodResolver } from "@hookform/resolvers/zod" -import { useForm } from "react-hook-form" -import { z } from "zod" -import { Eye, EyeOff, Loader2, User, Lock, Save, Camera, Upload, Trash2 } from "lucide-react" -import { toast } from "sonner" - -import { Button } from "@/components/ui/button" -import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" -import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" -import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" -import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar" -import { updateProfileSchema, updatePasswordSchema, type UpdateProfileInput } from "@/lib/validation" - -const passwordChangeSchema = updatePasswordSchema.extend({ - confirmPassword: z.string() -}).refine((data) => data.newPassword === data.confirmPassword, { - message: "Passwords don't match", - path: ["confirmPassword"], -}) - -type ProfileFormData = UpdateProfileInput -type PasswordFormData = z.infer<typeof passwordChangeSchema> +import { ProfileForm } from "./profile-form" +import { ProfileImage } from "./profile-image" +import { PasswordForm } from "./password-form" interface SettingsFormProps { user: { @@ -36,163 +16,6 @@ interface SettingsFormProps { export function SettingsForm({ user }: SettingsFormProps) { const { update } = useSession() - const fileInputRef = useRef<HTMLInputElement>(null) - const [showCurrentPassword, setShowCurrentPassword] = useState(false) - const [showNewPassword, setShowNewPassword] = useState(false) - const [showConfirmPassword, setShowConfirmPassword] = useState(false) - const [isLoading, setIsLoading] = useState(false) - const [isImageLoading, setIsImageLoading] = useState(false) - const [profileImageUrl, setProfileImageUrl] = useState<string | null>(user.image || null) - - const profileForm = useForm<ProfileFormData>({ - resolver: zodResolver(updateProfileSchema), - defaultValues: { - name: user.name || "", - email: user.email || "", - }, - }) - - const passwordForm = useForm<PasswordFormData>({ - resolver: zodResolver(passwordChangeSchema), - defaultValues: { - currentPassword: "", - newPassword: "", - confirmPassword: "", - }, - }) - - const onProfileSubmit = async (data: ProfileFormData) => { - setIsLoading(true) - - try { - const response = await fetch("/api/user/profile", { - method: "PATCH", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(data), - }) - - const result = await response.json() - - if (!response.ok) { - toast.error(result.error || "Failed to update profile") - return - } - - // Update the session with new data - await update({ - name: data.name, - email: data.email, - }) - - toast.success("Profile updated successfully!") - - } catch { - toast.error("An unexpected error occurred") - } finally { - setIsLoading(false) - } - } - - const onPasswordSubmit = async (data: PasswordFormData) => { - setIsLoading(true) - - try { - const response = await fetch("/api/user/password", { - method: "PATCH", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - currentPassword: data.currentPassword, - newPassword: data.newPassword, - }), - }) - - const result = await response.json() - - if (!response.ok) { - toast.error(result.error || "Failed to update password") - return - } - - toast.success("Password updated successfully!") - passwordForm.reset() - - } catch { - toast.error("An unexpected error occurred") - } finally { - setIsLoading(false) - } - } - - const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => { - const file = event.target.files?.[0] - if (!file) return - - setIsImageLoading(true) - - try { - const formData = new FormData() - formData.append('image', file) - - const response = await fetch('/api/user/profile-image', { - method: 'POST', - body: formData, - }) - - const result = await response.json() - - if (!response.ok) { - toast.error(result.error || 'Failed to upload image') - return - } - - setProfileImageUrl(result.profileImage.url) - toast.success('Profile image uploaded successfully!') - - // Update session with new image - await update({ - image: result.profileImage.url - }) - - } catch { - toast.error('An unexpected error occurred') - } finally { - setIsImageLoading(false) - // Reset file input - if (fileInputRef.current) { - fileInputRef.current.value = '' - } - } - } - - const handleImageDelete = async () => { - setIsImageLoading(true) - - try { - const response = await fetch('/api/user/profile-image', { - method: 'DELETE', - }) - - const result = await response.json() - - if (!response.ok) { - toast.error(result.error || 'Failed to delete image') - return - } - - setProfileImageUrl(null) - toast.success('Profile image deleted successfully!') - - // Update session to remove image - await update({ - image: null - }) - - } catch { - toast.error('An unexpected error occurred') - } finally { - setIsImageLoading(false) - } - } return ( <div className="container mx-auto px-4 py-8 max-w-2xl"> @@ -204,252 +27,11 @@ export function SettingsForm({ user }: SettingsFormProps) { </p> </div> - {/* Profile Information */} - <Card> - <CardHeader> - <CardTitle className="flex items-center"> - <User className="mr-2 h-5 w-5" /> - Profile Information - </CardTitle> - <CardDescription> - Update your personal information - </CardDescription> - </CardHeader> - <CardContent> - <Form {...profileForm}> - <form onSubmit={profileForm.handleSubmit(onProfileSubmit)} className="space-y-4"> - <FormField - control={profileForm.control} - name="name" - render={({ field }) => ( - <FormItem> - <FormLabel>Full Name</FormLabel> - <FormControl> - <Input - placeholder="John Doe" - {...field} - /> - </FormControl> - <FormMessage /> - </FormItem> - )} - /> - <FormField - control={profileForm.control} - name="email" - render={({ field }) => ( - <FormItem> - <FormLabel>Email Address</FormLabel> - <FormControl> - <Input - type="email" - placeholder="john@example.com" - {...field} - /> - </FormControl> - <FormMessage /> - </FormItem> - )} - /> - <Button type="submit" disabled={isLoading}> - {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} - <Save className="mr-2 h-4 w-4" /> - Save Changes - </Button> - </form> - </Form> - </CardContent> - </Card> - + <ProfileForm user={user} update={update} /> <Separator /> - - {/* Profile Image */} - <Card> - <CardHeader> - <CardTitle className="flex items-center"> - <Camera className="mr-2 h-5 w-5" /> - Profile Image - </CardTitle> - <CardDescription> - Upload or update your profile picture - </CardDescription> - </CardHeader> - <CardContent> - <div className="flex items-center space-x-6"> - <Avatar className="h-24 w-24"> - <AvatarImage src={profileImageUrl || undefined} alt="Profile" /> - <AvatarFallback className="text-lg"> - {user.name?.charAt(0)?.toUpperCase() || 'U'} - </AvatarFallback> - </Avatar> - - <div className="flex-1 space-y-3"> - <div className="flex items-center space-x-3"> - <Button - onClick={() => fileInputRef.current?.click()} - disabled={isImageLoading} - variant="outline" - > - {isImageLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} - <Upload className="mr-2 h-4 w-4" /> - {profileImageUrl ? 'Change Image' : 'Upload Image'} - </Button> - - {profileImageUrl && ( - <Button - onClick={handleImageDelete} - disabled={isImageLoading} - variant="outline" - className="text-destructive hover:text-destructive" - > - {isImageLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} - <Trash2 className="mr-2 h-4 w-4" /> - Remove - </Button> - )} - </div> - - <p className="text-xs text-muted-foreground"> - Supported formats: JPEG, PNG, WebP, GIF. Maximum size: 10MB. - Images will be resized to 400x400 pixels. - </p> - - <input - ref={fileInputRef} - type="file" - accept="image/jpeg,image/jpg,image/png,image/webp,image/gif" - onChange={handleImageUpload} - className="hidden" - /> - </div> - </div> - </CardContent> - </Card> - + <ProfileImage user={user} update={update} /> <Separator /> - - {/* Password Change */} - <Card> - <CardHeader> - <CardTitle className="flex items-center"> - <Lock className="mr-2 h-5 w-5" /> - Change Password - </CardTitle> - <CardDescription> - Update your password to keep your account secure - </CardDescription> - </CardHeader> - <CardContent> - <Form {...passwordForm}> - <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)} className="space-y-4"> - <FormField - control={passwordForm.control} - name="currentPassword" - render={({ field }) => ( - <FormItem> - <FormLabel>Current Password</FormLabel> - <FormControl> - <div className="relative"> - <Input - type={showCurrentPassword ? "text" : "password"} - placeholder="Enter your current password" - {...field} - /> - <Button - type="button" - variant="ghost" - size="sm" - className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent" - onClick={() => setShowCurrentPassword(!showCurrentPassword)} - > - {showCurrentPassword ? ( - <EyeOff className="h-4 w-4" /> - ) : ( - <Eye className="h-4 w-4" /> - )} - </Button> - </div> - </FormControl> - <FormMessage /> - </FormItem> - )} - /> - <FormField - control={passwordForm.control} - name="newPassword" - render={({ field }) => ( - <FormItem> - <FormLabel>New Password</FormLabel> - <FormControl> - <div className="relative"> - <Input - type={showNewPassword ? "text" : "password"} - placeholder="Enter your new password" - {...field} - /> - <Button - type="button" - variant="ghost" - size="sm" - className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent" - onClick={() => setShowNewPassword(!showNewPassword)} - > - {showNewPassword ? ( - <EyeOff className="h-4 w-4" /> - ) : ( - <Eye className="h-4 w-4" /> - )} - </Button> - </div> - </FormControl> - <FormMessage /> - </FormItem> - )} - /> - <FormField - control={passwordForm.control} - name="confirmPassword" - render={({ field }) => ( - <FormItem> - <FormLabel>Confirm New Password</FormLabel> - <FormControl> - <div className="relative"> - <Input - type={showConfirmPassword ? "text" : "password"} - placeholder="Confirm your new password" - {...field} - /> - <Button - type="button" - variant="ghost" - size="sm" - className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent" - onClick={() => setShowConfirmPassword(!showConfirmPassword)} - > - {showConfirmPassword ? ( - <EyeOff className="h-4 w-4" /> - ) : ( - <Eye className="h-4 w-4" /> - )} - </Button> - </div> - </FormControl> - <FormMessage /> - </FormItem> - )} - /> - <div className="text-xs text-muted-foreground"> - Password must contain at least 8 characters with uppercase, lowercase, and a number. - </div> - <Button type="submit" disabled={isLoading}> - {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} - <Save className="mr-2 h-4 w-4" /> - Update Password - </Button> - </form> - </Form> - </CardContent> - </Card> + <PasswordForm /> </div> </div> ) |