*implemented password question to join a chat

*fixed chats opening twice. ?
2 years ago · e7e1636836
7 changed files with 59 additions and 51 deletions
--- a/back/volume/src/auth/mails/confirm.hbs
+++ b/back/volume/src/auth/mails/confirm.hbs
@ -8,7 +8,7 @@
 <body>
  <h2>Hello {{username}}! </h2>
  <p> Once you clicked on the next verify button, you will have access to the app</p>
-  <form action="http://c4r2p1:3001/log/verify" method="post">
+  <form action="http://localhost:3001/log/verify" method="post">
  <button type="submit" name="code" value={{code}}>Verify</button>
  </form>
 </body>
--- a/back/volume/src/chat/chat.gateway.ts
+++ b/back/volume/src/chat/chat.gateway.ts
@ -51,7 +51,7 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
    console.log('here')
    const channel = await this.chatService.getFullChannel(connect.ChannelId)
    if (channel.banned.findIndex((ban) => ban[0] === connect.UserId) !== -1) {
-      throw new WsException('You are banned from entering this channel')
+        this.server.to(socket.id).emit('failedJoin', 'You are banned from this channel')
    }
    const user = await this.userService.getFullUser(connect.UserId)
    if (channel.password && channel.password !== '') {
@ -59,7 +59,7 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
        !connect.pwd ||
        !(await bcrypt.compare(connect.pwd, channel.password))
      ) {
-        throw new WsException('Wrong password')
+        this.server.to(socket.id).emit('failedJoin', 'Wrong password')
      }
    }
    await this.chatService.addUserToChannel(channel, user)
@ -73,20 +73,9 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
    conUser.socket = socket.id
    const test = await this.connectedUserRepository.save(conUser)
    console.log(test)
-    this.server.to(socket.id).emit('messages', messages)
    await socket.join(channel.id.toString())
-    console.log(this.server.sockets.adapter.rooms.get(channel.id.toString()))
-  }
-
-  @SubscribeMessage('getMessages')
-  async onGetMessages (socket: Socket, connect: ConnectionDto): Promise<void> {
-    const user = await this.userService.getFullUser(connect.UserId)
-    const channel = await this.chatService.getFullChannel(connect.ChannelId)
-    const messages = await this.messageService.findMessagesInChannelForUser(
-      channel,
-      user
-    )
    this.server.to(socket.id).emit('messages', messages)
+    console.log(this.server.sockets.adapter.rooms.get(channel.id.toString()))
  }

  @SubscribeMessage('leaveChannel')
--- a/back/volume/src/chat/chat.service.ts
+++ b/back/volume/src/chat/chat.service.ts
@ -59,6 +59,7 @@ export class ChatService {
      newChannel.name = channel.name
      newChannel.isPrivate = channel.isPrivate
      newChannel.password = channel.password
+      console.log("New channel: ", JSON.stringify(newChannel))
    }
    return await this.ChannelRepository.save(newChannel)
  }
--- a/back/volume/src/chat/entity/channel.entity.ts
+++ b/back/volume/src/chat/entity/channel.entity.ts
@ -24,7 +24,7 @@ export default class Channel {
  @Column({ default: false })
    isPrivate: boolean

-  @Column({ select: false, default: '' })
+  @Column({ default: '' })
    password: string

  @BeforeInsert()
--- a/front/volume/src/App.svelte
+++ b/front/volume/src/App.svelte
@ -22,7 +22,7 @@
  import MatchHistory from "./components/MatchHistory.svelte";
  import Friends, { addFriend } from "./components/Friends.svelte";
  import Chat from "./components/Chat.svelte";
-  import Channels, { formatChannelNames } from "./components/Channels.svelte";
+  import Channels, { formatChannelNames, type chatMessagesType } from "./components/Channels.svelte";
  import Leaderboard from "./components/Leaderboard.svelte";
  import { popup } from "./components/Alert/content";
  import Pong from "./components/Pong/Pong.svelte";
@ -47,7 +47,7 @@
          await formatChannelNames(channels);
          const channel = channels.find((c: ChannelsType) => c.name === currentChannelName);
          if (channel) {
-            chan.selectChat(channel.id);
+            //chan.selectChat(channel.id); // disabled as it causes a bug where joining a channel happen twice
          } else {
            alert("Failed loading channel");
          }
@ -62,7 +62,7 @@
  window.onpopstate = (e: PopStateEvent) => {
    if (e.state) {
      appState = e.state.appState;
-      void updateChat();
+      void updateChat();  // why this?
    }
  };

@ -167,8 +167,10 @@
    setAppState(APPSTATE.CHANNELS);
  }
  let selectedChannel: ChannelsType;
