Files
ackify/webapp
Benjamin 68426bc882 feat: add PKCE support to OAuth2 flow for enhanced security
- 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.
2025-10-26 02:32:10 +02:00
..

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é)
  • 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

  1. Créer le fichier dans src/components/ui/
  2. Utiliser les utilities cn() de @/lib/utils
  3. Respecter les variants avec class-variance-authority
  4. S'inspirer des composants existants

Support navigateurs

  • Chrome/Edge (dernières 2 versions)
  • Firefox (dernières 2 versions)
  • Safari 15+

Ressources

Licence

MIT - Voir LICENSE dans le répertoire racine