Add groups section, actions-notifier and auth

webroot/index.html

@@ -39,23 +39,71 @@
         <hr>
     </sidebar>
     
-    <sidebar class="second">
+    <sidebar class="second" id="roomsbar">
-        <button class="collapse-text-button" id="collapse-dms">
+        <div class="sidebar-section-header">
-            <span>Direct messages</span>
+            <button class="collapse-text-button" id="collapse-dms">
-            <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <span>Direct messages</span>
-                <polyline points="6 9 12 15 18 9"></polyline>
+                <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            </svg>
+                    <polyline points="6 9 12 15 18 9"></polyline>
-        </button>
+                </svg>
+            </button>
+            <button class="add-action-button" aria-label="New Direct Message" id="add-dm-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+            </button>
+        </div>
+
+        <div class="sidebar-section-header">
+            <button class="collapse-text-button" id="collapse-groups">
+                <span>Groups</span>
+                <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+            </button>
+            <button class="add-action-button" aria-label="New Group" id="add-group-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                    <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+            </button>
+        </div>
     </sidebar>
 
     <roomcontent>
         
     </roomcontent>
-    <sidebar class="second">
+    <sidebar class="second" id="roomdetailsbar">
     </sidebar>
 </body>
 </html>
 <script src="main.js"></script>
 <script>
+    async function start()
+    {
+        showAction("Authenticating...", "startauth");
+        let res = await Auth(username, password);
+        clearAction("startauth");
+        if (res == "Login successful")
+        {
+            await refreshDms();
+        }
+        else
+        {
+            showNotification("Failed to auth. Redirecting to login...", "error", 3500);
+            await delay(2000);
+            window.location.href = "login/";
+        }
+    }
     
+    async function refreshDms()
+    {
+        showAction("Refreshing dms...", "dmrefresh");
+        let res = await fetchEncrypted("user/dm/list", "");
+        console.log(res);
+        clearAction("dmrefresh");
+    }
+    
+    start();
 </script>

webroot/main.js

@@ -4,6 +4,7 @@ var url = `${window.location.protocol}//${window.location.hostname}/_larpix`;
 var params = new URLSearchParams(window.location.search);
 
 const collapseDmsBtn = document.getElementById("collapse-dms");
+const collapseGroupsBtn = document.getElementById("collapse-groups");
 
 const sidebarHome = document.getElementById("sidebar-home");
 const sidebarHomeButton = sidebarHome.children.item(1);
@@ -290,7 +291,7 @@ async function fetchEncrypted(request, body)
         }
     });
     let data = await response.text();
-    return data;
+    return decryptString(data, passwordHash);
 }
 
 function power(base, exponent, mod) {
@@ -348,6 +349,38 @@ function showNotification(message, type = 'info', duration = 3500) {
 }
 
 
+function showAction(message, actionid) {
+    let container = document.getElementById('notification-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'notification-container';
+        document.body.appendChild(container);
+    }
+
+    const notif = document.createElement('div');
+    notif.className = `notification action`;
+    notif.textContent = message;
+    notif.id = `notification-${actionid}`;
+
+    container.appendChild(notif);
+
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            notif.classList.add('show');
+        });
+    });
+}
+function clearAction(actionid) {
+
+    let notif = document.getElementById(`notification-${actionid}`);
+    notif.classList.remove('show');
+
+    notif.addEventListener('transitionend', () => {
+        notif.remove();
+    });
+}
+
+
 async function hashSHA3_512(input) {
     const encoder = new TextEncoder();
     const data = encoder.encode(input); 
@@ -369,12 +402,16 @@ async function mainJS()
     password = localStorage.getItem('password');
     host = localStorage.getItem('host');
     passwordHash = await hashSHA3_512(password);
+    url = `${window.location.protocol}//${host}/_larpix`;
 }
 mainJS();
 
 collapseDmsBtn.addEventListener("click", () => {
     collapseDmsBtn.classList.toggle("collapsed");
 });
+collapseGroupsBtn.addEventListener("click", () => {
+    collapseGroupsBtn.classList.toggle("collapsed");
+});
 
 sidebarHomeButton.addEventListener("mouseenter", () => {
     sidebarHomeIndicator.classList.add("hover");

webroot/style.css

@@ -140,15 +140,23 @@ sidebar {
     border-right: var(--border-width) solid var(--light-border-color);
 }
 sidebar.second {
-    width: 22rem;
+    width: 20rem;
 }
+.sidebar-section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
 .collapse-text-button {
     padding-left: calc(var(--button-margin) + 0.2rem);
     flex-shrink: 0;
+    flex-grow: 1; 
     border: none;
     background-color: transparent;
     height: 2rem;
     font-weight: 600;
+    gap: 0.3rem; 
 }
 
 .collapse-text-button .chevron {
@@ -159,6 +167,27 @@ sidebar.second {
 .collapse-text-button.collapsed .chevron {
     transform: rotate(-90deg);
 }
+
+.add-action-button {
+    border: none;
+    background-color: transparent;
+    height: 2rem;
+    width: 2rem;
+    padding: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.add-action-button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--text-color);
+}
+
+.add-action-button svg {
+    width: 1.25rem;
+    height: 1.25rem;
+}
 hr {
     border: none;
     height: 0;