vako 1.3.17 → 1.3.19

package/bin/commands/setup-executor.js

@@ -282,16 +282,73 @@ app.listen();
 
 ${description || 'A modern web application built with Vako'}
 
-## Getting Started
+## 🚀 Getting Started
+
+### Installation
 
 \`\`\`bash
 npm install
+\`\`\`
+
+### Development
+
+Démarrer le serveur de développement avec hot reload :
+
+\`\`\`bash
 npm run dev
+# ou
+vako dev
 \`\`\`
 
-## Documentation
+L'application sera disponible sur [http://localhost:3000](http://localhost:3000)
 
-Visit [https://vako.js.org](https://vako.js.org) for more information.
+### Production
+
+\`\`\`bash
+npm run build
+npm start
+\`\`\`
+
+## 📁 Project Structure
+
+\`\`\`
+${projectName}/
+├── views/          # Templates EJS
+│   ├── index.ejs   # Page d'accueil
+│   └── about.ejs   # Page à propos
+├── routes/         # Routes Express
+│   └── index.js    # Routes principales
+├── public/         # Fichiers statiques
+│   ├── css/        # Styles CSS
+│   └── js/         # JavaScript client
+├── locales/        # Fichiers de traduction
+├── config/         # Configuration
+├── middleware/     # Middleware personnalisé
+└── app.js          # Point d'entrée
+\`\`\`
+
+## 🎯 Features
+
+- ✅ Hot Reload Development Server
+- ✅ Plugin System
+- ✅ Authentication Ready
+- ✅ Modern Architecture
+- ✅ EJS Templates
+- ✅ RESTful API Routes
+
+## 📚 Documentation
+
+- [Vako Documentation](https://vako.js.org)
+- [Express.js Guide](https://expressjs.com)
+- [EJS Templates](https://ejs.co)
+
+## 🤝 Contributing
+
+Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request.
+
+## 📝 License
+
+${license || 'MIT'}
 `;
 
     // .gitignore
@@ -307,14 +364,103 @@ coverage/
     files['routes/index.js'] = `const { Router } = require('express');
 const router = Router();
 
+// Page d'accueil
 router.get('/', (req, res) => {
   res.render('index', {
-    title: 'Welcome to ${projectName}'
+    title: '${translations.title || 'Welcome to'} ${projectName}',
+    message: '${translations.welcome || 'Welcome to your Vako application!'}',
+    features: [
+      'Hot Reload Development Server',
+      'Plugin System',
+      'Authentication Ready',
+      'Modern Architecture'
+    ]
+  });
+});
+
+// Page à propos
+router.get('/about', (req, res) => {
+  res.render('about', {
+    title: 'About - ${projectName}',
+    description: '${description || translations.description || 'A modern web application built with Vako'}'
+  });
+});
+
+// API exemple
+router.get('/api/status', (req, res) => {
+  res.json({
+    status: 'ok',
+    message: 'Vako API is running',
+    timestamp: new Date().toISOString()
+  });
+});
+
+module.exports = router;
+`;
+
+    // routes/auth.js (créé seulement si auth est activé, mais on le crée toujours pour éviter les erreurs)
+    if (this.config.auth && this.config.auth.enabled) {
+      files['routes/auth.js'] = `const { Router } = require('express');
+const router = Router();
+
+// Page de connexion
+router.get('/login', (req, res) => {
+  res.render('auth/login', { 
+    title: 'Login - ${projectName}',
+    error: req.query.error || null
+  });
+});
+
+// Traitement de la connexion
+router.post('/login', async (req, res) => {
+  const { username, password } = req.body;
+  
+  // TODO: Implémenter la logique d'authentification
+  // Exemple basique (à remplacer par une vraie authentification)
+  if (username && password) {
+    // Ici vous devriez vérifier les credentials dans la base de données
+    req.session.userId = username; // Exemple simple
+    return res.redirect('/');
+  }
+  
+  res.redirect('/auth/login?error=invalid_credentials');
+});
+
+// Page d'inscription
+router.get('/register', (req, res) => {
+  res.render('auth/register', { 
+    title: 'Register - ${projectName}',
+    error: req.query.error || null
+  });
+});
+
+// Traitement de l'inscription
+router.post('/register', async (req, res) => {
+  const { username, email, password } = req.body;
+  
+  // TODO: Implémenter la logique d'inscription
+  // Exemple basique (à remplacer par une vraie logique)
+  if (username && email && password) {
+    // Ici vous devriez créer l'utilisateur dans la base de données
+    return res.redirect('/auth/login?success=registered');
+  }
+  
+  res.redirect('/auth/register?error=missing_fields');
+});
+
+// Déconnexion
+router.get('/logout', (req, res) => {
+  req.session.destroy((err) => {
+    if (err) {
+      console.error('Error destroying session:', err);
+    }
+    res.redirect('/');
   });
 });
 
 module.exports = router;
 `;
+    }
 
     // views/index.ejs
     const langAttr = language === 'multi' ? 'fr' : language;
