From 1948f04ca0f1d8e858edfe8d05c69dc4d5c09d5e Mon Sep 17 00:00:00 2001
From: WalidMoovin <walidsdt.2@gmail.com>
Date: Wed, 15 Mar 2023 04:53:16 +0100
Subject: [PATCH] moved channel settings from chat to channels, fetch done,
 need route in controller

---
 front/volume/src/components/Channels.svelte | 23 +++++++++++
 front/volume/src/components/Chat.svelte     | 42 ---------------------
 2 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/front/volume/src/components/Channels.svelte b/front/volume/src/components/Channels.svelte
index 564b9c3..95ff953 100644
--- a/front/volume/src/components/Channels.svelte
+++ b/front/volume/src/components/Channels.svelte
@@ -116,6 +116,28 @@
   };
 
   //--------------------------------------------------------------------------------/
+
+  const changePassword = async (id: number) => {
+    let string = prompt("Enter the new password for this channel (leave empty to remove password) :");
+    const response = await fetch(API_URL + "/channels/" + id + "/password", {
+      credentials: "include",
+      method: "POST",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        password: string,
+      }),
+    });
+    if (response.ok) {
+      channels.push(await response.json());
+    } else {
+      alert("Error changing password");
+    }
+  };
+
+  //--------------------------------------------------------------------------------/
 </script>
 
 <div class="overlay">
@@ -132,6 +154,7 @@
               on:keydown={() => removeChannel(_channels.id)}>delete</button
             >
             <button on:click={() => inviteChannel(_channels.id)}>invite</button>
+            <button on:click={() => changePassword(_channels.id)}>Set - Change - Remove Password</button>
           </li>{/each}
       {:else}
         <p>No channels available</p>
diff --git a/front/volume/src/components/Chat.svelte b/front/volume/src/components/Chat.svelte
index 1993b7b..680f609 100644
--- a/front/volume/src/components/Chat.svelte
+++ b/front/volume/src/components/Chat.svelte
@@ -34,7 +34,6 @@
         messagesDiv.scrollTop = messagesDiv.scrollHeight;
       }
     }
-    // TODO: save to database
   };
 
   //--------------------------------------------------------------------------------/
@@ -46,7 +45,6 @@
     showProfileMenu = true;
     selectedUser = username;
     showChatMembers = false;
-    showChannelSettings = false;
   }
   function closeProfileMenu() {
     showProfileMenu = false;
@@ -59,7 +57,6 @@
   let showChatMembers = false;
   function toggleChatMembers() {
     showChatMembers = !showChatMembers;
-    showChannelSettings = false;
   }
   let chatMembers: Array<User> = [
     { username: "user1" },
@@ -83,14 +80,6 @@
 
   //--------------------------------------------------------------------------------/
 
-  let showChannelSettings = false;
-  function toggleChannelSettings() {
-    showChannelSettings = !showChannelSettings;
-    showChatMembers = false;
-  }
-
-  //--------------------------------------------------------------------------------/
-
   const blockUser = async (username: string) => {};
 
   //--------------------------------------------------------------------------------/
@@ -291,23 +280,6 @@
         </div>
       </div>
     {/if}
-    <button
-      on:click|stopPropagation={toggleChannelSettings}
-      on:keydown|stopPropagation>Channel Settings</button
-    >
-    {#if showChannelSettings}
-      <div
-        class="channelSettings"
-        on:click|stopPropagation
-        on:keydown|stopPropagation
-      >
-        <div>
-          <button>Change Password</button>
-          <button>Set Password</button>
-          <button>Remove Password</button>
-        </div>
-      </div>
-    {/if}
   </div>
 </div>
 
@@ -356,18 +328,4 @@
   .chatMembers button {
     width: 6rem;
   }
-
-  .channelSettings {
-    position: absolute;
-    background-color: #fff;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    padding: 1rem;
-    max-height: 100px;
-    overflow-y: scroll;
-  }
-
-  .channelSettings button {
-    width: 5rem;
-  }
 </style>