@programinglive/dev-workflow-mcp-server 1.7.11 → 1.7.13

package/web/components/Navbar.tsx

@@ -2,22 +2,67 @@
 
 import { useState, useEffect } from "react";
 import Link from "next/link";
-import { Github, Menu, X, Moon, Sun } from "lucide-react";
+import { Github, Menu, X, Moon, Sun, LogOut } from "lucide-react";
 import Image from "next/image";
 
 export default function Navbar() {
     const [isOpen, setIsOpen] = useState(false);
     const [theme, setTheme] = useState<"light" | "dark">("dark");
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [username, setUsername] = useState<string | null>(null);
 
     useEffect(() => {
         // Get theme from localStorage or system preference
         const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null;
-        if (savedTheme) {
-            setTheme(savedTheme);
-        } else {
-            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-            setTheme(prefersDark ? "dark" : "light");
-        }
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+        const initialTheme = savedTheme || (prefersDark ? "dark" : "light");
+        setTheme(initialTheme);
+
+        // Apply the class immediately
+        document.documentElement.classList.toggle("dark", initialTheme === "dark");
+
+        // Check authentication status
+        const checkAuth = () => {
+            // Check authentication status ONLY if we think we're logged in OR if we just received an update event
+            // This prevents 401 errors from cluttering the console for guests
+            const mightBeLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
+
+            if (mightBeLoggedIn) {
+                fetch('/api/auth/me')
+                    .then(res => {
+                        if (res.ok) {
+                            return res.json();
+                        }
+                        throw new Error('Not authenticated');
+                    })
+                    .then(data => {
+                        setIsAuthenticated(true);
+                        setUsername(data.user?.username || 'User');
+                        // Ensure local storage is in sync
+                        localStorage.setItem('isLoggedIn', 'true');
+                    })
+                    .catch(() => {
+                        // Session invalid/expired
+                        localStorage.removeItem('isLoggedIn');
+                        setIsAuthenticated(false);
+                        setUsername(null);
+                    });
+            } else {
+                setIsAuthenticated(false);
+                setUsername(null);
+            }
+        };
+
+        // Initial check
+        checkAuth();
+
+        // Listen for auth updates (login/logout/validated session)
+        window.addEventListener('authUpdate', checkAuth);
+
+        return () => {
+            window.removeEventListener('authUpdate', checkAuth);
+        };
     }, []);
 
     const toggleTheme = () => {
@@ -27,6 +72,19 @@ export default function Navbar() {
         document.documentElement.classList.toggle("dark", newTheme === "dark");
     };
 
+    const handleLogout = async () => {
+        try {
+            await fetch('/api/auth/logout', { method: 'POST' });
+            localStorage.removeItem('isLoggedIn');
+            setIsAuthenticated(false);
+            setUsername(null);
+            window.dispatchEvent(new Event('authUpdate'));
+            window.location.href = '/login';
+        } catch (error) {
+            console.error('Logout error:', error);
+        }
+    };
+
     return (
         <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-[#0a0a0f]/80 backdrop-blur-lg border-b border-gray-200 dark:border-white/10 transition-colors duration-300">
             <div className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8">
@@ -37,7 +95,7 @@ export default function Navbar() {
                     </Link>
                     <div className="hidden md:flex items-center gap-3 lg:gap-6">
                         <Link href="/#features" className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition">Features</Link>
-                        <Link href="/#history" className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition">History</Link>
+                        <Link href="/history" className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition">History</Link>
                         <Link href="/#api" className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition">API</Link>
                         <Link href="/docs" className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition">Docs</Link>
                         <button
@@ -60,6 +118,28 @@ export default function Navbar() {
                             <Github className="w-3.5 h-3.5 lg:w-4 lg:h-4" />
                             GitHub
                         </a>
+                        {isAuthenticated && (
+                            <div className="flex items-center gap-4 pl-4 border-l border-gray-200 dark:border-white/10">
+                                <span className="text-sm font-medium text-gray-900 dark:text-white">
+                                    {username}
+                                </span>
+                                <button
+                                    onClick={handleLogout}
+                                    className="flex items-center gap-1.5 px-3 py-1.5 lg:px-4 lg:py-2 bg-red-100 dark:bg-red-900/50 hover:bg-red-200 dark:hover:bg-red-800/50 rounded-lg transition text-xs lg:text-sm text-red-700 dark:text-red-300"
+                                >
+                                    <LogOut className="w-3.5 h-3.5 lg:w-4 lg:h-4" />
+                                    Logout
+                                </button>
+                            </div>
+                        )}
+                        {!isAuthenticated && (
+                            <Link
+                                href="/login"
+                                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition"
+                            >
+                                Login
+                            </Link>
+                        )}
                     </div>
                     <div className="md:hidden flex items-center gap-2">
                         <button
@@ -86,8 +166,13 @@ export default function Navbar() {
             {isOpen && (
                 <div className="md:hidden border-t border-gray-200 dark:border-white/10 bg-white dark:bg-[#0a0a0f] transition-colors duration-300">
                     <div className="px-4 py-4 space-y-3">
+                        {isAuthenticated && (
+                            <div className="px-3 py-2 text-sm font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-white/10 mb-2">
+                                Signed in as {username}
+                            </div>
+                        )}
                         <Link href="/#features" className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition" onClick={() => setIsOpen(false)}>Features</Link>
-                        <Link href="/#history" className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition" onClick={() => setIsOpen(false)}>History</Link>
+                        <Link href="/history" className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition" onClick={() => setIsOpen(false)}>History</Link>
                         <Link href="/#api" className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition" onClick={() => setIsOpen(false)}>API</Link>
                         <Link href="/docs" className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition" onClick={() => setIsOpen(false)}>Docs</Link>
                         <a
@@ -99,6 +184,23 @@ export default function Navbar() {
                             <Github className="w-4 h-4" />
                             GitHub
                         </a>
+                        {isAuthenticated ? (
+                            <button
+                                onClick={() => { setIsOpen(false); handleLogout(); }}
+                                className="w-full text-left flex items-center gap-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 px-2 py-1.5 rounded transition"
+                            >
+                                <LogOut className="w-4 h-4" />
+                                Logout
+                            </button>
+                        ) : (
+                            <Link
+                                href="/login"
+                                className="block w-full text-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition"
+                                onClick={() => setIsOpen(false)}
+                            >
+                                Login
+                            </Link>
+                        )}
                     </div>
                 </div>
             )}

package/web/lib/auth.js

@@ -0,0 +1,75 @@
+import bcrypt from 'bcrypt';
+import pg from 'pg';
+
+const SALT_ROUNDS = 10;
+
+/**
+ * Hash a password using bcrypt
+ */
+export async function hashPassword(password) {
+    return bcrypt.hash(password, SALT_ROUNDS);
+}
+
+/**
+ * Verify a password against a hash
+ */
+export async function verifyPassword(password, hash) {
+    return bcrypt.compare(password, hash);
+}
+
+/**
+ * Create a new user
+ */
+export async function createUser(pool, username, password, email = null) {
+    const passwordHash = await hashPassword(password);
+
+    const result = await pool.query(
+        'INSERT INTO users (username, password_hash, email) VALUES ($1, $2, $3) RETURNING id, username, email, created_at',
+        [username, passwordHash, email]
+    );
+
+    return result.rows[0];
+}
+
+/**
+ * Authenticate a user
+ */
+export async function authenticateUser(pool, username, password) {
+    const result = await pool.query(
+        'SELECT id, username, password_hash, email FROM users WHERE username = $1',
+        [username]
+    );
+
+    if (result.rows.length === 0) {
+        return null;
+    }
+
+    const user = result.rows[0];
+    const isValid = await verifyPassword(password, user.password_hash);
+
+    if (!isValid) {
+        return null;
+    }
+
+    // Update last login
+    await pool.query(
+        'UPDATE users SET last_login = CURRENT_TIMESTAMP WHERE id = $1',
+        [user.id]
+    );
+
+    // Return user without password hash
+    const { password_hash, ...userWithoutPassword } = user;
+    return userWithoutPassword;
+}
+
+/**
+ * Get user by ID
+ */
+export async function getUserById(pool, id) {
+    const result = await pool.query(
+        'SELECT id, username, email, created_at, last_login FROM users WHERE id = $1',
+        [id]
+    );
+
+    return result.rows[0] || null;
+}

package/web/middleware/auth.js

@@ -0,0 +1,26 @@
+/**
+ * Middleware to require authentication
+ */
+export function requireAuth(req, res, next) {
+    if (req.session && req.session.userId) {
+        return next();
+    }
+
+    // If it's an API request, return 401
+    if (req.path.startsWith('/api/')) {
+        return res.status(401).json({ error: 'Authentication required' });
+    }
+
+    // Otherwise redirect to login
+    res.redirect('/login');
+}
+
+/**
+ * Middleware to redirect if already authenticated
+ */
+export function redirectIfAuthenticated(req, res, next) {
+    if (req.session && req.session.userId) {
+        return res.redirect('/');
+    }
+    next();
+}

package/web/next.config.ts

@@ -2,11 +2,18 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   // Static export for Netlify deployment
-  output: 'export',
+  // Static export removed for server-side features
+  // output: 'export',
+  // Set turbopack root to silence multi-lockfile warning
+  turbopack: {
+    root: __dirname,
+  },
   // Disable image optimization for static export
   images: {
     unoptimized: true,
   },
+  // Exclude native modules from bundling
+  serverExternalPackages: ['pg'],
 };
 
 export default nextConfig;