-  const handleSelectChannel = (channel: ChannelsType) => {
+  let selectedMessages: Array<chatMessagesType>;
+  const handleSelectChannel = (channel: ChannelsType, messages: Array<chatMessagesType>) => {
    selectedChannel = channel;
+    selectedMessages = messages;
    setAppState(APPSTATE.CHANNELS + "#" + channel.name);
  };

@ -223,6 +225,7 @@
      >
        <Chat
          channel={selectedChannel}
+          messages={selectedMessages}
          on:view-profile={openIdProfile}
          on:add-friend={addFriend}
          on:invite-to-game={pong.inviteToGame}
--- a/front/volume/src/components/Channels.svelte
+++ b/front/volume/src/components/Channels.svelte
@ -2,8 +2,6 @@
 	  import { content, show_popup } from './Alert/content'
 	  const showDialog = () => {
 	  }
-  
-

  export interface ChannelsType {
    id: number;
@ -12,6 +10,11 @@
    password: string;
    owner: User;
  }
+  export interface chatMessagesType {
+    id: number;
+    author: User;
+    text: string;
+  }
  import { onMount } from "svelte";
  import { API_URL, store } from "../Auth";
  import { socket } from "../socket";
@ -73,13 +76,23 @@
    return true;
  }

-  const joinChannel = async (id: number) => {
+  const joinChannel = async (channel: ChannelsType) => {
    console.log(channels)
-    socket.emit("joinChannel", {
-      UserId: $store.ftId,
-      ChannelId: id,
-    
-    });
+    socket.connect();
+    if (!channel.password) {
+      socket.emit("joinChannel", {
+        UserId: $store.ftId,
+        ChannelId: channel.id,
+      });
+    } else {
+      await show_popup("Channel is protected, enter password:")
+      socket.emit("joinChannel", {
+        UserId: $store.ftId,
+        ChannelId: channel.id,
+        pwd: $content,
+      });
+    }
+    console.log("Try to join channel: ", $store.ftId, channel.id, $content)
  };

  const getChannels = async () => {
@ -101,20 +114,31 @@

  //--------------------------------------------------------------------------------/

-  export let onSelectChannel: (channel: ChannelsType) => void;
+
+  export let onSelectChannel: (channel: ChannelsType, messages: Array<chatMessagesType>) => void;
+  let channel: ChannelsType;
  export const selectChat = (id: number) => {
    console.log("channel: ", id)
-    getChannels().then(() => {
-      const channel = channels.find((c) => c.id === id);
-      if (channel) {
-        joinChannel(id);
-        onSelectChannel(channel);
-      } else {
-        show_popup("Did not find channel", false)
-      }
-    });
+    channel = channels.find((c) => c.id === id);
+    if (channel) {
+      joinChannel(channel);
+    } else {
+      show_popup("Did not find channel", false)
+    }
  };

+  socket.on("messages", (msgs: Array<chatMessagesType>) => {
+    console.log("You are joining channel: ", channel.name)
+    onSelectChannel(channel, msgs);
+    channel = undefined;
+  });
+
+  socket.on("failedJoin", (error: string) => {
+    show_popup(`Failed to join channel: ${error}`, false)
+    channel = undefined;
+  });
+  
+
  const createChannel = async () => {
    let name: string;
    let password = "";
--- a/front/volume/src/components/Chat.svelte
+++ b/front/volume/src/components/Chat.svelte
@ -1,14 +1,9 @@
 <script lang="ts" context="module">
-  export interface chatMessagesType {
-    id: number;
-    author: User;
-    text: string;
-  }
  import { createEventDispatcher, onDestroy, onMount } from "svelte";
  import { store, API_URL } from "../Auth";
  import { socket } from "../socket";
  import { show_popup, content } from "./Alert/content";
-  import type { ChannelsType } from "./Channels.svelte";
+  import type { ChannelsType, chatMessagesType } from "./Channels.svelte";
  import type User from "./Profile.svelte";
 </script>

@ -16,21 +11,17 @@
  let usersInterval: ReturnType<typeof setInterval>;
  let blockedUsers: Array<User> = [];
  let chatMembers: Array<User> = [];
-  let chatMessages: Array<chatMessagesType> = [];
  export let channel: ChannelsType;
+  export let messages: Array<chatMessagesType> = [];
  let newText = "";

  onMount(async () => {
-    socket.connect();
    getMembers();
    usersInterval = setInterval(async () => {
      getMembers();
    }, 1000);
  });

-  socket.on("messages", (msgs: Array<chatMessagesType>) => {
-    chatMessages = msgs;
-  });

  async function getMembers() {
    if (!channel) return;
@ -48,7 +39,7 @@

  socket.on("newMessage", (msg: chatMessagesType) => {
    console.log(msg)
-    chatMessages = [...chatMessages, msg];
+    messages = [...messages, msg];
  });

  onDestroy(() => {
@ -301,7 +292,7 @@
 <div class="overlay">
  <div class="chat" on:click|stopPropagation on:keydown|stopPropagation>
    <div class="messages">
-      {#each chatMessages as message}
+      {#each messages as message}
        <p class="message">
          {#if !blockedUsers.filter((user) => user.username == message.author).length}
            <span