mirror of
https://github.com/btouchard/ackify.git
synced 2026-01-05 04:19:45 -06:00
- Implement PKCE (Proof Key for Code Exchange) with S256 method - Add crypto/pkce module with code verifier and challenge generation - Modify OAuth flow to include code_challenge in authorization requests - Update HandleCallback to validate code_verifier during token exchange - Extend session lifetime from 7 to 30 days - Add comprehensive unit tests for PKCE functions - Maintain backward compatibility with fallback for non-PKCE sessions - Add detailed logging for OAuth flow with PKCE tracking PKCE enhances security by preventing authorization code interception attacks, as recommended by OAuth 2.1 and OIDC standards. feat: add encrypted refresh token storage with automatic cleanup - Add oauth_sessions table for storing encrypted refresh tokens - Implement AES-256-GCM encryption for refresh tokens using cookie secret - Create OAuth session repository with full CRUD operations - Add SessionWorker for automatic cleanup of expired sessions - Configure cleanup to run every 24h for sessions older than 37 days - Modify OAuth flow to store refresh tokens after successful authentication - Track client IP and user agent for session security validation - Link OAuth sessions to user sessions via session ID - Add comprehensive encryption tests with security validations - Integrate SessionWorker into server lifecycle with graceful shutdown This enables persistent OAuth sessions with secure token storage, reducing the need for frequent re-authentication from 7 to 30 days.
Ackify WebApp - Interface Moderne Vue 3
Interface moderne pour Ackify avec Vue 3, Shadcn Vue et thème Claymorphism.
Stack Technique
- Vue 3.5 - Framework JavaScript progressif
- TypeScript - Typage statique
- Vite 7 - Build tool ultra-rapide
- Tailwind CSS 4 - Framework CSS utility-first
- Shadcn Vue - Composants UI modernes et accessibles
- Radix Vue - Primitives UI headless accessibles
- Lucide Vue Next - Icons modernes
- Vue Router 4 - Routing officiel
- Pinia 3 - State management
- Axios - Client HTTP
Thème Claymorphism
L'interface utilise un design claymorphism avec:
- Effets de glassmorphism subtils
- Ombres douces et dégradés
- Backdrop blur pour profondeur
- Palette de couleurs sombre par défaut
- Support du mode clair/sombre
Variables de thème
Les couleurs sont définies dans src/style.css via les variables CSS:
--color-background
--color-foreground
--color-primary (vert: 142.1 76.2% 36.3%)
--color-secondary
--color-muted
--color-accent
--color-destructive
--color-border
--color-input
--color-ring
Structure des Composants
src/
├── components/
│ ├── ui/ # Composants Shadcn de base
│ │ ├── Button.vue
│ │ ├── Card.vue
│ │ ├── Input.vue
│ │ └── ...
│ ├── layout/ # Composants de mise en page
│ │ ├── AppHeader.vue # Header avec navigation
│ │ ├── AppFooter.vue # Footer avec liens
│ │ ├── AppShell.vue # Layout principal
│ │ └── ThemeToggle.vue # Toggle dark/light mode
│ └── accessibility/ # Composants a11y
│ └── SkipToContent.vue
├── pages/ # Pages de l'application
│ ├── HomePage.vue # Page d'accueil avec hero
│ ├── SignPage.vue # Page de signature
│ ├── SignaturesPage.vue # Liste des signatures
│ ├── admin/
│ │ ├── AdminDashboard.vue
│ │ └── AdminDocument.vue
│ └── ...
├── stores/ # Pinia stores
├── services/ # Services API
├── composables/ # Composables Vue
│ └── useClickOutside.ts
└── lib/
└── utils.ts # Utilitaires (cn, etc.)
Fonctionnalités UI
Header (AppHeader.vue)
- Navigation responsive avec menu mobile
- Menu utilisateur avec dropdown
- Toggle de thème (dark/light)
- Indicateur de page active
- Support clavier complet (accessibilité)
Footer (AppFooter.vue)
- Navigation par catégories
- Liens vers ressources
- Liens légaux
- Icônes sociales
- Responsive
Page d'accueil (HomePage.vue)
- Hero moderne avec gradient background
- Badge d'information
- Boutons CTA avec animations
- Section statistiques (stats cards claymorphism)
- Section "Pourquoi Ackify ?" avec cartes de features
- Section "Comment ça marche ?" avec étapes numérotées
- Section CTA finale
- Effets hover subtils
Accessibilité
- Support navigation clavier
- Focus rings visibles
- ARIA labels et roles
- Skip to content link
- Contraste AA/AAA
- Support
prefers-reduced-motion
Classes Claymorphism Personnalisées
.clay-card # Carte avec effet glassmorphism
.clay-card-hover # Carte avec effet hover
.clay-button # Bouton avec effet glassmorphism
.clay-input # Input avec effet glassmorphism
Développement
Installer les dépendances
npm install
Lancer le serveur de développement
npm run dev
L'application sera accessible sur http://localhost:5173
Build de production
npm run build
Preview du build
npm run preview
Configuration
Proxy API (vite.config.ts)
Le serveur de développement proxie les requêtes API vers le backend Go:
/api/*→http://localhost:8080/oauth2/*→http://localhost:8080
Alias TypeScript
L'alias @/ pointe vers src/
État d'avancement
✅ Complété
- Configuration Tailwind CSS 4
- Installation Shadcn Vue (manuel pour v4)
- Thème claymorphism appliqué
- Composants UI de base (Button, Card, Input)
- Layout complet (Header, Footer, Shell)
- Composants d'accessibilité
- Page d'accueil modernisée avec hero
- Dark mode avec toggle
🚧 À faire
- Moderniser page Sign avec formulaire accessible
- Moderniser page Signatures avec table Shadcn
- Moderniser page Admin avec dashboard KPI
- Ajouter plus de composants UI (Table, Dialog, Dropdown, etc.)
- Animations de transition entre pages
- Loading states et skeletons
- Toasts/notifications améliorés
- Gestion d'erreurs optimisée
- Tests unitaires et E2E
Personnalisation
Changer les couleurs du thème
Modifier les variables dans src/style.css:
@theme {
--color-primary: <nouvelle-couleur>;
/* ... */
}
Ajouter un nouveau composant Shadcn
- Créer le fichier dans
src/components/ui/ - Utiliser les utilities
cn()de@/lib/utils - Respecter les variants avec
class-variance-authority - S'inspirer des composants existants
Support navigateurs
- Chrome/Edge (dernières 2 versions)
- Firefox (dernières 2 versions)
- Safari 15+
Ressources
- Vue 3 Documentation
- Tailwind CSS v4
- Radix Vue
- Shadcn UI (référence React, adapté pour Vue)
Licence
MIT - Voir LICENSE dans le répertoire racine