mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 14:12:10 +01:00
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:
@ -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
|
||||
|
||||
Reference in New Issue
Block a user