mirror of
https://github.com/tips-of-mine/gestion-certificats2.git
synced 2025-06-28 06:58:43 +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