Fixed scrolling and some other bugs

Author: CSP02

@me/index.html

@@ -95,7 +95,14 @@
         </div>
         <div id="list_users" class="closed">
             <div id="users_list">
-                Nothing here!
+                <h3>Online:</h3>
+                <div id="online_u">
+                    Nothing here!
+                </div>
+                <h3>Offline:</h3>
+                <div id="offline_u">
+                    Nothing here!
+                </div>
             </div>
         </div>
         <div id="auth_buts">

@me/style.css

@@ -104,6 +104,16 @@ button {
     }
 }
 
+@keyframes blink{
+    0%{
+        background-color: #e69c5b61;
+    }
+
+    100%{
+        background-color: transparent;
+    }
+}
+
 button:disabled {
     opacity: .1;
 }
@@ -194,6 +204,55 @@ button#new_message_popup:hover {
     color: white;
 }
 
+#user_selection{
+    height: 20px;
+    width: 20px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 .5rem 0 0;
+}
+
+#user_selection::before{
+    content: "";
+    height: 24px;
+    width: 24px;
+    border-radius: .4rem;
+    border: none;
+    background-color: white;
+    display: block;
+    position: absolute;
+}
+
+#user_selection:checked::before{
+    content: "\f00c";
+    background-color: rgb(97, 97, 202);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font: var(--fa-font-solid);
+}
+
+.online::before {
+    content: "";
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background-color: #51ef51;
+    display: block;
+    position: absolute;
+    z-index: 12;
+    bottom: 14px;
+    left: 40px;
+    border: 4px solid #363636;
+}
+
+.offline{
+    opacity: .5;
+}
+
 .form:focus {
     outline: 3px soild white;
 }
@@ -237,8 +296,9 @@ button#new_message_popup:hover {
 #channels {
     grid-area: channel;
     background-color: #161616;
-    overflow-y: auto;
+    overflow-y: scroll;
     overflow-x: hidden;
+    height: calc(100% - 1rem);
 }
 
 #app_main_container {
@@ -519,6 +579,7 @@ button#new_message_popup:hover {
     margin: .2rem;
     border-radius: .6rem;
     background-color: #363636;
+    position: relative;
 }
 
 #search_user {
@@ -574,11 +635,6 @@ button#new_message_popup:hover {
     color: rgb(211, 211, 211);
 }
 
-#channels {
-    display: flex;
-    flex-direction: column;
-}
-
 #create_channel {
     height: 45px;
     width: 45px;
@@ -605,6 +661,7 @@ button#new_message_popup:hover {
     text-overflow: ellipsis;
     border: 2px solid transparent;
     transition: .2s ease;
+    width: calc(100% - 1rem);
 }
 
 #gif_results {
@@ -670,7 +727,6 @@ button#new_message_popup:hover {
     height: 25px;
     width: 25px;
     transform: translate(-10px, -10px);
-    z-index: 100;
     align-items: center;
     justify-content: center;
 }
