Better user edit. Added footer. better API way.

APIDOCS.md

@@ -28,7 +28,6 @@ But in front end, the API will works with session.
 - GET `/api/users/:id` for fetch user.
 - DELETE `/api/users/:id/` for delete user.
 - PATCH `/api/users/:id/` for edit user.
-- POST `/api/users/:id/undelete` for undelete user.
 
 - GET `/api/threads/:id` for fetch thread.
 - DELETE `/api/threads/:id/` for delete thread.

README.md

@@ -13,7 +13,7 @@ Run `node util/reset` to **reset the database**, and run `node util/admin` for g
 Edit `config.json` for default themes of users...
 
 ## API
-Akf-forum has got an API for AJAX (fetch), other clients etc. And, you can learn about API in `util/APIDOCS.md`.
+Akf-forum has got an API for AJAX (fetch), other clients etc. And, you can learn about API in `APIDOCS.md`.
 
 ## Credits
 * [Akif9748](https://github.com/Akif9748) - Project mainteiner, main developer, made **old** frontend
@@ -34,15 +34,15 @@ Akf-forum has got an API for AJAX (fetch), other clients etc. And, you can learn
 ## TO-DO list
 | To do | Is done? | Priority |
 | ----- | -------- | -------- |
-| Search & message a | 🟡 | MEDIUM |
+| Page support for search | 🟡 | LOW |
-| Footer | 🟡 | LOW |
+| Footer | 🟢 | LOW |
 | Local pfp store | 🔴 | MEDIUM |
 | IPs of users will add SecretModel | 🔴 | MEDIUM |
-| better theme patch UserModel | 🟡 | VERY LOW |
 | Category | ⚪ | MEDIUM |
 | Profile Message | 🔴 | LOW |
+| Last seen, last seen info | 🔴 | LOW |
 | Better Auth | 🔴 | MEDIUM |
-
+- Add theme selection to footer, and, and, and fix footer, add navbar css to footer and import common css in meta
 ## Major Version History
 - V4: Caching
 - V3: New Theme

index.js

@@ -7,11 +7,24 @@ const { UserModel, BanModel } = require("./models"),
     port = process.env.PORT || 3000,
     mongoose = require("mongoose"),
     express = require('express'),
+   // multer = require("multer"),
     fs = require("fs"),
     app = express();
 
 app.ips = [];
-
+//Upload file
+/*
+const storage = multer.diskStorage({
+  destination: function (req, file, cb) {
+    cb(null, "public/data");
+  },
+  filename: function (req, file, cb) {
+    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
+    cb(null, file.fieldname + "-" + uniqueSuffix + ".png");
+  },
+});
+const upload = multer({ storage: storage });
+app.post("/stats", upload.single("uploaded_file"),*/
 require("dotenv").config();
 mongoose.connect(process.env.MONGO_DB_URL,
     async () => console.log("Database is connected with", (app.ips = await BanModel.find({})).length, "banned IPs"));

public/css/modal.css

@@ -1,3 +1,26 @@
+
+form {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  max-width: 500px;
+  margin: 0 auto;
+  width: 100%;
+  padding: 8px;
+}
+
+
+.input {
+  padding: 8px 10px;
+  font-family: inherit;
+  display: block;
+  font-weight: 600;
+  color: var(--input-clr);
+  width: 100%;
+  margin-bottom: 10px;
+  border: 2px solid var(--borders);
+}
+
 /*  MODAL */
 .modal {
   position: fixed;
@@ -5,7 +28,6 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background:red;
   background: #5b5b5bde;
 
 }
@@ -37,8 +59,13 @@ cursor: pointer;
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; }
+  from {
-      to { opacity: 1;}
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @media(max-width:760px) {

public/modal.js

@@ -1,19 +0,0 @@
-var modal_open = document.querySelectorAll("[data-modal-open]");
-modal_open.forEach(onclick_load)
-
-function onclick_load(item, index) {
-    var block = item.getAttribute("data-modal-open");
-    console.log("evet");
-    console.log(item)
-    document.querySelector(block).classList.toggle("no-active");
-    document.querySelector("#user-edit").querySelector(".modal-close").onclick = function() {
-        document.querySelector(block).classList.toggle("no-active");
-    }
-
-    item.onclick = function() {
-        document.querySelector(block).classList.toggle("no-active");
-    };
-
-
-
-}

routes/api/routes/users.js

@@ -55,9 +55,9 @@ app.patch("/:id/", async (req, res) => {
     if (req.user.id !== member.id && !user.admin) return res.error(403, "You have not got permission for this.");
     if (!Object.values(req.body).some(Boolean)) return res.error(400, "Missing member informations in request body.");
 
-    const { avatar, name, about, theme, admin } = req.body;
+    const { avatar, name, about, theme, admin, deleted } = req.body;
 
-    if (admin?.length && !req.user.admin) return res.error(403, "You have not got permission for edit 'admin' information, or bad request.");
+    if ((admin?.length || "deleted" in req.body) && !req.user.admin) return res.error(403, "You have not got permission for edit 'admin' and 'deleted' information, or bad request.");
 
     if (avatar && URLRegex.test(avatar))
         member.avatar = avatar;
@@ -68,10 +68,10 @@ app.patch("/:id/", async (req, res) => {
     }
 
     if (about) member.about = about;
-    if (theme)
+    if (theme || ["default", "black"].includes(theme)) member.theme = theme;
-        member.theme = member.theme === "default" ? "black" : "default";
 
     if (typeof admin === "boolean" || ["false", "true"].includes(admin)) member.admin = admin;
+    if (deleted === false) member.deleted = false;
     member.edited = true;
 
     await member.save();

views/edit_user.ejs

@@ -40,7 +40,7 @@
 
       const object = {};
       new FormData(e.target).forEach((value, key) => object[key] = value);
-      console.log(object)
+
       const res = await request("/api/users/<%=member.id%>", "PATCH", object);
       if (res) alert(`User is updated!`);
       location.reload();

views/extra/footer.ejs

@@ -1,4 +1,5 @@
 <style>
+
   select {
     background: #ebebeb;
     border: white;
@@ -6,12 +7,15 @@
     font-size: 16px;
     font-family: inherit;
   }
+
   select option {
     font-family: inherit;
     width: 290px;
   }
+
   .footer {
     width: 100%;
+    margin-top: 10px;
     background-color: var(--main);
     padding: 10px;
     color: white;
@@ -19,21 +23,19 @@ select option{
     justify-content: space-between;
     align-items: center;
   }
-
 </style>
 <div class="footer">
-  <select style="">
+  <select>    
-    <option value="tr">TR</option>
+    <option value="default">Default theme</option>
-        <option value="eng">ENG</option>
+    <option value="black">Black theme</option>
   </select>
   <a href="https://github.com/Akif9748/akf-forum" style="color: white;"> This website is powered by
-  <span style="color: #ffbf00;">AKF-Forum </span> </a><div>
+    <span style="color: #ffbf00;">AKF-Forum </span> </a>
+  <div>
 
     <span style="color:white">Coders</span> <br>
     <div style="text-align:center;">
       By <a href="https://github.com/Akif9748/" style="color: #ffbf00;">Akf</a> <br> By <a href="#" style="color:#ffbf00;">Tokmak</a>
     </div>
   </div>
-
-
 </div>

views/extra/meta.ejs

@@ -6,8 +6,9 @@
   <meta name="author" content="Akif9748">
   <link rel="icon" type="image/x-icon" href="/images/favicon.jpg">
   <link rel="stylesheet" href="/css/themes/<%= theme %>.css" />
+  <link rel="stylesheet" href="/css/common.css" />
+
   <% if (theme === "black") { %>
   <meta name="theme-color" content="#000000" />
   <% } %>
-
 </head>

views/extra/navbar.ejs

@@ -1,4 +1,3 @@
-<link rel="stylesheet" href="/css/navbar.css" />
 
 <% if (user?.admin){ %>
 <div class="admin-bar">
@@ -23,13 +22,11 @@
       async function invert() {
         await fetch('/api/users/<%= user.id %>', {
           method: 'PATCH',
-          body: JSON.stringify({
+          body: JSON.stringify({ theme: "<%=user.theme === `default` ? `black` : `default` %>" }),
-            theme: "<%=user.theme === `default` ? `black` : `default` %>"
-          }),
           headers: {
             "Content-Type": "application/json"
           }
-        })
+        });
         location.reload()
       }
     </script>

views/user.ejs

@@ -7,13 +7,46 @@
 <body>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-    <link rel="stylesheet" href="/css/login.css" />
   <link rel="stylesheet" href="/css/user.css" />
+  <%- include("extra/navbar") %>
+
+
+  <div class="content">
+
+    <% if (user?.admin || user?.id === member.id) { %>
     <link rel="stylesheet" href="/css/modal.css" />
 
-  <%if (user) {%>
+    <a class="btn-outline-primary" id="toogle">Edit user!</a>
+
+    <div class="modal no-active" id="user-edit">
+      <div class="modal-content">
+        <div class="modal-close">
+          <i id="toogle" class="fa-solid fa-square-xmark"></i>
+        </div>
+        <h1 class="title" style="text-align:center;">Edit <a class="see" href="/users/<%= member.id %>"><%= member.name %></a></h1>
+        <div class="content">
+          <form id="form" class="see" style="box-shadow:none">
+            <input type="text" name="name" placeholder="<%=member.name%>" class="input">
+            <input type="url" name="avatar" placeholder="<%=member.avatar%>" class="input">
+            <textarea class="input" name="about" rows="4" cols="60" name="content" placeholder="<%=member.about%>"></textarea>
+            <% if (user?.admin){ %>
+            Is Admin? <input id='admin' type='checkbox' value='true' name='admin' <%=member.admin ? "checked": ""%>>
+            <input id='adminHidden' type='hidden' value='false' name='admin'>
+            <% } %>
+
+            <button class="btn-primary" style="width:100%;">Update User!</button>
+          </form>
+
+        </div>
+
+      </div>
+    </div>
+
     <script type="module">
       import request from "../../js/request.js";
+
+      const form = document.getElementById("form");
+
       document.addEventListener("click", async e => {
         if (e.target.id == "delete") {
           const response = await request("/api/users/<%= member.id %>", "DELETE");
@@ -25,27 +58,22 @@
           if (response.deleted) return;
           alert("User is undeleted successfully!");
           location.reload()
-      }
+        } else if (e.target.id == "toogle")
+          document.getElementById('user-edit').classList.toggle('no-active')
+
+      });
+      form.addEventListener("submit", async e => {
+        e.preventDefault();
+        document.getElementById('adminHidden').disabled = document.getElementById("admin").checked;
+
+        const object = {};
+        new FormData(e.target).forEach((value, key) => object[key] = value);
+
+        const res = await request("/api/users/<%=member.id%>", "PATCH", object);
+        if (res) alert(`User is updated!`);
+        location.reload();
       });
     </script>
-  <% }; %>
-  <%- include("extra/navbar") %>
-
-<!--
-
-data-modal-open="#deneme"   bu elemente tıklanıldığında
-    modal yükletir
-
-
-
-
-    -->
-
-    
-  <div class="content">
-
-    <% if (user?.admin || user?.id === member.id) { %>
-    <a class="btn-outline-primary" data-modal-open="#user-edit" style="align-self:baseline;">Edit user!</a>
     <% } %>
 
     <% if (member.deleted) {%>
@@ -53,13 +81,16 @@ data-modal-open="#deneme"   bu elemente tıklanıldığında
     <a id="undelete" class="btn-primary">Undelete user! </a>
     <% } else if (user?.admin){ %>
     <a id="delete" class="btn-outline-primary">Delete user! </a>
-    <% }; %>
+    <% } %>
 
 
     <div class="box" style="justify-content:center;">
       <img style="width:150px;height:150px;border-radius:50%;" src="<%=member.avatar %>">
     </div>
+
+    <% if (member.admin) { %>
     <h2 class="box-value" style="align-self: center;">Admin</h2>
+    <% } %>
 
     <div class="box-value" style="
 margin: 10px auto;
@@ -78,13 +109,10 @@ color: black;">
       <h2 class="box-title">Name:</h2>
       <h2 class="box-value"><%= member.name %></h2>
     </div>
-
-      
     <div class="box">
       <h2 class="box-title">Created at:</h2>
       <h2 class="box-value"><%= new Date(member.time).toLocaleString() %></h2>
     </div>
-
     <div class="box">
       <h2 class="box-title">Message:</h2>
       <h2 class="box-value"><%= counts.message %></h2>
@@ -93,40 +121,8 @@ color: black;">
       <h2 class="box-title">Thread:</h2>
       <h2 class="box-value"><%= counts.thread %></h2>
     </div>
-
-
-  <div class="modal" id="user-edit">
-  <div class="modal-content">
-    <div class="modal-close">
-      <i class="fa-solid fa-square-xmark"></i>
   </div>
- <h1 class="title" style="text-align:center;">Edit <a class="see" href="/users/<%= member.id %>"><%= member.name %></a></h1>
-  <div class="content">
-    <form id="form" class="see" style="box-shadow:none">
-      <input type="text" name="name" placeholder="<%=member.name%>" class="input">
-      <input type="url" name="avatar" placeholder="<%=member.avatar%>" class="input">
-      <textarea class="input" name="about" rows="4" name="content" placeholder="<%=member.about%>"></textarea>
-      <% if (user.admin){ %>
-      Is Admin? <input id='admin' type='checkbox' value='true' name='admin' <%=member.admin ? "checked": ""%>>
-      <input id='adminHidden' type='hidden' value='false' name='admin'>
-      <% } %>
-
-      <button class="btn-primary" style="width:100%;">Update User!</button>
-    </form>
-
-  </div>
-
-  </div>
- </div>
-
-      
-
-  </div>
-
-  <script src="../js/modal.js"></script>
-
-        
-        
 </body>
+<%- include("extra/footer") %>
 
 </html>