create-parachute 1.0.2

package/templates/sequelize/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/sequelize/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/sequelize/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/sequelize/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/sequelize/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/sequelize/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/sequelize/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/sequelize/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/sequelize/server/config/sequelize.js

@@ -0,0 +1,17 @@
+import dotenv from "dotenv";
+import { Sequelize } from "sequelize";
+
+dotenv.config();
+
+const sequelize = new Sequelize(
+  process.env.DB_NAME,
+  process.env.DB_USER || "root",
+  process.env.DB_PASSWORD || "",
+  {
+    host: process.env.DB_HOST || "localhost",
+    dialect: "mysql",
+    logging: false
+  }
+);
+
+export default sequelize;

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

@@ -0,0 +1,62 @@
+import bcrypt from "bcrypt";
+import User from "../models/User.js";
+
+export const register = async (req, res) => {
+  try {
+    const { Username, Password } = req.body;
+
+    if (!Username || !Password) {
+      return res.status(400).json({ message: "Username and Password are required" });
+    }
+
+    const existingUser = await User.findOne({ where: { Username } });
+
+    if (existingUser) {
+      return res.status(409).json({ message: "Username already exists" });
+    }
+
+    const hashedPassword = await bcrypt.hash(Password, 10);
+
+    await User.create({
+      Username,
+      Password: hashedPassword
+    });
+
+    res.status(201).json({ message: "Registered successfully" });
+  } catch (err) {
+    res.status(500).json({ message: "Registration failed", error: err.message });
+  }
+};
+
+export const login = async (req, res) => {
+  try {
+    const { Username, Password } = req.body;
+
+    const user = await User.findOne({ where: { Username } });
+
+    if (!user) {
+      return res.status(404).json({ message: "User not found" });
+    }
+
+    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);
+  } catch (err) {
+    res.status(500).json({ message: "Login failed", error: err.message });
+  }
+};
+
+export const logout = (req, res) => {
+  req.session.destroy(() => {
+    res.json({ message: "Logged out" });
+  });
+};

package/templates/sequelize/server/index.js

@@ -0,0 +1,42 @@
+import express from "express";
+import cors from "cors";
+import dotenv from "dotenv";
+import session from "express-session";
+import authRoutes from "./routes/authRoutes.js";
+import sequelize from "./config/sequelize.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" });
+});
+
+
+await sequelize.authenticate();
+await sequelize.sync();
+
+
+app.listen(process.env.PORT, () => {
+  console.log(`Server running on port ${process.env.PORT}`);
+});

package/templates/sequelize/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/sequelize/server/models/User.js

@@ -0,0 +1,24 @@
+import { DataTypes } from "sequelize";
+import sequelize from "../config/sequelize.js";
+
+const User = sequelize.define("User", {
+  UserID: {
+    type: DataTypes.INTEGER,
+    primaryKey: true,
+    autoIncrement: true
+  },
+  Username: {
+    type: DataTypes.STRING,
+    allowNull: false,
+    unique: true
+  },
+  Password: {
+    type: DataTypes.STRING,
+    allowNull: false
+  }
+}, {
+  tableName: "Users",
+  timestamps: false
+});
+
+export default User;

package/templates/sequelize/server/package.json

@@ -0,0 +1,19 @@
+{
+  "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",
+    "sequelize": "^6.37.3"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.4"
+  }
+}

package/templates/sequelize/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;