fix: implement comprehensive UI/UX and code organization improvements

CSRF Form Enhancements:
- Add optional onError callback prop for better error handling
- Remove CSRF token from console logging for security
- Provide user-friendly error notifications instead of silent failures

Date Filter Optimization:
- Refactor sessions route to avoid object mutation issues
- Build date filters cleanly without relying on spreading existing objects
- Prevent potential undefined startTime mutations

Geographic Threat Map Optimization:
- Extract country names to reusable constants in lib/constants/countries.ts
- Calculate max values once to avoid repeated expensive operations
- Centralize threat level color mapping to eliminate duplicated logic
- Replace repeated color assignments with centralized THREAT_LEVELS configuration

Accessibility Improvements:
- Add keyboard support to audit log table rows (Enter/Space keys)
- Include proper ARIA labels and focus management
- Add tabIndex for screen reader compatibility
- Enhance focus indicators with ring styling

Performance & Code Organization:
- Move COUNTRY_NAMES to shared constants for reusability
- Optimize calculation patterns in threat mapping components
- Reduce redundant logic and improve maintainability
This commit is contained in:
2025-07-13 16:32:57 +02:00
parent efe0a3f79c
commit 33981b87dd
5 changed files with 143 additions and 112 deletions

View File

@ -16,6 +16,7 @@ interface CSRFProtectedFormProps {
action: string;
method?: "POST" | "PUT" | "DELETE" | "PATCH";
onSubmit?: (formData: FormData) => Promise<void> | void;
onError?: (error: Error) => void;
className?: string;
encType?: string;
}
@ -28,6 +29,7 @@ export function CSRFProtectedForm({
action,
method = "POST",
onSubmit,
onError,
className,
encType,
}: CSRFProtectedFormProps) {
@ -59,7 +61,14 @@ export function CSRFProtectedForm({
}
} catch (error) {
console.error("Form submission error:", error);
// You might want to show an error message to the user here
// Notify user of the error
if (onError && error instanceof Error) {
onError(error);
} else {
// Fallback: show alert if no error handler provided
alert("An error occurred while submitting the form. Please try again.");
}
}
};
@ -90,8 +99,11 @@ export function ExampleCSRFForm() {
const handleCustomSubmit = async (formData: FormData) => {
// Custom form submission logic
// Filter out CSRF token for security when logging
const data = Object.fromEntries(formData.entries());
console.log("Form data:", data);
// biome-ignore lint/correctness/noUnusedVariables: csrf_token is intentionally extracted and discarded for security
const { csrf_token, ...safeData } = data;
console.log("Form data (excluding CSRF token):", safeData);
// You can process the form data here before submission
// The CSRF token is automatically included in formData