fix: correct node modules paths in .gitignore

Also deleted login-auth from docker compose, but not the folder (we can later work on this again).

.gitignore

@@ -1,5 +1,38 @@
-backend/.env
-# Ignore environment files
-
 index.html
-# Ignore frontend dev file
+# Ignore frontend dev file
+
+# Ignore node modules (if using Node.js)
+./client/node_modules/
+./login-auth_backend/node_modules/
+./panel-mgmt_backend/node_modules/
+./user-mgmt_backend/node_modules/
+
+# Ignore build output directories
+dist/
+build/
+
+# Ignore log files
+*.log
+
+# Ignore OS-specific files
+.DS_Store
+Thumbs.db
+
+# Ignore notes and documentation
+todo.txt
+docs/
+notes/
+
+# Ignore IDE/editor settings
+.vscode/
+.idea/
+
+# Ignore frontend dev files (uncompiled sources, temp files)
+*.tmp
+*.bak
+
+# Ignore compiled files (if any)
+*.out
+*.exe
+
+# Add more patterns as needed for your stack

README.md

@@ -0,0 +1,30 @@
+# Login page
+This is an app which I am currently working on...
+
+## How to run?
+1. Install docker on your machine
+2. Then run the docker-compose file with ```docker compose up -d``` and make sure that ports ```4000```, ```4001``` and ```3306``` are not in use. Also make sure that you are in the root directory, ```login-page```.
+3. Then enter the mysql container (exec) with the credentials that you can see in the ```docker-compose.yml``` file and in the ```.env``` file.
+4. Then login with the root user with ```mysql -u root -p```, after that enter the password from the ```docker-compose.yml``` file or the ```.env``` file.
+5. Then type ```use login_page;```
+6. Then create a table with the following scheme (extract from scheme.sql): 
+    ``` sql
+    -- Table structure for the database
+    CREATE TABLE users (
+        id INT PRIMARY KEY AUTO_INCREMENT,
+        username VARCHAR(50) NOT NULL UNIQUE,
+        first_name VARCHAR(50) NOT NULL,
+        last_name VARCHAR(50) NOT NULL,
+        email VARCHAR(100) NOT NULL UNIQUE,
+        password VARCHAR(255) NOT NULL,
+        created TIMESTAMP NOT NULL DEFAULT NOW()
+    );
+
+    -- Mock data for users
+    INSERT INTO users (username, first_name, last_name, email, password)
+    VALUES 
+    ('test1', 'John', 'Doe', 'jdoe@example.com', '1test'),
+    ('test2', 'Alice', 'Smith', 'asmith@example.com', '2test');
+    ```
+7. For that, just paste the command shown above in the mysql command line.
+8. If you are confident with sql you can change the mock data, and create your own user.

backend/database.js

@@ -1,43 +0,0 @@
-import mysql from "mysql2";
-import dotenv from "dotenv";
-dotenv.config();
-
-const pool = mysql
-  .createPool({
-    host: process.env.DB_HOST,
-    user: process.env.DB_USER,
-    password: process.env.DB_PASSWORD,
-    database: process.env.DB_NAME,
-  })
-  .promise();
-
-export async function loginUser(username, password) {
-  const [result] = await pool.query(
-    "SELECT * FROM users WHERE username = ? AND password = ?",
-    [username, password]
-  );
-
-  if (result.length > 0) {
-    console.log("User found: ", result[0]);
-    return { success: true, user: result[0] };
-  } else {
-    console.error(`Invalid username or password!; ${result[0]}`);
-    return { success: false, message: "Invalid username or password" };
-  }
-}
-
-export async function createUser(username, first_name, last_name, password, email) {
-  try {
-    const [result] = await pool.query(
-      "INSERT INTO users (username, first_name, last_name, password, email) VALUES (?, ?, ?, ?, ?)",
-      [username, first_name, last_name, password, email]
-    );
-    console.log("User created successfully: ", result);
-    return { success: true, userId: result.insertId };
-  } catch (error) {
-    console.error("Error creating user: ", error);
-    return { success: false, message: "Error creating user" };
-  }
-
-    
-}

