create-parachute 1.0.2

package/templates/mysql/client/src/pages/Login.jsx

@@ -0,0 +1,138 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { api } from "../api/client";
+import { saveUser } from "../utils/auth";
+
+export default function Login() {
+  const navigate = useNavigate();
+
+  const [form, setForm] = useState({
+    Username: "",
+    Password: ""
+  });
+
+  useEffect(() => {
+    if (localStorage.getItem("user")) {
+      navigate("/");
+    }
+  }, [navigate]);
+
+  const register = async () => {
+    try {
+      await api.post("/auth/register", form);
+      alert("Registered successfully. Now login.");
+    } catch (err) {
+      alert(err.response?.data?.message || "Registration failed");
+    }
+  };
+
+  const login = async () => {
+    try {
+      const res = await api.post("/auth/login", form);
+      saveUser(res.data);
+      navigate("/");
+    } catch (err) {
+      alert(err.response?.data?.message || "Login failed");
+    }
+  };
+
+  return (
+    <div style={{
+      minHeight: "100vh",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      background: "#f8fafc",
+      fontFamily: "Arial, sans-serif",
+      padding: "20px"
+    }}>
+      <div style={{
+        width: "380px",
+        background: "white",
+        padding: "32px",
+        borderRadius: "20px",
+        border: "1px solid #e5e7eb",
+        boxShadow: "0 1px 5px rgba(0,0,0,0.08)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "14px"
+      }}>
+        <p style={{
+          color: "__THEME__",
+          fontWeight: "700",
+          margin: 0
+        }}>
+          Create Parachute
+        </p>
+
+        <h1 style={{
+          margin: 0,
+          fontSize: "28px"
+        }}>
+          Login or Register
+        </h1>
+
+        <p style={{
+          color: "#6b7280",
+          marginTop: 0,
+          lineHeight: "1.5"
+        }}>
+          Use a username and password. Passwords are hashed in the backend.
+        </p>
+
+        <input
+          placeholder="Username"
+          value={form.Username}
+          onChange={(e) => setForm({ ...form, Username: e.target.value })}
+          style={{
+            padding: "12px",
+            border: "1px solid #d1d5db",
+            borderRadius: "10px"
+          }}
+        />
+
+        <input
+          type="password"
+          placeholder="Password"
+          value={form.Password}
+          onChange={(e) => setForm({ ...form, Password: e.target.value })}
+          style={{
+            padding: "12px",
+            border: "1px solid #d1d5db",
+            borderRadius: "10px"
+          }}
+        />
+
+        <button
+          onClick={register}
+          style={{
+            background: "__THEME__",
+            color: "white",
+            border: "none",
+            padding: "12px",
+            borderRadius: "10px",
+            cursor: "pointer",
+            fontWeight: "700"
+          }}
+        >
+          Register
+        </button>
+
+        <button
+          onClick={login}
+          style={{
+            background: "black",
+            color: "white",
+            border: "none",
+            padding: "12px",
+            borderRadius: "10px",
+            cursor: "pointer",
+            fontWeight: "700"
+          }}
+        >
+          Login
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/mysql/client/src/pages/Page1.jsx

@@ -0,0 +1,38 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+
+export default function Page1() {
+  return (
+    <DashboardLayout>
+      <section style={{
+        background: "white",
+        padding: "32px",
+        borderRadius: "18px",
+        border: "1px solid #e5e7eb",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.06)"
+      }}>
+        <p style={{
+          color: "__THEME__",
+          fontWeight: "700",
+          marginBottom: "8px"
+        }}>
+          Ready to customize
+        </p>
+
+        <h1 style={{
+          fontSize: "32px",
+          marginBottom: "12px"
+        }}>
+          Welcome to Page 1
+        </h1>
+
+        <p style={{
+          color: "#4b5563",
+          lineHeight: "1.7"
+        }}>
+          Start building your own features from this page. Add your forms,
+          tables, buttons, and API calls here.
+        </p>
+      </section>
+    </DashboardLayout>
+  );
+}

package/templates/mysql/client/src/pages/Page2.jsx

@@ -0,0 +1,38 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+
+export default function Page2() {
+  return (
+    <DashboardLayout>
+      <section style={{
+        background: "white",
+        padding: "32px",
+        borderRadius: "18px",
+        border: "1px solid #e5e7eb",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.06)"
+      }}>
+        <p style={{
+          color: "__THEME__",
+          fontWeight: "700",
+          marginBottom: "8px"
+        }}>
+          Ready to customize
+        </p>
+
+        <h1 style={{
+          fontSize: "32px",
+          marginBottom: "12px"
+        }}>
+          Welcome to Page 2
+        </h1>
+
+        <p style={{
+          color: "#4b5563",
+          lineHeight: "1.7"
+        }}>
+          Start building your own features from this page. Add your forms,
+          tables, buttons, and API calls here.
+        </p>
+      </section>
+    </DashboardLayout>
+  );
+}

package/templates/mysql/client/src/pages/Page3.jsx

