mirror of
https://github.com/tips-of-mine/gestion-certificats2.git
synced 2025-08-27 15:45:52 +02:00
Correction des fichiers manquants
This commit is contained in:
tips-of-mine
GitHub
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user