BugFixes galore
This commit is contained in:
183
app/(dashboard)/settings/page.tsx
Normal file
183
app/(dashboard)/settings/page.tsx
Normal file
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { User, Lock, Shield } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { authClient, useSession } from "@/lib/auth/client";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { data: session, isPending } = useSession();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [nameLoading, startNameTransition] = useTransition();
|
||||
|
||||
const [currentPassword, setCurrentPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [passwordLoading, startPasswordTransition] = useTransition();
|
||||
|
||||
// Populate name field once session loads
|
||||
const displayName = name || session?.user?.name || "";
|
||||
|
||||
function handleNameSave() {
|
||||
if (!displayName.trim()) {
|
||||
toast.error("Name cannot be empty");
|
||||
return;
|
||||
}
|
||||
startNameTransition(async () => {
|
||||
const { error } = await authClient.updateUser({ name: displayName.trim() });
|
||||
if (error) {
|
||||
toast.error(error.message ?? "Failed to update name");
|
||||
} else {
|
||||
toast.success("Display name updated");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handlePasswordChange() {
|
||||
if (!currentPassword) {
|
||||
toast.error("Current password is required");
|
||||
return;
|
||||
}
|
||||
if (newPassword.length < 8) {
|
||||
toast.error("New password must be at least 8 characters");
|
||||
return;
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
toast.error("Passwords do not match");
|
||||
return;
|
||||
}
|
||||
startPasswordTransition(async () => {
|
||||
const { error } = await authClient.changePassword({
|
||||
currentPassword,
|
||||
newPassword,
|
||||
revokeOtherSessions: false,
|
||||
});
|
||||
if (error) {
|
||||
toast.error(error.message ?? "Failed to change password");
|
||||
} else {
|
||||
toast.success("Password changed successfully");
|
||||
setCurrentPassword("");
|
||||
setNewPassword("");
|
||||
setConfirmPassword("");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-2xl space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-white">Account Settings</h1>
|
||||
<p className="text-zinc-400 text-sm mt-1">Manage your profile and security preferences</p>
|
||||
</div>
|
||||
|
||||
{/* Profile */}
|
||||
<Card className="bg-zinc-900 border-zinc-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-medium text-zinc-300 flex items-center gap-2">
|
||||
<User className="w-4 h-4 text-emerald-500" />
|
||||
Profile
|
||||
</CardTitle>
|
||||
<CardDescription className="text-zinc-500">
|
||||
Update your display name and view account info
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-zinc-300">Email</Label>
|
||||
<Input
|
||||
value={session?.user?.email ?? ""}
|
||||
disabled
|
||||
className="bg-zinc-800 border-zinc-700 text-zinc-400 cursor-not-allowed"
|
||||
/>
|
||||
<p className="text-xs text-zinc-500">Email address cannot be changed</p>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-zinc-300">Display Name</Label>
|
||||
<Input
|
||||
value={name || session?.user?.name || ""}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Your name"
|
||||
className="bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500"
|
||||
disabled={isPending}
|
||||
/>
|
||||
</div>
|
||||
{session?.user && (
|
||||
<div className="flex items-center gap-2 text-xs text-zinc-500">
|
||||
<Shield className="w-3 h-3" />
|
||||
Role: <span className="text-zinc-300 capitalize">{(session.user as { role?: string }).role ?? "moderator"}</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
onClick={handleNameSave}
|
||||
disabled={nameLoading || isPending}
|
||||
className="bg-emerald-600 hover:bg-emerald-500 text-white"
|
||||
size="sm"
|
||||
>
|
||||
{nameLoading ? "Saving…" : "Save Name"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Separator className="bg-zinc-800" />
|
||||
|
||||
{/* Password */}
|
||||
<Card className="bg-zinc-900 border-zinc-800">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-medium text-zinc-300 flex items-center gap-2">
|
||||
<Lock className="w-4 h-4 text-emerald-500" />
|
||||
Change Password
|
||||
</CardTitle>
|
||||
<CardDescription className="text-zinc-500">
|
||||
Choose a strong password with at least 8 characters
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-zinc-300">Current Password</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={currentPassword}
|
||||
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-zinc-300">New Password</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-zinc-300">Confirm New Password</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="bg-zinc-800 border-zinc-700 text-white placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handlePasswordChange}
|
||||
disabled={passwordLoading}
|
||||
className="bg-emerald-600 hover:bg-emerald-500 text-white"
|
||||
size="sm"
|
||||
>
|
||||
{passwordLoading ? "Changing…" : "Change Password"}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user