backend/server.js

@@ -1,56 +0,0 @@
-// static variables
-import express from "express";
-const app = express();
-const port = 4000;
-
-import { loginUser } from "./database.js";
-
-app.use(express.urlencoded({ extended: true }));
-app.set("view engine", "ejs");
-
-import path from "path";
-import { fileURLToPath } from "url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-app.listen(port, () => {
-  console.log(`Server is running on http://localhost:${port}`);
-});
-
-// Middleware to parse JSON bodies
-app.use(express.json());
-
-// Middleware to serve static files from the 'public' directory
-app.use(express.static("public"));
-
-// Main code below
-
-// Route to handle GET requests to the root URL
-app.get("/", (req, res) => {
-  res.render("login.ejs", { error: null, reload: false });
-});
-
-// Route to handle user login
-app.post("/login", (req, res) => {
-  loginUser(req.body.username, req.body.password).then((result) => {
-    if (result.success) {
-      res
-        .status(200)
-        .render("dashboard.ejs", {
-          sqlResult: result,
-          newLink: `/dashboard/${result.user.id}`,
-        });
-    } else {
-      res
-        .status(401)
-        .render("login.ejs", { error: result.message, reload: true });
-    }
-  });
-});
-
-// error handling code
-app.use((err, req, res, next) => {
-  console.error(err.stack);
-  res.status(500).send("Something broke!");
-});

backend/views/dashboard.ejs

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <script>
-      import { createUser } from "../database.js";
-
-      window.history.pushState({}, "", "<%= newLink %>");
-    </script>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Dashboard</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
-      crossorigin="anonymous"
-    />
-  </head>
-  <body>
-    <div class="row">
-        <div class="column">
-              <h1>Hello, <%= sqlResult.user.first_name %>.</h1>  
-        </div>
-        <div class="column">
-                <h1>Welcome to your dashboard.</h1>
-        </div>
-        <div class="column">
-            <button class="btn btn-danger">Logout</button>
-        </div>
-    </div>
-
-
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
-      crossorigin="anonymous"
-    ></script>
-  </body>
-</html>

backend/views/login.ejs

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <script>
-      const reloadState = "<%= reload %>";
-
-      if (reloadState === "true") {
-        window.location.href = "/";
-      }
-    </script>
-
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Login Page</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr"
-      crossorigin="anonymous"
-    />
-  </head>
-  <body>
-    <div class="container">
-      <div class="row">
-        <h1>Login page</h1>
-      </div>
-      <div class="row">
-        <form action="/login" method="post">
-          <div class="input-group">
-            <input
-              type="text"
-              name="username"
-              placeholder="Username"
-              class="form-control"
-              required
-            />
-            <input
-              type="password"
-              name="password"
-              placeholder="Password"
-              class="form-control"
-              required
-            />
-            <input
-              type="submit"
-              value="Login"
-              class="btn btn-primary"
-              onsubmit="this.form.submit()"
-            />
-          </div>
-        </form>
-      </div>
-
-      <div class="alert alert-danger alter-dismissable fade show" role="alert">
-        <%= error %>
-      <button class="btn-close" aria-label="close" data-bs-dismiss="alert"></button>
-      </div>
-    </div>
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
-      crossorigin="anonymous"
-    ></script>
-  </body>
-</html>

client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

client/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 3000
+
+CMD ["npm", "start"]

client/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

client/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

client/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

client/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

client/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

client/src/App.js

@@ -0,0 +1,25 @@
+import logo from "./logo.svg";
+import "./App.css";
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

