121 lines
4.1 KiB
TypeScript
121 lines
4.1 KiB
TypeScript
import { redirect } from 'next/navigation'
|
|
import { getServerSession } from 'next-auth'
|
|
import { authOptions } from '@/pages/api/auth/[...nextauth]'
|
|
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 getServerSession(authOptions)
|
|
|
|
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>
|
|
)
|
|
}
|