store for ChatOpen & few changes to front and back sockets

back/volume/src/chat/chat.gateway.ts

@@ -61,7 +61,8 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
       ) {
         throw new WsException('Wrong password')
       }
-    } else await this.chatService.addUserToChannel(channel, user)
+    }
+    await this.chatService.addUserToChannel(channel, user)
     const messages = await this.messageService.findMessagesInChannelForUser(
       channel,
       user
@@ -93,6 +94,7 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
     const connect = await this.connectedUserRepository.findOneBy({
       socket: socket.id
     })
+    console.log("connection removed", connect?.user)
     if (connect == null) return
     const channel = await this.chatService.getFullChannel(connect.channel)
     socket.disconnect()

back/volume/src/users/entity/user.entity.ts

@@ -1,4 +1,5 @@
-import {  Entity,
+import {
+  Entity,
   PrimaryGeneratedColumn,
   Column,
   ManyToMany,

front/volume/src/App.svelte

@@ -14,6 +14,7 @@
 </script>
 
 <script lang="ts">
+  import { ChatOpen } from "./components/Alert/content";
   import { onMount } from "svelte";
   import Navbar from "./components/NavBar.svelte";
   import Modal from "svelte-simple-modal";
@@ -220,6 +221,7 @@
         on:click={() => setAppState(APPSTATE.CHANNELS)}
         on:keydown={() => setAppState(APPSTATE.CHANNELS)}
       >
+      {#if $ChatOpen}
         <Chat
           channel={selectedChannel}
           on:view-profile={openIdProfile}
@@ -227,6 +229,7 @@
           on:invite-to-game={pong.inviteToGame}
           on:send-message={openDirectChat}
         />
+        {/if}
       </div>
     {/if}
     {#if appState.includes(APPSTATE.CHANNELS)}

front/volume/src/components/Alert/Alert.svelte

@@ -32,6 +32,7 @@
   <h2>{message}</h2>
   {#if form === true}
     <input
+      required
       type="text"
       bind:value
       on:keydown={(e) => e.which === 13 && _onOkay()}
@@ -52,6 +53,9 @@
 
   input {
     width: 100%;
+    text-align: center;
+    word-wrap:break-word;
+
   }
 
   .buttons {

front/volume/src/components/Alert/content.ts

@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 import Alert__SvelteComponent_ from './Alert.svelte';
 export const content = writable("")
 export const popup = writable(null)
+export const ChatOpen = writable(false)
 import { bind } from 'svelte-simple-modal';
 
 let val;
@@ -26,5 +27,5 @@ export async function waitForCondition() {
              return await checkFlag();
       }
     }
-    return await checkFlag()
+    return   checkFlag()
 }

front/volume/src/components/Channels.svelte

@@ -14,6 +14,7 @@
   import { API_URL, store } from "../Auth";
   import { socket } from "../socket";
   import type User from "./Profile.svelte";
+  import { ChatOpen } from "./Alert/content";
 
   export async function formatChannelNames(channel: Array<ChannelsType>): Promise<void> {
     const res = await fetch(API_URL + "/users/all", {
@@ -63,12 +64,22 @@
   let channelMode = "";
   const channelOptions = ["public", "private", "protected"];
 
+  const checkNamesChannel= (name : string) => {
+    channels.forEach((e) => {
+      if (e.name == name)
+        return false;
+    });
+    return true;
+  }
+
   const joinChannel = async (id: number) => {
+    console.log(channels)
     socket.emit("joinChannel", {
       UserId: $store.ftId,
       ChannelId: id,
     
     });
+    ChatOpen.set(true)
   };
 
   const getChannels = async () => {
@@ -109,14 +120,23 @@
     let password = "";
     await show_popup("Enter a name for the new channel:")
     name = $content;
+    
     if (name.includes("#")) {
         await show_popup("Channel name cannot contain #", false)
       return;
     }
+    if (!checkNamesChannel(name)) {
+        await show_popup("User may not have access", false)
+      return;
+    }
     if (name) {
       if (channelMode === 'protected'){
         await show_popup("Enter a password for the new channel:")
         password = $content
+        if (password == "") {
+          await show_popup("Password is required #", false)
+          return ;
+        }
       }
         name = "🚪 " + name;
         const response = await fetch(API_URL + "/channels", {
@@ -219,9 +239,9 @@
     <div>
       {#if channels.length > 0}
         <h2>Channels <button style="margin-right :auto;" on:click={() => getChannels()}>🔄</button> </h2>
-        {#each channels.slice(0, 10) as channel}
+        {#each channels as channel}
           <li>
-            <span>{channel.name}</span>
+            <span>{channel.name} : {channel.id}</span>
             <div style="display:block; margin-right:10%">
             <button on:click={() => selectChat(channel.id)}>🔌</button>
             <button
@@ -329,6 +349,7 @@
     -moz-appearance: none;
     appearance: none;
     cursor: pointer;
+    font-size: 100%;
   }
   
   .button {

front/volume/src/components/Chat.svelte

@@ -10,6 +10,7 @@
   import { show_popup, content } from "./Alert/content";
   import type { ChannelsType } from "./Channels.svelte";
   import type User from "./Profile.svelte";
+  import { ChatOpen } from "./Alert/content";
 </script>
 
 <script lang="ts">
@@ -290,21 +291,10 @@
   const leaveChannel = async () => {
     await show_popup("Press \"Okay\" to leave this channel?", false);
     if ($content == 'ok') {
-      const response = await fetch(API_URL + "/channels/" + channel.id + "/leave", {
+        socket.emit('leaveChannel');
-        credentials: "include",
+        ChatOpen.set(false)
-        mode: "cors",
-      });
-      if (response.ok) {
-		return {
-            status: 200,
-            redirect: "/channels/"
-        };
-      } else {
-        await show_popup("Failed to leave channel",false);
-      }
       }
   }
-
   function onSendMessage() {
     dispatch("send-message", selectedUser);
     showProfileMenu = false;
@@ -435,11 +425,11 @@
   }
 
   .messages {
-    height: 200px;
+    height : 400px;
+    width : 100%;
     overflow-y: scroll;
     border-bottom: 1px solid #dedede;
     padding-bottom: 1rem;
-    margin-bottom: 1rem;
   }
 
   .message {
@@ -457,7 +447,7 @@
   }
 
   input[type="text"] {
-    width: 80%;
+    width: 82%;
     padding: 0.5rem;
     border: 1px solid #dedede;
     border-radius: 5px;