mirror of
https://github.com/tips-of-mine/gestion-certificats2.git
synced 2025-06-28 10:28:42 +02:00
Correction des fichiers manquants
This commit is contained in:
tips-of-mine
95
src/components/layouts/PublicLayout.tsx
Normal file
95
src/components/layouts/PublicLayout.tsx
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
80
src/contexts/AuthContext.tsx
Normal file
80
src/contexts/AuthContext.tsx
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
194
src/contexts/I18nContext.tsx
Normal file
194
src/contexts/I18nContext.tsx
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
69
src/contexts/ThemeContext.tsx
Normal file
69
src/contexts/ThemeContext.tsx
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
40
src/services/api/perimeters.ts
Normal file
40
src/services/api/perimeters.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
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}`);
|
||||||
|
},
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user