mirror of
https://github.com/tips-of-mine/gestion-certificats2.git
synced 2025-06-28 06:58:43 +02:00
This commit is contained in:
tips-of-mine
93
src/App.tsx
93
src/App.tsx
@ -1,93 +0,0 @@
|
||||
import { useEffect } from 'react'
|
||||
import { Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { useAuth } from './hooks/useAuth'
|
||||
import { useTheme } from './hooks/useTheme'
|
||||
|
||||
// Layout Components
|
||||
import { PublicLayout } from './components/layouts/PublicLayout'
|
||||
import { ProtectedLayout } from './components/layouts/ProtectedLayout'
|
||||
|
||||
// Pages
|
||||
import { LoginPage } from './pages/auth/LoginPage'
|
||||
import { DashboardPage } from './pages/dashboard/DashboardPage'
|
||||
import { CertificatesPage } from './pages/certificates/CertificatesPage'
|
||||
import { CreateCertificatePage } from './pages/certificates/CreateCertificatePage'
|
||||
import { PerimetersPage } from './pages/perimeters/PerimetersPage'
|
||||
import { CreatePerimeterPage } from './pages/perimeters/CreatePerimeterPage'
|
||||
import { UsersPage } from './pages/users/UsersPage'
|
||||
import { CreateUserPage } from './pages/users/CreateUserPage'
|
||||
import { EditUserPasswordPage } from './pages/users/EditUserPasswordPage'
|
||||
import { NotFoundPage } from './pages/NotFoundPage'
|
||||
|
||||
// Components
|
||||
import { LoadingSpinner } from './components/ui/LoadingSpinner'
|
||||
|
||||
function App() {
|
||||
const { isAuthenticated, isLoading } = useAuth()
|
||||
const { theme } = useTheme()
|
||||
|
||||
useEffect(() => {
|
||||
// Apply theme to document
|
||||
if (theme === 'dark') {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
}, [theme])
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Routes>
|
||||
{/* Public Routes */}
|
||||
<Route path="/login" element={
|
||||
!isAuthenticated ? (
|
||||
<PublicLayout>
|
||||
<LoginPage />
|
||||
</PublicLayout>
|
||||
) : (
|
||||
<Navigate to="/dashboard" replace />
|
||||
)
|
||||
} />
|
||||
|
||||
{/* Protected Routes */}
|
||||
<Route path="/" element={
|
||||
isAuthenticated ? (
|
||||
<ProtectedLayout />
|
||||
) : (
|
||||
<Navigate to="/login" replace />
|
||||
)
|
||||
}>
|
||||
<Route index element={<Navigate to="/dashboard" replace />} />
|
||||
<Route path="dashboard" element={<DashboardPage />} />
|
||||
|
||||
<Route path="certificates">
|
||||
<Route index element={<CertificatesPage />} />
|
||||
<Route path="create" element={<CreateCertificatePage />} />
|
||||
</Route>
|
||||
|
||||
<Route path="perimeters">
|
||||
<Route index element={<PerimetersPage />} />
|
||||
<Route path="create" element={<CreatePerimeterPage />} />
|
||||
</Route>
|
||||
|
||||
<Route path="users">
|
||||
<Route index element={<UsersPage />} />
|
||||
<Route path="create" element={<CreateUserPage />} />
|
||||
<Route path=":id/edit-password" element={<EditUserPasswordPage />} />
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
{/* 404 */}
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Routes>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@ -1,95 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useI18nContext } from '../../contexts/I18nContext';
|
||||
import { useThemeContext } from '../../contexts/ThemeContext';
|
||||
|
||||
interface PublicLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const PublicLayout: React.FC<PublicLayoutProps> = ({ children }) => {
|
||||
const { t, language, setLanguage } = useI18nContext();
|
||||
const { theme, toggleTheme } = useThemeContext();
|
||||
|
||||
const supportedLanguages: Array<{ code: string; name: string }> = [
|
||||
{ code: 'fr', name: 'FR' },
|
||||
{ code: 'en', name: 'EN' },
|
||||
{ code: 'de', name: 'DE' },
|
||||
{ code: 'it', name: 'IT' },
|
||||
{ code: 'pt', name: 'PT' },
|
||||
{ code: 'es', name: 'ES' },
|
||||
{ code: 'ja', name: '日本語' },
|
||||
{ code: 'ru', name: 'RU' },
|
||||
{ code: 'ar', name: 'العربية' },
|
||||
{ code: 'hi', name: 'हिन्दी' },
|
||||
{ code: 'zh', name: '中文' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
|
||||
{/* Header */}
|
||||
<header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
{/* Logo and title */}
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{t('app_name')}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Language selector */}
|
||||
<div className="relative">
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value as any)}
|
||||
className="appearance-none bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md px-3 py-1 text-sm text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
{supportedLanguages.map((lang) => (
|
||||
<option key={lang.code} value={lang.code}>
|
||||
{lang.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Theme toggle */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
{theme === 'dark' ? (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main content */}
|
||||
<main className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="text-center text-sm text-gray-600 dark:text-gray-400">
|
||||
© {new Date().getFullYear()} {t('app_name')}. Tous droits réservés.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,68 +0,0 @@
|
||||
import React from 'react'
|
||||
import { cn } from '../../lib/utils'
|
||||
import { LoadingSpinner } from './LoadingSpinner'
|
||||
|
||||
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost'
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
loading?: boolean
|
||||
leftIcon?: React.ReactNode
|
||||
rightIcon?: React.ReactNode
|
||||
}
|
||||
|
||||
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({
|
||||
className,
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
loading = false,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
children,
|
||||
disabled,
|
||||
...props
|
||||
}, ref) => {
|
||||
const variants = {
|
||||
primary: 'btn-primary',
|
||||
secondary: 'btn-secondary',
|
||||
destructive: 'btn-destructive',
|
||||
outline: 'btn-outline',
|
||||
ghost: 'btn-ghost',
|
||||
}
|
||||
|
||||
const sizes = {
|
||||
sm: 'btn-sm',
|
||||
md: '',
|
||||
lg: 'btn-lg',
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
'btn',
|
||||
variants[variant],
|
||||
sizes[size],
|
||||
loading && 'opacity-70 cursor-not-allowed',
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
disabled={disabled || loading}
|
||||
{...props}
|
||||
>
|
||||
{loading ? (
|
||||
<LoadingSpinner size="sm" className="mr-2" />
|
||||
) : leftIcon ? (
|
||||
<span className="mr-2">{leftIcon}</span>
|
||||
) : null}
|
||||
|
||||
{children}
|
||||
|
||||
{rightIcon && !loading && (
|
||||
<span className="ml-2">{rightIcon}</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
Button.displayName = 'Button'
|
||||
@ -1,32 +0,0 @@
|
||||
import React from 'react'
|
||||
import { cn } from '../../lib/utils'
|
||||
|
||||
interface LoadingSpinnerProps {
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
className?: string
|
||||
}
|
||||
|
||||
export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
|
||||
size = 'md',
|
||||
className
|
||||
}) => {
|
||||
const sizes = {
|
||||
sm: 'w-4 h-4',
|
||||
md: 'w-6 h-6',
|
||||
lg: 'w-8 h-8',
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'animate-spin rounded-full border-2 border-current border-t-transparent',
|
||||
sizes[size],
|
||||
className
|
||||
)}
|
||||
role="status"
|
||||
aria-label="Loading"
|
||||
>
|
||||
<span className="sr-only">Loading...</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||
import { User } from '../types';
|
||||
import { authApi } from '../services/api';
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
isLoading: boolean;
|
||||
login: (username: string, password: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
isAuthenticated: boolean;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||
|
||||
export const useAuthContext = () => {
|
||||
const context = useContext(AuthContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useAuthContext must be used within an AuthProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
interface AuthProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Check if user is already logged in
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (token) {
|
||||
// Validate token and get user info
|
||||
authApi.me()
|
||||
.then(userData => {
|
||||
setUser(userData);
|
||||
})
|
||||
.catch(() => {
|
||||
localStorage.removeItem('auth_token');
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false);
|
||||
});
|
||||
} else {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const login = async (username: string, password: string) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const response = await authApi.login({ username, password });
|
||||
localStorage.setItem('auth_token', response.token);
|
||||
setUser(response.user);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
localStorage.removeItem('auth_token');
|
||||
setUser(null);
|
||||
};
|
||||
|
||||
const value: AuthContextType = {
|
||||
user,
|
||||
isLoading,
|
||||
login,
|
||||
logout,
|
||||
isAuthenticated: !!user,
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={value}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -1,194 +0,0 @@
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||
|
||||
type Language = 'fr' | 'en' | 'de' | 'it' | 'pt' | 'es' | 'ja' | 'ru' | 'ar' | 'hi' | 'zh';
|
||||
|
||||
interface I18nContextType {
|
||||
language: Language;
|
||||
setLanguage: (lang: Language) => void;
|
||||
t: (key: string, params?: Record<string, string>) => string;
|
||||
}
|
||||
|
||||
const I18nContext = createContext<I18nContextType | undefined>(undefined);
|
||||
|
||||
export const useI18nContext = () => {
|
||||
const context = useContext(I18nContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useI18nContext must be used within an I18nProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
// Basic translations for key UI elements
|
||||
const translations: Record<Language, Record<string, string>> = {
|
||||
fr: {
|
||||
'app_name': 'Gestion Certificat',
|
||||
'login': 'Connexion',
|
||||
'logout': 'Déconnexion',
|
||||
'username': 'Nom d\'utilisateur',
|
||||
'password': 'Mot de passe',
|
||||
'dashboard': 'Tableau de bord',
|
||||
'certificates': 'Certificats',
|
||||
'users': 'Utilisateurs',
|
||||
'loading': 'Chargement...',
|
||||
},
|
||||
en: {
|
||||
'app_name': 'Certificate Management',
|
||||
'login': 'Login',
|
||||
'logout': 'Logout',
|
||||
'username': 'Username',
|
||||
'password': 'Password',
|
||||
'dashboard': 'Dashboard',
|
||||
'certificates': 'Certificates',
|
||||
'users': 'Users',
|
||||
'loading': 'Loading...',
|
||||
},
|
||||
de: {
|
||||
'app_name': 'Zertifikatsverwaltung',
|
||||
'login': 'Anmelden',
|
||||
'logout': 'Abmelden',
|
||||
'username': 'Benutzername',
|
||||
'password': 'Passwort',
|
||||
'dashboard': 'Dashboard',
|
||||
'certificates': 'Zertifikate',
|
||||
'users': 'Benutzer',
|
||||
'loading': 'Wird geladen...',
|
||||
},
|
||||
it: {
|
||||
'app_name': 'Gestione Certificati',
|
||||
'login': 'Accesso',
|
||||
'logout': 'Esci',
|
||||
'username': 'Nome utente',
|
||||
'password': 'Password',
|
||||
'dashboard': 'Dashboard',
|
||||
'certificates': 'Certificati',
|
||||
'users': 'Utenti',
|
||||
'loading': 'Caricamento...',
|
||||
},
|
||||
pt: {
|
||||
'app_name': 'Gestão de Certificados',
|
||||
'login': 'Login',
|
||||
'logout': 'Sair',
|
||||
'username': 'Nome de Utilizador',
|
||||
'password': 'Palavra-passe',
|
||||
'dashboard': 'Painel de Controlo',
|
||||
'certificates': 'Certificados',
|
||||
'users': 'Utilizadores',
|
||||
'loading': 'Carregando...',
|
||||
},
|
||||
es: {
|
||||
'app_name': 'Gestión de Certificados',
|
||||
'login': 'Iniciar Sesión',
|
||||
'logout': 'Cerrar Sesión',
|
||||
'username': 'Nombre de usuario',
|
||||
'password': 'Contraseña',
|
||||
'dashboard': 'Panel de Control',
|
||||
'certificates': 'Certificados',
|
||||
'users': 'Usuarios',
|
||||
'loading': 'Cargando...',
|
||||
},
|
||||
ja: {
|
||||
'app_name': '証明書管理',
|
||||
'login': 'ログイン',
|
||||
'logout': 'ログアウト',
|
||||
'username': 'ユーザー名',
|
||||
'password': 'パスワード',
|
||||
'dashboard': 'ダッシュボード',
|
||||
'certificates': '証明書',
|
||||
'users': 'ユーザー',
|
||||
'loading': '読み込み中...',
|
||||
},
|
||||
ru: {
|
||||
'app_name': 'Управление Сертификатами',
|
||||
'login': 'Вход',
|
||||
'logout': 'Выход',
|
||||
'username': 'Имя пользователя',
|
||||
'password': 'Пароль',
|
||||
'dashboard': 'Панель управления',
|
||||
'certificates': 'Сертификаты',
|
||||
'users': 'Пользователи',
|
||||
'loading': 'Загрузка...',
|
||||
},
|
||||
ar: {
|
||||
'app_name': 'إدارة الشهادات',
|
||||
'login': 'تسجيل الدخول',
|
||||
'logout': 'تسجيل الخروج',
|
||||
'username': 'اسم المستخدم',
|
||||
'password': 'كلمة المرور',
|
||||
'dashboard': 'لوحة التحكم',
|
||||
'certificates': 'الشهادات',
|
||||
'users': 'المستخدمون',
|
||||
'loading': 'جار التحميل...',
|
||||
},
|
||||
hi: {
|
||||
'app_name': 'प्रमाणपत्र प्रबंधन',
|
||||
'login': 'लॉगिन',
|
||||
'logout': 'लॉगआउट',
|
||||
'username': 'उपयोगकर्ता नाम',
|
||||
'password': 'पासवर्ड',
|
||||
'dashboard': 'डैशबोर्ड',
|
||||
'certificates': 'प्रमाणपत्र',
|
||||
'users': 'उपयोगकर्ता',
|
||||
'loading': 'लोड हो रहा है...',
|
||||
},
|
||||
zh: {
|
||||
'app_name': '证书管理',
|
||||
'login': '登录',
|
||||
'logout': '注销',
|
||||
'username': '用户名',
|
||||
'password': '密码',
|
||||
'dashboard': '仪表板',
|
||||
'certificates': '证书',
|
||||
'users': '用户',
|
||||
'loading': '加载中...',
|
||||
},
|
||||
};
|
||||
|
||||
interface I18nProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const I18nProvider: React.FC<I18nProviderProps> = ({ children }) => {
|
||||
const [language, setLanguageState] = useState<Language>('fr');
|
||||
|
||||
useEffect(() => {
|
||||
// Load language from localStorage or browser preference
|
||||
const savedLanguage = localStorage.getItem('language') as Language;
|
||||
if (savedLanguage && Object.keys(translations).includes(savedLanguage)) {
|
||||
setLanguageState(savedLanguage);
|
||||
} else {
|
||||
const browserLang = navigator.language.split('-')[0] as Language;
|
||||
if (Object.keys(translations).includes(browserLang)) {
|
||||
setLanguageState(browserLang);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const setLanguage = (lang: Language) => {
|
||||
setLanguageState(lang);
|
||||
localStorage.setItem('language', lang);
|
||||
};
|
||||
|
||||
const t = (key: string, params?: Record<string, string>): string => {
|
||||
let translation = translations[language]?.[key] || key;
|
||||
|
||||
if (params) {
|
||||
Object.entries(params).forEach(([param, value]) => {
|
||||
translation = translation.replace(`{${param}}`, value);
|
||||
});
|
||||
}
|
||||
|
||||
return translation;
|
||||
};
|
||||
|
||||
const value: I18nContextType = {
|
||||
language,
|
||||
setLanguage,
|
||||
t,
|
||||
};
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={value}>
|
||||
{children}
|
||||
</I18nContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -1,69 +0,0 @@
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark';
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
setTheme: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
export const useThemeContext = () => {
|
||||
const context = useContext(ThemeContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useThemeContext must be used within a ThemeProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
interface ThemeProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
|
||||
const [theme, setThemeState] = useState<Theme>('light');
|
||||
|
||||
useEffect(() => {
|
||||
// Load theme from localStorage or system preference
|
||||
const savedTheme = localStorage.getItem('theme') as Theme;
|
||||
if (savedTheme) {
|
||||
setThemeState(savedTheme);
|
||||
} else {
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
setThemeState(prefersDark ? 'dark' : 'light');
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Apply theme to document
|
||||
const root = document.documentElement;
|
||||
if (theme === 'dark') {
|
||||
root.classList.add('dark');
|
||||
} else {
|
||||
root.classList.remove('dark');
|
||||
}
|
||||
localStorage.setItem('theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setThemeState(prev => prev === 'light' ? 'dark' : 'light');
|
||||
};
|
||||
|
||||
const setTheme = (newTheme: Theme) => {
|
||||
setThemeState(newTheme);
|
||||
};
|
||||
|
||||
const value: ThemeContextType = {
|
||||
theme,
|
||||
toggleTheme,
|
||||
setTheme,
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={value}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -1,75 +0,0 @@
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
import { AuthUser, LoginCredentials } from '../types'
|
||||
import { authApi } from '../services/api'
|
||||
import toast from 'react-hot-toast'
|
||||
|
||||
interface AuthState {
|
||||
user: AuthUser | null
|
||||
isAuthenticated: boolean
|
||||
isLoading: boolean
|
||||
login: (credentials: LoginCredentials) => Promise<boolean>
|
||||
logout: () => void
|
||||
updateUser: (user: Partial<AuthUser>) => void
|
||||
}
|
||||
|
||||
export const useAuth = create<AuthState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
|
||||
login: async (credentials: LoginCredentials) => {
|
||||
set({ isLoading: true })
|
||||
try {
|
||||
const response = await authApi.login(credentials)
|
||||
if (response.success && response.data) {
|
||||
set({
|
||||
user: response.data,
|
||||
isAuthenticated: true,
|
||||
isLoading: false,
|
||||
})
|
||||
toast.success('Successfully logged in!')
|
||||
return true
|
||||
} else {
|
||||
toast.error(response.message || 'Login failed')
|
||||
set({ isLoading: false })
|
||||
return false
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login error:', error)
|
||||
toast.error('Login failed. Please try again.')
|
||||
set({ isLoading: false })
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
logout: () => {
|
||||
authApi.logout().catch(console.error)
|
||||
set({
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
})
|
||||
toast.success('Successfully logged out!')
|
||||
},
|
||||
|
||||
updateUser: (userData: Partial<AuthUser>) => {
|
||||
const currentUser = get().user
|
||||
if (currentUser) {
|
||||
set({
|
||||
user: { ...currentUser, ...userData },
|
||||
})
|
||||
}
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: 'auth-storage',
|
||||
partialize: (state) => ({
|
||||
user: state.user,
|
||||
isAuthenticated: state.isAuthenticated,
|
||||
}),
|
||||
}
|
||||
)
|
||||
)
|
||||
@ -1,29 +0,0 @@
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
import { Theme } from '../types'
|
||||
|
||||
interface ThemeState {
|
||||
theme: Theme
|
||||
setTheme: (theme: Theme) => void
|
||||
toggleTheme: () => void
|
||||
}
|
||||
|
||||
export const useTheme = create<ThemeState>()(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
theme: 'light',
|
||||
|
||||
setTheme: (theme: Theme) => {
|
||||
set({ theme })
|
||||
},
|
||||
|
||||
toggleTheme: () => {
|
||||
const currentTheme = get().theme
|
||||
set({ theme: currentTheme === 'light' ? 'dark' : 'light' })
|
||||
},
|
||||
}),
|
||||
{
|
||||
name: 'theme-storage',
|
||||
}
|
||||
)
|
||||
)
|
||||
@ -1,64 +0,0 @@
|
||||
import { type ClassValue, clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
||||
export function formatDate(date: string | Date, options?: Intl.DateTimeFormatOptions): string {
|
||||
const dateObject = typeof date === 'string' ? new Date(date) : date
|
||||
|
||||
return new Intl.DateTimeFormat('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
...options,
|
||||
}).format(dateObject)
|
||||
}
|
||||
|
||||
export function formatDateTime(date: string | Date): string {
|
||||
return formatDate(date, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
export function downloadBlob(blob: Blob, filename: string): void {
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = filename
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
window.URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
export function isValidEmail(email: string): boolean {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
return emailRegex.test(email)
|
||||
}
|
||||
|
||||
export function capitalizeFirst(str: string): string {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
}
|
||||
|
||||
export function debounce<T extends (...args: any[]) => any>(
|
||||
func: T,
|
||||
wait: number
|
||||
): (...args: Parameters<T>) => void {
|
||||
let timeout: NodeJS.Timeout | null = null
|
||||
|
||||
return (...args: Parameters<T>) => {
|
||||
if (timeout) clearTimeout(timeout)
|
||||
timeout = setTimeout(() => func(...args), wait)
|
||||
}
|
||||
}
|
||||
|
||||
export function truncate(str: string, length: number): string {
|
||||
if (str.length <= length) return str
|
||||
return str.slice(0, length) + '...'
|
||||
}
|
||||
49
src/main.tsx
49
src/main.tsx
@ -1,49 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { QueryClient, QueryClientProvider } from 'react-query'
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
import { Toaster } from 'react-hot-toast'
|
||||
|
||||
import App from './App'
|
||||
import { AuthProvider } from './contexts/AuthContext'
|
||||
import { ThemeProvider } from './contexts/ThemeContext'
|
||||
import { I18nProvider } from './contexts/I18nContext'
|
||||
|
||||
import './styles/globals.css'
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: 1,
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<BrowserRouter>
|
||||
<I18nProvider>
|
||||
<ThemeProvider>
|
||||
<AuthProvider>
|
||||
<App />
|
||||
<Toaster
|
||||
position="top-right"
|
||||
toastOptions={{
|
||||
duration: 4000,
|
||||
style: {
|
||||
background: 'hsl(var(--card))',
|
||||
color: 'hsl(var(--card-foreground))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</AuthProvider>
|
||||
</ThemeProvider>
|
||||
</I18nProvider>
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
@ -1,19 +0,0 @@
|
||||
import { ApiResponse, AuthUser, LoginCredentials } from '../../types'
|
||||
import { apiClient } from './client'
|
||||
|
||||
export const authApi = {
|
||||
login: async (credentials: LoginCredentials): Promise<ApiResponse<AuthUser>> => {
|
||||
const response = await apiClient.post('/auth/login', credentials)
|
||||
return response.data
|
||||
},
|
||||
|
||||
logout: async (): Promise<ApiResponse> => {
|
||||
const response = await apiClient.post('/auth/logout')
|
||||
return response.data
|
||||
},
|
||||
|
||||
me: async (): Promise<ApiResponse<AuthUser>> => {
|
||||
const response = await apiClient.get('/auth/me')
|
||||
return response.data
|
||||
},
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
import {
|
||||
ApiResponse,
|
||||
Certificate,
|
||||
CreateCertificateData,
|
||||
DownloadCertificateParams,
|
||||
PaginatedResponse
|
||||
} from '../../types'
|
||||
import { apiClient } from './client'
|
||||
|
||||
export const certificatesApi = {
|
||||
getAll: async (page = 1, perPage = 50): Promise<ApiResponse<PaginatedResponse<Certificate>>> => {
|
||||
const response = await apiClient.get('/certificates', {
|
||||
params: { page, per_page: perPage }
|
||||
})
|
||||
return response.data
|
||||
},
|
||||
|
||||
create: async (data: CreateCertificateData): Promise<ApiResponse<Certificate>> => {
|
||||
const response = await apiClient.post('/certificates', data)
|
||||
return response.data
|
||||
},
|
||||
|
||||
revoke: async (certificateId: number): Promise<ApiResponse> => {
|
||||
const response = await apiClient.post(`/certificates/${certificateId}/revoke`)
|
||||
return response.data
|
||||
},
|
||||
|
||||
download: async (params: DownloadCertificateParams): Promise<Blob> => {
|
||||
const response = await apiClient.get('/certificates/download', {
|
||||
params,
|
||||
responseType: 'blob',
|
||||
})
|
||||
return response.data
|
||||
},
|
||||
|
||||
getStats: async (): Promise<ApiResponse<{
|
||||
total: number
|
||||
active: number
|
||||
revoked: number
|
||||
expiring_soon: Certificate[]
|
||||
}>> => {
|
||||
const response = await apiClient.get('/certificates/stats')
|
||||
return response.data
|
||||
},
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
import axios from 'axios'
|
||||
import toast from 'react-hot-toast'
|
||||
|
||||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api'
|
||||
|
||||
export const apiClient = axios.create({
|
||||
baseURL: API_BASE_URL,
|
||||
timeout: 30000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
// Request interceptor
|
||||
apiClient.interceptors.request.use(
|
||||
(config) => {
|
||||
// Add auth token if available
|
||||
const authData = localStorage.getItem('auth-storage')
|
||||
if (authData) {
|
||||
try {
|
||||
const parsed = JSON.parse(authData)
|
||||
if (parsed.state?.user?.token) {
|
||||
config.headers.Authorization = `Bearer ${parsed.state.user.token}`
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error parsing auth data:', error)
|
||||
}
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// Response interceptor
|
||||
apiClient.interceptors.response.use(
|
||||
(response) => {
|
||||
return response
|
||||
},
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
// Clear auth state and redirect to login
|
||||
localStorage.removeItem('auth-storage')
|
||||
window.location.href = '/login'
|
||||
toast.error('Session expired. Please login again.')
|
||||
} else if (error.response?.status === 403) {
|
||||
toast.error('You do not have permission to perform this action.')
|
||||
} else if (error.response?.status >= 500) {
|
||||
toast.error('Server error. Please try again later.')
|
||||
} else if (error.code === 'ECONNABORTED') {
|
||||
toast.error('Request timeout. Please check your connection.')
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
@ -1,6 +0,0 @@
|
||||
export { authApi } from './auth'
|
||||
export { certificatesApi } from './certificates'
|
||||
export { perimetersApi } from './perimeters'
|
||||
export { usersApi } from './users'
|
||||
export { dashboardApi } from './dashboard'
|
||||
export { apiClient } from './client'
|
||||
@ -1,40 +0,0 @@
|
||||
import { apiClient } from './client';
|
||||
import { FunctionalPerimeter } from '../../types';
|
||||
|
||||
export interface CreatePerimeterRequest {
|
||||
name: string;
|
||||
intermediate_passphrase?: string;
|
||||
}
|
||||
|
||||
export interface PerimeterResponse {
|
||||
success: boolean;
|
||||
data: FunctionalPerimeter;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export interface PerimetersListResponse {
|
||||
success: boolean;
|
||||
data: FunctionalPerimeter[];
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export const perimetersApi = {
|
||||
async getAll(): Promise<FunctionalPerimeter[]> {
|
||||
const response = await apiClient.get<PerimetersListResponse>('/perimeters');
|
||||
return response.data.data;
|
||||
},
|
||||
|
||||
async getById(id: number): Promise<FunctionalPerimeter> {
|
||||
const response = await apiClient.get<PerimeterResponse>(`/perimeters/${id}`);
|
||||
return response.data.data;
|
||||
},
|
||||
|
||||
async create(data: CreatePerimeterRequest): Promise<FunctionalPerimeter> {
|
||||
const response = await apiClient.post<PerimeterResponse>('/perimeters', data);
|
||||
return response.data.data;
|
||||
},
|
||||
|
||||
async delete(id: number): Promise<void> {
|
||||
await apiClient.delete(`/perimeters/${id}`);
|
||||
},
|
||||
};
|
||||
@ -1,182 +0,0 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96%;
|
||||
--secondary-foreground: 222.2 84% 4.9%;
|
||||
--muted: 210 40% 96%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96%;
|
||||
--accent-foreground: 222.2 84% 4.9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
--radius: 0.75rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 222.2 84% 4.9%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 224.3 76.3% 94.1%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground font-sans;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-3xl lg:text-4xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-2xl lg:text-3xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-xl lg:text-2xl;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-lg lg:text-xl;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center rounded-md text-sm font-medium
|
||||
transition-colors focus-visible:outline-none focus-visible:ring-2
|
||||
focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50
|
||||
disabled:pointer-events-none ring-offset-background;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply btn bg-primary text-primary-foreground hover:bg-primary/90 h-10 py-2 px-4;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply btn bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 py-2 px-4;
|
||||
}
|
||||
|
||||
.btn-destructive {
|
||||
@apply btn bg-destructive text-destructive-foreground hover:bg-destructive/90 h-10 py-2 px-4;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@apply btn border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 py-2 px-4;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply btn hover:bg-accent hover:text-accent-foreground h-10 py-2 px-4;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@apply h-9 px-3 text-xs;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@apply h-11 px-8;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm
|
||||
ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium
|
||||
placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2
|
||||
focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed
|
||||
disabled:opacity-50;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply rounded-lg border bg-card text-card-foreground shadow-sm;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@apply flex flex-col space-y-1.5 p-6;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@apply p-6 pt-0;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
@apply flex items-center p-6 pt-0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-secondary;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-muted-foreground/50 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-muted-foreground/70;
|
||||
}
|
||||
|
||||
/* Animation utilities */
|
||||
.animate-in {
|
||||
animation: animateIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes animateIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus ring for accessibility */
|
||||
.focus-ring {
|
||||
@apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background;
|
||||
}
|
||||
@ -1,90 +0,0 @@
|
||||
export interface User {
|
||||
id: number
|
||||
username: string
|
||||
role: 'admin' | 'user'
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface AuthUser extends User {
|
||||
token?: string
|
||||
}
|
||||
|
||||
export interface LoginCredentials {
|
||||
username: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export interface Certificate {
|
||||
id: number
|
||||
name: string
|
||||
type: 'root' | 'intermediate' | 'simple'
|
||||
functional_perimeter_id?: number
|
||||
perimeter_name?: string
|
||||
expiration_date: string
|
||||
is_revoked: boolean
|
||||
revoked_at?: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface CreateCertificateData {
|
||||
subdomain_name: string
|
||||
functional_perimeter_id: number
|
||||
}
|
||||
|
||||
export interface FunctionalPerimeter {
|
||||
id: number
|
||||
name: string
|
||||
intermediate_cert_name: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface CreatePerimeterData {
|
||||
name: string
|
||||
intermediate_passphrase?: string
|
||||
}
|
||||
|
||||
export interface CreateUserData {
|
||||
username: string
|
||||
password: string
|
||||
role: 'admin' | 'user'
|
||||
}
|
||||
|
||||
export interface UpdatePasswordData {
|
||||
user_id: number
|
||||
new_password: string
|
||||
confirm_password: string
|
||||
}
|
||||
|
||||
export interface DashboardStats {
|
||||
total_certificates: number
|
||||
active_certificates: number
|
||||
revoked_certificates: number
|
||||
total_perimeters: number
|
||||
total_users: number
|
||||
expiring_soon: Certificate[]
|
||||
}
|
||||
|
||||
export interface ApiResponse<T = unknown> {
|
||||
success: boolean
|
||||
data?: T
|
||||
message?: string
|
||||
errors?: Record<string, string[]>
|
||||
}
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
data: T[]
|
||||
current_page: number
|
||||
per_page: number
|
||||
total: number
|
||||
last_page: number
|
||||
}
|
||||
|
||||
export type Theme = 'light' | 'dark'
|
||||
|
||||
export type Language = 'en' | 'fr' | 'de' | 'es' | 'it' | 'pt' | 'ja' | 'ru' | 'ar' | 'hi' | 'zh'
|
||||
|
||||
export interface DownloadCertificateParams {
|
||||
type: 'root' | 'intermediate' | 'simple'
|
||||
file: string
|
||||
perimeter?: string
|
||||
}
|
||||
Reference in New Issue
Block a user