diff --git a/frontend/src/components/SystemStatus.tsx b/frontend/src/components/SystemStatus.tsx
index f32b24ae..76322ba6 100644
--- a/frontend/src/components/SystemStatus.tsx
+++ b/frontend/src/components/SystemStatus.tsx
@@ -1,20 +1,33 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { checkUpdates } from '../api/system';
import { ExternalLink, CheckCircle, AlertCircle } from 'lucide-react';
const SystemStatus: React.FC = () => {
+ const [showUpToDate, setShowUpToDate] = useState(true);
const { data: updateInfo, isLoading } = useQuery({
queryKey: ['system-updates'],
queryFn: checkUpdates,
staleTime: 1000 * 60 * 60, // 1 hour
});
+ useEffect(() => {
+ if (updateInfo && !updateInfo.available) {
+ const timer = setTimeout(() => {
+ setShowUpToDate(false);
+ }, 5000); // Hide after 5 seconds
+ return () => clearTimeout(timer);
+ } else {
+ setShowUpToDate(true);
+ }
+ }, [updateInfo]);
+
if (isLoading) return null;
if (!updateInfo?.available) {
+ if (!showUpToDate) return null;
return (
-
+
Up to date
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 9359ad9e..fcbd1d9a 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -42,6 +42,13 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
setUser(null);
};
+ const changePassword = async (oldPassword: string, newPassword: string) => {
+ await client.post('/auth/change-password', {
+ old_password: oldPassword,
+ new_password: newPassword,
+ });
+ };
+
// Auto-logout logic
useEffect(() => {
if (!user) return;
@@ -77,7 +84,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
}, [user]);
return (
-
+
{children}
);
diff --git a/frontend/src/context/AuthContextValue.ts b/frontend/src/context/AuthContextValue.ts
index 92c11bf2..51c48f61 100644
--- a/frontend/src/context/AuthContextValue.ts
+++ b/frontend/src/context/AuthContextValue.ts
@@ -3,12 +3,15 @@ import { createContext } from 'react';
export interface User {
user_id: number;
role: string;
+ name?: string;
+ email?: string;
}
export interface AuthContextType {
user: User | null;
login: () => Promise;
logout: () => void;
+ changePassword: (oldPassword: string, newPassword: string) => Promise;
isAuthenticated: boolean;
isLoading: boolean;
}
diff --git a/frontend/src/pages/Account.tsx b/frontend/src/pages/Account.tsx
new file mode 100644
index 00000000..1c3598d4
--- /dev/null
+++ b/frontend/src/pages/Account.tsx
@@ -0,0 +1,380 @@
+import { useState, useEffect } 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 '../utils/toast'
+import { getProfile, regenerateApiKey, updateProfile } from '../api/user'
+import { getSettings, updateSetting } from '../api/settings'
+import { Copy, RefreshCw, Shield, Mail, User, AlertTriangle } from 'lucide-react'
+import { PasswordStrengthMeter } from '../components/PasswordStrengthMeter'
+import { isValidEmail } from '../utils/validation'
+import { useAuth } from '../hooks/useAuth'
+
+export default function Account() {
+ const [oldPassword, setOldPassword] = useState('')
+ const [newPassword, setNewPassword] = useState('')
+ const [confirmPassword, setConfirmPassword] = useState('')
+ const [loading, setLoading] = useState(false)
+
+ // Profile State
+ const [name, setName] = useState('')
+ const [email, setEmail] = useState('')
+ const [emailValid, setEmailValid] = useState(null)
+ const [showEmailConfirmModal, setShowEmailConfirmModal] = useState(false)
+
+ // Certificate Email State
+ const [certEmail, setCertEmail] = useState('')
+ const [certEmailValid, setCertEmailValid] = useState(null)
+ const [useUserEmail, setUseUserEmail] = useState(true)
+
+ const queryClient = useQueryClient()
+ const { changePassword } = useAuth()
+
+ const { data: profile, isLoading: isLoadingProfile } = useQuery({
+ queryKey: ['profile'],
+ queryFn: getProfile,
+ })
+
+ const { data: settings } = useQuery({
+ queryKey: ['settings'],
+ queryFn: getSettings,
+ })
+
+ // Initialize profile state
+ useEffect(() => {
+ if (profile) {
+ setName(profile.name)
+ setEmail(profile.email)
+ }
+ }, [profile])
+
+ // Validate profile email
+ useEffect(() => {
+ if (email) {
+ setEmailValid(isValidEmail(email))
+ } else {
+ setEmailValid(null)
+ }
+ }, [email])
+
+ // Initialize cert email state
+ useEffect(() => {
+ if (settings && profile) {
+ const savedEmail = settings['caddy.email']
+ if (savedEmail && savedEmail !== profile.email) {
+ setCertEmail(savedEmail)
+ setUseUserEmail(false)
+ } else {
+ setCertEmail(profile.email)
+ setUseUserEmail(true)
+ }
+ }
+ }, [settings, profile])
+
+ // Validate cert email
+ useEffect(() => {
+ if (certEmail && !useUserEmail) {
+ setCertEmailValid(isValidEmail(certEmail))
+ } else {
+ setCertEmailValid(null)
+ }
+ }, [certEmail, useUserEmail])
+
+ const updateProfileMutation = useMutation({
+ mutationFn: updateProfile,
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['profile'] })
+ toast.success('Profile updated successfully')
+ },
+ onError: (error: any) => {
+ toast.error(`Failed to update profile: ${error.message}`)
+ },
+ })
+
+ const updateSettingMutation = useMutation({
+ mutationFn: (variables: { key: string; value: string; category: string }) =>
+ updateSetting(variables.key, variables.value, variables.category),
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['settings'] })
+ toast.success('Certificate email updated')
+ },
+ onError: (error: any) => {
+ toast.error(`Failed to update certificate email: ${error.message}`)
+ },
+ })
+
+ const regenerateMutation = useMutation({
+ mutationFn: regenerateApiKey,
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['profile'] })
+ toast.success('API Key regenerated successfully')
+ },
+ onError: (error: any) => {
+ toast.error(`Failed to regenerate API key: ${error.message}`)
+ },
+ })
+
+ const handleUpdateProfile = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!emailValid) return
+
+ // Check if email changed and is different from current cert email
+ if (email !== profile?.email) {
+ setShowEmailConfirmModal(true)
+ return
+ }
+
+ updateProfileMutation.mutate({ name, email })
+ }
+
+ const confirmEmailUpdate = (updateCertEmail: boolean) => {
+ setShowEmailConfirmModal(false)
+
+ // Update profile
+ updateProfileMutation.mutate({ name, email }, {
+ onSuccess: () => {
+ if (updateCertEmail) {
+ updateSettingMutation.mutate({
+ key: 'caddy.email',
+ value: email,
+ category: 'caddy'
+ })
+ setCertEmail(email)
+ setUseUserEmail(true)
+ }
+ }
+ })
+ }
+
+ const handleUpdateCertEmail = (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!useUserEmail && !certEmailValid) return
+
+ const emailToSave = useUserEmail ? profile?.email : certEmail
+ if (!emailToSave) return
+
+ updateSettingMutation.mutate({
+ key: 'caddy.email',
+ value: emailToSave,
+ category: 'caddy'
+ })
+ }
+
+ const handlePasswordChange = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (newPassword !== confirmPassword) {
+ toast.error('New passwords do not match')
+ return
+ }
+
+ setLoading(true)
+ try {
+ await changePassword(oldPassword, newPassword)
+ toast.success('Password updated successfully')
+ setOldPassword('')
+ setNewPassword('')
+ setConfirmPassword('')
+ } catch (error: any) {
+ toast.error(error.message || 'Failed to update password')
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const copyApiKey = () => {
+ if (profile?.api_key) {
+ navigator.clipboard.writeText(profile.api_key)
+ toast.success('API Key copied to clipboard')
+ }
+ }
+
+ if (isLoadingProfile) {
+ return Loading profile...
+ }
+
+ return (
+
+
Account Settings
+
+ {/* Profile Settings */}
+
+
+
+
Profile
+
+
+
+
+ {/* Certificate Email Settings */}
+
+
+
+
Certificate Email
+
+
+ This email is used for Let's Encrypt notifications and recovery.
+
+
+
+
+ {/* Password Change */}
+
+
+
+
Change Password
+
+
+
+
+ {/* API Key */}
+
+
+
+
+ Use this key to authenticate with the API programmatically. Keep it secret!
+
+
+
+
+
+
+
+
+ {/* Email Update Confirmation Modal */}
+ {showEmailConfirmModal && (
+
+
+
+
+
Update Certificate Email?
+
+
+ You are changing your account email to {email}.
+ Do you want to use this new email for SSL certificates as well?
+
+
+
+
+
+
+
+
+ )}
+
-
-
- Security
-
-
-
- {/* Profile Settings */}
-
-
-
-
Profile Settings
-
-
-
setName(e.target.value)}
- />
-
-
setEmail(e.target.value)}
- className={emailValid === false ? 'border-red-500 focus:ring-red-500' : emailValid === true ? 'border-green-500 focus:ring-green-500' : ''}
- />
- {emailValid === false && (
-
Please enter a valid email address
- )}
-
-
-
-
- {/* Certificate Email Configuration */}
-
-
-
-
Certificate Email
-
-
- This email address is used to register with Let's Encrypt for SSL certificate generation and expiration notifications.
-
-
-
-
- setUseUserEmail(e.target.checked)}
- className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
- />
-
-
-
- {!useUserEmail && (
-
-
setCertEmail(e.target.value)}
- placeholder="certs@example.com"
- className={certEmailValid === false ? 'border-red-500 focus:ring-red-500' : certEmailValid === true ? 'border-green-500 focus:ring-green-500' : ''}
- />
- {certEmailValid === false && (
-
Please enter a valid email address
- )}
-
- )}
-
-
-
-
- {/* Change Password */}
-
- Change Password
-
-
-
- {/* API Key */}
-
- API Key
-
- Use this key to authenticate with the API externally. Keep it secret!
-
-
- {isLoadingProfile ? (
-
- ) : (
-
-
-
-
-
-
-
-
-
Settings
-