@@ -0,0 +1,38 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+
+export default function Page3() {
+  return (
+    <DashboardLayout>
+      <section style={{
+        background: "white",
+        padding: "32px",
+        borderRadius: "18px",
+        border: "1px solid #e5e7eb",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.06)"
+      }}>
+        <p style={{
+          color: "__THEME__",
+          fontWeight: "700",
+          marginBottom: "8px"
+        }}>
+          Ready to customize
+        </p>
+
+        <h1 style={{
+          fontSize: "32px",
+          marginBottom: "12px"
+        }}>
+          Welcome to Page 3
+        </h1>
+
+        <p style={{
+          color: "#4b5563",
+          lineHeight: "1.7"
+        }}>
+          Start building your own features from this page. Add your forms,
+          tables, buttons, and API calls here.
+        </p>
+      </section>
+    </DashboardLayout>
+  );
+}

package/templates/mysql/client/src/router/index.jsx

@@ -0,0 +1,43 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import ProtectedRoute from "../components/ProtectedRoute";
+
+import Login from "../pages/Login";
+import Dashboard from "../pages/Dashboard";
+import Page1 from "../pages/Page1";
+import Page2 from "../pages/Page2";
+import Page3 from "../pages/Page3";
+
+export default function Router() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+
+        <Route path="/" element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        } />
+
+        <Route path="/page1" element={
+          <ProtectedRoute>
+            <Page1 />
+          </ProtectedRoute>
+        } />
+
+        <Route path="/page2" element={
+          <ProtectedRoute>
+            <Page2 />
+          </ProtectedRoute>
+        } />
+
+        <Route path="/page3" element={
+          <ProtectedRoute>
+            <Page3 />
+          </ProtectedRoute>
+        } />
+      </Routes>
+    </BrowserRouter>
+  );
+}

package/templates/mysql/client/src/utils/auth.js

@@ -0,0 +1,16 @@
+export const isAuthenticated = () => {
+  return !!localStorage.getItem("user");
+};
+
+export const getUser = () => {
+  const user = localStorage.getItem("user");
+  return user ? JSON.parse(user) : null;
+};
+
+export const saveUser = (user) => {
+  localStorage.setItem("user", JSON.stringify(user));
+};
+
+export const clearUser = () => {
+  localStorage.removeItem("user");
+};

package/templates/mysql/client/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()]
+});

package/templates/mysql/server/config/db.js

@@ -0,0 +1,13 @@
+import dotenv from "dotenv";
+import mysql from "mysql2";
+
+dotenv.config();
+
+const db = mysql.createPool({
+  host: process.env.DB_HOST || "localhost",
+  user: process.env.DB_USER || "root",
+  password: process.env.DB_PASSWORD || "",
+  database: process.env.DB_NAME
+});
+
+export default db;

package/templates/mysql/server/controllers/authController.js

@@ -0,0 +1,66 @@
+import bcrypt from "bcrypt";
+import db from "../config/db.js";
+
+export const register = async (req, res) => {
+  const { Username, Password } = req.body;
+
+  if (!Username || !Password) {
+    return res.status(400).json({ message: "Username and Password are required" });
+  }
+
+  const hashedPassword = await bcrypt.hash(Password, 10);
+
+  db.query(
+    "INSERT INTO Users (Username, Password) VALUES (?, ?)",
+    [Username, hashedPassword],
+    (err) => {
+      if (err) {
+        if (err.code === "ER_DUP_ENTRY") {
+          return res.status(409).json({ message: "Username already exists" });
+        }
+
+        return res.status(500).json({ message: "Registration failed", error: err.message });
+      }
+
+      res.status(201).json({ message: "Registered successfully" });
+    }
+  );
+};
+
+export const login = (req, res) => {
+  const { Username, Password } = req.body;
+
+  db.query(
+    "SELECT * FROM Users WHERE Username = ?",
+    [Username],
+    async (err, data) => {
+      if (err) {
+        return res.status(500).json({ message: "Login failed", error: err.message });
+      }
+
+      if (data.length === 0) {
+        return res.status(404).json({ message: "User not found" });
+      }
+
+      const user = data[0];
+      const validPassword = await bcrypt.compare(Password, user.Password);
+
+      if (!validPassword) {
+        return res.status(401).json({ message: "Invalid credentials" });
+      }
+
+      req.session.user = {
+        UserID: user.UserID,
+        Username: user.Username
+      };
+
+      res.json(req.session.user);
+    }
+  );
+};
+
+export const logout = (req, res) => {
+  req.session.destroy(() => {
+    res.json({ message: "Logged out" });
+  });
+};

package/templates/mysql/server/index.js

@@ -0,0 +1,39 @@
+import express from "express";
+import cors from "cors";
+import dotenv from "dotenv";
+import session from "express-session";
+import authRoutes from "./routes/authRoutes.js";
+
+
+dotenv.config();
+
+const app = express();
+
+app.use(cors({
+  origin: process.env.CLIENT_URL,
+  credentials: true
+}));
+
+app.use(express.json());
+
+app.use(session({
+  secret: process.env.SESSION_SECRET,
+  resave: false,
+  saveUninitialized: false,
+  cookie: {
+    httpOnly: true,
+    secure: false
+  }
+}));
+
+app.use("/auth", authRoutes);
+
+app.get("/", (req, res) => {
+  res.json({ message: "Parachute backend running" });
+});
+
+
+
+app.listen(process.env.PORT, () => {
+  console.log(`Server running on port ${process.env.PORT}`);
+});