@@ -323,11 +469,110 @@ module.exports = router;
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="${description || translations.description || 'A modern web application built with Vako'}">
   <title><%= title %></title>
+  <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
-  <h1><%= title %></h1>
-  <p>${translations.welcome || 'Welcome to your Vako application!'}</p>
+  <header>
+    <nav>
+      <div class="container">
+        <h1 class="logo">${projectName}</h1>
+        <ul class="nav-menu">
+          <li><a href="/" class="active">Home</a></li>
+          <li><a href="/about">About</a></li>
+          <li><a href="/api/status">API Status</a></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <section class="hero">
+      <div class="container">
+        <h1><%= title %></h1>
+        <p class="lead"><%= message %></p>
+        <div class="cta-buttons">
+          <a href="/about" class="btn btn-primary">Learn More</a>
+          <a href="/api/status" class="btn btn-secondary">API Status</a>
+        </div>
+      </div>
+    </section>
+
+    <section class="features">
+      <div class="container">
+        <h2>Features</h2>
+        <div class="features-grid">
+          <% features.forEach(function(feature) { %>
+            <div class="feature-card">
+              <div class="feature-icon">✨</div>
+              <h3><%= feature %></h3>
+            </div>
+          <% }); %>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div class="container">
+      <p>&copy; ${new Date().getFullYear()} ${projectName}. Built with <a href="https://vako.js.org" target="_blank">Vako</a>.</p>
+    </div>
+  </footer>
+
+  <script src="/js/main.js"></script>
+</body>
+</html>
+`;
+
+    // views/about.ejs
+    files['views/about.ejs'] = `<!DOCTYPE html>
+<html lang="${langAttr}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= title %></title>
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <div class="container">
+        <h1 class="logo">${projectName}</h1>
+        <ul class="nav-menu">
+          <li><a href="/">Home</a></li>
+          <li><a href="/about" class="active">About</a></li>
+          <li><a href="/api/status">API Status</a></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <section class="content">
+      <div class="container">
+        <h1><%= title %></h1>
+        <p><%= description %></p>
+        <div class="info-box">
+          <h3>Technology Stack</h3>
+          <ul>
+            <li>Vako Framework</li>
+            <li>Express.js</li>
+            <li>EJS Templates</li>
+            <li>Node.js</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div class="container">
+      <p>&copy; ${new Date().getFullYear()} ${projectName}. Built with <a href="https://vako.js.org" target="_blank">Vako</a>.</p>
+    </div>
+  </footer>
+
+  <script src="/js/main.js"></script>
 </body>
 </html>
 `;
@@ -352,20 +597,429 @@ module.exports = router;
     }
 
     // public/css/style.css
-    files['public/css/style.css'] = `body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    files['public/css/style.css'] = `* {
   margin: 0;
-  padding: 20px;
-  background-color: #f5f5f5;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-h1 {
-  color: #333;
+:root {
+  --primary-color: #007bff;
+  --secondary-color: #6c757d;
+  --success-color: #28a745;
+  --danger-color: #dc3545;
+  --warning-color: #ffc107;
+  --info-color: #17a2b8;
+  --light-color: #f8f9fa;
+  --dark-color: #343a40;
+  --white: #ffffff;
+  --gray: #6c757d;
+  --border-radius: 8px;
+  --shadow: 0 2px 4px rgba(0,0,0,0.1);
+  --transition: all 0.3s ease;
 }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
+  color: var(--dark-color);
+  background-color: var(--light-color);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  width: 100%;
+}
+
+/* Header & Navigation */
+header {
+  background: var(--white);
+  box-shadow: var(--shadow);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+nav {
+  padding: 1rem 0;
+}
+
+nav .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--primary-color);
+}
+
+.nav-menu {
+  display: flex;
+  list-style: none;
+  gap: 2rem;
+}
+
+.nav-menu a {
+  text-decoration: none;
+  color: var(--dark-color);
+  font-weight: 500;
+  transition: var(--transition);
+  padding: 0.5rem 1rem;
+  border-radius: var(--border-radius);
+}
+
+.nav-menu a:hover,
+.nav-menu a.active {
+  color: var(--primary-color);
+  background-color: var(--light-color);
+}
+
+/* Main Content */
+main {
+  flex: 1;
+  padding: 2rem 0;
+}
+
+/* Hero Section */
+.hero {
+  background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
+  color: var(--white);
+  padding: 4rem 0;
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.hero h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  color: var(--white);
+}
+
+.lead {
+  font-size: 1.25rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Buttons */
+.btn {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--border-radius);
+  text-decoration: none;
+  font-weight: 600;
+  transition: var(--transition);
+  border: 2px solid transparent;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background-color: var(--white);
+  color: var(--primary-color);
+}
+
+.btn-primary:hover {
+  background-color: var(--light-color);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.btn-secondary {
+  background-color: transparent;
+  color: var(--white);
+  border-color: var(--white);
+}
+
+.btn-secondary:hover {
+  background-color: var(--white);
+  color: var(--primary-color);
+}
+
+/* Features Section */
+.features {
+  padding: 3rem 0;
+}
+
+.features h2 {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+  color: var(--dark-color);
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.feature-card {
+  background: var(--white);
+  padding: 2rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  text-align: center;
+  transition: var(--transition);
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.feature-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+  color: var(--dark-color);
+  margin-top: 1rem;
+}
+
+/* Content Section */
+.content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.content h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+  color: var(--dark-color);
+}
+
+.content p {
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+  color: var(--gray);
+}
+
+.info-box {
+  background: var(--white);
+  padding: 2rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  margin-top: 2rem;
+}
+
+.info-box h3 {
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+.info-box ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.info-box li {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--light-color);
+}
+
+.info-box li:last-child {
+  border-bottom: none;
+}
+
+.info-box li:before {
+  content: "✓ ";
+  color: var(--success-color);
+  font-weight: bold;
+  margin-right: 0.5rem;
+}
+
+/* Footer */
+footer {
+  background: var(--dark-color);
+  color: var(--white);
+  padding: 2rem 0;
+  margin-top: auto;
+  text-align: center;
+}
+
+footer a {
+  color: var(--primary-color);
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .nav-menu {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .hero h1 {
+    font-size: 2rem;
+  }
+
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .cta-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .btn {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+`;
+
+    // views/error.ejs
+    files['views/error.ejs'] = `<!DOCTYPE html>
+<html lang="${langAttr}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= title %></title>
+  <link rel="stylesheet" href="/css/style.css">
+  <style>
+    .error-container {
+      text-align: center;
+      padding: 4rem 2rem;
+      max-width: 600px;
+      margin: 0 auto;
+    }
+    .error-code {
+      font-size: 6rem;
+      font-weight: bold;
+      color: var(--danger-color);
+      margin-bottom: 1rem;
+    }
+    .error-message {
+      font-size: 1.5rem;
+      margin-bottom: 2rem;
+      color: var(--gray);
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <nav>
+      <div class="container">
+        <h1 class="logo">${projectName}</h1>
+        <ul class="nav-menu">
+          <li><a href="/">Home</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <div class="error-container">
+      <div class="error-code"><%= error.status || 500 %></div>
+      <h1><%= title %></h1>
+      <p class="error-message"><%= message %></p>
+      <% if (error.stack && process.env.NODE_ENV === 'development') { %>
+        <pre style="text-align: left; background: #f5f5f5; padding: 1rem; border-radius: 8px; overflow-x: auto;"><%= error.stack %></pre>
+      <% } %>
+      <div class="cta-buttons" style="margin-top: 2rem;">
+        <a href="/" class="btn btn-primary">Go Home</a>
+      </div>
+    </div>
+  </main>
+
+  <footer>
+    <div class="container">
+      <p>&copy; ${new Date().getFullYear()} ${projectName}. Built with <a href="https://vako.js.org" target="_blank">Vako</a>.</p>
+    </div>
+  </footer>
+</body>
+</html>
 `;
 
     // public/js/main.js
