aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/app/settings/password-form.tsx182
-rw-r--r--src/app/settings/profile-form.tsx115
-rw-r--r--src/app/settings/profile-image.tsx154
-rw-r--r--src/app/settings/settings-form.tsx430
4 files changed, 457 insertions, 424 deletions
diff --git a/src/app/settings/password-form.tsx b/src/app/settings/password-form.tsx
new file mode 100644
index 0000000..2377408
--- /dev/null
+++ b/src/app/settings/password-form.tsx
@@ -0,0 +1,182 @@
+"use client"
+
+import { useState } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Eye, EyeOff, Loader2, Lock, Save } 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 { passwordChangeSchema, type PasswordChangeInput } from "@/lib/validation"
+
+export function PasswordForm() {
+ const [showCurrentPassword, setShowCurrentPassword] = useState(false)
+ const [showNewPassword, setShowNewPassword] = useState(false)
+ const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+ const [isLoading, setIsLoading] = useState(false)
+
+ const form = useForm<PasswordChangeInput>({
+ resolver: zodResolver(passwordChangeSchema),
+ defaultValues: {
+ currentPassword: "",
+ newPassword: "",
+ confirmPassword: "",
+ },
+ })
+
+ const onSubmit = async (data: PasswordChangeInput) => {
+ 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!")
+ form.reset()
+ } catch {
+ toast.error("An unexpected error occurred")
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ return (
+ <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 {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+ <FormField
+ control={form.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={form.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={form.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>
+ )
+}
diff --git a/src/app/settings/profile-form.tsx b/src/app/settings/profile-form.tsx
new file mode 100644
index 0000000..6f532f0
--- /dev/null
+++ b/src/app/settings/profile-form.tsx
@@ -0,0 +1,115 @@
+"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 { toast } from "sonner"
+import { Session } from "next-auth"
+
+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 [isLoading, setIsLoading] = useState(false)
+
+ const form = useForm<UpdateProfileInput>({
+ resolver: zodResolver(updateProfileSchema),
+ defaultValues: {
+ name: user.name || "",
+ email: user.email || "",
+ },
+ })
+
+ const onSubmit = async (data: UpdateProfileInput) => {
+ 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
+ }
+
+ await update({
+ name: data.name,
+ email: data.email,
+ })
+
+ toast.success("Profile updated successfully!")
+ } catch {
+ toast.error("An unexpected error occurred")
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ 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={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>
+ )
+}
diff --git a/src/app/settings/profile-image.tsx b/src/app/settings/profile-image.tsx
new file mode 100644
index 0000000..7b4114d
--- /dev/null
+++ b/src/app/settings/profile-image.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { Loader2, Camera, Upload, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+import { Session } from "next-auth"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
+
+interface ProfileImageProps {
+ user: {
+ name?: string | null
+ image?: string | null
+ }
+ update: (data?: { name?: string | null; email?: string | null; image?: string | null }) => Promise<Session | null>
+}
+
+export function ProfileImage({ user, update }: ProfileImageProps) {
+ const fileInputRef = useRef<HTMLInputElement>(null)
+ const [isImageLoading, setIsImageLoading] = useState(false)
+ const [profileImageUrl, setProfileImageUrl] = useState<string | null>(user.image || null)
+
+ 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!')
+
+ await update({
+ image: result.profileImage.url
+ })
+ } catch {
+ toast.error('An unexpected error occurred')
+ } finally {
+ setIsImageLoading(false)
+ 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!')
+
+ await update({
+ image: null
+ })
+ } catch {
+ toast.error('An unexpected error occurred')
+ } finally {
+ setIsImageLoading(false)
+ }
+ }
+
+ return (
+ <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>
+ )
+}
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>
)
generated by cgit v1.3.1 (git 2.54.0) at 2026-05-30 16:21:28 +0000