client/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from "@testing-library/react";
+import App from "./App";
+
+test("renders learn react link", () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

client/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

client/src/index.js

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

client/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

client/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

client/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

docker-compose.yml

@@ -0,0 +1,81 @@
+version: "3.9"
+
+services:
+  user-mgmt:
+    container_name: user-mgmt
+    build: ./user-mgmt_backend
+    ports:
+      - "4000:4000"
+    environment:
+      DB_HOST: mysql
+      DB_USER: root
+      DB_PASSWORD: D7Ze0lwV9hMrNQHdz1Q8yi0MIQuOO8
+      DB_NAME: login_page
+    depends_on:
+      - mysql
+    volumes:
+      - ./user-mgmt_backend:/user-mgmt_app
+      - ./shared:/shared
+    restart: unless-stopped
+
+  panel-mgmt:
+    container_name: panel-mgmt
+    build: ./panel-mgmt_backend
+    ports:
+      - "4001:4001"
+    environment:
+      DB_HOST: mysql
+      DB_USER: root
+      DB_PASSWORD: D7Ze0lwV9hMrNQHdz1Q8yi0MIQuOO8
+      DB_NAME: login_page
+    depends_on:
+      - mysql
+    volumes:
+      - ./panel-mgmt_backend:/panel-mgmt_app
+      - ./shared:/shared
+    restart: unless-stopped
+
+#  login-auth:
+#    container_name: login-auth
+#    build: ./login-auth_backend
+#    ports:
+#      - "4002:4002"
+#    environment:
+#      DB_HOST: mysql
+#      DB_USER: root
+#      DB_PASSWORD: D7Ze0lwV9hMrNQHdz1Q8yi0MIQuOO8
+#      DB_NAME: login_page
+#    depends_on:
+#      - mysql
+#    volumes:
+#      - ./login-auth_backend:/login-auth_app
+#      - ./shared:/shared
+#    restart: unless-stopped
+
+# React client service
+#  client:
+#    container_name: react-client
+#    build: ./client
+#    ports:
+#      - "3000:3000"
+#    environment:
+#      - CHOKIDAR_USEPOLLING=true
+#    volumes:
+#      - ./client:/app
+#      - /app/node_modules
+#    restart: unless-stopped
+
+  mysql:
+    container_name: mysql-db
+    image: mysql:8.0
+    restart: unless-stopped
+    environment:
+      MYSQL_ROOT_PASSWORD: D7Ze0lwV9hMrNQHdz1Q8yi0MIQuOO8
+      MYSQL_DATABASE: login_page
+    volumes:
+      - mysql-data:/var/lib/mysql
+    ports:
+      - "3306:3306"
+
+volumes:
+  mysql-data:

login-auth_backend/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20-alpine
+
+WORKDIR /login-auth_app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+
+EXPOSE 4002
+
+CMD ["npm", "start"]

login-auth_backend/api-server.js

@@ -0,0 +1,40 @@
+// static variables and imports
+import express from "express";
+import {
+  loginUser,
+  createUser,
+  updateUser,
+  deleteUser,
+  getAllUsers,
+} from "../shared/database.js";
+import dotenv from "dotenv";
+import path from "path";
+import { fileURLToPath } from "url";
+const app = express();
+dotenv.config();
+const port = 4002;
+
+app.use(express.json());
+app.use(express.static("public"));
+
+app.use(express.urlencoded({ extended: true }));
+app.set("view engine", "ejs");
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+app.listen(port, () => {
+  console.log(`API login server is running on http://localhost:${port}`);
+});
+
+app.post("/login", (req, res) => {
+  console.log("Received login request:", req.body);
+  const { username, password } = req.body;
+  loginUser(username, password).then((result) => {
+    if (result.success) {
+      return res.json({ loginQuery: true });
+    } else {
+      return res.json({ loginQuery: false, message: result.message });
+    }
+  });
+});

login-auth_backend/node_modules/.bin/ejs

@@ -0,0 +1 @@
+../ejs/bin/cli.js

login-auth_backend/node_modules/.bin/jake

@@ -0,0 +1 @@
+../jake/bin/cli.js