@@ -741,6 +797,14 @@ div.reply_message {
     align-items: center;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: rgb(177, 177, 177);
+    text-align: left;
+    border: none;
+    width: calc(100% - 1.6rem);
+}
+
+.m_indicator{
+    animation: blink infinite .5s alternate;
 }
 
 .replied_to span {

ChatterBox/Channel.js

@@ -57,9 +57,9 @@ export async function GetChannels(params) {
         mode: "cors",
         headers: headers
     }).then((response) => {
-        if (response.status === 401 && response.error === params.types.ErrorTypes.JWT_EXPIRE) {
+        if (response.status === 401) {
             const headers = new Headers()
-
+            console.log(response.error)
             headers.append("Authorization", `Bearer ${refreshToken}`)
             fetch(`${apiURL}/api/request_new_token`, {
                 mode: "cors",
@@ -70,8 +70,6 @@ export async function GetChannels(params) {
                 [token, refreshToken] = UpdateTokens(response)
                 GetChannels(params)
             })
-        } else if (response.status === 401 || response.status === 500) {
-            alert("Something went wrong! Please reload the website. If this error appeared again please login again.")
         }
         if (response.ok) return response.json();
     })
@@ -90,6 +88,7 @@ function AddToChannels(channels, socket) {
     channels.forEach(channel => {
         const channelName = channel.name
         const iconURL = channel.iconURL
+        const  loggedUser = window.sessionStorage.getItem("user")
 
         const nameButton = document.createElement("button")
         nameButton.innerText = channelName

ChatterBox/Utility.js

@@ -137,7 +137,7 @@ export async function AddToMessages(message) {
     contentHolder.classList.add("message_db");
     contentHolder.id = messageId
     if (repliedTo !== undefined && repliedTo.username !== "") {
-        const replyIndicator = document.createElement("div")
+        const replyIndicator = document.createElement("button")
         const userPfp = document.createElement("img")
         const username = document.createElement("span")
         const content = document.createElement("span")
@@ -152,6 +152,17 @@ export async function AddToMessages(message) {
 
         replyIndicator.append(...[userPfp, username, content])
         replyIndicator.classList.add("replied_to")
+
+        replyIndicator.addEventListener("click", e => {
+            console.log("test", repliedTo._id)
+            const replyM = document.getElementById(repliedTo._id)
+            replyM.parentElement.parentElement.scrollIntoView({ block: "center" });
+            replyM.classList.add("m_indicator")
+
+            setTimeout(() => {
+                replyM.classList.remove("m_indicator")
+            }, 1500)
+        })
         messAndUserholder.appendChild(replyIndicator)
 
         pfp.style.marginTop = "calc(25px + 1.2rem)"
@@ -179,7 +190,6 @@ export async function AddToMessages(message) {
         closeIcon.classList.add("fa-circle-xmark")
         cancelButton.appendChild(closeIcon)
         cancelButton.classList.add("cancel_reply")
-        console.log(reply.previousSibling)
         username.innerText = "replying to " + reply.parentElement.previousSibling.firstChild.innerText
         cancelButton.addEventListener("click", click => {
             window.sessionStorage.removeItem("repliedTo")
@@ -296,16 +306,15 @@ async function ResolveContent(content, contentHolder, message) {
         if (node.nodeType === 3) {
             text += node.data
 
-            if (index === text2el.length - 1 ) {
+            if (index === text2el.length - 1) {
                 const textEl = document.createElement("span")
                 textEl.innerText = text.trim()
-                console.log(text, "if")
 
                 wholeTextHolder.appendChild(textEl)
                 text = ""
             }
         } else {
-            if(!text || text === "" || text === "\s") return
+            if (!text || text === "" || text === "\s") return
             const textEl = document.createElement("span")
             textEl.innerText = text.trim()
 
@@ -315,7 +324,7 @@ async function ResolveContent(content, contentHolder, message) {
         }
 
     })
-    
+
     contentHolder.appendChild(wholeTextHolder)
     if (message.components.length > 0)
         [...message.components].forEach(component => {
@@ -327,16 +336,25 @@ async function ResolveContent(content, contentHolder, message) {
             const image = new Image()
 
             if (component.type === types.ComponentTypes.EMBED) {
-                if (!component.title && !component.description && !component.image) { }
+                if (!component.title && !component.description && !component.image) {
+                    const textEl = document.createElement("a")
+                    textEl.innerText = component.url.trim()
+                    textEl.href = component.url.trim()
+                    textEl.target = "_blank"
+
+                    wholeTextHolder.appendChild(textEl)
+                    contentHolder.appendChild(wholeTextHolder)
+                }
                 else {
                     title.classList.add("embed_title")
                     const titleLink = document.createElement("a")
                     titleLink.href = component.url
-                    titleLink.innerText = component.title
+                    titleLink.innerText = component.title ? component.title : "..."
+                    titleLink.target = "_blank"
                     title.appendChild(titleLink)
 
                     description.classList.add("embed_description")
-                    description.innerText = component.description ? component.description : ""
+                    description.innerText = component.description ? component.description : "..."
 
                     if (component.image) {
                         image.classList.add("embed_image")
@@ -393,15 +411,24 @@ export function ScrollToBottom(onload) {
 }
 
 export function LogoutUser() {
-    token = null;
-    refreshToken = null;
-    loggedUser = null
-
-    window.sessionStorage.setItem("token", token)
-    window.sessionStorage.setItem("refresh token", refreshToken)
-    window.sessionStorage.setItem("user", loggedUser)
-
-    location = "/"
+    const headers = new Headers
+    headers.append("Authorization", `Bearer ${token}`)
+    fetch("http://localhost:3001/api/logout", {
+        mode: "cors",
+        headers: headers
+    }).then(async response => {
+        if (response.ok) return response.json()
+    }).then(response => {
+        token = null;
+        refreshToken = null;
+        loggedUser = null
+
+        window.sessionStorage.setItem("token", token)
+        window.sessionStorage.setItem("refresh token", refreshToken)
+        window.sessionStorage.setItem("user", loggedUser)
+
+        location = "/"
+    })
 }
 
 export function UpdateTokens(response) {