Added sidebar, protected route, persisted state in frontend and authe…

…ntication and database models in backend

back-end/model/ChatSchema.js

@@ -0,0 +1,14 @@
+const mongoose = require("mongoose");
+
+const chatSchema = new mongoose.Schema({
+    messages: [
+        {
+            message: {type: String},
+            sentBy: {type: String, required: true, enum: ["bot", "user"]},
+        },
+    ],
+});
+
+const Chat = mongoose.model('Chat', chatSchema);
+
+module.exports = Chat

back-end/model/UserSchema.js

@@ -0,0 +1,38 @@
+const mongoose = require("mongoose");
+const bcrypt = require("bcrypt");
+
+const userSchema = new mongoose.Schema({
+    email: {type: String, required: true, unique: true},
+    username: {type: String, required: true, unique: true},
+    password: {type: String, required: true},
+    chats: [{
+      type: mongoose.Schema.Types.ObjectId,
+      ref: 'Chat',
+    }]
+});
+
+userSchema.pre("save", function (next) {
+    const user = this;
+    bcrypt.hash(user.password, 10, (err, hashedPassword) => {
+        if (err) {
+            return next(err);
+        }
+
+        user.password = hashedPassword;
+        next();
+    });
+});
+
+userSchema.methods.comparePassword = function(candidatePassword, cb) {
+    bcrypt.compare(candidatePassword, this.password, (err, isMatch) => {
+        if (err) {
+            cb(err);
+        }
+
+        cb(null, isMatch);
+    })
+}
+
+const User = mongoose.model('User', userSchema);
+
+module.exports = User;

back-end/package.json

@@ -11,9 +11,12 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^1.3.2",
+    "bcrypt": "^5.1.0",
     "body-parser": "^1.20.1",
     "cors": "^2.8.5",
     "dotenv": "^16.0.3",
-    "express": "^4.18.2"
+    "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.0",
+    "mongoose": "^6.9.2"
   }
 }

back-end/routes/authentication.js

@@ -0,0 +1,50 @@
+const express = require("express");
+const User = require("../model/UserSchema");
+const { createJSONToken } = require("../util/auth");
+const router = express.Router();
+
+router.post('/login', async (req, res) => {
+  const { username, password } = req.body;
+  const user = await User.findOne({ username });
+  if (!user) {
+    return res.status(401).json({ message: 'Invalid credentials' });
+  }
+  user.comparePassword(password, (err, isMatch) => {
+    if (err) {
+      return res.status(401).json({ message: 'Invalid credentials' });
+    }
+    if (!isMatch) {
+      return res.status(401).json({ message: 'Invalid credentials' });
+    }
+
+    const userID = user._id;
+    const token = createJSONToken({userID});
+
+    res.status(200).json({
+      token: token,
+    })
+  });
+});
+
+router.post('/signup', async (req, res) => {
+  const {email, username, password, confirmPassword} = req.body;
+
+
+  try {
+    const user = new User({
+      username,
+      email,
+      password,
+      chats: [],
+    })
+
+    console.log(user);
+    await user.save();
+
+    res.status(201).json({message: 'User created'});
+  } catch (err) {
+    res.status(401).json({message: err.message});
+  }
+})
+
+module.exports = router;

back-end/routes/message.js

@@ -0,0 +1,8 @@
+const express = require("express");
+const User = require("../model/UserSchema");
+const router = express.Router();
+
+router.post('/', (req, res) => {
+
+
+})

back-end/server.js

@@ -3,26 +3,33 @@ const express = require("express");
 const axios = require("axios");
 const cors = require("cors");
 const bodyParser = require("body-parser");
+const mongoose = require("mongoose");
 
+const authRouter = require("./routes/authentication");
+
+mongoose.set('strictQuery', true);
+mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true });
 const app = express();
 
-var corsOptions = {
+const corsOptions = {
     origin: 'http://localhost:3000',
     optionsSuccessStatus: 200
 }
 
 app.use(cors(corsOptions));
-
+// app.use((req, res, next) => {
+//     res.setHeader('Access-Control-Allow-Origin', '*');
+//     res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PATCH,DELETE');
+//     res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization');
+//     next();
+// });
 
 app.use(bodyParser.urlencoded({
     extended: true
 }));
 app.use(bodyParser.json());
 
-app.post("/", async (req, res) => {
-    console.log(req.body);
-    res.send(req.body);
-});
+app.use('/', authRouter);
 
 app.post("/text-completions", async (req, res) => {
     const prompt = req.body.prompt;

back-end/util/auth.js

@@ -0,0 +1,14 @@
+const { sign, verify } = require("jsonwebtoken");
+
+const KEY = process.env.SECRET_KEY;
+
+function createJSONToken(userID) {
+  return sign({userID}, KEY, {expiresIn: '1h'});
+}
+
+function validateJSONToken(token) {
+  return verify(token, secret);
+}   
+
+exports.createJSONToken = createJSONToken;
+exports.validateJSONTOken = validateJSONToken;

front-end/package.json

@@ -14,6 +14,9 @@
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",
     "react-textarea-autosize": "^8.4.0",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.4.2",
+    "tailwind-scrollbar": "^2.1.0",
     "uuidv4": "^6.2.13",
     "web-vitals": "^2.1.4"
   },

front-end/src/App.js

@@ -1,30 +1,37 @@
 import {createBrowserRouter, RouterProvider} from "react-router-dom";
-import AuthPage from "./pages/AuthPage";
+import AuthPage, {action as authAction} from "./pages/AuthPage";
+import Private from "./util/Private";
 import ChatPage from "./pages/ChatPage";
 
 const router = createBrowserRouter([
-    {
-        path: "/",
-        element: <ChatPage />,
-        //   errorElement: <ErrorPage />,
-        children: [],
-    },
-    {
-        path: "/login",
-        element: <AuthPage mode="login"/>,
-    },
-    {
-        path: "/signup",
-        element: <AuthPage mode="signup"/>,
-    },
-    {
-        path: "/chat/:chatId",
-        element: <ChatPage />,
-    },
+  {
+    path: "/",
+    element: <ChatPage />,
+    //   errorElement: <ErrorPage />,
+    children: [],
+  },
+  {
+    path: "/login",
+    action: authAction,
+    element: <AuthPage mode="login" />,
+  },
+  {
+    path: "/signup",
+    action: authAction,
+    element: <AuthPage mode="signup" />,
+  },
+  {
+    path: "/chat/:chatId",
+    element: (
+      <Private>
+        <ChatPage />
+      </Private>
+    ),
+  },
 ]);
 
 function App() {
-    return <RouterProvider router={router} />;
+  return <RouterProvider router={router} />;
 }
 
 export default App;