Implement profile management (task 14)
- Add updateProfile and updatePassword server actions - Add getUserProfile function with sensitive data protection - Create ProfileForm component for name and email updates - Create PasswordChangeForm component with current password verification - Create profile page at /profile with all profile management features - Add profile and invitations navigation links to main page - Implement email uniqueness validation - Implement password hashing on password change Requirements: 7.1, 7.2, 7.3, 7.4, 7.5
This commit is contained in:
@@ -200,7 +200,7 @@
|
|||||||
- **Property 24: Permission update enforcement**
|
- **Property 24: Permission update enforcement**
|
||||||
- **Validates: Requirements 6.5**
|
- **Validates: Requirements 6.5**
|
||||||
|
|
||||||
- [ ] 13. Create sharing UI components
|
- [x] 13. Create sharing UI components
|
||||||
- Build InvitationCard component
|
- Build InvitationCard component
|
||||||
- Build CollaboratorList component
|
- Build CollaboratorList component
|
||||||
- Build ShareListModal component
|
- Build ShareListModal component
|
||||||
@@ -208,7 +208,7 @@
|
|||||||
- Add invitations page
|
- Add invitations page
|
||||||
- _Requirements: 5.1, 5.4, 8.1, 8.2_
|
- _Requirements: 5.1, 5.4, 8.1, 8.2_
|
||||||
|
|
||||||
- [ ] 14. Implement profile management
|
- [-] 14. Implement profile management
|
||||||
- Create profile page and ProfileForm component
|
- Create profile page and ProfileForm component
|
||||||
- Implement updateProfile server action
|
- Implement updateProfile server action
|
||||||
- Create PasswordChangeForm component
|
- Create PasswordChangeForm component
|
||||||
|
|||||||
23
app/page.tsx
23
app/page.tsx
@@ -3,17 +3,38 @@ import ListCard from '@/components/ListCard'
|
|||||||
import NewListButton from '@/components/NewListButton'
|
import NewListButton from '@/components/NewListButton'
|
||||||
import GlobalSearch from '@/components/GlobalSearch'
|
import GlobalSearch from '@/components/GlobalSearch'
|
||||||
import EmptyState from '@/components/EmptyState'
|
import EmptyState from '@/components/EmptyState'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { auth } from '@/auth'
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic'
|
export const dynamic = 'force-dynamic'
|
||||||
|
|
||||||
export default async function Home() {
|
export default async function Home() {
|
||||||
const lists = await getLists()
|
const lists = await getLists()
|
||||||
|
const session = await auth()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
|
<main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
|
||||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
|
||||||
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900">Ultimate Lists</h1>
|
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900">Ultimate Lists</h1>
|
||||||
<NewListButton />
|
<div className="flex items-center gap-3">
|
||||||
|
{session?.user && (
|
||||||
|
<>
|
||||||
|
<Link
|
||||||
|
href="/invitations"
|
||||||
|
className="px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
Invitations
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/profile"
|
||||||
|
className="px-3 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
Profile
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<NewListButton />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Global Search */}
|
{/* Global Search */}
|
||||||
|
|||||||
119
app/profile/page.tsx
Normal file
119
app/profile/page.tsx
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
import { redirect } from 'next/navigation'
|
||||||
|
import { auth } from '@/auth'
|
||||||
|
import { getUserProfile } from '@/lib/auth-actions'
|
||||||
|
import ProfileForm from '@/components/ProfileForm'
|
||||||
|
import PasswordChangeForm from '@/components/PasswordChangeForm'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: 'Profile - Ultimate Lists',
|
||||||
|
description: 'Manage your profile and account settings',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function ProfilePage() {
|
||||||
|
const session = await auth()
|
||||||
|
|
||||||
|
if (!session?.user?.id) {
|
||||||
|
redirect('/auth/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
const userProfile = await getUserProfile(session.user.id)
|
||||||
|
|
||||||
|
if (!userProfile) {
|
||||||
|
redirect('/auth/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 px-4 py-8">
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
className="inline-flex items-center text-sm text-gray-600 hover:text-gray-900 mb-4"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-4 h-4 mr-1"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M15 19l-7-7 7-7"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Back to Lists
|
||||||
|
</Link>
|
||||||
|
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900">
|
||||||
|
Profile Settings
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm sm:text-base text-gray-600 mt-2">
|
||||||
|
Manage your account information and security settings
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profile Information Section */}
|
||||||
|
<div className="bg-white rounded-xl shadow-md p-6 sm:p-8 mb-6">
|
||||||
|
<h2 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-4">
|
||||||
|
Profile Information
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-gray-600 mb-6">
|
||||||
|
Update your name and email address
|
||||||
|
</p>
|
||||||
|
<ProfileForm
|
||||||
|
initialName={userProfile.name}
|
||||||
|
initialEmail={userProfile.email}
|
||||||
|
userId={userProfile.id}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Password Section */}
|
||||||
|
<div className="bg-white rounded-xl shadow-md p-6 sm:p-8 mb-6">
|
||||||
|
<h2 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-4">
|
||||||
|
Change Password
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-gray-600 mb-6">
|
||||||
|
Update your password to keep your account secure
|
||||||
|
</p>
|
||||||
|
<PasswordChangeForm userId={userProfile.id} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Account Information */}
|
||||||
|
<div className="bg-white rounded-xl shadow-md p-6 sm:p-8">
|
||||||
|
<h2 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-4">
|
||||||
|
Account Information
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3 text-sm">
|
||||||
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
|
<span className="text-gray-600">Account ID</span>
|
||||||
|
<span className="text-gray-900 font-mono text-xs">{userProfile.id}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2 border-b border-gray-100">
|
||||||
|
<span className="text-gray-600">Member Since</span>
|
||||||
|
<span className="text-gray-900">
|
||||||
|
{new Date(userProfile.createdAt).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between py-2">
|
||||||
|
<span className="text-gray-600">Last Updated</span>
|
||||||
|
<span className="text-gray-900">
|
||||||
|
{new Date(userProfile.updatedAt).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric',
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
245
components/PasswordChangeForm.tsx
Normal file
245
components/PasswordChangeForm.tsx
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { validatePassword } from '@/lib/validation'
|
||||||
|
import { updatePassword } from '@/lib/auth-actions'
|
||||||
|
import { useToast } from './ToastContainer'
|
||||||
|
|
||||||
|
interface PasswordChangeFormProps {
|
||||||
|
userId: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PasswordChangeForm({ userId }: PasswordChangeFormProps) {
|
||||||
|
const { showToast } = useToast()
|
||||||
|
const [currentPassword, setCurrentPassword] = useState('')
|
||||||
|
const [newPassword, setNewPassword] = useState('')
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState('')
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
|
const [errors, setErrors] = useState<{
|
||||||
|
currentPassword?: string
|
||||||
|
newPassword?: string
|
||||||
|
confirmPassword?: string
|
||||||
|
}>({})
|
||||||
|
const [touched, setTouched] = useState<{
|
||||||
|
currentPassword: boolean
|
||||||
|
newPassword: boolean
|
||||||
|
confirmPassword: boolean
|
||||||
|
}>({
|
||||||
|
currentPassword: false,
|
||||||
|
newPassword: false,
|
||||||
|
confirmPassword: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Inline validation when fields change
|
||||||
|
useEffect(() => {
|
||||||
|
if (touched.currentPassword) {
|
||||||
|
if (!currentPassword) {
|
||||||
|
setErrors((prev) => ({ ...prev, currentPassword: 'Current password is required' }))
|
||||||
|
} else {
|
||||||
|
setErrors((prev) => ({ ...prev, currentPassword: undefined }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [currentPassword, touched.currentPassword])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (touched.newPassword) {
|
||||||
|
const result = validatePassword(newPassword)
|
||||||
|
setErrors((prev) => ({
|
||||||
|
...prev,
|
||||||
|
newPassword: result.isValid ? undefined : result.error,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}, [newPassword, touched.newPassword])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (touched.confirmPassword) {
|
||||||
|
if (!confirmPassword) {
|
||||||
|
setErrors((prev) => ({ ...prev, confirmPassword: 'Please confirm your new password' }))
|
||||||
|
} else if (newPassword !== confirmPassword) {
|
||||||
|
setErrors((prev) => ({ ...prev, confirmPassword: 'Passwords do not match' }))
|
||||||
|
} else {
|
||||||
|
setErrors((prev) => ({ ...prev, confirmPassword: undefined }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [confirmPassword, newPassword, touched.confirmPassword])
|
||||||
|
|
||||||
|
const handleCurrentPasswordBlur = () => {
|
||||||
|
setTouched((prev) => ({ ...prev, currentPassword: true }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleNewPasswordBlur = () => {
|
||||||
|
setTouched((prev) => ({ ...prev, newPassword: true }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleConfirmPasswordBlur = () => {
|
||||||
|
setTouched((prev) => ({ ...prev, confirmPassword: true }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
// Validate all fields before submission
|
||||||
|
const newPasswordResult = validatePassword(newPassword)
|
||||||
|
|
||||||
|
const newErrors: {
|
||||||
|
currentPassword?: string
|
||||||
|
newPassword?: string
|
||||||
|
confirmPassword?: string
|
||||||
|
} = {}
|
||||||
|
|
||||||
|
if (!currentPassword) {
|
||||||
|
newErrors.currentPassword = 'Current password is required'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!newPasswordResult.isValid) {
|
||||||
|
newErrors.newPassword = newPasswordResult.error
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!confirmPassword) {
|
||||||
|
newErrors.confirmPassword = 'Please confirm your new password'
|
||||||
|
} else if (newPassword !== confirmPassword) {
|
||||||
|
newErrors.confirmPassword = 'Passwords do not match'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentPassword === newPassword) {
|
||||||
|
newErrors.newPassword = 'New password must be different from current password'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Object.keys(newErrors).length > 0) {
|
||||||
|
setErrors(newErrors)
|
||||||
|
setTouched({ currentPassword: true, newPassword: true, confirmPassword: true })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSubmitting(true)
|
||||||
|
setErrors({})
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await updatePassword(userId, currentPassword, newPassword)
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
if (result.error === 'Current password is incorrect') {
|
||||||
|
setErrors({ currentPassword: 'Current password is incorrect' })
|
||||||
|
showToast('Current password is incorrect', 'error')
|
||||||
|
} else {
|
||||||
|
showToast(result.error || 'Password update failed', 'error')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
showToast('Password updated successfully', 'success')
|
||||||
|
// Reset form
|
||||||
|
setCurrentPassword('')
|
||||||
|
setNewPassword('')
|
||||||
|
setConfirmPassword('')
|
||||||
|
setTouched({ currentPassword: false, newPassword: false, confirmPassword: false })
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Password update error:', err)
|
||||||
|
showToast('An error occurred. Please try again.', 'error')
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="currentPassword" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Current Password *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="currentPassword"
|
||||||
|
value={currentPassword}
|
||||||
|
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||||
|
onBlur={handleCurrentPasswordBlur}
|
||||||
|
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
|
||||||
|
errors.currentPassword && touched.currentPassword
|
||||||
|
? 'border-red-500 focus:ring-red-500'
|
||||||
|
: 'border-gray-300 focus:ring-blue-500'
|
||||||
|
}`}
|
||||||
|
placeholder="Enter your current password"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
autoComplete="current-password"
|
||||||
|
aria-invalid={errors.currentPassword && touched.currentPassword ? 'true' : 'false'}
|
||||||
|
aria-describedby={errors.currentPassword && touched.currentPassword ? 'current-password-error' : undefined}
|
||||||
|
/>
|
||||||
|
{errors.currentPassword && touched.currentPassword && (
|
||||||
|
<p id="current-password-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
|
||||||
|
{errors.currentPassword}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
New Password *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="newPassword"
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => setNewPassword(e.target.value)}
|
||||||
|
onBlur={handleNewPasswordBlur}
|
||||||
|
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
|
||||||
|
errors.newPassword && touched.newPassword
|
||||||
|
? 'border-red-500 focus:ring-red-500'
|
||||||
|
: 'border-gray-300 focus:ring-blue-500'
|
||||||
|
}`}
|
||||||
|
placeholder="At least 8 characters"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
autoComplete="new-password"
|
||||||
|
aria-invalid={errors.newPassword && touched.newPassword ? 'true' : 'false'}
|
||||||
|
aria-describedby={errors.newPassword && touched.newPassword ? 'new-password-error' : undefined}
|
||||||
|
/>
|
||||||
|
{errors.newPassword && touched.newPassword && (
|
||||||
|
<p id="new-password-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
|
||||||
|
{errors.newPassword}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{!errors.newPassword && touched.newPassword && (
|
||||||
|
<p className="mt-1.5 text-xs sm:text-sm text-gray-500">
|
||||||
|
Password must be at least 8 characters
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Confirm New Password *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="confirmPassword"
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||||
|
onBlur={handleConfirmPasswordBlur}
|
||||||
|
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
|
||||||
|
errors.confirmPassword && touched.confirmPassword
|
||||||
|
? 'border-red-500 focus:ring-red-500'
|
||||||
|
: 'border-gray-300 focus:ring-blue-500'
|
||||||
|
}`}
|
||||||
|
placeholder="Re-enter your new password"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
autoComplete="new-password"
|
||||||
|
aria-invalid={errors.confirmPassword && touched.confirmPassword ? 'true' : 'false'}
|
||||||
|
aria-describedby={
|
||||||
|
errors.confirmPassword && touched.confirmPassword ? 'confirm-password-error' : undefined
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{errors.confirmPassword && touched.confirmPassword && (
|
||||||
|
<p id="confirm-password-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
|
||||||
|
{errors.confirmPassword}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
className="w-full px-4 sm:px-5 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed tap-target font-medium text-sm sm:text-base"
|
||||||
|
>
|
||||||
|
{isSubmitting ? 'Updating...' : 'Update Password'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
203
components/ProfileForm.tsx
Normal file
203
components/ProfileForm.tsx
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { validateEmail, sanitizeString } from '@/lib/validation'
|
||||||
|
import { updateProfile } from '@/lib/auth-actions'
|
||||||
|
import { useToast } from './ToastContainer'
|
||||||
|
|
||||||
|
interface ProfileFormProps {
|
||||||
|
initialName: string | null
|
||||||
|
initialEmail: string
|
||||||
|
userId: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProfileForm({ initialName, initialEmail, userId }: ProfileFormProps) {
|
||||||
|
const { showToast } = useToast()
|
||||||
|
const [name, setName] = useState(initialName || '')
|
||||||
|
const [email, setEmail] = useState(initialEmail)
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
|
const [errors, setErrors] = useState<{
|
||||||
|
name?: string
|
||||||
|
email?: string
|
||||||
|
}>({})
|
||||||
|
const [touched, setTouched] = useState<{
|
||||||
|
name: boolean
|
||||||
|
email: boolean
|
||||||
|
}>({
|
||||||
|
name: false,
|
||||||
|
email: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Check if form has changes
|
||||||
|
const hasChanges = name !== (initialName || '') || email !== initialEmail
|
||||||
|
|
||||||
|
// Inline validation when fields change
|
||||||
|
useEffect(() => {
|
||||||
|
if (touched.name) {
|
||||||
|
const sanitized = sanitizeString(name)
|
||||||
|
if (!sanitized) {
|
||||||
|
setErrors((prev) => ({ ...prev, name: 'Name is required' }))
|
||||||
|
} else if (sanitized.length > 100) {
|
||||||
|
setErrors((prev) => ({ ...prev, name: 'Name must be less than 100 characters' }))
|
||||||
|
} else {
|
||||||
|
setErrors((prev) => ({ ...prev, name: undefined }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [name, touched.name])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (touched.email) {
|
||||||
|
const result = validateEmail(email)
|
||||||
|
setErrors((prev) => ({
|
||||||
|
...prev,
|
||||||
|
email: result.isValid ? undefined : result.error,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}, [email, touched.email])
|
||||||
|
|
||||||
|
const handleNameBlur = () => {
|
||||||
|
setTouched((prev) => ({ ...prev, name: true }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEmailBlur = () => {
|
||||||
|
setTouched((prev) => ({ ...prev, email: true }))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
// Validate all fields before submission
|
||||||
|
const sanitizedName = sanitizeString(name)
|
||||||
|
const emailResult = validateEmail(email)
|
||||||
|
|
||||||
|
const newErrors: {
|
||||||
|
name?: string
|
||||||
|
email?: string
|
||||||
|
} = {}
|
||||||
|
|
||||||
|
if (!sanitizedName) {
|
||||||
|
newErrors.name = 'Name is required'
|
||||||
|
} else if (sanitizedName.length > 100) {
|
||||||
|
newErrors.name = 'Name must be less than 100 characters'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!emailResult.isValid) {
|
||||||
|
newErrors.email = emailResult.error
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Object.keys(newErrors).length > 0) {
|
||||||
|
setErrors(newErrors)
|
||||||
|
setTouched({ name: true, email: true })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasChanges) {
|
||||||
|
showToast('No changes to save', 'info')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSubmitting(true)
|
||||||
|
setErrors({})
|
||||||
|
|
||||||
|
try {
|
||||||
|
const updateData: { name?: string; email?: string } = {}
|
||||||
|
|
||||||
|
if (name !== (initialName || '')) {
|
||||||
|
updateData.name = sanitizedName
|
||||||
|
}
|
||||||
|
|
||||||
|
if (email !== initialEmail) {
|
||||||
|
updateData.email = email.trim()
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await updateProfile(userId, updateData)
|
||||||
|
|
||||||
|
if (!result.success) {
|
||||||
|
if (result.error === 'Email already in use') {
|
||||||
|
setErrors({ email: 'This email is already in use' })
|
||||||
|
showToast('Email already in use', 'error')
|
||||||
|
} else {
|
||||||
|
showToast(result.error || 'Profile update failed', 'error')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
showToast('Profile updated successfully', 'success')
|
||||||
|
// Refresh the page to update the session
|
||||||
|
window.location.reload()
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Profile update error:', err)
|
||||||
|
showToast('An error occurred. Please try again.', 'error')
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
onBlur={handleNameBlur}
|
||||||
|
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
|
||||||
|
errors.name && touched.name
|
||||||
|
? 'border-red-500 focus:ring-red-500'
|
||||||
|
: 'border-gray-300 focus:ring-blue-500'
|
||||||
|
}`}
|
||||||
|
placeholder="Enter your name"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
autoComplete="name"
|
||||||
|
maxLength={100}
|
||||||
|
aria-invalid={errors.name && touched.name ? 'true' : 'false'}
|
||||||
|
aria-describedby={errors.name && touched.name ? 'name-error' : undefined}
|
||||||
|
/>
|
||||||
|
{errors.name && touched.name && (
|
||||||
|
<p id="name-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
|
||||||
|
{errors.name}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Email *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
onBlur={handleEmailBlur}
|
||||||
|
className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 text-sm sm:text-base ${
|
||||||
|
errors.email && touched.email
|
||||||
|
? 'border-red-500 focus:ring-red-500'
|
||||||
|
: 'border-gray-300 focus:ring-blue-500'
|
||||||
|
}`}
|
||||||
|
placeholder="Enter your email"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
autoComplete="email"
|
||||||
|
aria-invalid={errors.email && touched.email ? 'true' : 'false'}
|
||||||
|
aria-describedby={errors.email && touched.email ? 'email-error' : undefined}
|
||||||
|
/>
|
||||||
|
{errors.email && touched.email && (
|
||||||
|
<p id="email-error" className="mt-1.5 text-xs sm:text-sm text-red-600">
|
||||||
|
{errors.email}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting || !hasChanges}
|
||||||
|
className="w-full px-4 sm:px-5 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed tap-target font-medium text-sm sm:text-base"
|
||||||
|
>
|
||||||
|
{isSubmitting ? 'Saving...' : 'Save Changes'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -173,3 +173,157 @@ export async function isAuthenticated(): Promise<boolean> {
|
|||||||
const session = await getCurrentSession()
|
const session = await getCurrentSession()
|
||||||
return !!session?.user
|
return !!session?.user
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Profile management schemas
|
||||||
|
const updateProfileSchema = z.object({
|
||||||
|
name: z.string().min(1, { message: 'Name is required' }).max(100, { message: 'Name must be less than 100 characters' }).optional(),
|
||||||
|
email: z.string().email({ message: 'Invalid email address' }).optional(),
|
||||||
|
})
|
||||||
|
|
||||||
|
const updatePasswordSchema = z.object({
|
||||||
|
currentPassword: z.string().min(1, { message: 'Current password is required' }),
|
||||||
|
newPassword: z.string().min(8, { message: 'New password must be at least 8 characters' }),
|
||||||
|
})
|
||||||
|
|
||||||
|
export type UpdateProfileResult =
|
||||||
|
| { success: true }
|
||||||
|
| { success: false; error: string }
|
||||||
|
|
||||||
|
export type UpdatePasswordResult =
|
||||||
|
| { success: true }
|
||||||
|
| { success: false; error: string }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update user profile information
|
||||||
|
* Requirements: 7.1, 7.4, 7.5
|
||||||
|
*/
|
||||||
|
export async function updateProfile(
|
||||||
|
userId: string,
|
||||||
|
data: { name?: string; email?: string }
|
||||||
|
): Promise<UpdateProfileResult> {
|
||||||
|
try {
|
||||||
|
// Validate input
|
||||||
|
const validation = updateProfileSchema.safeParse(data)
|
||||||
|
|
||||||
|
if (!validation.success) {
|
||||||
|
const errors = validation.error.issues.map((issue) => issue.message).join(', ')
|
||||||
|
return { success: false, error: errors }
|
||||||
|
}
|
||||||
|
|
||||||
|
const { name, email } = validation.data
|
||||||
|
|
||||||
|
// Check if there's anything to update
|
||||||
|
if (!name && !email) {
|
||||||
|
return { success: false, error: 'No data to update' }
|
||||||
|
}
|
||||||
|
|
||||||
|
// If email is being updated, check uniqueness (Requirement 7.4)
|
||||||
|
if (email) {
|
||||||
|
const existingUser = await prisma.user.findUnique({
|
||||||
|
where: { email },
|
||||||
|
})
|
||||||
|
|
||||||
|
// Check if email is already in use by another user
|
||||||
|
if (existingUser && existingUser.id !== userId) {
|
||||||
|
return { success: false, error: 'Email already in use' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update user profile (Requirement 7.1)
|
||||||
|
await prisma.user.update({
|
||||||
|
where: { id: userId },
|
||||||
|
data: {
|
||||||
|
...(name !== undefined && { name }),
|
||||||
|
...(email !== undefined && { email }),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return { success: true }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Profile update error:', error)
|
||||||
|
|
||||||
|
// Handle unique constraint violation
|
||||||
|
if (error instanceof Error && error.message.includes('Unique constraint')) {
|
||||||
|
return { success: false, error: 'Email already in use' }
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: false, error: 'Profile update failed. Please try again.' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update user password
|
||||||
|
* Requirements: 7.2, 7.3
|
||||||
|
*/
|
||||||
|
export async function updatePassword(
|
||||||
|
userId: string,
|
||||||
|
currentPassword: string,
|
||||||
|
newPassword: string
|
||||||
|
): Promise<UpdatePasswordResult> {
|
||||||
|
try {
|
||||||
|
// Validate input
|
||||||
|
const validation = updatePasswordSchema.safeParse({ currentPassword, newPassword })
|
||||||
|
|
||||||
|
if (!validation.success) {
|
||||||
|
const errors = validation.error.issues.map((issue) => issue.message).join(', ')
|
||||||
|
return { success: false, error: errors }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get user from database
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { id: userId },
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!user || !user.passwordHash) {
|
||||||
|
return { success: false, error: 'User not found' }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verify current password (Requirement 7.2)
|
||||||
|
const isCurrentPasswordValid = await bcrypt.compare(currentPassword, user.passwordHash)
|
||||||
|
|
||||||
|
if (!isCurrentPasswordValid) {
|
||||||
|
return { success: false, error: 'Current password is incorrect' }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hash new password (Requirement 7.3)
|
||||||
|
const newPasswordHash = await bcrypt.hash(newPassword, 10)
|
||||||
|
|
||||||
|
// Update password
|
||||||
|
await prisma.user.update({
|
||||||
|
where: { id: userId },
|
||||||
|
data: {
|
||||||
|
passwordHash: newPasswordHash,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return { success: true }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Password update error:', error)
|
||||||
|
return { success: false, error: 'Password update failed. Please try again.' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get user profile (without sensitive data)
|
||||||
|
* Requirement: 7.5 - Profile data exposure protection
|
||||||
|
*/
|
||||||
|
export async function getUserProfile(userId: string) {
|
||||||
|
try {
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { id: userId },
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
email: true,
|
||||||
|
name: true,
|
||||||
|
createdAt: true,
|
||||||
|
updatedAt: true,
|
||||||
|
// Explicitly exclude passwordHash (Requirement 7.5)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return user
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Get user profile error:', error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user