feat(auth): scaffold auth pages and guards
- Add Pinia auth store, types, and auth service (mocked) - Add login/register/verify/forgot password views and dashboard - Add reusable auth UI components (card, inputs, buttons) - Add router guards and protected routing wiring - Disable vue devtools plugin by default to avoid Node localStorage crash - Update dependencies for cookie handling - Comment out Umami script in index.html Made-with: Cursor
This commit is contained in:
+180
@@ -0,0 +1,180 @@
|
||||
Parfait Killian. Voici **tous les prompts structurés bloc par bloc** pour développer ta **plateforme de formation ultra sécurisée avec abonnement Stripe, cours vidéo/textes, exercices exécutables, progression, etc.** dans Cursor.
|
||||
|
||||
Chaque bloc est indépendant et peut être copié-collé dans Cursor directement pour guider la création pas à pas.
|
||||
|
||||
---
|
||||
|
||||
**🧱 Bloc 1 – Authentification sécurisée (frontend uniquement)**
|
||||
|
||||
```
|
||||
Tu crées une plateforme de formation avec cours vidéo/textes, exercices interactifs, paiement par abonnement via Stripe, progression personnalisée et haut niveau de sécurité.
|
||||
|
||||
Commence par créer l’authentification côté frontend (Vue 3 + TypeScript).
|
||||
|
||||
Fonctionnalités :
|
||||
- Inscription (email, mot de passe, plan choisi — non fonctionnel pour l’instant)
|
||||
- Connexion avec token (JWT ou cookie, à simuler)
|
||||
- Déconnexion
|
||||
- Mot de passe oublié
|
||||
- Vérification d’email (page après inscription)
|
||||
|
||||
Implémente :
|
||||
- un store Pinia `useAuthStore`
|
||||
- une couche `authService.ts` avec appels mockés
|
||||
- des vues `LoginView`, `RegisterView`, `ForgotPasswordView`
|
||||
- composants UI réutilisables pour formulaire
|
||||
- navigation protégée (route guards)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🧱 Bloc 2 – Intégration Stripe (paiement + plans)**
|
||||
|
||||
```
|
||||
Ajoute le système de paiement mensuel avec Stripe.
|
||||
|
||||
Fonctionnalités :
|
||||
- Plans d’abonnement multiples (mensuel, annuel, premium, etc.)
|
||||
- Paiement sécurisé via Stripe Checkout ou Billing Portal
|
||||
- Stockage du statut de souscription côté backend
|
||||
- Accès conditionnel aux cours selon le plan
|
||||
|
||||
Frontend :
|
||||
- Crée une page "Plans" avec boutons "S’abonner"
|
||||
- Intègre Stripe.js et redirige vers Checkout
|
||||
- Gère le retour de paiement via `success_url` / `cancel_url`
|
||||
|
||||
Backend (simulé ou prêt pour implémentation future) :
|
||||
- Création d’un client Stripe à l’inscription
|
||||
- Webhooks Stripe pour gérer statut de paiement
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🧱 Bloc 3 – Architecture des cours (textes + vidéos + code)**
|
||||
|
||||
```
|
||||
Crée la structure d’un cours dans le système.
|
||||
|
||||
Fonctionnalités :
|
||||
- Un cours contient plusieurs chapitres
|
||||
- Un chapitre contient des leçons (texte, vidéo, exercices)
|
||||
- Une leçon contient du contenu markdown + vidéo + zone de code
|
||||
|
||||
Modèle (à représenter en TypeScript dans frontend pour l’instant) :
|
||||
- Course: id, title, description, cover, plan_required
|
||||
- Chapter: id, course_id, title, position
|
||||
- Lesson: id, chapter_id, title, content (markdown), video_url, exercise_type
|
||||
|
||||
Crée les vues :
|
||||
- `CourseOverview.vue` pour explorer un cours
|
||||
- `LessonViewer.vue` avec affichage markdown + vidéo + éditeur de code
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🧱 Bloc 4 – Progression utilisateur dans les cours**
|
||||
|
||||
```
|
||||
Crée un système pour suivre la progression individuelle de l’utilisateur.
|
||||
|
||||
Fonctionnalités :
|
||||
- Chaque utilisateur peut suivre plusieurs cours
|
||||
- Chaque leçon peut être marquée comme complétée
|
||||
- Affichage de la progression dans le cours (ex: 4/10 leçons terminées)
|
||||
- Synchronisé avec le backend (mocké pour l’instant)
|
||||
|
||||
Implémente :
|
||||
- Un store Pinia `useProgressStore`
|
||||
- Une structure : { user_id, course_id, completed_lessons: [lesson_ids] }
|
||||
- Affiche des badges de progression dans l’UI
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🧱 Bloc 5 – Éditeur de code avec exécution sandboxée**
|
||||
|
||||
```
|
||||
Ajoute une zone d’exécution de code dans certaines leçons (exercices interactifs).
|
||||
|
||||
Fonctionnalités :
|
||||
- Zone d’édition avec CodeMirror ou Monaco Editor
|
||||
- Bouton "Exécuter"
|
||||
- Envoi du code à une API d’exécution (Docker, VM, ou service type Piston ou Playground)
|
||||
- Récupération de l’output stdout/stderr
|
||||
|
||||
Commence avec un backend mocké (`codeRunnerService.ts`) qui renvoie une sortie simulée, prêt à être branché sur un vrai moteur plus tard.
|
||||
|
||||
UI :
|
||||
- Composant `CodeExercise.vue` avec éditeur + output + reset
|
||||
- Validation des exercices dans la progression si output match attendu
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🧱 Bloc 6 – Sécurité avancée & protection des routes**
|
||||
|
||||
```
|
||||
Implémente une sécurité frontend renforcée.
|
||||
|
||||
Fonctionnalités :
|
||||
- Redirection automatique si token expiré
|
||||
- Accès conditionnel selon abonnement (plan actif ou non)
|
||||
- Navigation dynamique : masquer les cours inaccessibles
|
||||
|
||||
Ajoute :
|
||||
- Middleware de navigation Vue Router pour bloquer l’accès aux routes protégées
|
||||
- Contrôle d’accès par rôle/plan dans `authStore`
|
||||
- Méthodes helpers comme `canAccess(course)` ou `hasPlan(planName)`
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🧱 Bloc 7 – Tableau de bord utilisateur (dashboard)**
|
||||
|
||||
```
|
||||
Crée un dashboard utilisateur avec :
|
||||
- Cours suivis et progression
|
||||
- Plan actuel et facturation
|
||||
- Historique des paiements (via Stripe si connecté)
|
||||
- Accès aux paramètres de compte
|
||||
|
||||
Crée la vue `DashboardView.vue` avec :
|
||||
- Composants `UserCourses.vue`, `BillingInfo.vue`, `AccountSettings.vue`
|
||||
- Requêtes via les stores et services simulés
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🧱 Bloc 8 – Administration des cours (interface admin)**
|
||||
|
||||
```
|
||||
Crée une interface pour que l’administrateur puisse :
|
||||
- Créer, modifier, supprimer des cours
|
||||
- Ajouter des chapitres, leçons, vidéos, exercices
|
||||
|
||||
Crée la vue `AdminCoursesView.vue` avec :
|
||||
- Liste des cours avec boutons d’action
|
||||
- Formulaires dynamiques pour ajouter chapitre/leçon
|
||||
- Éditeur markdown intégré + upload vidéo
|
||||
|
||||
Utilise Pinia ou un store temporaire pour gérer les états du formulaire.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🧱 Bloc 9 – Gestion des erreurs et UX propre**
|
||||
|
||||
```
|
||||
Ajoute une UX propre et robuste :
|
||||
- Toasts pour succès/erreurs
|
||||
- Indicateurs de chargement dans tous les appels API
|
||||
- Pages 404 / 403 / erreur serveur
|
||||
- Fallbacks pour vidéos, markdown, et éditeur de code
|
||||
|
||||
Ajoute un composable `useToast.ts` pour centraliser l'affichage des messages et erreurs.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Souhaites-tu que je t’aide à écrire le backend ou les services API de ces blocs en parallèle ? (Rails, Node.js, autre ?)
|
||||
Reference in New Issue
Block a user