361 lines
13 KiB
TypeScript
361 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState, useRef } from "react";
|
||
import { getPasswordRequirements, PasswordRequirement } from "../../../lib/auth/validation";
|
||
|
||
export default function SettingsClient() {
|
||
const [currentPassword, setCurrentPassword] = useState("");
|
||
const [newPassword, setNewPassword] = useState("");
|
||
const [confirmPassword, setConfirmPassword] = useState("");
|
||
const [msg, setMsg] = useState<string | null>(null);
|
||
const [uploading, setUploading] = useState(false);
|
||
const [passwordRequirements, setPasswordRequirements] = useState<PasswordRequirement[]>([]);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const getMinDate = (): string => {
|
||
const date = new Date();
|
||
date.setFullYear(date.getFullYear() - 100);
|
||
return date.toISOString().split('T')[0];
|
||
};
|
||
|
||
const getMaxDate = (): string => {
|
||
const date = new Date();
|
||
date.setFullYear(date.getFullYear() - 18);
|
||
return date.toISOString().split('T')[0];
|
||
};
|
||
|
||
const [profile, setProfile] = useState({
|
||
firstName: "",
|
||
lastName: "",
|
||
gender: "",
|
||
dob: "",
|
||
address: "",
|
||
avatarUrl: "",
|
||
email: "",
|
||
});
|
||
|
||
useEffect(() => {
|
||
fetch("/api/account/profile")
|
||
.then((r) => r.json())
|
||
.then((d) => d.ok && setProfile(d.profile))
|
||
.catch(() => null);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
setPasswordRequirements(getPasswordRequirements(newPassword));
|
||
}, [newPassword]);
|
||
|
||
async function submit() {
|
||
setMsg(null);
|
||
|
||
// Client-side validation
|
||
if (!currentPassword.trim()) {
|
||
setMsg("Current password is required");
|
||
return;
|
||
}
|
||
|
||
// Validate new password meets all requirements
|
||
const unmetRequirements = passwordRequirements.filter(req => !req.met);
|
||
if (unmetRequirements.length > 0) {
|
||
const messages = unmetRequirements.map(req => req.name).join(", ");
|
||
setMsg(`Password requirements not met: ${messages}`);
|
||
return;
|
||
}
|
||
|
||
if (newPassword !== confirmPassword) {
|
||
setMsg("Passwords do not match");
|
||
return;
|
||
}
|
||
|
||
const res = await fetch("/api/auth/change-password", {
|
||
method: "POST",
|
||
headers: { "content-type": "application/json" },
|
||
body: JSON.stringify({ currentPassword, newPassword, confirmPassword }),
|
||
});
|
||
const data = await res.json();
|
||
if (data.ok) {
|
||
setCurrentPassword("");
|
||
setNewPassword("");
|
||
setConfirmPassword("");
|
||
}
|
||
setMsg(data.ok ? "✅ Password updated." : data.message);
|
||
}
|
||
|
||
async function saveProfile() {
|
||
setMsg(null);
|
||
const res = await fetch("/api/account/profile", {
|
||
method: "POST",
|
||
headers: { "content-type": "application/json" },
|
||
body: JSON.stringify(profile),
|
||
});
|
||
const data = await res.json();
|
||
setMsg(data.ok ? "✅ Profile updated." : data.message);
|
||
|
||
// Reload profile data to show updated avatar
|
||
if (data.ok) {
|
||
const profileRes = await fetch("/api/account/profile");
|
||
const profileData = await profileRes.json();
|
||
if (profileData.ok) {
|
||
setProfile(profileData.profile);
|
||
}
|
||
// Trigger navbar refresh by dispatching custom event
|
||
window.dispatchEvent(new Event('profile-updated'));
|
||
}
|
||
}
|
||
|
||
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||
const file = e.target.files?.[0];
|
||
if (!file) return;
|
||
|
||
// Validate file type
|
||
if (!file.type.startsWith("image/")) {
|
||
setMsg("Please select an image file");
|
||
return;
|
||
}
|
||
|
||
// Validate file size (max 5MB)
|
||
if (file.size > 5 * 1024 * 1024) {
|
||
setMsg("Image size must be less than 5MB");
|
||
return;
|
||
}
|
||
|
||
setUploading(true);
|
||
setMsg(null);
|
||
|
||
// Convert to base64
|
||
const reader = new FileReader();
|
||
reader.onloadend = () => {
|
||
const base64 = reader.result as string;
|
||
setProfile({ ...profile, avatarUrl: base64 });
|
||
setUploading(false);
|
||
setMsg("✅ Image loaded. Click 'Save Profile' to update.");
|
||
};
|
||
reader.onerror = () => {
|
||
setUploading(false);
|
||
setMsg("Failed to read image file");
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-8">
|
||
<div className="card border border-slate-200/60 dark:border-slate-700/60 shadow-lg">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="h-10 w-10 rounded-xl bg-gradient-to-br from-primary to-secondary text-white flex items-center justify-center shadow-md">
|
||
👤
|
||
</div>
|
||
<div>
|
||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">Profile Information</h2>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">Update your personal details</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
{/* Profile Photo Section */}
|
||
<div className="flex items-center gap-6 p-5 rounded-2xl bg-gradient-to-r from-primary/5 to-secondary/5 border border-primary/10">
|
||
<div className="relative">
|
||
{profile.avatarUrl ? (
|
||
// eslint-disable-next-line @next/next/no-img-element
|
||
<img
|
||
src={profile.avatarUrl}
|
||
alt="Profile"
|
||
className="w-24 h-24 rounded-full object-cover ring-4 ring-white dark:ring-slate-700 shadow-xl"
|
||
/>
|
||
) : (
|
||
<div className="w-24 h-24 rounded-full bg-gradient-to-r from-primary to-secondary text-white flex items-center justify-center text-3xl font-bold shadow-xl">
|
||
{profile.firstName?.[0]?.toUpperCase() || "U"}
|
||
</div>
|
||
)}
|
||
{uploading && (
|
||
<div className="absolute inset-0 rounded-full bg-black/50 flex items-center justify-center">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent"></div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-semibold mb-1 text-slate-900 dark:text-white">Profile Photo</h3>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||
JPG, PNG or GIF. Max size 5MB.
|
||
</p>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
className="hidden"
|
||
onChange={handleFileChange}
|
||
/>
|
||
<div className="flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => fileInputRef.current?.click()}
|
||
className="btn-secondary text-sm"
|
||
disabled={uploading}
|
||
>
|
||
📷 Choose Photo
|
||
</button>
|
||
{profile.avatarUrl && (
|
||
<button
|
||
onClick={() => setProfile({ ...profile, avatarUrl: "" })}
|
||
className="px-4 py-2 rounded-xl text-sm text-danger hover:bg-danger/10 transition-all duration-200"
|
||
>
|
||
🗑️ Remove
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">First Name *</label>
|
||
<input
|
||
className="input-field w-full"
|
||
placeholder="First name"
|
||
value={profile.firstName}
|
||
onChange={(e) => setProfile({ ...profile, firstName: e.target.value })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">Last Name *</label>
|
||
<input
|
||
className="input-field w-full"
|
||
placeholder="Last name"
|
||
value={profile.lastName}
|
||
onChange={(e) => setProfile({ ...profile, lastName: e.target.value })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">Email</label>
|
||
<input
|
||
className="input-field w-full bg-gray-100 dark:bg-slate-800 cursor-not-allowed"
|
||
value={profile.email}
|
||
disabled
|
||
/>
|
||
<p className="text-xs text-gray-500 mt-1">Email cannot be changed</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">Gender</label>
|
||
<select
|
||
className="input-field w-full"
|
||
value={profile.gender}
|
||
onChange={(e) => setProfile({ ...profile, gender: e.target.value })}
|
||
>
|
||
<option value="">Select gender</option>
|
||
<option value="FEMALE">Female</option>
|
||
<option value="MALE">Male</option>
|
||
<option value="OTHER">Other</option>
|
||
<option value="PREFER_NOT_TO_SAY">Prefer not to say</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">Date of Birth</label>
|
||
<input
|
||
className="input-field w-full"
|
||
type="date"
|
||
value={profile.dob}
|
||
onChange={(e) => setProfile({ ...profile, dob: e.target.value })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">Address</label>
|
||
<textarea
|
||
className="input-field w-full"
|
||
rows={3}
|
||
placeholder="Enter your address"
|
||
value={profile.address}
|
||
onChange={(e) => setProfile({ ...profile, address: e.target.value })}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-end">
|
||
<button onClick={saveProfile} className="btn-primary">
|
||
💾 Save Profile
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="card border border-slate-200/60 dark:border-slate-700/60 shadow-lg">
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="h-10 w-10 rounded-xl bg-gradient-to-br from-primary to-secondary text-white flex items-center justify-center shadow-md">
|
||
🔐
|
||
</div>
|
||
<div>
|
||
<h2 className="text-xl font-bold text-slate-900 dark:text-white">Change Password</h2>
|
||
<p className="text-sm text-gray-600 dark:text-gray-400">Update your password</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">Current Password *</label>
|
||
<input
|
||
className="input-field w-full"
|
||
placeholder="Enter current password"
|
||
type="password"
|
||
value={currentPassword}
|
||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">New Password *</label>
|
||
<input
|
||
className="input-field w-full"
|
||
placeholder="Enter new password"
|
||
type="password"
|
||
value={newPassword}
|
||
onChange={(e) => setNewPassword(e.target.value)}
|
||
/>
|
||
{newPassword && (
|
||
<div className="mt-4 p-4 bg-gray-50 dark:bg-slate-900/50 rounded-lg border border-gray-200 dark:border-slate-700">
|
||
<p className="text-sm font-semibold text-gray-900 dark:text-white mb-3">Password must include:</p>
|
||
<div className="space-y-2">
|
||
{passwordRequirements.map((req, idx) => (
|
||
<div key={idx} className="flex items-center gap-2">
|
||
<span className={`flex-shrink-0 w-5 h-5 flex items-center justify-center rounded-full text-xs font-bold ${req.met ? "bg-success/20 text-success" : "bg-danger/20 text-danger"}`}>
|
||
{req.met ? "✓" : "✕"}
|
||
</span>
|
||
<span className={`text-sm ${req.met ? "text-success font-medium" : "text-danger"}`}>
|
||
{req.name}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-semibold mb-2 text-slate-700 dark:text-slate-300">Confirm New Password *</label>
|
||
<input
|
||
className="input-field w-full"
|
||
placeholder="Confirm new password"
|
||
type="password"
|
||
value={confirmPassword}
|
||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||
/>
|
||
{confirmPassword && newPassword !== confirmPassword && (
|
||
<p className="text-xs text-danger mt-1">Passwords do not match</p>
|
||
)}
|
||
</div>
|
||
<div className="flex justify-end">
|
||
<button onClick={submit} className="btn-primary">
|
||
🔐 Update Password
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{msg && (
|
||
<div className={`p-4 rounded-xl text-sm ${msg.includes("✅") ? "bg-success/10 text-success" : "bg-danger/10 text-danger"}`}>
|
||
{msg}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|