Fix/#59

app.js

@@ -41,19 +41,19 @@ app.use(express.json());
 
 // Method override
 app.use(
-  methodOverride(function (req, res) {
-    if (req.body && typeof req.body === "object" && "_method" in req.body) {
-      // look in urlencoded POST bodies and delete it
-      let method = req.body._method;
-      delete req.body._method;
-      return method;
-    }
-  })
+    methodOverride(function(req, res) {
+        if (req.body && typeof req.body === "object" && "_method" in req.body) {
+            // look in urlencoded POST bodies and delete it
+            let method = req.body._method;
+            delete req.body._method;
+            return method;
+        }
+    })
 );
 
 // Logging
 if (process.env.NODE_ENV === "development") {
-  app.use(morgan("dev"));
+    app.use(morgan("dev"));
 }
 
 // EJS
@@ -66,12 +66,12 @@ app.use(expressLayouts);
 
 // Sessions
 app.use(
-  session({
-    secret: "keyboard cat",
-    resave: false,
-    saveUninitialized: false,
-    store: new MongoStore({ mongooseConnection: mongoose.connection }),
-  })
+    session({
+        secret: "keyboard cat",
+        resave: false,
+        saveUninitialized: false,
+        store: new MongoStore({ mongooseConnection: mongoose.connection }),
+    })
 );
 
 // cookie middleware
@@ -85,12 +85,12 @@ app.use(passport.session());
 app.use(flash());
 
 // Set Global variables
-app.use(function (req, res, next) {
-  res.locals.user = req.user || null;
-  res.locals.success_msg = req.flash("success_msg");
-  res.locals.error_msg = req.flash("error_msg");
-  res.locals.error = req.flash("error");
-  next();
+app.use(function(req, res, next) {
+    res.locals.user = req.user || null;
+    res.locals.success_msg = req.flash("success_msg");
+    res.locals.error_msg = req.flash("error_msg");
+    res.locals.error = req.flash("error");
+    next();
 });
 
 // Static folder
@@ -108,12 +108,13 @@ app.use("/done", require("./routes/api/done"));
 app.use("/addBalance", require("./routes/api/addBalance"));
 app.use("/transaction", require("./routes/api/transaction"));
 app.use("/search", require("./routes/api/search"));
+app.use("/edit", require("./routes/api/edit"));
 
 // Port: Love You 3000
 const PORT = process.env.PORT || 3000;
 
 // Server Listening
 app.listen(
-  PORT,
-  console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`)
-);
+    PORT,
+    console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`)
+);

public/css/tailwind.css

@@ -1,107 +1,124 @@
 @tailwind base;
+
 /* Custom CSS */
+
+
 /* Main CSS */
 
 html,
 body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  box-sizing: border-box;
-  background-color: rgb(226, 232, 240);
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    box-sizing: border-box;
+    background-color: rgb(226, 232, 240);
 }
 
 .chartjs-container {
-  position: relative;
-  margin: auto;
-  height: 75vh;
-  width: 75vw;
+    position: relative;
+    margin: auto;
+    height: 75vh;
+    width: 75vw;
 }
 
 .tradebyte-logo {
-  color: #1955e4;
-  text-shadow: 1px 2px 40px rgba(0, 0, 0, 0.5);
+    color: #1955e4;
+    text-shadow: 1px 2px 40px rgba(0, 0, 0, 0.5);
 }
 
 .line {
-  border: 1.5px solid #8e9aad;
+    border: 1.5px solid #8e9aad;
 }
 
 .user-profile {
-  border-radius: 100px;
-  border: 10px solid #1955e4;
-  width: 130px;
-  height: 130px;
+    border-radius: 100px;
+    border: 10px solid #1955e4;
+    width: 130px;
+    height: 130px;
 }
 
 .tick {
-  height: 22px;
-  width: 22px;
-  border-radius: 50%;
-  background-color: #38cda0;
-  color: white;
+    height: 22px;
+    width: 22px;
+    border-radius: 50%;
+    background-color: #38cda0;
+    color: white;
 }
 
 .tick-background {
-  background: #a9f7e6;
-  border-radius: 29px;
-  color: #1b9b7f;
+    background: #a9f7e6;
+    border-radius: 29px;
+    color: #1b9b7f;
 }
 
 .tab-color {
-  border-radius: 10px;
-  border-color: #1955e4;
-  color: #1955e4;
+    border-radius: 10px;
+    border-color: #1955e4;
+    color: #1955e4;
 }
 
 .view-link {
-  color: #1955e4;
+    color: #1955e4;
 }
 
 .view-link:hover {
-  color: #0d338a;
+    color: #0d338a;
 }
 
 .button {
-  background-color: #1955e4;
+    background-color: #1955e4;
 }
 
 .button:hover {
-  background-color: #0d338a;
+    background-color: #0d338a;
 }
 
 .table-content {
-  overflow: scroll;
-  overflow-x: scroll;
-  overflow-y: auto;
+    overflow: scroll;
+    overflow-x: scroll;
+    overflow-y: auto;
 }
 
 .transaction-companySymbol {
-  color: rgb(0, 0, 0);
-  font-weight: 700;
-  font-size: 1.1rem;
+    color: rgb(0, 0, 0);
+    font-weight: 700;
+    font-size: 1.1rem;
 }
 
