bcrypt fix + forms to a

2022-08-27 14:08:28 +03:00 · 2022-08-27 14:08:28 +03:00 · b26314d4a2
parent 67b5f4c2ad
commit b26314d4a2
9 changed files with 107 additions and 117 deletions
--- a/README.md
+++ b/README.md
@ -32,6 +32,8 @@ Akf-forum has got an API for AJAX, other clients etc. And, you can learn about A
 - If thread deleted, not show its messages in API.
 - Thread.ejs fix with new theme
 - Profile photos will store in database
+- regex for pfp for now and
+- admin perm for undelete, thread+message

 ### Frontend
 ### User
--- a/public/css/threads.css
+++ b/public/css/threads.css
@ -1,4 +1,3 @@
-
 .threads {
  width: 100%;
  padding: 20px;
@ -18,6 +17,7 @@
 .threads-box:hover {
  background-color: #e2e2e2;
 }
+
 .thread-box-title {
  padding: 10px;
  font-size: 18px;
--- a/public/css/users.css
+++ b/public/css/users.css
@ -13,6 +13,7 @@
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 5px 0 #beb9b9;
+  max-width:500px;
 }

 .user-box-title {
@ -28,6 +29,7 @@
 .user-box-img {
  width: 80px;
  height: 80px;
+  margin: auto;
 }

@media (max-width: 992px) {
--- a/public/js/thread.js
+++ b/public/js/thread.js
@ -1,7 +1,11 @@
 import request from "./request.js";

-const messages = document.getElementById("messages");
-let messages_raw = [];
+const message_div = document.getElementById("messages");
+
+const messages_raw = await fetch(`/api/threads/${message_div.getAttribute("value")}/messages/`).then(res => res.json());
+for (const message of messages_raw)
+    renderMessage(message);
+
 function renderMessage(message) {
    const messageElement = document.createElement("div");
    messageElement.classList.add("message");
@ -12,50 +16,35 @@ function renderMessage(message) {
    <h3 style="float:right;">${new Date(message.time).toLocaleString()}</h3>

    <h2>
-      <img class="circle" src=${message.author.avatar} alt=${message.author.name}>
-        <a href=${"/users/" + message.author.id}> ${message.author.name}</a>:
+      <img class="circle" src="${message.author.avatar}" alt="${message.author.name}">
+        <a href="/users/${message.author.id}"> ${message.author.name}</a>:
    </h2>

    <p>${message.content.replaceAll("\n", "<br>")}</p><br>
    <div id="message-delete-${message.id}">
-    ${!message.deleted ?
-            `<form style="display:inline;">
-        <button id="delete_message" value="${message.id}" type="submit">DELETE</button>
-    </form>` :
-            "<h3 style=\"display:inline;\">This message has been deleted</h3>"}
+    ${/* if */!message.deleted ?
+            `
+            <a onclick="delete_message('${message.id}');">DELETE</a>
+            <a onclick="edit_message('${message.id}');">EDIT</a>
+            ` /* else */ :
+            `<h3 style=\"display:inline;\">This message has been deleted</h3>
+            <a onclick="undelete_message('${message.id}');">UNDELETE</a>
+           `
+
+        }
    </div>
    <div style="float: right;">
-        <h3 id="count${message.id}" style="display:inline;">${message.reactCount}</h3>
-        <button style="display:inline;" id="like" value="${message.id}">+🔼</button>
-        <button style="display:inline;" id="dislike" value="${message.id}" >-🔽</button>
+    <h3 id="count${message.id}" style="display:inline;">0</h3>
+    <a onclick="react('${message.id}', 'like');">+🔼</a>
+    <a onclick="react('${message.id}', 'dislike');">-🔽</a>
    </div>
 `;

-    messages.appendChild(messageElement);
-    messages.innerHTML += "<br>";
+    message_div.appendChild(messageElement);
+    message_div.innerHTML += "<br>";
 };

-/**
- * Main Renderer
- */
-(async () => {
-
-    messages_raw = await fetch(`/api/threads/${messages.getAttribute("value")}/messages/`).then(res => res.json());
-    if (messages_raw?.error) {
-
-        document.getElementById("messages").innerHTML
-            += '<div class="message"><h1>THIS THREAD HAS NOT GOT ANY MESSAGE</h1></div>';
-
-
-    } else
-        for (const message of messages_raw)
-            renderMessage(message);
-
-    window.scrollTo(0, document.body.scrollHeight);
-
-})();
-
-
+window.scrollTo(0, document.body.scrollHeight);

 /**
 * Message Sender
@ -74,41 +63,49 @@ document.getElementById("send").addEventListener("submit", async e => {
        });
 });

-
 /**
- * Button Listener
+ * OTHER FUNCTIONS
 */
-document.addEventListener("click", async e => {
-    //   e.preventDefault();
-    if (e.target.id === "delete_thread") {
-        const response = await request("/api/threads/" + e.target.value + "/delete");
-        if (response.deleted) {
-            alert("Thread deleted");
-            location.reload();
-        }

-    } else if (e.target.id === "undelete_thread") {
-        const response = await request("/api/threads/" + e.target.value + "/undelete");
-        if (!response.deleted) {
-            alert("Thread undeleted");
-            location.reload();
+async function delete_thread(id) {
+    const response = await request("/api/threads/" + id + "/delete");
+    if (response.deleted) {
+        alert("Thread deleted");
+        location.reload();
+    }

-        }
+}
+async function undelete_thread(id) {
+    const response = await request("/api/threads/" + id + "/undelete");
+    if (!response.deleted) {
+        alert("Thread undeleted");
+        location.reload();

-    } else if (e.target.id === "delete_message") {
-        e.preventDefault();
-        const response = await request(`/api/messages/${e.target.value}/delete`);
-        if (response.deleted) {
-            alert("Message deleted");
-            document.getElementById("message-delete-" + e.target.value).innerHTML = "<h3 style=\"display:inline;\">This message has been deleted</h3>";
-        }
-    } /*else if (e.target.id === "edit_thread") {
-      window.location.href = "/threads/<%= thread.id }/edit";
-    } */
+    }

-    if (!e.target.id.includes("like")) return;
-    const res = await request("/api/messages/" + e.target.value + "/react/" + e.target.id)
+}
+async function undelete_message(id) {
+    const response = await request(`/api/messages/${id}/undelete`);
+    if (!response.deleted)
+        document.getElementById("message-delete-" + id).innerHTML = `<a onclick=\"delete_message('${id}');\">DELETE</a>`;

-    document.getElementById("count" + e.target.value).innerHTML = res.reactCount;
+}
+async function delete_message(id) {
+    const response = await request(`/api/messages/${id}/delete`);
+    if (response.deleted) {
+        alert("Message deleted");
+        document.getElementById("message-delete-" + id).innerHTML = `
+        <h3 style=\"display:inline;\">This message has been deleted</h3>        
+        <a onclick="undelete_message('${id}');">UNDELETE</a>`;// ADMIN PERM FIX
+    }
+}
+async function react(id, type) {
+    const res = await request(`/api/messages/${id}/react/${type}`)
+    document.getElementById(`count${id}`).innerHTML = res.reactCount;
+}

-});
+window.delete_message = delete_message;
+window.undelete_message = undelete_message;
+window.react = react;
+window.delete_thread = delete_thread;
+window.undelete_thread = undelete_thread;
--- a/routes/api/index.js
+++ b/routes/api/index.js
@ -1,7 +1,6 @@
-const { Router } = require("express")
+const { Router, request, response } = require("express")
 const app = Router();
 const bcrypt = require("bcrypt");
-const { request, response } = require("express");
 const { SecretModel, UserModel } = require("../../models")

 /**
@ -11,7 +10,7 @@ const { SecretModel, UserModel } = require("../../models")
 */

 app.use(async (req, res, next) => {
-    res.error = (status, error) => res.status(status).json({error});
+    res.error = (status, error) => res.status(status).json({ error });

    res.complate = result => res.status(200).json(result);

@ -26,10 +25,9 @@ app.use(async (req, res, next) => {
    if (!user)
        return res.error(401, "We have not got any user has got this name")

-    const validPassword = await bcrypt.compare(password, user.password);

-    if (!validPassword)
-        return res.error(401, 'Incorrect Password!')
+    if (!bcrypt.compare(password, user.password)) return res.error(401, 'Incorrect Password!');
+
    req.user = await UserModel.findOne({ name: req.headers.username });

    next();
--- a/routes/login.js
+++ b/routes/login.js
@ -14,9 +14,7 @@ app.post("/", async (req, res) => {
        const user = await SecretModel.findOne({ username });
        if (user) {

-            const validPassword = await bcrypt.compare(password, user.password);
-
-            if (!validPassword) return res.error( 403, 'Incorrect Password!')
+            if (!bcrypt.compare(password, user.password)) return res.error( 403, 'Incorrect Password!')
            const member = await UserModel.findOne({ name: username });
            if (!member || member.deleted) return res.error( 403, 'Incorrect Username and/or Password!')

--- a/views/thread.ejs
+++ b/views/thread.ejs
@ -8,26 +8,26 @@
  <%- include("extra/navbar") %>

  <link rel="stylesheet" href="/css/thread.css" />
- 
+  <% if (user){ %>
+    <script type="module" src="/js/thread.js"></script>
+  <% }%>


-  <h1 style="font-size: 35px;color: #4d18e6;" >
-    <%= thread.title %>
-  </h1>
+  <h1 style="font-size: 35px;color: #4d18e6;" ><%= thread.title %></h1>

-  <h2 style="display:inline;">By <a href="<%="/users/" + thread.author.id %>"> <%= thread.author.name %></a>
+  <h2 style="display:inline;">By <a href="<%='/users/' + thread.author.id %>"> <%= thread.author.name %></a>
    <img class="circle" src="<%=thread.author.avatar %>">
  </h2>

  <% if (user && !thread.deleted){ %>

-    <button id="delete_thread" value="<%= thread.id %>" style="display:inline;" type="submit">DELETE</button>
-    <button id="edit_thread" style="display:inline;" type="submit">EDIT</button>
-    <% } else if (thread.deleted) { %>
-      <h3 style="display:inline;">This thread has been deleted</h3>
-      <button id="undelete_thread" value="<%= thread.id %>" style="display:inline;" type="submit">UNDELETE</button>
+    <a onclick="delete_thread('<%= thread.id %>' )" value=style="display:inline;" >DELETE</a>
+    <a onclick="edit_thread('<%= thread.id %>')" style="display:inline;" >EDIT</a>
+  <% } else if (thread.deleted) { %>
+    <h3 style="display:inline;">This thread has been deleted</h3>
+    <a onclick="undelete_thread('<%= thread.id %>')" style="display:inline;" >UNDELETE</a>

-      <% }; %>
+  <% }; %>


        <hr>
@ -44,20 +44,20 @@
              <h3 style="float:right;">26.08.2022 15:37:42</h3>
          
              <h2>
-                <img class="circle" src="https://cdn.discordapp.com/avatars/539506680140922890/abd74d10aac094fc8a5ad5c86f29fdb9.png?size=1024" alt="Akif9748">
+                <img class="circle" src="https://cdn.discordapp.com/avatars/539506680140922890/abd74d10aac094fc8a5ad5c86f29fdb9.png?size=1024">
                  <a href="/users/0"> Akif9748</a>:
              </h2>
          
              <p>Example message for development</p><br>
              <div id="message-delete-3">
-              <form style="display:inline;">
-                  <button id="delete_message" value="3" type="submit">DELETE</button>
-              </form>
+                <a onclick="delete_message('3');">DELETE</a>
+                <a onclick="edit_message('3');">EDIT</a>
+
              </div>
              <div style="float: right;">
                  <h3 id="count3" style="display:inline;">0</h3>
-                  <button style="display:inline;" id="like" value="3">+🔼</button>
-                  <button style="display:inline;" id="dislike" value="3">-🔽</button>
+                  <a onclick="react('3', 'like');">+🔼</a>
+                  <a onclick="react('3', 'dislike');">-🔽</a>
              </div>
          </div>
                      <!--EXAMPLE MESSAGE END-->
@ -74,15 +74,13 @@
          <br>
          <% if (user){ %>
            <button type="submit">Send!</button>
-            <%} else {%>
-              <button disabled>Login for send</button>
-              <% }%>
+          <%} else {%>
+            <button disabled>Login for send</button>
+          <% }%>

        </form>

-        <% if (user){ %>
-          <script type="module" src="/js/thread.js"></script>
-        <% }%>
+ 
        <script>
          document.getElementById("message-<%= scroll %>").scrollIntoView();
        </script>
--- a/views/user.ejs
+++ b/views/user.ejs
@ -40,22 +40,16 @@
  </ul>

  <% if (user?.admin && !member.deleted) {%>
-    <form id="admin">
-      <button class="big" type="submit">Give admin permissions!</button>
-    </form>
-
-    <form id="delete">
-      <button class="big" type="submit">Delete user!</button>
-    </form>
+      <a class="big" id="admin">Give admin permissions!</a>

+      <a class="big"  id="delete">Delete user!</a>
+ 
    <script type="module">

      import request from "../../js/request.js";
-
-      document.addEventListener("submit", async e => {
+      document.addEventListener("click", async e => {
        e.preventDefault();
-
-        if (e.target.id == "admin") {
+    if (e.target.id == "admin") {

          const response = await request("/api/users/<%= member.id %>/admin");

@ -77,23 +71,22 @@
  <% }; %>
  <% if (member.deleted) {%>
        <h1>This user has been deleted!</h1>
-
-        <form id="undelete">
-          <button class="big" type="submit">Undelete user!</button>
-        </form>
+        <a onclick="undelete();" type="">Undelete user! </a>
+  
+ 
    
        <script type="module">
    
          import request from "../../js/request.js";
-    
-          document.addEventListener("submit", async e => {
-   
+          async function undelete(params) {
+            
            const response = await request("/api/users/<%= member.id %>/undelete");
     
            if (response.deleted) return;
              alert("User is undeleted successfully!");
              location.reload()
-          });
+          }
+        
    
    
        </script>
--- a/views/users.ejs
+++ b/views/users.ejs
@ -11,12 +11,14 @@

  <div class="users">
  <% users.forEach(user=>{ %>
+      <div style="display:flex;justify-content:center;">
      <div class="user-box">
        <img src="<%= user.avatar %>" class="user-box-img">
        <div class="user-box-title"> <a href="<%= user.getLink() %>">
        <% if (user.deleted) { %> <span style="color: RED;">[DELETED]</span><% } %>
          <%= user.name %></a></div>
      </div>
+      </div>
  <% }); %>

  </div>