Modal.js

README.md

@@ -59,6 +59,8 @@ Akf-forum has got an API for AJAX (fetch), other clients etc. And, you can learn
 - edit config from web admin panel.
 - user.state for ban, delete, etc.
 - Add a feature list to README.md
+- delete admin???
+- MODALS'S CSS & JS
 ## Major Version History
 - V4: Caching
 - V3: New Theme

index.js

@@ -35,7 +35,7 @@ app.use(express.static("public"), express.json(), express.urlencoded({ extended:
 
         res.error = (type, error) => res.reply("error", { type, error }, type);
 
-        if (req.user && !req.user.approved && !req.url.startsWith("/auth/email")) return res.error(403, "Your account is not approved yet.");
+        if (req.user && !req.user.approved&& !req.user.admin && !req.url.startsWith("/auth/email")) return res.error(403, "Your account is not approved yet.");
 
         if (req.user?.deleted) {
             req.session.destroy();

public/css/thread.css

@@ -86,10 +86,14 @@
   display: none;
 }
 
-.dots-menu.active {
+.active {
   display: block;
 }
 
+.no-display {
+  display: none;
+}
+
 .dots-menu a {
   display: block;
   margin: 8px;
@@ -105,12 +109,6 @@
 
 }
 
-.send>textarea{
-  font-family:inherit;
-  width: 100%;
-  margin: 10px;
-  border: 2px solid #e3e3e3;
-}
 /* Media Query  */
 
 @media(max-width:980px) {
@@ -170,7 +168,7 @@
     width: 120px;
   }
 
-  .dots-menu.active {
+  .active {
     display: flex;
   }
 

public/js/modal.js

@@ -0,0 +1,3 @@
+for (const modal of document.querySelectorAll("[modal]"))
+    modal.onclick = () => {
+        document.querySelector(modal.getAttribute("modal")).classList.toggle('active')};

routes/api/routes/messages.js

@@ -39,7 +39,7 @@ app.patch("/:id/", async (req, res) => {
     const { message, user } = req;
 
     if (user.id !== message.authorID && !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 message informations for update in request body.");
+    if (!Object.keys(req.body).some(Boolean)) return res.error(400, "Missing message informations for update in request body.");
     const { content, deleted } = req.body;
 
     const limits = req.app.get("limits");

routes/api/routes/users.js

@@ -36,7 +36,7 @@ app.patch("/:id", async (req, res) => {
     const { user, member } = req;
 
     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.");
+    if (!Object.keys(req.body).some(Boolean)) return res.error(400, "Missing member informations in request body.");
 
     const { name, about, theme, admin, deleted } = req.body;
 

views/thread.ejs

@@ -24,16 +24,16 @@
     <div class="date">
       <a style="color: var(--anti);" href="/users/<%= thread.author.id %>"><%= thread.author.name %></a> <%= "• "+(thread.edited  ? "Edited" : "Not edited")%>
     </div>
+
   </div>
+
   <div style="text-align:center;padding:8px">
     <% if ((user.id === thread.authorID || user.admin ) && thread.state !== "DELETED"){ %>
-
     <a onclick="delete_thread('<%= thread.id %>')" class="btn-outline-primary">DELETE</a>
     <a onclick="edit_thread('<%= thread.id %>')" class="btn-outline-primary">EDIT</a>
     <% } else if (thread.state == "DELETED") { %>
-    <h3 style="display:inline;">This thread has been deleted</h3>
+    <h4 class="title" style="display:inline; font-size: 20px;">This thread has been deleted</h3>
     <a onclick="undelete_thread('<%= thread.id %>')" class="btn-primary">UNDELETE</a>
-
     <% }; %>
   </div>
 
@@ -44,7 +44,7 @@
     <div class="message" id="message-<%= message.id %>">
       <div class="left">
         <img src="<%= message.author.avatar %>" />
-        <div class="username"><a href="/users/<%=message.authorID %>"><%=message.author.name %></a></div>
+        <div class="username"><a href="/users/<%=message.author.id %>"><%=message.author.name %></a></div>
         <div class="date">
           <%= new Date(message.time).toLocaleDateString() %>
         </div>
@@ -57,7 +57,7 @@
       <% if(user){ %>
       <% if(user.id === message.authorID || user.admin){ %>
 
-      <div class="dots" onclick="dots('<%=message.id %>')">
+      <div class="dots" modal="#modal-<%=message.id %>">
         <% if (message.deleted){ %>
         <i class='bx bx-trash bx-sm' id="deleted" style="color: var(--important);"></i>
         <% } %>
@@ -67,7 +67,7 @@
         <i class='bx bx-dots-horizontal-rounded'></i>
       </div>
 
-      <div class="dots-menu">
+      <div class="dots-menu" id="modal-<%=message.id %>">
         <% if (!message.deleted){ %>
         <a onclick="delete_message('<%=message.id %>');">Delete</a>
         <a onclick="edit_message('<%=message.id %>');">Edit</a>
@@ -78,15 +78,11 @@
       <% } %>
 
       <div class="reactions">
-        <div <% if (message.react.like.includes(user?.id)) { %>
+        <div <% if (message.react.like.includes(user?.id)) { %> style="color: var(--main)" <% } %>>
-          style="color: var(--main)"
-        <% } %> >
           <i onclick='react("<%= message.id %>","like");' class='bx bx-like'></i>
           <div id="like"><%=message.react.like.length %></div>
         </div>
-        <div <% if (message.react.dislike.includes(user?.id)) { %>
+        <div <% if (message.react.dislike.includes(user?.id)) { %> style="color: var(--main)" <% } %>>
-          style="color: var(--main)"
-        <% } %>>
           <i onclick='react("<%= message.id %>","dislike");' class='bx bx-dislike'></i>
           <div id="dislike"><%=message.react.dislike.length %></div>
         </div>
@@ -104,12 +100,8 @@
       const content = message.querySelector(".content");
       content.innerHTML = converter.makeHtml(content.rawText = content.innerHTML);
     }
-
-    function dots(id) {
-      document.getElementById('message-' + id).querySelector(".dots-menu").classList.toggle('active')
-    }
   </script>
-
+  <script src="/js/modal.js"></script>
   <% if (user){ %>
   <script type="module" src="/js/thread.js"></script>