From ba8c98a8dccb8b561747168b90ae769a105d37cf Mon Sep 17 00:00:00 2001 From: schererleander Date: Fri, 26 Dec 2025 16:07:58 +0100 Subject: refactor: implement server-side rendering for auth-dependent pages --- src/app/settings/page.tsx | 490 +------------------------------------ src/app/settings/settings-form.tsx | 456 ++++++++++++++++++++++++++++++++++ 2 files changed, 466 insertions(+), 480 deletions(-) create mode 100644 src/app/settings/settings-form.tsx (limited to 'src/app/settings') diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index 26e55d0..5d5fd92 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -1,491 +1,21 @@ -"use client" +import { redirect } from "next/navigation" +import { getServerSession } from "next-auth" -import { useState, useEffect, useRef } from "react" -import { useSession } from "next-auth/react" -import { useRouter } from "next/navigation" -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 Navbar from "@/components/Navbar" -import { updateProfileSchema, updatePasswordSchema, type UpdateProfileInput } from "@/lib/validation" - -// Form schema for password change with confirmation -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 - -export default function SettingsPage() { - const { data: session, status, update } = useSession() - const router = useRouter() - const fileInputRef = useRef(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(null) - - const profileForm = useForm({ - resolver: zodResolver(updateProfileSchema), - defaultValues: { - name: "", - email: "", - }, - }) - - const passwordForm = useForm({ - resolver: zodResolver(passwordChangeSchema), - defaultValues: { - currentPassword: "", - newPassword: "", - confirmPassword: "", - }, - }) - - // Redirect if not authenticated - useEffect(() => { - if (status === "unauthenticated") { - router.push("/login") - } - }, [status, router]) - - // Set form values when session is loaded - useEffect(() => { - if (session?.user) { - profileForm.reset({ - name: session.user.name || "", - email: session.user.email || "", - }) - setProfileImageUrl(session.user.image || null) - } - }, [session, profileForm]) - - 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 - } +import { authOptions } from "@/lib/auth" +import { SettingsForm } from "@/app/settings/settings-form" - // Update the session with new data - await update({ - name: data.name, - email: data.email, - }) +export default async function SettingsPage() { + const session = await getServerSession(authOptions) - 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) => { - 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) - } - } - - if (status === "loading") { - return ( -
-
-
-

Loading...

-
-
- ) - } - - if (!session) { - return null + if (!session?.user) { + redirect("/login") } return (
- -
-
-
-

Account Settings

-

- Manage your account information and security settings -

-
- - - - {/* Profile Information */} - - - - - Profile Information - - - Update your personal information - - - -
- - ( - - Full Name - - - - - - )} - /> - ( - - Email Address - - - - - - )} - /> - - - -
- - - - - {/* Profile Image */} - - - - - Profile Image - - - Upload or update your profile picture - - - -
- - - - {session?.user?.name?.charAt(0)?.toUpperCase() || 'U'} - - - -
-
- - - {profileImageUrl && ( - - )} -
- -

- Supported formats: JPEG, PNG, WebP, GIF. Maximum size: 10MB. - Images will be resized to 400x400 pixels. -

- - -
-
- - - - - - {/* Password Change */} - - - - - Change Password - - - Update your password to keep your account secure - - - -
- - ( - - Current Password - -
- - -
- - - - )} - /> - ( - - New Password - -
- - -
- - - - )} - /> - ( - - Confirm New Password - -
- - -
- - - - )} - /> -
- Password must contain at least 8 characters with uppercase, lowercase, and a number. -
- - - -
- -
-
+
) -} \ No newline at end of file +} diff --git a/src/app/settings/settings-form.tsx b/src/app/settings/settings-form.tsx new file mode 100644 index 0000000..2417919 --- /dev/null +++ b/src/app/settings/settings-form.tsx @@ -0,0 +1,456 @@ +"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 + +interface SettingsFormProps { + user: { + name?: string | null + email?: string | null + image?: string | null + } +} + +export function SettingsForm({ user }: SettingsFormProps) { + const { update } = useSession() + const fileInputRef = useRef(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(user.image || null) + + const profileForm = useForm({ + resolver: zodResolver(updateProfileSchema), + defaultValues: { + name: user.name || "", + email: user.email || "", + }, + }) + + const passwordForm = useForm({ + 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) => { + 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 ( +
+
+
+

Account Settings

+

+ Manage your account information and security settings +

+
+ + {/* Profile Information */} + + + + + Profile Information + + + Update your personal information + + + +
+ + ( + + Full Name + + + + + + )} + /> + ( + + Email Address + + + + + + )} + /> + + + +
+ + + + + {/* Profile Image */} + + + + + Profile Image + + + Upload or update your profile picture + + + +
+ + + + {user.name?.charAt(0)?.toUpperCase() || 'U'} + + + +
+
+ + + {profileImageUrl && ( + + )} +
+ +

+ Supported formats: JPEG, PNG, WebP, GIF. Maximum size: 10MB. + Images will be resized to 400x400 pixels. +

+ + +
+
+ + + + + + {/* Password Change */} + + + + + Change Password + + + Update your password to keep your account secure + + + +
+ + ( + + Current Password + +
+ + +
+ + + + )} + /> + ( + + New Password + +
+ + +
+ + + + )} + /> + ( + + Confirm New Password + +
+ + +
+ + + + )} + /> +
+ Password must contain at least 8 characters with uppercase, lowercase, and a number. +
+ + + +
+ +
+
+ ) +} -- cgit v1.3.1