Pages for threads and users pages, and lib/

README.md

@@ -38,12 +38,10 @@ Akf-forum has got an API for AJAX (fetch), other clients etc. And, you can learn
 | Profile Message | 🔴 | LOW |
 | Search | 🔴 | MEDIUM |
 | Footer | 🟡 | LOW |
+| Better Auth | 🔴 | MEDIUM |
+| Local pfp store | 🔴 | MEDIUM |
+| IPs of users will add SecretModel | 🔴 | MEDIUM |
 
-- Better Auth
-- Profile photos will store in a folder
-- replacer function global
-- page for threads - users 
-- IPs of users will add SecretModel
 - message counts for API
 - better theme patch UserModel
 - ajax, delete update thread dom

lib/index.js

@@ -0,0 +1,11 @@
+module.exports = {
+
+    URLRegex: /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g,
+    clearContent: (content) => {
+        if (!content) return "";
+        return content.replaceAll("&", "&")
+        .replaceAll("<", "&lt;").replaceAll(">", "&gt;")
+        .replaceAll("\"", "&quot;").replaceAll("'", "&#39;")
+        .replaceAll("\n", "<br>");
+    }
+}

public/css/pages.css

@@ -0,0 +1,41 @@
+.pagination {
+    box-shadow: 0 0 5px 0 var(--box-shadow);
+    margin: 10px auto;
+    padding: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 400px;
+    gap: 10px;
+    position: relative;
+}
+
+.pagination .back,
+.pagination .after {
+    color: var(--second);
+    font-size: 26px;
+    cursor: pointer;
+}
+
+
+.pagination .numbers {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.pagination .number {
+    color: var(--second);
+    font-size: 22px;
+    border: 0 0 5px var(--second);
+    padding: 8px;
+    border-radius: 2px;
+    font-weight: 600;
+    cursor: pointer;
+    margin: 8px;
+}
+
+.pagination .number.active {
+    color: var(--main);
+    font-weight: 700;
+}

public/css/thread.css

@@ -67,50 +67,6 @@
   font-size: 22px;
 }
 
