148 lines
6.2 KiB
TypeScript
148 lines
6.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ArrowLeft, Mail, Lock } from 'lucide-react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useTheme } from '@/lib/theme-context';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export default function SettingsPage() {
|
|
const router = useRouter();
|
|
const { theme } = useTheme();
|
|
const [isSendingReset, setIsSendingReset] = useState(false);
|
|
const [resetMessage, setResetMessage] = useState<string | null>(null);
|
|
const [resetError, setResetError] = useState<string | null>(null);
|
|
|
|
const handlePasswordReset = async () => {
|
|
setIsSendingReset(true);
|
|
setResetMessage(null);
|
|
setResetError(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/auth/reset-password', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
});
|
|
|
|
const data = await response.json() as { message?: string; error?: string };
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.error || 'Failed to start password reset.');
|
|
}
|
|
|
|
setResetMessage(data.message || 'Reset instructions sent to your email.');
|
|
} catch (error: any) {
|
|
setResetError(error.message || 'Failed to start password reset.');
|
|
} finally {
|
|
setIsSendingReset(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen pb-24">
|
|
{/* Header */}
|
|
<div className={cn(
|
|
"sticky top-0 z-40 backdrop-blur-xl border-b",
|
|
theme === 'light'
|
|
? "bg-white/80 border-slate-200"
|
|
: "bg-slate-950/80 border-white/10"
|
|
)}>
|
|
<div className="container mx-auto px-4 h-16 flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => router.back()}
|
|
className="rounded-full"
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
<h1 className="text-xl font-bold">Account Settings</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<main className="container mx-auto px-4 py-8 max-w-2xl space-y-6">
|
|
{/* Password Reset Card */}
|
|
<Card className={cn(
|
|
"overflow-hidden",
|
|
theme === 'light'
|
|
? "bg-white border-slate-200"
|
|
: "bg-slate-900/50 border-white/10"
|
|
)}>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<Lock className="h-5 w-5 text-amber-500" />
|
|
Change Password
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Reset your password through our secure authentication provider.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className={cn(
|
|
"p-4 rounded-xl border",
|
|
theme === 'light'
|
|
? "bg-slate-50 border-slate-200"
|
|
: "bg-white/5 border-white/10"
|
|
)}>
|
|
<p className="text-sm text-muted-foreground">
|
|
Send a secure password reset link to your account email.
|
|
</p>
|
|
</div>
|
|
|
|
{resetMessage && (
|
|
<div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300">
|
|
{resetMessage}
|
|
</div>
|
|
)}
|
|
|
|
{resetError && (
|
|
<div className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-700 dark:text-red-300">
|
|
{resetError}
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
onClick={handlePasswordReset}
|
|
variant="outline"
|
|
className="w-full h-12 text-base font-semibold rounded-xl"
|
|
disabled={isSendingReset}
|
|
>
|
|
<Lock className="mr-2 h-4 w-4" />
|
|
{isSendingReset ? 'Sending Reset Link...' : 'Send Password Reset Link'}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Email Info Card */}
|
|
<Card className={cn(
|
|
"overflow-hidden",
|
|
theme === 'light'
|
|
? "bg-white border-slate-200"
|
|
: "bg-slate-900/50 border-white/10"
|
|
)}>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<Mail className="h-5 w-5 text-blue-500" />
|
|
Email & Account
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Your authentication is managed securely through WorkOS.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className={cn(
|
|
"text-sm",
|
|
theme === 'light' ? "text-slate-500" : "text-white/50"
|
|
)}>
|
|
To change your email address or manage connected accounts (Google, Apple, GitHub),
|
|
contact support or create a new account with your preferred email.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|