Ajout d'un guide détaillé pour configurer Google Calendar avec OAuth 2.0 :
- Explication de la différence entre OAuth 2.0, Service Account et API Key
- Instructions étape par étape pour extraire Client ID et Secret du JSON
- Dépannage des erreurs courantes
- Rappel que les API Keys ne fonctionnent pas pour les calendriers privés
Note: Exemples génériques utilisés pour éviter d'exposer les secrets
Ajout d'une troisième méthode d'authentification pour Google Calendar :
- OAuth 2.0 (existant)
- Service Account (existant)
- API Key (nouveau)
Modifications :
- Interface d'administration avec sélection API Key
- Champs pour configurer la clé API et l'ID du calendrier
- Backend mis à jour pour gérer l'authentification par API Key
- Routes calendar adaptées pour supporter le nouveau type
- Affichage du statut de connexion mis à jour
L'utilisateur peut maintenant :
1. Sélectionner "API externe" dans les paramètres Google Calendar
2. Entrer sa clé API Google Calendar
3. Spécifier l'ID du calendrier (ou "primary")
4. Synchroniser directement avec Google Calendar
Corrections apportées pour résoudre l'échec de build :
1. **Index.tsx** :
- Ajout du else manquant dans le ternaire conditionnel (ligne 1536)
- Ajout du type explicite pour calendarAuthStatus (authType)
- Cast de type pour google_auth_type dans onValueChange
- Ajout d'un bouton "Synchroniser" pour Service Account
2. **SettingsService.ts** :
- Ajout des nouvelles propriétés à l'interface Settings :
- google_auth_type?: 'oauth2' | 'service_account'
- google_service_account_key?: string
- google_calendar_email?: string
Le build passe maintenant avec succès (✓ built in 8.72s).
Ajout de deux méthodes d'authentification au choix pour Google Calendar :
1. **OAuth 2.0** (méthode existante améliorée) :
- ✅ Prompt de sélection de compte Google ('select_account consent')
- ✅ Gestion dynamique du redirect_uri avec APP_URL
- ✅ Idéal pour accès au calendrier personnel avec consentement
2. **Service Account** (nouvelle méthode) :
- ✅ Authentification via clé JSON sans interaction utilisateur
- ✅ Parfait pour calendriers partagés en entreprise
- ✅ Synchronisation automatique en arrière-plan
- ✅ Configuration de l'email du calendrier à synchroniser
## Backend (routes/calendar.routes.js) :
- Ajout des constantes AUTH_TYPES (oauth2, service_account)
- Fonction getAuthType() pour récupérer la méthode configurée
- Fonction getServiceAccountClient() pour Service Account
- Fonction getCalendarClient() unifiée qui choisit la bonne méthode
- Route /auth-status mise à jour pour retourner le type d'auth
- Route /sync adaptée pour supporter les deux méthodes
- Support du calendrier email personnalisé pour Service Account
## Frontend (src/pages/Index.tsx) :
- Menu déroulant pour choisir entre OAuth2 et Service Account
- Interface conditionnelle selon la méthode choisie
- Champ textarea pour la clé JSON du Service Account
- Champ email pour spécifier le calendrier à synchroniser
- Affichage du type d'authentification dans le statut
- Amélioration de l'UI avec descriptions claires
## Documentation :
- OAUTH_SETUP.md : Guide complet mis à jour avec les deux méthodes
- Section dédiée au choix de la méthode
- Guide pas à pas pour Service Account
- Dépannage pour les deux méthodes
- README_GOOGLE_CALENDAR.md : Guide de démarrage rapide (nouveau)
- Comparaison des deux méthodes
- Configuration rapide pour chaque méthode
- Liens vers la documentation complète
Cette implémentation offre une flexibilité maximale pour s'adapter
à différents cas d'usage : personnel (OAuth2) ou professionnel (Service Account).
Corrections apportées :
1. **redirect_uri_mismatch** :
- Ajout de la variable APP_URL dans .env.example avec documentation
- Amélioration de la fonction getOAuth2Client pour accepter une URI personnalisée
- Gestion plus flexible du redirect_uri (APP_URL ou localhost par défaut)
2. **Choix du compte Google** :
- Modification du prompt OAuth : 'consent' → 'select_account consent'
- Force maintenant l'affichage du sélecteur de compte Google
3. **Interface utilisateur** :
- Ajout d'un encadré d'avertissement visible avec l'URL de redirection exacte
- Instructions claires pour la configuration dans Google Cloud Console
- Indication pour configurer APP_URL si nécessaire
4. **Documentation** :
- Création du fichier OAUTH_SETUP.md avec guide complet
- Checklist de vérification pour le débogage
- Exemples de configuration pour local et production
Ces modifications permettent de résoudre l'erreur 400 redirect_uri_mismatch
et d'offrir le choix du compte Google lors de la connexion.
Problème:
- trust proxy: true est trop permissif
- Permet à n'importe qui de contourner le rate limiting
- Erreur: ERR_ERL_PERMISSIVE_TRUST_PROXY
Solution:
- Utilisation de trust proxy: 1 au lieu de true
- Indique exactement 1 proxy devant l'application (nginx)
- Plus sécurisé: seul le premier proxy est considéré comme fiable
- Empêche les attaques par falsification de X-Forwarded-For
Configuration appropriée pour une architecture Docker avec nginx reverse proxy.
Corrections critiques:
1. Ajout de la route PUT /api/settings manquante
- Permet la mise à jour de plusieurs paramètres en une fois
- Utilisé par le frontend pour sauvegarder la configuration
- Erreur 404 résolue
2. Configuration trust proxy dans Express
- app.set('trust proxy', true)
- Nécessaire car l'application est derrière nginx/proxy
- Résout l'erreur express-rate-limit avec X-Forwarded-For
- Permet d'obtenir la vraie IP du client
Routes settings maintenant complètes:
- GET /api/settings - Récupérer tous les paramètres
- PUT /api/settings - Mettre à jour plusieurs paramètres (NOUVEAU)
- GET /api/settings/:key - Récupérer un paramètre
- PUT /api/settings/:key - Mettre à jour un paramètre
- DELETE /api/settings/:key - Supprimer un paramètre
Problème majeur résolu:
- L'éditeur de notes réinitialisait le contenu à chaque modification
- Causé par dangerouslySetInnerHTML qui forçait React à synchroniser
- Résultat: impossible d'éditer les notes correctement
Solution:
- Suppression de dangerouslySetInnerHTML du RichTextEditor
- Conservation du useEffect avec deps vides pour initialisation unique
- Utilisation du key prop pour forcer remount lors du changement de note
- Éditeur maintenant complètement "uncontrolled"
Migration complète Google Calendar vers OAuth 2.0:
- Remplacement de l'API Key simple par OAuth 2.0 (Client ID + Secret)
- Nouvelle table google_oauth_tokens pour stocker les tokens
- Routes OAuth:
* GET /api/calendar/auth-url - Génère l'URL d'authentification
* GET /api/calendar/oauth-callback - Callback OAuth avec échange de code
* GET /api/calendar/auth-status - Vérifier le statut de connexion
* POST /api/calendar/disconnect - Déconnecter Google
- Gestion automatique du rafraîchissement des tokens expirés
- Interface utilisateur mise à jour:
* Champs Client ID et Client Secret
* Indicateur de statut de connexion (connecté/non connecté)
* Bouton "Se connecter avec Google" ouvrant popup OAuth
* Bouton "Déconnecter"
* URI de redirection affichée pour configuration Google Cloud Console
- Synchronisation maintenant avec calendrier principal de l'utilisateur
- Accès complet aux données privées du calendrier
Architecture:
- CalendarService.ts: Nouvelles méthodes getAuthUrl(), getAuthStatus(), disconnect()
- Settings: Ajout de google_client_id et google_client_secret
- Popup OAuth avec communication window.postMessage
- Gestion d'erreur avec re-authentification automatique si token expiré
Corrections:
- Correction de l'import des middlewares dans openrouter.routes.js
- Utilisation de authenticateToken au lieu de requireAuth
- Fix du bug qui empêchait le serveur de démarrer
Le serveur crashait avec l'erreur:
Error: Route.get() requires a callback function but got a [object Undefined]
Résolu en utilisant le bon nom de middleware.
Ajouts majeurs:
- Système de tags complet pour les notes
* Table note_tags en base de données avec indexes
* API REST pour CRUD des tags (GET/POST/DELETE)
* UI avec onglet Tags dans l'éditeur de notes
* Badges cliquables avec icônes et suppression au survol
* Modal pour ajouter des tags
- Liste automatique des modèles OpenRouter
* Nouvelle route API /api/openrouter/models
* Cache des modèles avec rafraîchissement automatique (1h)
* Dropdown dans l'admin avec tous les modèles disponibles
* Bouton "Actualiser" pour forcer le refresh
* Affichage du nom et description de chaque modèle
* Fallback sur input manuel si pas de clé API
Améliorations UI:
- Ajout de dates de création et modification dans les notes
- Affichage des dates dans les cartes et l'éditeur
- Format français pour toutes les dates
- Onglets passés de 4 à 5 colonnes pour inclure Tags
- Animation de chargement sur le bouton refresh des modèles
Architecture:
- Nouveau service TagsService.ts pour la gestion des tags
- Nouveau service OpenRouterService.ts pour l'API OpenRouter
- Nouvelles routes openrouter.routes.js
- Support Select component pour les dropdowns
- Modals InputModal utilisés pour les tags
Problèmes résolus :
1. **Écriture lente/bloquée** : Implémentation d'un système de debounce (1s) pour l'auto-save
- onChange du RichTextEditor n'appelle plus l'API à chaque frappe
- Mise à jour locale immédiate de l'état pour une interface réactive
- Sauvegarde automatique après 1 seconde d'inactivité
2. **Images ne s'affichent pas** :
- Fix extraction de result.image || result dans uploadImage
- Mise à jour immédiate de l'état local avant l'API call
- Reset du input file après upload
- Ajout message de succès
3. **Fichiers ne s'affichent pas** :
- Fix extraction de result.file || result dans handleFileUpload
- Mise à jour immédiate de l'état local
- Reset du input file après upload
4. **Architecture améliorée** :
- handleUpdateNote avec useCallback pour performance
- handleContentChange dédié avec debounce
- Mise à jour optimiste de l'UI (local state update avant API)
- Cleanup proper du timer sur unmount
Résultat :
- Écriture fluide et réactive dans les notes
- Upload d'images fonctionnel avec feedback immédiat
- Upload de fichiers fonctionnel
- Ajout de todos dans les notes fonctionnel
- Toutes les modifications sont auto-sauvegardées
Modaux :
- Création ConfirmModal pour confirmations avec variants (default/destructive)
- Création InputModal pour saisie de texte/URL/mot de passe
- Création AddUserModal pour création d'utilisateur avec admin checkbox
- Remplacement de tous les prompt() et confirm() par des modaux modernes
- Modaux pour : suppression note, ajout todo, ajout RSS, ajout utilisateur, suppression utilisateur, changement mot de passe, ajout todo dans note
Fix RSS :
- Ajout route POST /api/rss/refresh (alias de /api/rss/fetch)
- Fix uploadImage retour avec result.image || result
UX améliorée :
- Plus de popups navigateur natifs
- Interface cohérente et moderne
- Validation dans les modaux
- Support touche Entrée dans les InputModals
- Auto-focus sur le champ de saisie
Images multiples :
- Ajout table note_images dans la base de données
- Routes POST/GET/DELETE /api/notes/:id/images
- Dossier uploads/images séparé pour les images
- Support de plusieurs images par note
Google Calendar :
- Ajout table calendar_events
- Routes /api/calendar pour sync et récupération des événements
- Box Rendez-vous dans l'interface avec affichage des événements à venir
- Configuration Google Calendar dans l'admin (API key et Calendar ID)
- Synchronisation manuelle avec Google Calendar API
- Installation package googleapis
Corrections :
- Fix RichTextEditor: ajout dir="ltr" pour empêcher l'écriture RTL
- Fix Image type conflict (lucide-react vs Note interface)
- Ajout original_name à l'interface Image pour compatibilité
Interface :
- Box Rendez-vous empilée avec Todos et RSS dans la colonne droite
- Nouvel onglet Google Calendar dans l'administration
- Bouton "Synchroniser" pour rafraîchir les événements
- Layout en 2 colonnes : notes à gauche (2 colonnes), boxes à droite
- Les notes s'ouvrent directement dans l'écran au lieu d'un modal
- Bouton "Retour aux notes" pour revenir à la grille
- Suppression du Dialog modal pour l'édition de notes
- Boxes Todos et RSS empilées verticalement dans la colonne de droite
- Résolution des conflits de types entre Image (lucide-react) et Image (Note)
- Ajout du champ original_name à l'interface Image
- Suppression de la sidebar : les notes sont affichées en grille 4 colonnes
- Notes s'ouvrent en dialog plein écran au clic
- Boxes Todos et RSS élargies et côte à côte en haut de page
- Optimisation de l'affichage pour résolution 1920x1080
- Ajout du changement de mot de passe dans l'administration
- Ajout du filtre Actives/Archivées pour les notes
- Amélioration des transitions et effets hover sur les cards
Cette mise à jour améliore l'interface utilisateur des tâches et des flux RSS
avec une meilleure organisation et de nouvelles fonctionnalités.
Changements principaux:
1. **Layout Todos et RSS côte à côte**
- Les deux boxes sont maintenant affichées côte à côte
- Meilleure utilisation de l'espace disponible
- Layout en grid responsive
2. **Système d'onglets pour les Todos**
- Onglet "Actives" : affiche uniquement les tâches non complétées
- Onglet "Complétées" : affiche les tâches terminées avec style barré
- Séparation claire entre tâches en cours et terminées
- Possibilité de re-activer une tâche complétée en cliquant dessus
3. **Endpoint PATCH /api/todos/:id/toggle ajouté**
- Nouvelle route backend pour basculer l'état d'une tâche
- Résout l'erreur 404 précédente
- Logging des actions pour suivi
4. **Optimisations visuelles**
- Tailles de texte réduites (text-xs) pour plus de contenu visible
- Hauteurs de boutons optimisées
- Espacements améliorés
- Animations et transitions fluides
Fichiers modifiés:
- routes/todos.routes.js : ajout de la route toggle
- src/pages/Index.tsx : refonte de la sidebar droite avec onglets
Cette version améliore significativement l'expérience utilisateur pour
la gestion des tâches avec une séparation claire entre tâches actives
et complétées.
Cette mise à jour majeure transforme l'application en une plateforme complète
de gestion de notes et de tâches avec de nombreuses nouvelles fonctionnalités.
Nouvelles fonctionnalités:
1. **Éditeur de texte enrichi**
- Barre d'outils complète avec formatage (gras, italique, souligné)
- Support des titres (H1, H2, H3)
- Listes à puces et numérotées
- Alignement du texte (gauche, centre, droite)
- Citations et blocs de code
- Insertion de liens
- Raccourcis clavier (Ctrl+B, Ctrl+I, Ctrl+U)
2. **Box Tâches globales (sidebar droite)**
- Liste de tâches accessible depuis toute l'application
- Ajout/suppression de tâches
- Marquage des tâches comme complétées
- Persistance des données
3. **Box Flux RSS (sidebar droite)**
- Affichage des derniers articles RSS
- Rafraîchissement manuel des flux
- Ouverture des articles dans un nouvel onglet
- Gestion des flux dans l'admin
4. **Support des fichiers joints dans les notes**
- Upload de tous types de fichiers
- Affichage de la taille des fichiers
- Téléchargement et suppression des fichiers
- Interface utilisateur intuitive
5. **Panel d'administration enrichi**
- Onglet "Flux RSS" : gestion des flux RSS
- Onglet "OpenRouter" : configuration de l'API IA
- Onglet "Paramètres" : configuration de l'intervalle de rafraîchissement RSS
- Interface organisée avec 4 onglets
6. **Amélioration de l'interface**
- Layout à 3 colonnes responsive (Notes | Éditeur | Tâches+RSS)
- Badges pour indiquer le nombre de tâches, images et fichiers par note
- Design moderne et cohérent
- Animations et transitions fluides
7. **Mise à jour de l'identité**
- Nom de l'application : "NoteFlow"
- Nouveau titre de page
- Favicon SVG configuré
- Logo mis à jour dans l'interface
Services ajoutés:
- RssService.ts : gestion des flux RSS et articles
- TodosService.ts : gestion des tâches globales
- SettingsService.ts : gestion des paramètres de l'application
Composants ajoutés:
- RichTextEditor.tsx : éditeur de texte enrichi avec barre d'outils
Modifications techniques:
- Ajout de la propriété "files" au type Note
- Résolution du conflit de nommage avec Settings
- Mise à jour de package.json avec la nouvelle description
- Mise à jour de index.html avec favicon et titre
Cette version représente une évolution majeure de l'application avec une
expérience utilisateur nettement améliorée et de nombreuses fonctionnalités
demandées.
Le build échouait car le composant Calendar utilisait l'ancienne API
de react-day-picker (IconLeft/IconRight) qui n'est plus supportée
dans la version 9.
Changements:
- Remplacement de IconLeft et IconRight par le composant Chevron
- Le composant Chevron gère maintenant l'orientation (left/right)
- Compatible avec react-day-picker v9.11.1
Cette correction résout l'erreur TypeScript TS2353 et permet au build
de se terminer avec succès.
Remplacement des wildcards (*, ?) par des noms de fichiers explicites
pour éviter tout problème potentiel avec la résolution des patterns dans
Docker COPY.
Changements :
- COPY package*.json -> COPY package.json package-lock.json
- COPY tsconfig*.json -> COPY tsconfig.json tsconfig.app.json tsconfig.node.json
- COPY tailwind.config.* -> COPY tailwind.config.js tailwind.config.ts
Cela garantit que tous les fichiers nécessaires sont correctement copiés
dans le contexte de build Docker.
Le build React échouait car Vite nécessite le répertoire public/ pour
inclure les assets statiques (favicon, images, etc.) lors de la
compilation. Sans ce répertoire, npm run build échouait avec exit code 2.
Changements:
- Ajout de COPY public ./public dans la phase builder du Dockerfile
Deux problèmes ont été identifiés et corrigés :
1. Le fichier .dockerignore excluait package-lock.json, ce qui empêchait
npm ci de fonctionner (npm ci nécessite package-lock.json)
2. L'image Alpine n'incluait pas les outils de build nécessaires pour
compiler les modules natifs Node.js (bcrypt, sqlite3)
Changements :
- Suppression de package-lock.json du .dockerignore
- Ajout de python3, make et g++ dans les deux stages du Dockerfile
pour permettre la compilation des modules natifs
Correction du Dockerfile pour résoudre l'erreur de build au stage de production.
Problème:
- npm ci --only=production échouait car package.json contient maintenant
toutes les dépendances React/Vite dans "dependencies"
- Ces dépendances sont nécessaires pour le build mais causent une erreur
avec --only=production
Solution:
- Retrait du flag --only=production
- Installation de toutes les dépendances dans l'image de production
- Les dépendances frontend ne seront pas utilisées en runtime (seul le serveur tourne)
- L'image sera légèrement plus grosse mais fonctionnelle
Note: Seules les dépendances backend (express, sqlite3, bcrypt, etc.)
sont utilisées en runtime. Les deps React restent inutilisées dans l'image.
Corrections pour résoudre les conflits de dépendances npm:
- @dyad-sh/react-vite-component-tagger: 0.0.6 → 0.8.0 (version valide)
- date-fns: 4.1.0 → 3.6.0 (compatible avec react-day-picker)
- react-day-picker: 8.10.1 → 9.11.1 (compatible avec React 19)
Génération de package-lock.json avec toutes les dépendances résolues.
Installation réussie avec 702 packages.
Configuration de l'application pour le build et déploiement React:
Package.json:
- Ajout de toutes les dépendances React/TypeScript/Vite
- Ajout des dépendances shadcn/ui et Radix UI
- Ajout des scripts de build (dev, build, preview)
- Dépendances ajoutées: react, react-dom, @tanstack/react-query,
react-router-dom, tailwindcss, vite, typescript, lucide-react,
sonner, next-themes, et toutes les primitives @radix-ui
Vite.config.ts:
- Configuration du build pour générer dans le dossier dist/
- Configuration correcte de l'alias @ pour les imports
Server.js:
- Modification pour servir les fichiers statiques depuis dist/
- Maintien du dossier /uploads depuis public/uploads
- SPA fallback pour servir dist/index.html
Dockerfile:
- Multi-stage build pour optimiser la taille
- Stage 1 (builder): Installation des dépendances et build React
- Stage 2 (production): Copie du build + dépendances serveur uniquement
- Réduction significative de la taille de l'image finale
.dockerignore:
- Nouveau fichier pour exclure les fichiers inutiles du contexte Docker
- Exclusion de node_modules, dist, .git, logs, etc.
L'application est maintenant prête pour le déploiement avec Docker.
LogiFlow
Claude