-
-.pagination {
-  box-shadow: 0 0 5px 0 var(--box-shadow);
-  margin: 10px auto;
-  padding: 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  max-width: 400px;
-  gap: 10px;
-  position: relative;
-}
-
-.pagination .back,
-.pagination .after {
-  color: var(--second);
-  font-size: 26px;
-  cursor: pointer;
-}
-
-
-.pagination .numbers {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.pagination .number {
-  color: var(--second);
-  font-size: 22px;
-  border: 0 0 5px var(--second);
-  padding: 8px;
-  border-radius: 2px;
-  font-weight: 600;
-  cursor: pointer;
-  margin: 8px;
-}
-
-.pagination .number.active {
-  color: var(--main);
-  font-weight: 700;
-}
-
-
 .dots {
   position: absolute;
   right: 20px;

routes/api/routes/users.js

@@ -1,5 +1,6 @@
 const { UserModel, SecretModel } = require("../../../models");
-const { Router } = require("express")
+const { Router } = require("express");
+const { URLRegex } = require("../../../lib");
 
 const app = Router();
 
@@ -58,19 +59,19 @@ app.patch("/:id/", async (req, res) => {
 
     if (admin?.length && !req.user.admin) return res.error(403, "You have not got permission for edit 'admin' information, or bad request.");
 
-    if (avatar && /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g.test(avatar))
+    if (avatar && URLRegex.test(avatar))
         member.avatar = avatar;
 
     if (name) {
-        await SecretModel.findOneAndUpdate({ name: member.name }, { name });
+        await SecretModel.updateOne({ id: member.id }, { username: name });
         member.name = name;
     }
 
     if (about) member.about = about;
-    if (theme) 
+    if (theme)
         member.theme = member.theme === "default" ? "black" : "default";
-    
-    if(typeof admin === "boolean" || ["false","true"].includes(admin)) member.admin = admin;
+
+    if (typeof admin === "boolean" || ["false", "true"].includes(admin)) member.admin = admin;
     member.edited = true;
 
     await member.save();

routes/register.js

@@ -2,7 +2,7 @@ const { UserModel, SecretModel } = require("../models");
 const { Router } = require("express")
 const bcrypt = require("bcrypt");
 const rateLimit = require('express-rate-limit')
-
+const {URLRegex} = require("../lib")
 const app = Router();
 
 app.get("/", (req, res) => res.reply("register", { user: null }));
@@ -22,7 +22,7 @@ app.post("/", rateLimit({
 
 
     const user2 = new UserModel({ name: req.body.username })
-    if (avatar && /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g.test(avatar)) user2.avatar = avatar;
+    if (avatar && URLRegex.test(avatar)) user2.avatar = avatar;
 
     if (about) user2.about = about;
 

routes/threads.js

@@ -1,14 +1,15 @@
 const { Router } = require("express");
 const app = Router();
-
+const {clearContent} = require("../lib");
 const { ThreadModel, MessageModel } = require("../models")
 
-
 app.get("/", async (req, res) => {
-
-    let threads = await ThreadModel.find(req.user?.admin ? {} : { deleted: false })//.limit(10);
+    const page = Number(req.query.page) || 0;
+    const query = req.user?.admin ? {} : { deleted: false };
+    let threads = await ThreadModel.find(query).limit(10).skip(page * 10);
     threads = await Promise.all(threads.map(thread => thread.get_author()));
-    return res.reply("threads", { threads });
+
+    return res.reply("threads", { threads, page, pages: Math.ceil(await ThreadModel.count(query) / 10) });
 });
 
 
@@ -30,10 +31,7 @@ app.get("/:id/", async (req, res) => {
 
         const messages = await Promise.all(await MessageModel.find(query).sort({ time: 1 }).limit(10).skip(page * 10)
             .then(messages => messages.map(async message => {
-                message.content = message.content.replaceAll("&", "&")
-                    .replaceAll("<", "&lt;").replaceAll(">", "&gt;")
-                    .replaceAll("\"", "&quot;").replaceAll("'", "&#39;")
-                    .replaceAll("\n", "<br>");
+                message.content =clearContent( message.content)
                 return await message.get_author();
             })));
         res.reply("thread", { page, thread, messages, scroll: req.query.scroll || messages[0]?.id });

routes/users.js

@@ -1,16 +1,18 @@
 const { Router } = require("express");
 const app = Router();
+const {clearContent} = require("../lib");
 
 const { UserModel, MessageModel, ThreadModel } = require("../models");
 
-app.get("/", async ({ user }, res) => {
-    const users = await UserModel.find(user?.admin ? {} : { deleted: false });
-    return res.reply("users", { users })
-
+app.get("/", async (req, res) => {
+    const page = Number(req.query.page) || 0;
+    const query = req.user?.admin ? {} : { deleted: false };
+    let users = await UserModel.find(query).limit(10).skip(page * 10);
+    return res.reply("users", { users, page, pages: Math.ceil(await UserModel.count(query) / 10) });
 });
 
 app.get("/:id/edit", async (req, res) => {
-    if(!req.user || (!req.user.admin&&req.params.id !== req.user.id)) return res.error(403, "You have not got permission for this.");
+    if (!req.user || (!req.user.admin && req.params.id !== req.user.id)) return res.error(403, "You have not got permission for this.");
     const member = await UserModel.get(req.params.id);
 
     if (member && (req.user?.admin || !member.deleted))
@@ -29,10 +31,7 @@ app.get("/:id", async (req, res) => {
 
         const message = await MessageModel.count({ authorID: id });
         const thread = await ThreadModel.count({ authorID: id });
-        member.about = member.about.replaceAll("&", "&")
-            .replaceAll("<", "&lt;").replaceAll(">", "&gt;")
-            .replaceAll("\"", "&quot;").replaceAll("'", "&#39;")
-            .replaceAll("\n", "<br>");
+        member.about = clearContent( member.about)
         res.reply("user", { member, counts: { message, thread } })
     }
     else res.error(404, `We don't have any user with id ${id}.`);

views/edit_user.ejs

@@ -7,13 +7,17 @@
 <body style="text-align: center;">
   <link rel="stylesheet" href="/css/login.css" />
   <link rel="stylesheet" href="/css/user.css" />
-
+  <style>
+    .see {
+      color: var(--reaction-hover)
+    }
+  </style>
   <%- include("extra/navbar") %>
 
-  <h1 class="title">Edit <a href="/users/<%= member.id %>"><%= member.name %></a></h1>
+  <h1 class="title">Edit <a class="see" href="/users/<%= member.id %>"><%= member.name %></a></h1>
 
   <div class="content">
-    <form id="form">
+    <form id="form" class="see">
       <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>
@@ -41,8 +45,6 @@
       if (res) alert(`User is updated!`);
       location.reload();
     });
-
-   
   </script>
 
 

views/thread.ejs

@@ -9,6 +9,8 @@
   <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 
   <link rel="stylesheet" href="/css/thread.css" />
+  <link rel="stylesheet" href="/css/pages.css" />
+
   <% if (user){ %>
   <script type="module" src="/js/thread.js"></script>
   <% }; %>

views/threads.ejs

@@ -3,9 +3,10 @@
 <%- include("extra/meta", {title: "Thread list!" }) %>
 
 <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 href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
 
   <link rel="stylesheet" href="/css/threads.css" />
+  <link rel="stylesheet" href="/css/pages.css" />
 
   <%- include("extra/navbar") %>
 
@@ -20,7 +21,7 @@
         </div>
         <div class="box-username">
           <% if (user && !thread.deleted){ %>
-          <a class="btn-danger" onclick="fetch('/api/threads/<%= thread.id %>/',{method:'DELETE'})"><i class="fa-solid fa-trash-can"></i></a>
+          <a class="btn-danger" onclick="fetch('/api/threads/<%= thread.id %>/',{method:'DELETE'})"><i class="bx bx-trash bx-sm"></i></a>
           <% } %>
           <%= thread.author.name %> <div class="avatar"><img src="<%=thread.author.avatar %>"> </div>
 
@@ -32,5 +33,24 @@
     <% }); %>
 
   </div>
+  <div class="pagination">
+    <div class="back">
+      <% if (page > 0){ %>
+      <a href="/threads?page=<%= page-1 %>" class='bx bxs-chevron-left'></a>
+      <% } %>
+    </div>
 
+    <div class="numbers">
+      <% for(let i=0; i < pages; i++){ %>
+      <a class="number <%= i==page?'active':'' %>" href="/threads?page=<%= i %>"><%= i+1 %></a>
+      <% } %>
+    </div>
+
+    <div class="after">
+      <% if (pages-1 > page) { %>
+      <a href="/threads?page=<%= page +1 %>" class='bx bxs-chevron-right'></a>
+      <% } %>
+    </div>
+
+  </div>
 </body>

views/users.ejs

@@ -5,8 +5,10 @@
 
 
 <body>
+  <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
   <link rel="stylesheet" href="/css/users.css" />
-
+  <link rel="stylesheet" href="/css/pages.css" />
+  
   <%- include("extra/navbar") %>
 
   <div class="users">
@@ -22,4 +24,24 @@
     <% }); %>
 
   </div>
+  <div class="pagination">
+    <div class="back">
+      <% if (page > 0){ %>
+      <a href="/users?page=<%= page-1 %>" class='bx bxs-chevron-left'></a>
+      <% } %>
+    </div>
+
+    <div class="numbers">
+      <% for(let i=0; i < pages; i++){ %>
+      <a class="number <%= i==page?'active':'' %>" href="/users?page=<%= i %>"><%= i+1 %></a>
+      <% } %>
+    </div>
+
+    <div class="after">
+      <% if (pages-1 > page) { %>
+      <a href="/users?page=<%= page +1 %>" class='bx bxs-chevron-right'></a>
+      <% } %>
+    </div>
+
+  </div>
 </body>