From 7877047dffd3658aff1ae082d9e6f5ca4cb9ab50 Mon Sep 17 00:00:00 2001
From: Boateng Prince Agyenim <163312213+Mmabiaa@users.noreply.github.com>
Date: Sun, 4 May 2025 13:33:07 +0000
Subject: [PATCH] Backend and Frontend user auth test

---
 sigup-login-auth/backend/models/User.js |  9 +++++
 sigup-login-auth/backend/routes/auth.js | 45 +++++++++++++++++++++++++
 sigup-login-auth/backend/server.js      | 21 ++++++++++++
 sigup-login-auth/frontend/index.html    | 19 +++++++++++
 sigup-login-auth/frontend/login.html    | 17 ++++++++++
 sigup-login-auth/frontend/profile.html  | 26 ++++++++++++++
 sigup-login-auth/frontend/style.css     | 10 ++++++
 7 files changed, 147 insertions(+)
 create mode 100644 sigup-login-auth/backend/models/User.js
 create mode 100644 sigup-login-auth/backend/routes/auth.js
 create mode 100644 sigup-login-auth/backend/server.js
 create mode 100644 sigup-login-auth/frontend/index.html
 create mode 100644 sigup-login-auth/frontend/login.html
 create mode 100644 sigup-login-auth/frontend/profile.html
 create mode 100644 sigup-login-auth/frontend/style.css

diff --git a/sigup-login-auth/backend/models/User.js b/sigup-login-auth/backend/models/User.js
new file mode 100644
index 0000000..58f5c2a
--- /dev/null
+++ b/sigup-login-auth/backend/models/User.js
@@ -0,0 +1,9 @@
+const mongoose = require('mongoose');
+
+const userSchema = new mongoose.Schema({
+    name: String,
+    email: {type: String, unique:true},
+    password: String
+});
+
+module.exports = mongoose.model('User', userSchema);
\ No newline at end of file
diff --git a/sigup-login-auth/backend/routes/auth.js b/sigup-login-auth/backend/routes/auth.js
new file mode 100644
index 0000000..50c47f8
--- /dev/null
+++ b/sigup-login-auth/backend/routes/auth.js
@@ -0,0 +1,45 @@
+const express = require('express');
+const router = express.Router();
+const User = require('../models/User');
+const jwt = require('jsonwebtoken');
+const bcrypt = require('bcrypt');
+const JWT_SECRET = process.env.JWT_SECRET;
+
+// Signup
+router.post('/signup', async (req, res) => {
+    const { name, email, password } = req.body;
+    const hash = await bcrypt.hash(password, 10);
+    try {
+        await User.create({ name, email, password: hash });
+        res.redirect("http://localhost:5500/frontend/login.html");
+    } catch (err) {
+        res.status(400).send("Email already exists");
+    }
+});
+
+// Login
+router.post('/login', async (req, res) => {
+    const { email, password } = req.body;
+    const user = await User.findOne({ email });
+    if (!user) return res.status(400).send("User not found");
+
+    const isMatch = await bcrypt.compare(password, user.password);
+    if (!isMatch) return res.status(400).send("Invalid password");
+
+    const token = jwt.sign({ id: user._id }, JWT_SECRET, { expiresIn: "1h" });
+    res.json({ token });
+});
+
+// Protected route (optional)
+router.get('/me', async (req, res) => {
+    const token = req.headers.authorization?.split(" ")[1];
+    try {
+        const decoded = jwt.verify(token, JWT_SECRET);
+        const user = await User.findById(decoded.id).select("-password");
+        res.json(user);
+    } catch {
+        res.status(401).send("Unauthorized");
+    }
+});
+
+module.exports = router;
diff --git a/sigup-login-auth/backend/server.js b/sigup-login-auth/backend/server.js
new file mode 100644
index 0000000..82fafd4
--- /dev/null
+++ b/sigup-login-auth/backend/server.js
@@ -0,0 +1,21 @@
+const express = require('express');
+const mongoose = require('mongoose');
+const cors = require('cors');
+const dotenv = require('dotenv');
+const authRoutes = require('./routes/auth');
+
+dotenv.config();
+const app = express();
+
+app.use(cors());
+app.use(express.json());
+app.use(express.urlencoded({extended: true}));
+
+mongoose.connect(process.env.MONGO_URI)
+    .then(()=> console.log("Connected to MongoDB..."))
+    .catch(err => console.log(err));
+
+
+app.use('/', authRoutes);
+
+app.listen(5000, () => console.log('Server running on http://localhost:5000'));
\ No newline at end of file
diff --git a/sigup-login-auth/frontend/index.html b/sigup-login-auth/frontend/index.html
new file mode 100644
index 0000000..e91a866
--- /dev/null
+++ b/sigup-login-auth/frontend/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SignUp Page</title>
+    <link rel="stylesheet" href="http://github.com/frontend/style.css">
+</head>
+<body>
+    <h2>SignUp</h2>
+    <form action="http://localhost:5000/signup" method="POST">
+        <input type="text" name="name" placeholder="Name" required><br>
+        <input type="email" name="email" placeholder="Email" required><br>
+        <input type="password" name="password" placeholder="Password" required><br>
+        <button type="submit">SignUp</button>
+    </form>
+    <p>Already have an account? <a href="http://github.com/frontend/login.html">Login Here</a></p>
+</body>
+</html>
\ No newline at end of file
diff --git a/sigup-login-auth/frontend/login.html b/sigup-login-auth/frontend/login.html
new file mode 100644
index 0000000..bccfddc
--- /dev/null
+++ b/sigup-login-auth/frontend/login.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Page</title>
+    <link rel="stylesheet" href="http://github.com/frontend/style.css">
+</head>
+<body>
+    <h2>Login</h2>
+    <form action="https://localhost:5000/login" method="POST">
+        <input type="email" name="email" placeholder="Email" required><br>
+        <input type="password" name="password" placeholder="Password" required><br>
+        <button type="submit">Login</button>
+    </form>
+</body>
+</html>
\ No newline at end of file
diff --git a/sigup-login-auth/frontend/profile.html b/sigup-login-auth/frontend/profile.html
new file mode 100644
index 0000000..5e8faa3
--- /dev/null
+++ b/sigup-login-auth/frontend/profile.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile</title>
+    <link rel="stylesheet" href="http://github.com/frontend/style.css">
+</head>
+<body>
+    <h2>Your Profile</h2>
+    <div id="profile"></div>
+
+    <script>
+        fetch("http://github.com/service/http://localhost:5000/profile", {
+            method: "GET",
+            headers: {
+                "Authorization": "Bearer " + localStorage.getItem("token")
+            }
+        })
+        .then(res => res.json())
+        .then(data => {
+            document.getElementById("profile").innerHTML = `<p>Name: ${data.name}</p><br><p>Email: ${data.email}</p><br>`;
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/sigup-login-auth/frontend/style.css b/sigup-login-auth/frontend/style.css
new file mode 100644
index 0000000..b39375f
--- /dev/null
+++ b/sigup-login-auth/frontend/style.css
@@ -0,0 +1,10 @@
+body{
+    font-family: Arial;
+    text-align: center;
+    margin-top: 50px;
+}
+input, button{
+    padding: 10px;
+    margin: 5px;
+    width: 200px;
+}
\ No newline at end of file