Modernisation du projet Gestion Certificat

src/App.tsx

@@ -0,0 +1,93 @@
+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

src/components/ui/Button.tsx

@@ -0,0 +1,68 @@
+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'

src/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,32 @@
+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>
+  )
+}

src/hooks/useAuth.ts

@@ -0,0 +1,75 @@
+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,
+      }),
+    }
+  )
+)

src/hooks/useTheme.ts

@@ -0,0 +1,29 @@
+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',
+    }
+  )
+)

src/lib/utils.ts

@@ -0,0 +1,64 @@
+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) + '...'
+}

src/main.tsx

@@ -0,0 +1,50 @@
+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'
+import './i18n/config'
+
+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>,
+)

src/services/api/auth.ts

@@ -0,0 +1,19 @@
+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
+  },
+}

src/services/api/certificates.ts

@@ -0,0 +1,45 @@
+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
+  },
+}

src/services/api/client.ts

@@ -0,0 +1,57 @@
+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)
+  }
+)

src/services/api/index.ts

@@ -0,0 +1,6 @@
+export { authApi } from './auth'
+export { certificatesApi } from './certificates'
+export { perimetersApi } from './perimeters'
+export { usersApi } from './users'
+export { dashboardApi } from './dashboard'
+export { apiClient } from './client'

src/styles/globals.css

@@ -0,0 +1,182 @@
+@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;
+}

src/types/index.ts

@@ -0,0 +1,90 @@
+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
+}