+
+ );
+ }
+
+ return this.props.children;
+ }
+}
\ No newline at end of file
diff --git a/application/src/components/dashboard/Sidebar.tsx b/application/src/components/dashboard/Sidebar.tsx
index f543936..4d15f9d 100644
--- a/application/src/components/dashboard/Sidebar.tsx
+++ b/application/src/components/dashboard/Sidebar.tsx
@@ -1,140 +1,22 @@
-import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, FileText, Settings, User, UserCog, Bell, FileClock, Database, RefreshCw, Info, ChevronDown, BookOpen } from "lucide-react";
+
+import React from "react";
import { useTheme } from "@/contexts/ThemeContext";
-import { Link, useLocation } from "react-router-dom";
-import { useState, useEffect } from "react";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { useLanguage } from "@/contexts/LanguageContext";
+import { SidebarHeader } from "./sidebar/SidebarHeader";
+import { MainNavigation } from "./sidebar/MainNavigation";
+import { SettingsPanel } from "./sidebar/SettingsPanel";
interface SidebarProps {
collapsed: boolean;
}
-export const Sidebar = ({
- collapsed
-}: SidebarProps) => {
- const {
- theme
- } = useTheme();
- const {
- t
- } = useLanguage();
- const location = useLocation();
- const [activeSettingsItem, setActiveSettingsItem] = useState
+
+ Something went wrong
++ {this.state.error?.message || 'An unexpected error occurred'} +
+ +
-
;
+ return (
+
-
-
-
-
- {!collapsed &&
- C
-
- {!collapsed && CheckCle App
} -
-
-
-
-
-
-
-
-
}
-
- {collapsed &&
- {t("settingPanel")}
-
-
-
-
-
-
-
-
- handleSettingsItemClick('general')}>
-
-
-
-
}
-
+
+ );
};
\ No newline at end of file
diff --git a/application/src/components/dashboard/sidebar/MainNavigation.tsx b/application/src/components/dashboard/sidebar/MainNavigation.tsx
new file mode 100644
index 0000000..9b4e103
--- /dev/null
+++ b/application/src/components/dashboard/sidebar/MainNavigation.tsx
@@ -0,0 +1,27 @@
+
+import React from "react";
+import { MenuItem } from "./MenuItem";
+import { mainMenuItems } from "./navigationData";
+
+interface MainNavigationProps {
+ collapsed: boolean;
+}
+
+export const MainNavigation: React.FC
+
+ );
+};
\ No newline at end of file
diff --git a/application/src/components/dashboard/sidebar/SettingsPanel.tsx b/application/src/components/dashboard/sidebar/SettingsPanel.tsx
new file mode 100644
index 0000000..2e311c3
--- /dev/null
+++ b/application/src/components/dashboard/sidebar/SettingsPanel.tsx
@@ -0,0 +1,100 @@
+
+import React, { useState, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { Settings, ChevronDown } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { settingsMenuItems } from "./navigationData";
+
+interface SettingsPanelProps {
+ collapsed: boolean;
+}
+
+export const SettingsPanel: React.FC
+
+ );
+ }
+
+ return (
+ handleMenuItemClick('/settings', e)}
+ className="cursor-pointer"
+ >
+
+
+
+
+
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/application/src/components/dashboard/sidebar/SidebarHeader.tsx b/application/src/components/dashboard/sidebar/SidebarHeader.tsx
new file mode 100644
index 0000000..4c0564b
--- /dev/null
+++ b/application/src/components/dashboard/sidebar/SidebarHeader.tsx
@@ -0,0 +1,20 @@
+
+import React from "react";
+import { useTheme } from "@/contexts/ThemeContext";
+
+interface SidebarHeaderProps {
+ collapsed: boolean;
+}
+
+export const SidebarHeader: React.FC
+ {t("settingPanel")}
+
+
+
+
+
+
+
+
+ {settingsMenuItems.map((item) => (
+
+ {
+ handleMenuItemClick(`/settings?panel=${item.id}`, e);
+ handleSettingsItemClick(item.id);
+ }}
+ >
+
+ ))}
+
+
+ );
+};
\ No newline at end of file
diff --git a/application/src/components/dashboard/sidebar/index.ts b/application/src/components/dashboard/sidebar/index.ts
new file mode 100644
index 0000000..ec3edb4
--- /dev/null
+++ b/application/src/components/dashboard/sidebar/index.ts
@@ -0,0 +1,6 @@
+
+export { SidebarHeader } from './SidebarHeader';
+export { MainNavigation } from './MainNavigation';
+export { MenuItem } from './MenuItem';
+export { SettingsPanel } from './SettingsPanel';
+export { mainMenuItems, settingsMenuItems } from './navigationData';
\ No newline at end of file
diff --git a/application/src/components/dashboard/sidebar/navigationData.ts b/application/src/components/dashboard/sidebar/navigationData.ts
new file mode 100644
index 0000000..486e395
--- /dev/null
+++ b/application/src/components/dashboard/sidebar/navigationData.ts
@@ -0,0 +1,94 @@
+
+import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, FileText, Settings, User, Bell, Database, Info, BookOpen } from "lucide-react";
+
+export const mainMenuItems = [
+ {
+ id: 'uptime-monitoring',
+ path: '/dashboard',
+ icon: Globe,
+ translationKey: 'uptimeMonitoring',
+ color: 'text-purple-400',
+ hasNavigation: true
+ },
+ {
+ id: 'instance-monitoring',
+ path: null,
+ icon: Boxes,
+ translationKey: 'instanceMonitoring',
+ color: 'text-blue-400',
+ hasNavigation: false
+ },
+ {
+ id: 'ssl-domain',
+ path: '/ssl-domain',
+ icon: Radar,
+ translationKey: 'sslDomain',
+ color: 'text-cyan-400',
+ hasNavigation: true
+ },
+ {
+ id: 'schedule-incident',
+ path: '/schedule-incident',
+ icon: Calendar,
+ translationKey: 'scheduleIncident',
+ color: 'text-emerald-400',
+ hasNavigation: true
+ },
+ {
+ id: 'operational-page',
+ path: '/operational-page',
+ icon: BarChart2,
+ translationKey: 'operationalPage',
+ color: 'text-amber-400',
+ hasNavigation: true
+ },
+ {
+ id: 'reports',
+ path: null,
+ icon: LineChart,
+ translationKey: 'reports',
+ color: 'text-rose-400',
+ hasNavigation: false
+ },
+ {
+ id: 'api-documentation',
+ path: null,
+ icon: FileText,
+ translationKey: 'apiDocumentation',
+ color: 'text-indigo-400',
+ hasNavigation: false
+ }
+];
+
+export const settingsMenuItems = [
+ {
+ id: 'general',
+ icon: Settings,
+ translationKey: 'generalSettings'
+ },
+ {
+ id: 'users',
+ icon: User,
+ translationKey: 'userManagement'
+ },
+ {
+ id: 'notifications',
+ icon: Bell,
+ translationKey: 'notificationSettings'
+ },
+ {
+ id: 'templates',
+ icon: BookOpen,
+ translationKey: 'alertsTemplates'
+ },
+ {
+ id: 'data-retention',
+ icon: Database,
+ translationKey: 'dataRetention'
+ },
+ {
+ id: 'about',
+ icon: Info,
+ translationKey: 'aboutSystem'
+ }
+];
\ No newline at end of file
diff --git a/application/src/contexts/SidebarContext.tsx b/application/src/contexts/SidebarContext.tsx
new file mode 100644
index 0000000..cfab360
--- /dev/null
+++ b/application/src/contexts/SidebarContext.tsx
@@ -0,0 +1,38 @@
+
+import React, { createContext, useContext, useState } from 'react';
+
+interface SidebarContextType {
+ sidebarCollapsed: boolean;
+ setSidebarCollapsed: (collapsed: boolean) => void;
+ toggleSidebar: () => void;
+}
+
+const SidebarContext = createContext
+ C
+
+ {!collapsed && CheckCle App
} +
+
);
};
-export default Index;
+export default Index;
\ No newline at end of file
diff --git a/application/src/pages/Login.tsx b/application/src/pages/Login.tsx
index 089773b..d4a7797 100644
--- a/application/src/pages/Login.tsx
+++ b/application/src/pages/Login.tsx
@@ -1,11 +1,10 @@
-
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { authService } from '@/services/authService';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
-import { toast } from '@/components/ui/use-toast';
-import { Eye, EyeOff, Mail, LogIn, Settings } from "lucide-react";
+import { toast } from '@/hooks/use-toast';
+import { Eye, EyeOff, Mail, LogIn, Settings, AlertCircle } from "lucide-react";
import { useLanguage } from '@/contexts/LanguageContext';
import { useTheme } from '@/contexts/ThemeContext';
import { API_ENDPOINTS, getCurrentEndpoint, setApiEndpoint } from '@/lib/pocketbase';
@@ -13,51 +12,183 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Label } from '@/components/ui/label';
+const MAX_LOGIN_ATTEMPTS = 5;
+const LOCKOUT_DURATION = 15 * 60 * 1000; // 15 minutes
+
+interface LoginAttempts {
+ count: number;
+ lastAttempt: number;
+ lockedUntil?: number;
+}
+
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const [currentEndpoint, setCurrentEndpoint] = useState(getCurrentEndpoint());
+ const [errors, setErrors] = useState<{ email?: string; password?: string; general?: string }>({});
+ const [loginAttempts, setLoginAttempts] = useState({ count: 0, lastAttempt: 0 });
+ const [isLocked, setIsLocked] = useState(false);
+ const [lockoutTimeRemaining, setLockoutTimeRemaining] = useState(0);
+
const navigate = useNavigate();
const { t } = useLanguage();
const { theme } = useTheme();
-
- // Add responsiveness check
const [isMobile, setIsMobile] = useState(false);
-
+
+ // Check if we're in development mode
+ const isDevelopment = import.meta.env.DEV;
+
useEffect(() => {
const checkScreenSize = () => {
setIsMobile(window.innerWidth < 640);
};
-
+
checkScreenSize();
window.addEventListener('resize', checkScreenSize);
-
return () => {
window.removeEventListener('resize', checkScreenSize);
};
}, []);
+ // Load login attempts from localStorage
+ useEffect(() => {
+ const stored = localStorage.getItem('login_attempts');
+ if (stored) {
+ try {
+ const attempts: LoginAttempts = JSON.parse(stored);
+ setLoginAttempts(attempts);
+
+ if (attempts.lockedUntil && Date.now() < attempts.lockedUntil) {
+ setIsLocked(true);
+ setLockoutTimeRemaining(Math.ceil((attempts.lockedUntil - Date.now()) / 1000));
+ }
+ } catch {
+ localStorage.removeItem('login_attempts');
+ }
+ }
+ }, []);
+
+ // Update lockout timer
+ useEffect(() => {
+ if (isLocked && lockoutTimeRemaining > 0) {
+ const timer = setInterval(() => {
+ setLockoutTimeRemaining(prev => {
+ if (prev <= 1) {
+ setIsLocked(false);
+ setLoginAttempts({ count: 0, lastAttempt: 0 });
+ localStorage.removeItem('login_attempts');
+ return 0;
+ }
+ return prev - 1;
+ });
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }
+ }, [isLocked, lockoutTimeRemaining]);
+
+ const validateEmail = (email: string): boolean => {
+ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ return emailRegex.test(email);
+ };
+
+ const validatePassword = (password: string): boolean => {
+ return password.length >= 6; // Minimum 6 characters
+ };
+
+ const validateForm = (): boolean => {
+ const newErrors: { email?: string; password?: string } = {};
+
+ if (!email.trim()) {
+ newErrors.email = t("emailRequired");
+ } else if (!validateEmail(email)) {
+ newErrors.email = t("emailInvalid");
+ }
+
+ if (!password) {
+ newErrors.password = t("passwordRequired");
+ } else if (!validatePassword(password)) {
+ newErrors.password = t("passwordTooShort");
+ }
+
+ setErrors(newErrors);
+ return Object.keys(newErrors).length === 0;
+ };
+
+ const updateLoginAttempts = useCallback((failed: boolean) => {
+ const now = Date.now();
+
+ if (failed) {
+ const newCount = loginAttempts.count + 1;
+ let newAttempts: LoginAttempts = {
+ count: newCount,
+ lastAttempt: now
+ };
+
+ if (newCount >= MAX_LOGIN_ATTEMPTS) {
+ newAttempts.lockedUntil = now + LOCKOUT_DURATION;
+ setIsLocked(true);
+ setLockoutTimeRemaining(LOCKOUT_DURATION / 1000);
+ }
+
+ setLoginAttempts(newAttempts);
+ localStorage.setItem('login_attempts', JSON.stringify(newAttempts));
+ } else {
+ // Reset on successful login
+ setLoginAttempts({ count: 0, lastAttempt: 0 });
+ localStorage.removeItem('login_attempts');
+ }
+ }, [loginAttempts.count]);
+
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
+
+ if (isLocked) {
+ toast({
+ variant: "destructive",
+ title: t("accountLocked"),
+ description: t("tooManyAttempts"),
+ });
+ return;
+ }
+
+ if (!validateForm()) {
+ return;
+ }
+
setLoading(true);
+ setErrors({});
try {
- await authService.login({ email, password });
+ await authService.login({ email: email.toLowerCase().trim(), password });
+
+ updateLoginAttempts(false);
+
toast({
title: t("loginSuccessful"),
description: t("loginSuccessMessage"),
});
+
navigate('/dashboard');
} catch (error) {
- console.error("Login error details:", error);
+ updateLoginAttempts(true);
+
+ // Generic error message for security
+ const remainingAttempts = MAX_LOGIN_ATTEMPTS - (loginAttempts.count + 1);
+ let errorMessage = t("invalidCredentials");
+
+ if (remainingAttempts > 0 && remainingAttempts <= 2) {
+ errorMessage += ` ${t("attemptsRemaining")}: ${remainingAttempts}`;
+ }
+
+ setErrors({ general: errorMessage });
+
toast({
variant: "destructive",
title: t("loginFailed"),
- description: error instanceof Error
- ? error.message
- : `${t("authenticationFailed")}. Server: ${currentEndpoint}`,
+ description: errorMessage,
});
} finally {
setLoading(false);
@@ -73,96 +204,175 @@ const Login = () => {
setShowPassword(!showPassword);
};
+ const formatLockoutTime = (seconds: number): string => {
+ const minutes = Math.floor(seconds / 60);
+ const remainingSeconds = seconds % 60;
+ return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+ };
+
return (
-
Welcome to Your Blank App
-Start building your amazing project here!
+ +Loading...
-
-
-
- {/* //this allow test api connection in login page
- 
{
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
-
-
-
+ {/* Logo */}
+ API Endpoint Settings
-
-
-
-
+ )*/}
-
+
+
+
+
+
+ */}
-
-
-
+
+
+
- API Endpoint Settings
+
+
+
+
+
+ Current: {currentEndpoint}
-
-
- Current endpoint: {currentEndpoint}
- {t("signInToYourAccount")}
+ + + {
+ (e.target as HTMLImageElement).style.display = 'none';
+ }}
+ />
-
-
diff --git a/application/src/pages/OperationalPage.tsx b/application/src/pages/OperationalPage.tsx
index dc44a43..ccfd3ed 100644
--- a/application/src/pages/OperationalPage.tsx
+++ b/application/src/pages/OperationalPage.tsx
@@ -1,15 +1,15 @@
-import React, { useState } from "react";
+import React from "react";
import { Header } from "@/components/dashboard/Header";
import { Sidebar } from "@/components/dashboard/Sidebar";
import { OperationalPageContent } from '@/components/operational-page/OperationalPageContent';
import { authService } from "@/services/authService";
import { useNavigate } from "react-router-dom";
+import { useSidebar } from "@/contexts/SidebarContext";
const OperationalPage = () => {
- // State for sidebar collapse functionality
- const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
- const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
+ // Use shared sidebar state
+ const { sidebarCollapsed, toggleSidebar } = useSidebar();
// Get current user
const currentUser = authService.getCurrentUser();
diff --git a/application/src/pages/Profile.tsx b/application/src/pages/Profile.tsx
index 0ba6aed..7126fb2 100644
--- a/application/src/pages/Profile.tsx
+++ b/application/src/pages/Profile.tsx
@@ -9,11 +9,11 @@ import { ProfileContent } from "@/components/profile/ProfileContent";
import { User } from "@/services/userService";
import { useToast } from "@/hooks/use-toast";
import { Loader2 } from "lucide-react";
+import { useSidebar } from "@/contexts/SidebarContext";
const Profile = () => {
- // State for sidebar collapse functionality
- const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
- const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
+ // Use shared sidebar state
+ const { sidebarCollapsed, toggleSidebar } = useSidebar();
// Get current user
const currentUser = authService.getCurrentUser();
diff --git a/application/src/pages/ScheduleIncident.tsx b/application/src/pages/ScheduleIncident.tsx
index 6adef1f..c58cb62 100644
--- a/application/src/pages/ScheduleIncident.tsx
+++ b/application/src/pages/ScheduleIncident.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
import { Header } from "@/components/dashboard/Header";
import { Sidebar } from "@/components/dashboard/Sidebar";
import { useTheme } from "@/contexts/ThemeContext";
@@ -8,11 +8,11 @@ import { ScheduleIncidentContent } from "@/components/schedule-incident/Schedule
import { authService } from "@/services/authService";
import { useNavigate } from "react-router-dom";
import { initMaintenanceNotifications, stopMaintenanceNotifications } from "@/services/maintenance/maintenanceNotificationService";
+import { useSidebar } from "@/contexts/SidebarContext";
const ScheduleIncident = () => {
- // State for sidebar collapse functionality
- const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
- const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
+ // Use shared sidebar state
+ const { sidebarCollapsed, toggleSidebar } = useSidebar();
// Get current theme and language
const { theme } = useTheme();
@@ -24,12 +24,10 @@ const ScheduleIncident = () => {
// Initialize maintenance notifications
useEffect(() => {
- console.log("Initializing maintenance notifications");
initMaintenanceNotifications();
// Clean up on unmount
return () => {
- console.log("Stopping maintenance notifications");
stopMaintenanceNotifications();
};
}, []);
diff --git a/application/src/pages/Settings.tsx b/application/src/pages/Settings.tsx
index 6dd3516..45c2018 100644
--- a/application/src/pages/Settings.tsx
+++ b/application/src/pages/Settings.tsx
@@ -10,11 +10,11 @@ import { NotificationSettings } from "@/components/settings/notification-setting
import { AlertsTemplates } from "@/components/settings/alerts-templates";
import { AboutSystem } from "@/components/settings/about-system";
import DataRetentionSettings from "@/components/settings/data-retention/DataRetentionSettings";
+import { useSidebar } from "@/contexts/SidebarContext";
const Settings = () => {
- // State for sidebar collapse functionality
- const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
- const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
+ // Use shared sidebar state
+ const { sidebarCollapsed, toggleSidebar } = useSidebar();
// Get current user
const currentUser = authService.getCurrentUser();
diff --git a/application/src/pages/SslDomain.tsx b/application/src/pages/SslDomain.tsx
index cf20c3d..a7de6ee 100644
--- a/application/src/pages/SslDomain.tsx
+++ b/application/src/pages/SslDomain.tsx
@@ -1,3 +1,4 @@
+
import React, { useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { authService } from "@/services/authService";
@@ -8,14 +9,14 @@ import { SSLDomainContent } from "@/components/ssl-domain/SSLDomainContent";
import { LoadingState } from "@/components/services/LoadingState";
import { fetchSSLCertificates, shouldRunDailyCheck, checkAllCertificatesAndNotify } from "@/services/sslCertificateService";
import { useLanguage } from "@/contexts/LanguageContext";
+import { useSidebar } from "@/contexts/SidebarContext";
const SslDomain = () => {
// Get language context for translations
const { t } = useLanguage();
- // State for sidebar collapse functionality
- const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
- const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
+ // Use shared sidebar state
+ const { sidebarCollapsed, toggleSidebar } = useSidebar();
// Get current user
const currentUser = authService.getCurrentUser();
-
-
-
-
- {t("orContinueWith")}
+
+ )}
+ {t("signInToYourAccount")} +
+ + {isLocked && ( +
+
-
+