-@tailwind components;
-
 .symbolicon {
-  font-size: 72px;
-  background: -webkit-linear-gradient(#eee, #333);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+    font-size: 72px;
+    background: -webkit-linear-gradient(#eee, #333);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
 .min-w {
-  min-width: 400px;
+    min-width: 400px;
+}
+
+.notification {
+    position: relative;
+    display: inline-block;
+}
+
+.notification .badge {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    padding: 5px 2px;
+    border-radius: 50%;
+    background-color: #1955e4;
+    color: white;
 }
 
 @media (max-width: 400px) {
-  .min-w {
-    min-width: 300px;
-  }
+    .min-w {
+        min-width: 300px;
+    }
 }
 
-@tailwind utilities;
+@tailwind components;
+@tailwind utilities;

routes/api/edit.js

@@ -1 +1,64 @@
 // Edit Profile Route
+const express = require('express')
+const router = express.Router()
+const { ensureAuth } = require('../../middleware/auth')
+
+const User = require('../../models/User.js');
+const { id } = require('date-fns/locale');
+const { last } = require('lodash');
+
+
+
+// @desc    Show edit page
+// @route   GET /edit/:id
+router.get("/", ensureAuth, (req, res) => {
+    let avatar = req.user.image;
+
+    let firstName = req.user.firstName;
+    let lastName = req.user.lastName;
+    let email = req.user.email;
+
+
+    console.log(avatar);
+
+
+    res.status(200).render("edit", {
+        layout: "layouts/app",
+        avatar,
+        firstName,
+        lastName,
+        email,
+        href: "/edit",
+    });
+});
+
+router.put("/", ensureAuth, async(req, res) => {
+    try {
+
+
+        let curruser1 = await User.findById(req.user._id).lean();
+        console.log(curruser1);
+
+        curruser1.firstName = req.body.firstName;
+        curruser1.lastName = req.body.lastName;
+        curruser1.email = req.body.email;
+        curruser1.displayName = curruser1.firstName + " " + curruser1.lastName
+
+        curruser1 = await User.findOneAndUpdate({ _id: curruser1._id }, {
+            firstName: curruser1.firstName,
+            lastName: curruser1.lastName,
+            email: curruser1.email,
+            displayName: curruser1.displayName,
+        }, {
+            new: true, // it will create a new one, if it doesn't exist
+            runValidators: true, // it check weather the fields are valid or not
+        });
+
+        res.redirect("/portfolio");
+    } catch (err) {
+        console.error(err)
+        return res.render('error/500')
+    }
+});
+
+module.exports = router;

views/edit.ejs

@@ -1 +1,64 @@
-<h1>Edit Profile</h1>
+<main class="md:col-span-4 md:ml-56 lg:ml-64 md:pr-14 w-full">
+    <div class="container px-5 py-10 mx-auto md:px-auto ">
+        <!-- header -->
+
+        <header class="my-4 absolute-center">
+            <span class="text-gray-700 text-3xl font-semibold leading-none tracking-wider">Edit Profile</span
+      >
+    </header>
+
+    <hr class="line my-4" />
+
+   <!--form  -->
+
+
+        <form action="/edit" method="POST" class="w-full max-w-sm m-auto">
+            <input type="hidden" name="_method" value="PUT">
+            <div class="md:flex md:items-center mb-6">
+                <div class="md:w-1/3">
+                    <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4 mr-4" for="inline-full-name">
+          First Name :
+        </label>
+                </div>
+                <div class="md:w-2/3">
+                    <input type="text" name="firstName" value="<%=firstName%>" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" />
+                    <!-- <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe"> -->
+                </div>
+            </div>
+            <div class="md:flex md:items-center mb-6">
+                <div class="md:w-1/3">
+                    <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4 mr-4" for="inline-full-name">
+          Last Name :
+        </label>
+                </div>
+                <div class="md:w-2/3">
+                    <input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500">
+                    <!-- <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe"> -->
+                </div>
+            </div>
+            <div class="md:flex md:items-center mb-6">
+                <div class="md:w-1/3">
+                    <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4 mr-4" for="inline-full-name">
+          Email :
+            </label>
+    </div>
+    <div class="md:w-2/3">
+        <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" type="email" id="email" name="email" value="<%=email%>">
+        <!-- <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe"> -->
+    </div>
+    </div>
+
+
+    <div class="md:flex justify-center">
+        <!-- <div class="md:w-1/2"> -->
+            <input type="submit" value="Save" class="save_btn ml-6 cursor-pointer lg:ml-24 btn mb-4 shadow bg-blue-700 hover:bg-blue-800 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded">
+        <!-- </div> -->
+        <!-- <div class="md:w-1/2"> -->
+            <button class="mb-4 ml-6 shadow bg-yellow-500 hover:bg-yellow-600 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button" style="margin-left: 6px;">
+          <a href="/portfolio">Cancel</a>
+        </button>
+        <!-- </div> -->
+    </div>
+    </form>
+    </div>
+</main>