frontend-hamroun 1.2.22 → 1.2.24

package/templates/ssr-template/server.js

@@ -0,0 +1,577 @@
+import { server } from 'frontend-hamroun';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function startServer() {
+  try {
+    // Import server components dynamically
+    const { Server, AuthService, Database, renderToString } = await server.getServer();
+    
+    // Create the server instance
+    const app = new Server({
+      port: process.env.PORT ? parseInt(process.env.PORT) : 3000,
+      apiDir: './api',
+      staticDir: './public',
+      
+      // Enable CORS for API endpoints
+      enableCors: true,
+      
+      // Setup authentication
+      auth: {
+        secret: process.env.JWT_SECRET || 'your-development-secret-key',
+        expiresIn: '7d'
+      },
+      
+      // Optional database configuration
+      /*
+      db: {
+        url: process.env.DATABASE_URL || 'mongodb://localhost:27017/my_app',
+        type: 'mongodb'
+      }
+      */
+    });
+    
+    // Get the Express app instance to add custom routes
+    const expressApp = app.getExpressApp();
+    
+    // Get the auth service
+    const auth = app.getAuth();
+    
+    // Add authentication routes
+    expressApp.post('/api/auth/login', (req, res) => {
+      // Mock users for demonstration
+      const users = [
+        { id: 1, username: 'admin', password: '$2a$10$eBMQ3PFvX0G5a.U/zOA8Y.3JHZ5Ktq0hTjh4n2mjvXcOt6CvTxAZ2', roles: ['admin'] }, // password: admin123
+        { id: 2, username: 'user', password: '$2a$10$h6y7r0WSRO.BT9WBnTJj1udTI5OtMBdHcQ3/xNW7UQ1WXzMpYvNHe', roles: ['user'] }  // password: user123
+      ];
+      
+      const { username, password } = req.body;
+      
+      if (!username || !password) {
+        return res.status(400).json({ message: 'Username and password are required' });
+      }
+      
+      // Find user
+      const user = users.find(u => u.username === username);
+      
+      if (!user) {
+        return res.status(401).json({ message: 'Invalid credentials' });
+      }
+      
+      // Authenticate user
+      auth.comparePasswords(password, user.password)
+        .then(isMatch => {
+          if (!isMatch) {
+            return res.status(401).json({ message: 'Invalid credentials' });
+          }
+          
+          // Generate token
+          const token = auth.generateToken({
+            id: user.id,
+            username: user.username,
+            roles: user.roles
+          });
+          
+          // Return token
+          res.json({
+            token,
+            user: {
+              id: user.id,
+              username: user.username,
+              roles: user.roles
+            }
+          });
+        })
+        .catch(err => {
+          console.error('Auth error:', err);
+          res.status(500).json({ message: 'Authentication error' });
+        });
+    });
+    
+    // Protected API route example
+    expressApp.get('/api/protected', auth.requireAuth(), (req, res) => {
+      res.json({
+        message: 'This is protected data',
+        user: req.user,
+        timestamp: new Date().toISOString()
+      });
+    });
+    
+    // Admin-only route example
+    expressApp.get('/api/admin', auth.requireRoles(['admin']), (req, res) => {
+      res.json({
+        message: 'Admin-only data',
+        user: req.user,
+        timestamp: new Date().toISOString()
+      });
+    });
+    
+    // Override the default route handler with our SSR implementation
+    expressApp.get('/', async (req, res) => {
+      try {
+        // Create a virtual DOM tree with more complex structure
+        const vnode = {
+          type: 'div',
+          props: {
+            id: 'app',
+            children: [
+              {
+                type: 'header',
+                props: {
+                  className: 'header',
+                  children: [
+                    {
+                      type: 'h1',
+                      props: { children: 'Frontend Hamroun Full-Stack App' }
+                    },
+                    {
+                      type: 'nav',
+                      props: {
+                        children: [
+                          { type: 'a', props: { href: '/', children: 'Home' } },
+                          { type: 'span', props: { children: ' | ' } },
+                          { type: 'a', props: { href: '/about', children: 'About' } },
+                          { type: 'span', props: { children: ' | ' } },
+                          { type: 'a', props: { href: '#login', id: 'login-link', children: 'Login' } }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              },
+              {
+                type: 'main',
+                props: {
+                  children: [
+                    {
+                      type: 'section',
+                      props: {
+                        className: 'hero',
+                        children: [
+                          {
+                            type: 'h2',
+                            props: { children: 'Server-Side Rendering with Authentication' }
+                          },
+                          {
+                            type: 'p',
+                            props: { children: `This page was rendered on the server at ${new Date().toISOString()}` }
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      type: 'section',
+                      props: {
+                        id: 'login-form',
+                        className: 'login-form hidden',
+                        children: [
+                          {
+                            type: 'h3',
+                            props: { children: 'Login' }
+                          },
+                          {
+                            type: 'div',
+                            props: {
+                              className: 'form-group',
+                              children: [
+                                {
+                                  type: 'label',
+                                  props: { htmlFor: 'username', children: 'Username:' }
+                                },
+                                {
+                                  type: 'input',
+                                  props: { id: 'username', type: 'text', placeholder: 'admin or user' }
+                                }
+                              ]
+                            }
+                          },
+                          {
+                            type: 'div',
+                            props: {
+                              className: 'form-group',
+                              children: [
+                                {
+                                  type: 'label',
+                                  props: { htmlFor: 'password', children: 'Password:' }
+                                },
+                                {
+                                  type: 'input',
+                                  props: { id: 'password', type: 'password', placeholder: 'admin123 or user123' }
+                                }
+                              ]
+                            }
+                          },
+                          {
+                            type: 'button',
+                            props: { id: 'login-button', className: 'btn', children: 'Login' }
+                          },
+                          {
+                            type: 'div',
+                            props: { id: 'login-message', className: 'message' }
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      type: 'section',
+                      props: {
+                        id: 'protected-content',
+                        className: 'protected-content hidden',
+                        children: [
+                          {
+                            type: 'h3',
+                            props: { children: 'Protected Content' }
+                          },
+                          {
+                            type: 'div',
+                            props: { id: 'protected-data', className: 'data-container' }
+                          },
+                          {
+                            type: 'button',
+                            props: { id: 'load-protected', className: 'btn', children: 'Load Protected Data' }
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      type: 'section',
+                      props: {
+                        id: 'admin-content',
+                        className: 'admin-content hidden',
+                        children: [
+                          {
+                            type: 'h3',
+                            props: { children: 'Admin Content' }
+                          },
+                          {
+                            type: 'div',
+                            props: { id: 'admin-data', className: 'data-container' }
+                          },
+                          {
+                            type: 'button',
+                            props: { id: 'load-admin', className: 'btn', children: 'Load Admin Data' }
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              },
+              {
+                type: 'footer',
+                props: {
+                  children: [
+                    {
+                      type: 'p',
+                      props: { children: '© 2023 Frontend Hamroun' }
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        };
+
+        // Generate HTML from our virtual node
+        const content = await renderToString(vnode);
+        
+        // Send complete HTML document
+        res.send(`
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <meta charset="UTF-8">
+              <meta name="viewport" content="width=device-width, initial-scale=1.0">
+              <title>Frontend Hamroun Full-Stack</title>
+              <style>
+                body {
+                  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+                  line-height: 1.6;
+                  color: #333;
+                  max-width: 1200px;
+                  margin: 0 auto;
+                  padding: 0 1rem;
+                }
+                .header {
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  padding: 1rem 0;
+                  border-bottom: 1px solid #eee;
+                }
+                .hero {
+                  padding: 2rem 0;
+                }
+                .btn {
+                  background-color: #4CAF50;
+                  border: none;
+                  color: white;
+                  padding: 10px 20px;
+                  cursor: pointer;
+                  border-radius: 4px;
+                  margin-top: 1rem;
+                }
+                .hidden {
+                  display: none;
+                }
+                .form-group {
+                  margin-bottom: 1rem;
+                }
+                .form-group label {
+                  display: block;
+                  margin-bottom: 0.5rem;
+                }
+                .form-group input {
+                  padding: 0.5rem;
+                  width: 100%;
+                  max-width: 300px;
+                  border: 1px solid #ddd;
+                  border-radius: 4px;
+                }
+                .message {
+                  margin-top: 1rem;
+                  padding: 0.5rem;
+                }
+                .success {
+                  color: green;
+                  background-color: #e8f5e9;
+                }
+                .error {
+                  color: red;
+                  background-color: #ffebee;
+                }
+                .data-container {
+                  background-color: #f5f5f5;
+                  padding: 1rem;
+                  border-radius: 4px;
+                  margin: 1rem 0;
+                  min-height: 100px;
+                }
+                footer {
+                  margin-top: 2rem;
+                  padding: 1rem 0;
+                  border-top: 1px solid #eee;
+                  text-align: center;
+                }
+              </style>
+              <script>
+                // Client-side JavaScript for interactivity
+                document.addEventListener('DOMContentLoaded', () => {
+                  let token = localStorage.getItem('token');
+                  const user = JSON.parse(localStorage.getItem('user') || 'null');
+                  
+                  // Elements
+                  const loginLink = document.getElementById('login-link');
+                  const loginForm = document.getElementById('login-form');
+                  const loginButton = document.getElementById('login-button');
+                  const loginMessage = document.getElementById('login-message');
+                  const usernameInput = document.getElementById('username');
+                  const passwordInput = document.getElementById('password');
+                  const protectedContent = document.getElementById('protected-content');
+                  const adminContent = document.getElementById('admin-content');
+                  const loadProtectedBtn = document.getElementById('load-protected');
+                  const loadAdminBtn = document.getElementById('load-admin');
+                  const protectedData = document.getElementById('protected-data');
+                  const adminData = document.getElementById('admin-data');
+                  
+                  // Check if user is logged in
+                  if (token && user) {
+                    loginLink.textContent = \`Logout (\${user.username})\`;
+                    protectedContent.classList.remove('hidden');
+                    
+                    // Show admin content if user has admin role
+                    if (user.roles && user.roles.includes('admin')) {
+                      adminContent.classList.remove('hidden');
+                    }
+                  }
+                  
+                  // Toggle login form
+                  loginLink.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    
+                    if (token) {
+                      // Logout
+                      localStorage.removeItem('token');
+                      localStorage.removeItem('user');
+                      token = null;
+                      loginLink.textContent = 'Login';
+                      protectedContent.classList.add('hidden');
+                      adminContent.classList.add('hidden');
+                      loginMessage.textContent = '';
+                      loginMessage.className = 'message';
+                    } else {
+                      // Show login form
+                      loginForm.classList.toggle('hidden');
+                    }
+                  });
+                  
+                  // Login form submission
+                  loginButton.addEventListener('click', async () => {
+                    const username = usernameInput.value.trim();
+                    const password = passwordInput.value.trim();
+                    
+                    if (!username || !password) {
+                      loginMessage.textContent = 'Please enter both username and password';
+                      loginMessage.className = 'message error';
+                      return;
+                    }
+                    
+                    try {
+                      const response = await fetch('/api/auth/login', {
+                        method: 'POST',
+                        headers: {
+                          'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ username, password })
+                      });
+                      
+                      const data = await response.json();
+                      
+                      if (response.ok) {
+                        token = data.token;
+                        localStorage.setItem('token', token);
+                        localStorage.setItem('user', JSON.stringify(data.user));
+                        
+                        loginMessage.textContent = 'Login successful';
+                        loginMessage.className = 'message success';
+                        
+                        // Update UI
+                        loginLink.textContent = \`Logout (\${data.user.username})\`;
+                        protectedContent.classList.remove('hidden');
+                        
+                        // Show admin content if user has admin role
+                        if (data.user.roles && data.user.roles.includes('admin')) {
+                          adminContent.classList.remove('hidden');
+                        }
+                        
+                        // Clear form
+                        usernameInput.value = '';
+                        passwordInput.value = '';
+                        
+                        // Hide login form after successful login
+                        setTimeout(() => {
+                          loginForm.classList.add('hidden');
+                        }, 1500);
+                      } else {
+                        loginMessage.textContent = data.message || 'Login failed';
+                        loginMessage.className = 'message error';
+                      }
+                    } catch (error) {
+                      console.error('Login error:', error);
+                      loginMessage.textContent = 'An error occurred while logging in';
+                      loginMessage.className = 'message error';
+                    }
+                  });
+                  
+                  // Load protected data
+                  loadProtectedBtn.addEventListener('click', async () => {
+                    if (!token) {
+                      protectedData.textContent = 'You must be logged in to view this data';
+                      return;
+                    }
+                    
+                    try {
+                      const response = await fetch('/api/protected', {
+                        headers: {
+                          'Authorization': \`Bearer \${token}\`
+                        }
+                      });
+                      
+                      if (response.ok) {
+                        const data = await response.json();
+                        protectedData.textContent = JSON.stringify(data, null, 2);
+                      } else {
+                        protectedData.textContent = 'Failed to load protected data. Your session may have expired.';
+                        
+                        if (response.status === 401) {
+                          // Session expired, clear localStorage
+                          localStorage.removeItem('token');
+                          localStorage.removeItem('user');
+                          token = null;
+                        }
+                      }
+                    } catch (error) {
+                      console.error('API error:', error);
+                      protectedData.textContent = 'An error occurred while fetching data';
+                    }
+                  });
+                  
+                  // Load admin data
+                  loadAdminBtn.addEventListener('click', async () => {
+                    if (!token) {
+                      adminData.textContent = 'You must be logged in to view this data';
+                      return;
+                    }
+                    
+                    try {
+                      const response = await fetch('/api/admin', {
+                        headers: {
+                          'Authorization': \`Bearer \${token}\`
+                        }
+                      });
+                      
+                      if (response.ok) {
+                        const data = await response.json();
+                        adminData.textContent = JSON.stringify(data, null, 2);
+                      } else if (response.status === 403) {
+                        adminData.textContent = 'You do not have permission to access this data. Admin role required.';
+                      } else {
+                        adminData.textContent = 'Failed to load admin data. Your session may have expired.';
+                      }
+                    } catch (error) {
+                      console.error('API error:', error);
+                      adminData.textContent = 'An error occurred while fetching data';
+                    }
+                  });
+                });
+              </script>
+            </head>
+            <body>${content}</body>
+          </html>
+        `);
+      } catch (error) {
+        console.error('SSR Error:', error);
+        res.status(500).send(`
+          <!DOCTYPE html>
+          <html>
+            <head>
+              <title>Server Error</title>
+              <style>body { font-family: sans-serif; padding: 2rem; }</style>
+            </head>
+            <body>
+              <h1>Server Error</h1>
+              <p>An error occurred while rendering the page.</p>
+              <pre>${error.stack}</pre>
+            </body>
+          </html>
+        `);
+      }
+    });
+    
+    // Start the server
+    await app.start();
+    
+    console.log(`Server running at http://localhost:${app.config.port}`);
+    console.log('Available routes:');
+    console.log('- / (Home page with SSR)');
+    console.log('- /api/auth/login (POST: Login endpoint)');
+    console.log('- /api/protected (GET: Protected data, requires authentication)');
+    console.log('- /api/admin (GET: Admin data, requires admin role)');
+    
+    // Handle graceful shutdown
+    process.on('SIGINT', async () => {
+      console.log('Shutting down server...');
+      await app.stop();
+      process.exit(0);
+    });
+  } catch (error) {
+    console.error('Failed to start server:', error);
+    process.exit(1);
+  }
+}
+
+startServer();