-    files['public/js/main.js'] = `console.log('Vako loaded');
+    files['public/js/main.js'] = `// Vako Application JavaScript
+console.log('🚀 Vako application loaded');
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  anchor.addEventListener('click', function (e) {
+    e.preventDefault();
+    const target = document.querySelector(this.getAttribute('href'));
+    if (target) {
+      target.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  });
+});
+
+// API Status Check
+async function checkApiStatus() {
+  try {
+    const response = await fetch('/api/status');
+    const data = await response.json();
+    console.log('API Status:', data);
+    return data;
+  } catch (error) {
+    console.error('API Status check failed:', error);
+  }
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('DOM loaded');
+  
+  // Check API status if on home page
+  if (window.location.pathname === '/') {
+    checkApiStatus();
+  }
+  
+  // Add animation to feature cards
+  const featureCards = document.querySelectorAll('.feature-card');
+  featureCards.forEach((card, index) => {
+    card.style.animationDelay = \`\${index * 0.1}s\`;
+    card.classList.add('fade-in');
+  });
+});
+
+// Add fade-in animation
+const style = document.createElement('style');
+style.textContent = \`
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  .fade-in {
+    animation: fadeIn 0.6s ease-out forwards;
+    opacity: 0;
+  }
+\`;
+document.head.appendChild(style);
 `;
 
     return files;
@@ -729,22 +1383,75 @@ coverage/
 
   async setupAuthentication() {
     if (this.config.auth.enabled) {
-      // Create auth routes and middleware
+      // S'assurer que le dossier routes existe
+      const routesDir = path.join(this.projectPath, 'routes');
+      if (!fs.existsSync(routesDir)) {
+        fs.mkdirSync(routesDir, { recursive: true });
+      }
+
+      // S'assurer que le dossier views/auth existe pour les templates
+      const authViewsDir = path.join(this.projectPath, 'views', 'auth');
+      if (!fs.existsSync(authViewsDir)) {
+        fs.mkdirSync(authViewsDir, { recursive: true });
+      }
+
+      // Create auth routes
       const authRoute = `const { Router } = require('express');
 const router = Router();
 
+// Page de connexion
 router.get('/login', (req, res) => {
-  res.render('auth/login', { title: 'Login' });
+  res.render('auth/login', { 
+    title: 'Login - ${this.config.projectName}',
+    error: req.query.error || null
+  });
 });
 
+// Traitement de la connexion
 router.post('/login', async (req, res) => {
-  // Implement login logic here
-  res.redirect('/');
+  const { username, password } = req.body;
+  
+  // TODO: Implémenter la logique d'authentification
+  // Exemple basique (à remplacer par une vraie authentification)
+  if (username && password) {
+    // Ici vous devriez vérifier les credentials dans la base de données
+    req.session.userId = username; // Exemple simple
+    return res.redirect('/');
+  }
+  
+  res.redirect('/login?error=invalid_credentials');
+});
+
+// Page d'inscription
+router.get('/register', (req, res) => {
+  res.render('auth/register', { 
+    title: 'Register - ${this.config.projectName}',
+    error: req.query.error || null
+  });
+});
+
+// Traitement de l'inscription
+router.post('/register', async (req, res) => {
+  const { username, email, password } = req.body;
+  
+  // TODO: Implémenter la logique d'inscription
+  // Exemple basique (à remplacer par une vraie logique)
+  if (username && email && password) {
+    // Ici vous devriez créer l'utilisateur dans la base de données
+    return res.redirect('/login?success=registered');
+  }
+  
+  res.redirect('/register?error=missing_fields');
 });
 
+// Déconnexion
 router.get('/logout', (req, res) => {
-  // Implement logout logic here
-  res.redirect('/');
+  req.session.destroy((err) => {
+    if (err) {
+      console.error('Error destroying session:', err);
+    }
+    res.redirect('/');
+  });
 });
 
 module.exports = router;
@@ -752,6 +1459,208 @@ module.exports = router;
       
       const authPath = path.join(this.projectPath, 'routes/auth.js');
       fs.writeFileSync(authPath, authRoute, 'utf8');
+
+      // Créer les vues d'authentification
+      const loginView = `<!DOCTYPE html>
+<html lang="${this.config.language === 'multi' ? 'fr' : this.config.language || 'fr'}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= title %></title>
+  <link rel="stylesheet" href="/css/style.css">
+  <style>
+    .auth-container {
+      max-width: 400px;
+      margin: 4rem auto;
+      padding: 2rem;
+      background: var(--white);
+      border-radius: var(--border-radius);
+      box-shadow: var(--shadow);
+    }
+    .auth-container h1 {
+      text-align: center;
+      margin-bottom: 2rem;
+      color: var(--primary-color);
+    }
+    .form-group {
+      margin-bottom: 1.5rem;
+    }
+    .form-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+      color: var(--dark-color);
+      font-weight: 500;
+    }
+    .form-group input {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid #ddd;
+      border-radius: var(--border-radius);
+      font-size: 1rem;
+    }
+    .form-group input:focus {
+      outline: none;
+      border-color: var(--primary-color);
+    }
+    .error-message {
+      background: var(--danger-color);
+      color: var(--white);
+      padding: 0.75rem;
+      border-radius: var(--border-radius);
+      margin-bottom: 1rem;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <nav>
+      <div class="container">
+        <h1 class="logo">${this.config.projectName}</h1>
+        <ul class="nav-menu">
+          <li><a href="/">Home</a></li>
+          <li><a href="/login" class="active">Login</a></li>
+          <li><a href="/register">Register</a></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <div class="auth-container">
+      <h1>Login</h1>
+      <% if (error) { %>
+        <div class="error-message">Invalid credentials. Please try again.</div>
+      <% } %>
+      <form method="POST" action="/login">
+        <div class="form-group">
+          <label for="username">Username</label>
+          <input type="text" id="username" name="username" required>
+        </div>
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input type="password" id="password" name="password" required>
+        </div>
+        <button type="submit" class="btn btn-primary" style="width: 100%;">Login</button>
+      </form>
+      <p style="text-align: center; margin-top: 1rem;">
+        Don't have an account? <a href="/register">Register here</a>
+      </p>
+    </div>
+  </main>
+
+  <footer>
+    <div class="container">
+      <p>&copy; ${new Date().getFullYear()} ${this.config.projectName}. Built with <a href="https://vako.js.org" target="_blank">Vako</a>.</p>
+    </div>
+  </footer>
+</body>
+</html>
+`;
+
+      const registerView = `<!DOCTYPE html>
+<html lang="${this.config.language === 'multi' ? 'fr' : this.config.language || 'fr'}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= title %></title>
+  <link rel="stylesheet" href="/css/style.css">
+  <style>
+    .auth-container {
+      max-width: 400px;
+      margin: 4rem auto;
+      padding: 2rem;
+      background: var(--white);
+      border-radius: var(--border-radius);
+      box-shadow: var(--shadow);
+    }
+    .auth-container h1 {
+      text-align: center;
+      margin-bottom: 2rem;
+      color: var(--primary-color);
+    }
+    .form-group {
+      margin-bottom: 1.5rem;
+    }
+    .form-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+      color: var(--dark-color);
+      font-weight: 500;
+    }
+    .form-group input {
+      width: 100%;
+      padding: 0.75rem;
+      border: 1px solid #ddd;
+      border-radius: var(--border-radius);
+      font-size: 1rem;
+    }
+    .form-group input:focus {
+      outline: none;
+      border-color: var(--primary-color);
+    }
+    .error-message {
+      background: var(--danger-color);
+      color: var(--white);
+      padding: 0.75rem;
+      border-radius: var(--border-radius);
+      margin-bottom: 1rem;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <nav>
+      <div class="container">
+        <h1 class="logo">${this.config.projectName}</h1>
+        <ul class="nav-menu">
+          <li><a href="/">Home</a></li>
+          <li><a href="/login">Login</a></li>
+          <li><a href="/register" class="active">Register</a></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <div class="auth-container">
+      <h1>Register</h1>
+      <% if (error) { %>
+        <div class="error-message">Please fill all fields.</div>
+      <% } %>
+      <form method="POST" action="/register">
+        <div class="form-group">
+          <label for="username">Username</label>
+          <input type="text" id="username" name="username" required>
+        </div>
+        <div class="form-group">
+          <label for="email">Email</label>
+          <input type="email" id="email" name="email" required>
+        </div>
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input type="password" id="password" name="password" required>
+        </div>
+        <button type="submit" class="btn btn-primary" style="width: 100%;">Register</button>
+      </form>
+      <p style="text-align: center; margin-top: 1rem;">
+        Already have an account? <a href="/login">Login here</a>
+      </p>
+    </div>
+  </main>
+
+  <footer>
+    <div class="container">
+      <p>&copy; ${new Date().getFullYear()} ${this.config.projectName}. Built with <a href="https://vako.js.org" target="_blank">Vako</a>.</p>
+    </div>
+  </footer>
+</body>
+</html>
+`;
+
+      fs.writeFileSync(path.join(authViewsDir, 'login.ejs'), loginView, 'utf8');
+      fs.writeFileSync(path.join(authViewsDir, 'register.ejs'), registerView, 'utf8');
     }
   }
 

package/bin/commands/setup.js

@@ -316,21 +316,28 @@ class SetupWizard {
       }
     ];
 
-    const { language } = await inquirer.prompt([{
-      type: 'list',
-      name: 'language',
-      message: '🌍 Select the language for your site:',
-      choices: languageChoices.map(choice => ({
-        name: choice.name,
-        value: choice.value
-      })),
-      pageSize: 10
-    }]);
+    try {
+      const { language } = await inquirer.prompt([{
+        type: 'list',
+        name: 'language',
+        message: '🌍 Select the language for your site:',
+        choices: languageChoices.map(choice => ({
+          name: choice.name,
+          value: choice.value
+        })),
+        pageSize: 10
+      }]);
 
-    this.config.language = language;
-    
-    const selectedChoice = languageChoices.find(c => c.value === language);
-    console.log(chalk.gray(`\n✓ Selected: ${selectedChoice.description}\n`));
+      this.config.language = language || 'fr'; // Par défaut français
+      
+      const selectedChoice = languageChoices.find(c => c.value === language);
+      if (selectedChoice) {
+        console.log(chalk.gray(`\n✓ Selected: ${selectedChoice.description}\n`));
+      }
+    } catch (error) {
+      console.error(chalk.red('Error selecting language:'), error.message);
+      this.config.language = 'fr'; // Par défaut français en cas d'erreur
+    }
   }
 
   /**

package/bin/vako.js

@@ -21,7 +21,7 @@ const program = new Command();
 program
   .name('vako')
   .description('Vako Framework CLI')
-  .version('1.3.17');
+  .version('1.3.19');
 
 // ============= DEV COMMAND =============
 program

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vako",
-  "version": "1.3.17",
+  "version": "1.3.19",
   "description": "🚀 Ultra-modern Node.js framework with hot reload, plugins, authentication, TypeScript support, and Next.js integration",
   "main": "index.js",
   "types": "types/index.d.ts",