1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
"use client"
import { useState } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Loader2, User, Save } from "lucide-react"
import { Session } from "next-auth"
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 { updateProfileSchema, type UpdateProfileInput } from "@/lib/validation"
interface ProfileFormProps {
user: {
name?: string | null
email?: string | null
}
update: (data?: { name?: string | null; email?: string | null; image?: string | null }) => Promise<Session | null>
}
export function ProfileForm({ user, update }: ProfileFormProps) {
const form = useForm<UpdateProfileInput>({
resolver: zodResolver(updateProfileSchema),
defaultValues: {
name: user.name || "",
email: user.email || "",
},
})
const onSubmit = async (data: UpdateProfileInput) => {
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
}
await update({
name: data.name,
email: data.email,
})
toast.success("Profile updated successfully!")
} catch {
toast.error("An unexpected error occurred")
}
}
return (
<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 {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Full Name</FormLabel>
<FormControl>
<Input placeholder="John Doe" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.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={form.formState.isSubmitting}>
{form.formState.isSubmitting && <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>
)
}
|
