472 lines
24 KiB
TypeScript
472 lines
24 KiB
TypeScript
'use client'
|
||
|
||
import { useState } from 'react'
|
||
import { useQuery, useMutation } from '@tanstack/react-query'
|
||
import { useRouter } from 'next/navigation'
|
||
import { toast } from 'sonner'
|
||
import { DashboardLayout } from '@/components/layout/dashboard-layout'
|
||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import { settingsAPI } from '@/lib/api'
|
||
import { clearAuth } from '@/lib/auth'
|
||
import { usePlan } from '@/lib/use-plan'
|
||
|
||
export default function SettingsPage() {
|
||
const router = useRouter()
|
||
const [showPasswordForm, setShowPasswordForm] = useState(false)
|
||
const [showWebhookForm, setShowWebhookForm] = useState(false)
|
||
const [showSlackForm, setShowSlackForm] = useState(false)
|
||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
|
||
|
||
const { canUseSlack, canUseWebhook } = usePlan()
|
||
|
||
const [passwordForm, setPasswordForm] = useState({
|
||
currentPassword: '',
|
||
newPassword: '',
|
||
confirmPassword: '',
|
||
})
|
||
|
||
const [webhookUrl, setWebhookUrl] = useState('')
|
||
const [slackWebhookUrl, setSlackWebhookUrl] = useState('')
|
||
const [deletePassword, setDeletePassword] = useState('')
|
||
|
||
// Fetch user settings
|
||
const { data: settings, isLoading, refetch } = useQuery({
|
||
queryKey: ['settings'],
|
||
queryFn: async () => {
|
||
const response = await settingsAPI.get()
|
||
setWebhookUrl(response.settings.webhookUrl || '')
|
||
setSlackWebhookUrl(response.settings.slackWebhookUrl || '')
|
||
return response.settings
|
||
},
|
||
})
|
||
|
||
// Change password mutation
|
||
const changePasswordMutation = useMutation({
|
||
mutationFn: async () => {
|
||
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
|
||
throw new Error('Passwords do not match')
|
||
}
|
||
if (passwordForm.newPassword.length < 8) {
|
||
throw new Error('Password must be at least 8 characters')
|
||
}
|
||
return settingsAPI.changePassword(passwordForm.currentPassword, passwordForm.newPassword)
|
||
},
|
||
onSuccess: () => {
|
||
toast.success('Password changed successfully')
|
||
setShowPasswordForm(false)
|
||
setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' })
|
||
},
|
||
onError: (error: any) => {
|
||
toast.error(error.response?.data?.message || error.message || 'Failed to change password')
|
||
},
|
||
})
|
||
|
||
// Toggle email notifications
|
||
const toggleEmailMutation = useMutation({
|
||
mutationFn: async (enabled: boolean) => {
|
||
return settingsAPI.updateNotifications({ emailEnabled: enabled })
|
||
},
|
||
onSuccess: () => {
|
||
toast.success('Email notifications updated')
|
||
refetch()
|
||
},
|
||
onError: (error: any) => {
|
||
toast.error(error.response?.data?.message || 'Failed to update notifications')
|
||
},
|
||
})
|
||
|
||
// Update webhook
|
||
const updateWebhookMutation = useMutation({
|
||
mutationFn: async () => {
|
||
return settingsAPI.updateNotifications({
|
||
webhookUrl: webhookUrl || null,
|
||
webhookEnabled: !!webhookUrl,
|
||
})
|
||
},
|
||
onSuccess: () => {
|
||
toast.success('Webhook settings updated')
|
||
setShowWebhookForm(false)
|
||
refetch()
|
||
},
|
||
onError: (error: any) => {
|
||
toast.error(error.response?.data?.message || 'Failed to update webhook')
|
||
},
|
||
})
|
||
|
||
// Update Slack
|
||
const updateSlackMutation = useMutation({
|
||
mutationFn: async () => {
|
||
return settingsAPI.updateNotifications({
|
||
slackWebhookUrl: slackWebhookUrl || null,
|
||
slackEnabled: !!slackWebhookUrl,
|
||
})
|
||
},
|
||
onSuccess: () => {
|
||
toast.success('Slack integration updated')
|
||
setShowSlackForm(false)
|
||
refetch()
|
||
},
|
||
onError: (error: any) => {
|
||
toast.error(error.response?.data?.message || 'Failed to update Slack')
|
||
},
|
||
})
|
||
|
||
// Delete account mutation
|
||
const deleteAccountMutation = useMutation({
|
||
mutationFn: async () => {
|
||
return settingsAPI.deleteAccount(deletePassword)
|
||
},
|
||
onSuccess: () => {
|
||
toast.success('Account deleted successfully')
|
||
clearAuth()
|
||
router.push('/login')
|
||
},
|
||
onError: (error: any) => {
|
||
toast.error(error.response?.data?.message || 'Failed to delete account')
|
||
},
|
||
})
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<DashboardLayout title="Settings" description="Manage your account and preferences">
|
||
<div className="flex items-center justify-center py-12">
|
||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
|
||
</div>
|
||
</DashboardLayout>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<DashboardLayout title="Settings" description="Manage your account and preferences">
|
||
{/* Account Settings */}
|
||
<Card className="mb-6">
|
||
<CardHeader>
|
||
<CardTitle>Account</CardTitle>
|
||
<CardDescription>Manage your account settings</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<Input
|
||
label="Email"
|
||
type="email"
|
||
value={settings?.email || ''}
|
||
disabled
|
||
/>
|
||
<div className="flex items-center gap-2">
|
||
<Badge>{settings?.plan || 'free'}</Badge>
|
||
<span className="text-sm text-muted-foreground">plan</span>
|
||
</div>
|
||
|
||
{!showPasswordForm ? (
|
||
<Button variant="outline" onClick={() => setShowPasswordForm(true)}>
|
||
Change Password
|
||
</Button>
|
||
) : (
|
||
<div className="space-y-3 rounded-lg border border-primary/20 bg-primary/5 p-4">
|
||
<Input
|
||
label="Current Password"
|
||
type="password"
|
||
value={passwordForm.currentPassword}
|
||
onChange={(e) => setPasswordForm({ ...passwordForm, currentPassword: e.target.value })}
|
||
required
|
||
/>
|
||
<Input
|
||
label="New Password"
|
||
type="password"
|
||
value={passwordForm.newPassword}
|
||
onChange={(e) => setPasswordForm({ ...passwordForm, newPassword: e.target.value })}
|
||
hint="At least 8 characters"
|
||
required
|
||
/>
|
||
<Input
|
||
label="Confirm New Password"
|
||
type="password"
|
||
value={passwordForm.confirmPassword}
|
||
onChange={(e) => setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })}
|
||
required
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
onClick={() => changePasswordMutation.mutate()}
|
||
disabled={changePasswordMutation.isPending}
|
||
>
|
||
{changePasswordMutation.isPending ? 'Saving...' : 'Save Password'}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setShowPasswordForm(false)
|
||
setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' })
|
||
}}
|
||
>
|
||
Cancel
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Notifications */}
|
||
<Card className="mb-6">
|
||
<CardHeader>
|
||
<CardTitle>Notifications</CardTitle>
|
||
<CardDescription>Configure how you receive alerts</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
{/* Email Notifications */}
|
||
<div className="flex items-center justify-between rounded-lg border border-border p-4">
|
||
<div>
|
||
<p className="font-medium">Email Notifications</p>
|
||
<p className="text-sm text-muted-foreground">Receive email alerts when changes are detected</p>
|
||
</div>
|
||
<Button
|
||
variant={settings?.emailEnabled !== false ? 'success' : 'outline'}
|
||
size="sm"
|
||
onClick={() => toggleEmailMutation.mutate(settings?.emailEnabled === false)}
|
||
disabled={toggleEmailMutation.isPending}
|
||
>
|
||
{settings?.emailEnabled !== false ? 'Enabled' : 'Disabled'}
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Slack Integration */}
|
||
<div className="rounded-lg border border-border p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="font-medium">Slack Integration</p>
|
||
<p className="text-sm text-muted-foreground">Send alerts to your Slack workspace</p>
|
||
{settings?.slackEnabled && (
|
||
<p className="mt-1 text-xs text-green-600">✓ Configured</p>
|
||
)}
|
||
{!canUseSlack && (
|
||
<div className="mt-1 flex items-center gap-1.5 rounded bg-muted/50 px-2 py-0.5 w-fit">
|
||
<svg className="h-3 w-3 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
</svg>
|
||
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Pro Feature</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setShowSlackForm(!showSlackForm)}
|
||
disabled={!canUseSlack}
|
||
>
|
||
{settings?.slackEnabled ? 'Reconfigure' : 'Configure'}
|
||
</Button>
|
||
</div>
|
||
|
||
{showSlackForm && (
|
||
<div className="mt-4 space-y-3 rounded-lg border border-primary/20 bg-primary/5 p-3">
|
||
<Input
|
||
label="Slack Webhook URL"
|
||
type="url"
|
||
value={slackWebhookUrl}
|
||
onChange={(e) => setSlackWebhookUrl(e.target.value)}
|
||
placeholder="https://hooks.slack.com/services/..."
|
||
hint="Get this from your Slack app settings"
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
onClick={() => updateSlackMutation.mutate()}
|
||
disabled={updateSlackMutation.isPending}
|
||
size="sm"
|
||
>
|
||
{updateSlackMutation.isPending ? 'Saving...' : 'Save'}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setShowSlackForm(false)}
|
||
size="sm"
|
||
>
|
||
Cancel
|
||
</Button>
|
||
{settings?.slackEnabled && (
|
||
<Button
|
||
variant="destructive"
|
||
onClick={() => {
|
||
setSlackWebhookUrl('')
|
||
updateSlackMutation.mutate()
|
||
}}
|
||
size="sm"
|
||
>
|
||
Remove
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Webhook */}
|
||
<div className="rounded-lg border border-border p-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="font-medium">Webhook</p>
|
||
<p className="text-sm text-muted-foreground">Send JSON payloads to your server</p>
|
||
{settings?.webhookEnabled && (
|
||
<p className="mt-1 text-xs text-green-600">✓ Configured</p>
|
||
)}
|
||
{!canUseWebhook && (
|
||
<div className="mt-1 flex items-center gap-1.5 rounded bg-muted/50 px-2 py-0.5 w-fit">
|
||
<svg className="h-3 w-3 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
</svg>
|
||
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">Pro Feature</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setShowWebhookForm(!showWebhookForm)}
|
||
disabled={!canUseWebhook}
|
||
>
|
||
{settings?.webhookEnabled ? 'Reconfigure' : 'Configure'}
|
||
</Button>
|
||
</div>
|
||
|
||
{showWebhookForm && (
|
||
<div className="mt-4 space-y-3 rounded-lg border border-primary/20 bg-primary/5 p-3">
|
||
<Input
|
||
label="Webhook URL"
|
||
type="url"
|
||
value={webhookUrl}
|
||
onChange={(e) => setWebhookUrl(e.target.value)}
|
||
placeholder="https://your-server.com/webhook"
|
||
hint="We'll POST JSON data to this URL on changes"
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
onClick={() => updateWebhookMutation.mutate()}
|
||
disabled={updateWebhookMutation.isPending}
|
||
size="sm"
|
||
>
|
||
{updateWebhookMutation.isPending ? 'Saving...' : 'Save'}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setShowWebhookForm(false)}
|
||
size="sm"
|
||
>
|
||
Cancel
|
||
</Button>
|
||
{settings?.webhookEnabled && (
|
||
<Button
|
||
variant="destructive"
|
||
onClick={() => {
|
||
setWebhookUrl('')
|
||
updateWebhookMutation.mutate()
|
||
}}
|
||
size="sm"
|
||
>
|
||
Remove
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Plan & Billing */}
|
||
<Card className="mb-6">
|
||
<CardHeader>
|
||
<CardTitle>Plan & Billing</CardTitle>
|
||
<CardDescription>Manage your subscription</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex items-center justify-between rounded-lg border border-primary/30 bg-primary/5 p-6">
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<p className="text-lg font-bold capitalize">{settings?.plan || 'Free'} Plan</p>
|
||
<Badge>Current</Badge>
|
||
</div>
|
||
<p className="mt-1 text-sm text-muted-foreground">
|
||
{settings?.plan === 'free' && '5 monitors, 1hr frequency'}
|
||
{settings?.plan === 'pro' && '50 monitors, 5min frequency'}
|
||
{settings?.plan === 'business' && '200 monitors, 1min frequency'}
|
||
{settings?.plan === 'enterprise' && 'Unlimited monitors, all features'}
|
||
</p>
|
||
{settings?.plan !== 'free' && (
|
||
<p className="mt-2 text-sm text-muted-foreground">
|
||
Stripe Customer ID: {settings?.stripeCustomerId || 'N/A'}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<Button variant="outline" disabled>
|
||
Manage Plan
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Danger Zone */}
|
||
<Card className="border-destructive/30">
|
||
<CardHeader>
|
||
<CardTitle className="text-destructive">Danger Zone</CardTitle>
|
||
<CardDescription>Irreversible actions</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{!showDeleteConfirm ? (
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="font-medium">Delete Account</p>
|
||
<p className="text-sm text-muted-foreground">Permanently delete your account and all data</p>
|
||
</div>
|
||
<Button
|
||
variant="destructive"
|
||
size="sm"
|
||
onClick={() => setShowDeleteConfirm(true)}
|
||
>
|
||
Delete Account
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4">
|
||
<div className="mb-2">
|
||
<p className="font-semibold text-destructive">⚠️ This action cannot be undone!</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
All your monitors, snapshots, and alerts will be permanently deleted.
|
||
</p>
|
||
</div>
|
||
<Input
|
||
label="Confirm with your password"
|
||
type="password"
|
||
value={deletePassword}
|
||
onChange={(e) => setDeletePassword(e.target.value)}
|
||
placeholder="Enter your password"
|
||
/>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
variant="destructive"
|
||
onClick={() => deleteAccountMutation.mutate()}
|
||
disabled={!deletePassword || deleteAccountMutation.isPending}
|
||
>
|
||
{deleteAccountMutation.isPending ? 'Deleting...' : 'Yes, Delete My Account'}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => {
|
||
setShowDeleteConfirm(false)
|
||
setDeletePassword('')
|
||
}}
|
||
>
|
||
Cancel
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</DashboardLayout>
|
||
)
|
||
}
|