feat: implement Backups, Security, and SettingsLayout pages with API integration and state management
This commit is contained in:
Wikid82
@@ -1,196 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { Card } from '../components/ui/Card'
|
||||
import { Input } from '../components/ui/Input'
|
||||
import { Button } from '../components/ui/Button'
|
||||
import { toast } from '../components/Toast'
|
||||
import client from '../api/client'
|
||||
import { getBackups, createBackup, restoreBackup } from '../api/backups'
|
||||
import { Loader2, Download, RotateCcw, Plus, Archive } from 'lucide-react'
|
||||
|
||||
export default function Settings() {
|
||||
const [oldPassword, setOldPassword] = useState('')
|
||||
const [newPassword, setNewPassword] = useState('')
|
||||
const [confirmPassword, setConfirmPassword] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const { data: backups, isLoading: isLoadingBackups } = useQuery({
|
||||
queryKey: ['backups'],
|
||||
queryFn: getBackups,
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: createBackup,
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['backups'] })
|
||||
toast.success('Backup created successfully')
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(`Failed to create backup: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const restoreMutation = useMutation({
|
||||
mutationFn: restoreBackup,
|
||||
onSuccess: () => {
|
||||
toast.success('Backup restored successfully. Please restart the container.')
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(`Failed to restore backup: ${error.message}`)
|
||||
},
|
||||
})
|
||||
|
||||
const handleChangePassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (newPassword !== confirmPassword) {
|
||||
toast.error('New passwords do not match')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
await client.post('/auth/change-password', {
|
||||
old_password: oldPassword,
|
||||
new_password: newPassword,
|
||||
})
|
||||
toast.success('Password updated successfully')
|
||||
setOldPassword('')
|
||||
setNewPassword('')
|
||||
setConfirmPassword('')
|
||||
} catch (err: any) {
|
||||
toast.error(err.response?.data?.error || 'Failed to update password')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownload = (_filename: string) => {
|
||||
toast.info('Download not yet implemented in backend')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8 space-y-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-6">Settings</h1>
|
||||
|
||||
<div className="grid gap-6">
|
||||
<Card className="max-w-md p-6">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Change Password</h2>
|
||||
<form onSubmit={handleChangePassword} className="space-y-4">
|
||||
<Input
|
||||
label="Current Password"
|
||||
type="password"
|
||||
value={oldPassword}
|
||||
onChange={e => setOldPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="New Password"
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={e => setNewPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label="Confirm New Password"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={e => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Button type="submit" isLoading={loading} className="w-full">
|
||||
Update Password
|
||||
</Button>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white flex items-center">
|
||||
<Archive className="w-5 h-5 mr-2" />
|
||||
Backups
|
||||
</h2>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Manage system backups. Backups include the database and Caddy configuration.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => createMutation.mutate()}
|
||||
isLoading={createMutation.isPending}
|
||||
variant="primary"
|
||||
>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Create Backup
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isLoadingBackups ? (
|
||||
<div className="flex justify-center p-8">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-blue-500" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-800">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Filename</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Size</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{backups?.map((backup) => (
|
||||
<tr key={backup.name}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
|
||||
{backup.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{(backup.size / 1024 / 1024).toFixed(2)} MB
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||
{new Date(backup.mod_time).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => handleDownload(backup.name)}
|
||||
title="Download"
|
||||
>
|
||||
<Download className="w-4 h-4 text-blue-600 dark:text-blue-400" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (confirm(`Are you sure you want to restore ${backup.name}? This will overwrite current data.`)) {
|
||||
restoreMutation.mutate(backup.name);
|
||||
}
|
||||
}}
|
||||
title="Restore"
|
||||
isLoading={restoreMutation.isPending}
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 text-orange-600 dark:text-orange-400" />
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{backups?.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-6 py-8 text-center text-sm text-gray-500">
|
||||
No backups found. Create one to get started.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user