package/templates/mysql/server/middleware/authMiddleware.js

@@ -0,0 +1,7 @@
+export const protect = (req, res, next) => {
+  if (!req.session.user) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+
+  next();
+};

package/templates/mysql/server/package.json

@@ -0,0 +1,18 @@
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nodemon index.js",
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "bcrypt": "^5.1.1",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "express-session": "^1.18.0",
+    "mysql2": "^3.10.3"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.4"
+  }
+}

package/templates/mysql/server/routes/authRoutes.js

@@ -0,0 +1,14 @@
+import express from "express";
+import {
+  register,
+  login,
+  logout
+} from "../controllers/authController.js";
+
+const router = express.Router();
+
+router.post("/register", register);
+router.post("/login", login);
+router.post("/logout", logout);
+
+export default router;

package/templates/sequelize/client/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parachute</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/sequelize/client/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.4"
+  }
+}

package/templates/sequelize/client/src/App.jsx

@@ -0,0 +1,5 @@
+import Router from "./router";
+
+export default function App() {
+  return <Router />;
+}

package/templates/sequelize/client/src/api/client.js

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+export const api = axios.create({
+  baseURL: "http://localhost:__PORT__",
+  withCredentials: true
+});

package/templates/sequelize/client/src/components/Navbar.jsx

@@ -0,0 +1,57 @@
+import { Link, useNavigate } from "react-router-dom";
+import { api } from "../api/client";
+import { clearUser, getUser } from "../utils/auth";
+
+export default function Navbar() {
+  const navigate = useNavigate();
+  const user = getUser();
+
+  const logout = async () => {
+    try {
+      await api.post("/auth/logout");
+    } catch {}
+
+    clearUser();
+    navigate("/login");
+  };
+
+  return (
+    <nav style={{
+      background: "white",
+      borderBottom: "1px solid #e5e7eb",
+      padding: "18px 32px",
+      display: "flex",
+      gap: "24px",
+      alignItems: "center"
+    }}>
+      <strong style={{ marginRight: "12px" }}>Parachute</strong>
+
+      <Link to="/">Dashboard</Link>
+      <Link to="/page1">Page 1</Link>
+      <Link to="/page2">Page 2</Link>
+      <Link to="/page3">Page 3</Link>
+
+      <span style={{
+        marginLeft: "auto",
+        color: "#6b7280",
+        fontSize: "14px"
+      }}>
+        {user?.Username}
+      </span>
+
+      <button
+        onClick={logout}
+        style={{
+          background: "__THEME__",
+          color: "white",
+          border: "none",
+          padding: "10px 16px",
+          borderRadius: "10px",
+          cursor: "pointer"
+        }}
+      >
+        Logout
+      </button>
+    </nav>
+  );
+}

package/templates/sequelize/client/src/components/ProtectedRoute.jsx

@@ -0,0 +1,10 @@
+import { Navigate } from "react-router-dom";
+import { isAuthenticated } from "../utils/auth";
+
+export default function ProtectedRoute({ children }) {
+  if (!isAuthenticated()) {
+    return <Navigate to="/login" />;
+  }
+
+  return children;
+}

package/templates/sequelize/client/src/layouts/DashboardLayout.jsx

@@ -0,0 +1,21 @@
+import Navbar from "../components/Navbar";
+
+export default function DashboardLayout({ children }) {
+  return (
+    <div style={{
+      minHeight: "100vh",
+      background: "#f8fafc",
+      fontFamily: "Arial, sans-serif"
+    }}>
+      <Navbar />
+
+      <main style={{
+        padding: "40px",
+        maxWidth: "1100px",
+        margin: "0 auto"
+      }}>
+        {children}
+      </main>
+    </div>
+  );
+}

package/templates/sequelize/client/src/main.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/sequelize/client/src/pages/Dashboard.jsx

@@ -0,0 +1,38 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+
+export default function Dashboard() {
+  return (
+    <DashboardLayout>
+      <section style={{
+        background: "white",
+        padding: "32px",
+        borderRadius: "18px",
+        border: "1px solid #e5e7eb",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.06)"
+      }}>
+        <p style={{
+          color: "__THEME__",
+          fontWeight: "700",
+          marginBottom: "8px"
+        }}>
+          Ready to customize
+        </p>
+
+        <h1 style={{
+          fontSize: "32px",
+          marginBottom: "12px"
+        }}>
+          Welcome Dashboard
+        </h1>
+
+        <p style={{
+          color: "#4b5563",
+          lineHeight: "1.7"
+        }}>
+          Start building your own features from this page. Add your forms,
+          tables, buttons, and API calls here.
+        </p>
+      </section>
+    </DashboardLayout>
+  );
+}