From 318e95ec2ebea412ba6aa9a1803ddc09c18c6304 Mon Sep 17 00:00:00 2001
From: Akif9748 <akif9748@gmail.com>
Date: Tue, 27 Sep 2022 21:34:13 +0300
Subject: [PATCH] Modal.js
---
README.md | 2 ++
index.js | 2 +-
public/css/thread.css | 14 ++++++--------
public/js/modal.js | 3 +++
routes/api/routes/messages.js | 2 +-
routes/api/routes/users.js | 2 +-
views/thread.ejs | 32 ++++++++++++--------------------
7 files changed, 26 insertions(+), 31 deletions(-)
create mode 100644 public/js/modal.js
diff --git a/README.md b/README.md
index 72ffbca..1232251 100644
--- a/README.md
+++ b/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
diff --git a/index.js b/index.js
index 86494bb..fcd42be 100644
--- a/index.js
+++ b/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();
diff --git a/public/css/thread.css b/public/css/thread.css
index c27a5d4..753a4f7 100644
--- a/public/css/thread.css
+++ b/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;
}
diff --git a/public/js/modal.js b/public/js/modal.js
new file mode 100644
index 0000000..4ace875
--- /dev/null
+++ b/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')};
\ No newline at end of file
diff --git a/routes/api/routes/messages.js b/routes/api/routes/messages.js
index 8c90043..192bb1f 100644
--- a/routes/api/routes/messages.js
+++ b/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");
diff --git a/routes/api/routes/users.js b/routes/api/routes/users.js
index 8f686ed..0fcd2bf 100644
--- a/routes/api/routes/users.js
+++ b/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;
diff --git a/views/thread.ejs b/views/thread.ejs
index 1bb41b8..7f40045 100644
--- a/views/thread.ejs
+++ b/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)) { %>
- style="color: var(--main)"
- <% } %> >
+ <div <% if (message.react.like.includes(user?.id)) { %> 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)) { %>
- style="color: var(--main)"
- <% } %>>
+ <div <% if (message.react.dislike.includes(user?.id)) { %> 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,18 +100,14 @@
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>
<div class="message" id="send-div">
- <form id="send" style="width:100%">
+ <form id="send" style="width:100%">
<textarea rows="4" id="textarea"></textarea>
<input name="page" type="hidden" value="<%= page %>"></input>
<button class="btn-primary">Send!</button>
@@ -131,7 +123,7 @@
delay: 1000,
},
element: textarea,
- spellChecker: false
+ spellChecker: false
});
import request from "../../js/request.js";
@@ -143,7 +135,7 @@
threadID: "<%= thread.id %>",
content: simplemde.value()
})
- simplemde.clearAutosavedValue();
+ simplemde.clearAutosavedValue();
let tp = Number("<%= thread.pages %>")
let tm = Number("<%= thread.count %>")
if (tp * 10 === tm) tp++;