Browse Source

*implemented password question to join a chat

*fixed chats opening twice. ?
master
nicolas-arnaud 2 years ago
parent
commit
e7e1636836
  1. 2
      back/volume/src/auth/mails/confirm.hbs
  2. 17
      back/volume/src/chat/chat.gateway.ts
  3. 1
      back/volume/src/chat/chat.service.ts
  4. 2
      back/volume/src/chat/entity/channel.entity.ts
  5. 11
      front/volume/src/App.svelte
  6. 46
      front/volume/src/components/Channels.svelte
  7. 17
      front/volume/src/components/Chat.svelte

2
back/volume/src/auth/mails/confirm.hbs

@ -8,7 +8,7 @@
<body> <body>
<h2>Hello {{username}}! </h2> <h2>Hello {{username}}! </h2>
<p> Once you clicked on the next verify button, you will have access to the app</p> <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> <button type="submit" name="code" value={{code}}>Verify</button>
</form> </form>
</body> </body>

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

@ -51,7 +51,7 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
console.log('here') console.log('here')
const channel = await this.chatService.getFullChannel(connect.ChannelId) const channel = await this.chatService.getFullChannel(connect.ChannelId)
if (channel.banned.findIndex((ban) => ban[0] === connect.UserId) !== -1) { 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) const user = await this.userService.getFullUser(connect.UserId)
if (channel.password && channel.password !== '') { if (channel.password && channel.password !== '') {
@ -59,7 +59,7 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
!connect.pwd || !connect.pwd ||
!(await bcrypt.compare(connect.pwd, channel.password)) !(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) await this.chatService.addUserToChannel(channel, user)
@ -73,20 +73,9 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
conUser.socket = socket.id conUser.socket = socket.id
const test = await this.connectedUserRepository.save(conUser) const test = await this.connectedUserRepository.save(conUser)
console.log(test) console.log(test)
this.server.to(socket.id).emit('messages', messages)
await socket.join(channel.id.toString()) 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) this.server.to(socket.id).emit('messages', messages)
console.log(this.server.sockets.adapter.rooms.get(channel.id.toString()))
} }
@SubscribeMessage('leaveChannel') @SubscribeMessage('leaveChannel')

1
back/volume/src/chat/chat.service.ts

@ -59,6 +59,7 @@ export class ChatService {
newChannel.name = channel.name newChannel.name = channel.name
newChannel.isPrivate = channel.isPrivate newChannel.isPrivate = channel.isPrivate
newChannel.password = channel.password newChannel.password = channel.password
console.log("New channel: ", JSON.stringify(newChannel))
} }
return await this.ChannelRepository.save(newChannel) return await this.ChannelRepository.save(newChannel)
} }

2
back/volume/src/chat/entity/channel.entity.ts

@ -24,7 +24,7 @@ export default class Channel {
@Column({ default: false }) @Column({ default: false })
isPrivate: boolean isPrivate: boolean
@Column({ select: false, default: '' }) @Column({ default: '' })
password: string password: string
@BeforeInsert() @BeforeInsert()

11
front/volume/src/App.svelte

@ -22,7 +22,7 @@
import MatchHistory from "./components/MatchHistory.svelte"; import MatchHistory from "./components/MatchHistory.svelte";
import Friends, { addFriend } from "./components/Friends.svelte"; import Friends, { addFriend } from "./components/Friends.svelte";
import Chat from "./components/Chat.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 Leaderboard from "./components/Leaderboard.svelte";
import { popup } from "./components/Alert/content"; import { popup } from "./components/Alert/content";
import Pong from "./components/Pong/Pong.svelte"; import Pong from "./components/Pong/Pong.svelte";
@ -47,7 +47,7 @@
await formatChannelNames(channels); await formatChannelNames(channels);
const channel = channels.find((c: ChannelsType) => c.name === currentChannelName); const channel = channels.find((c: ChannelsType) => c.name === currentChannelName);
if (channel) { if (channel) {
chan.selectChat(channel.id); //chan.selectChat(channel.id); // disabled as it causes a bug where joining a channel happen twice
} else { } else {
alert("Failed loading channel"); alert("Failed loading channel");
} }
@ -62,7 +62,7 @@
window.onpopstate = (e: PopStateEvent) => { window.onpopstate = (e: PopStateEvent) => {
if (e.state) { if (e.state) {
appState = e.state.appState; appState = e.state.appState;
void updateChat(); void updateChat(); // why this?
} }
}; };
@ -167,8 +167,10 @@
setAppState(APPSTATE.CHANNELS); setAppState(APPSTATE.CHANNELS);
} }
let selectedChannel: ChannelsType; let selectedChannel: ChannelsType;
const handleSelectChannel = (channel: ChannelsType) => { let selectedMessages: Array<chatMessagesType>;
const handleSelectChannel = (channel: ChannelsType, messages: Array<chatMessagesType>) => {
selectedChannel = channel; selectedChannel = channel;
selectedMessages = messages;
setAppState(APPSTATE.CHANNELS + "#" + channel.name); setAppState(APPSTATE.CHANNELS + "#" + channel.name);
}; };
@ -223,6 +225,7 @@
> >
<Chat <Chat
channel={selectedChannel} channel={selectedChannel}
messages={selectedMessages}
on:view-profile={openIdProfile} on:view-profile={openIdProfile}
on:add-friend={addFriend} on:add-friend={addFriend}
on:invite-to-game={pong.inviteToGame} on:invite-to-game={pong.inviteToGame}

46
front/volume/src/components/Channels.svelte

@ -3,8 +3,6 @@
const showDialog = () => { const showDialog = () => {
} }
export interface ChannelsType { export interface ChannelsType {
id: number; id: number;
name: string; name: string;
@ -12,6 +10,11 @@
password: string; password: string;
owner: User; owner: User;
} }
export interface chatMessagesType {
id: number;
author: User;
text: string;
}
import { onMount } from "svelte"; import { onMount } from "svelte";
import { API_URL, store } from "../Auth"; import { API_URL, store } from "../Auth";
import { socket } from "../socket"; import { socket } from "../socket";
@ -73,13 +76,23 @@
return true; return true;
} }
const joinChannel = async (id: number) => { const joinChannel = async (channel: ChannelsType) => {
console.log(channels) console.log(channels)
socket.connect();
if (!channel.password) {
socket.emit("joinChannel", { socket.emit("joinChannel", {
UserId: $store.ftId, UserId: $store.ftId,
ChannelId: id, 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 () => { 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) => { export const selectChat = (id: number) => {
console.log("channel: ", id) console.log("channel: ", id)
getChannels().then(() => { channel = channels.find((c) => c.id === id);
const channel = channels.find((c) => c.id === id);
if (channel) { if (channel) {
joinChannel(id); joinChannel(channel);
onSelectChannel(channel);
} else { } else {
show_popup("Did not find channel", false) 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 () => { const createChannel = async () => {
let name: string; let name: string;
let password = ""; let password = "";

17
front/volume/src/components/Chat.svelte

@ -1,14 +1,9 @@
<script lang="ts" context="module"> <script lang="ts" context="module">
export interface chatMessagesType {
id: number;
author: User;
text: string;
}
import { createEventDispatcher, onDestroy, onMount } from "svelte"; import { createEventDispatcher, onDestroy, onMount } from "svelte";
import { store, API_URL } from "../Auth"; import { store, API_URL } from "../Auth";
import { socket } from "../socket"; import { socket } from "../socket";
import { show_popup, content } from "./Alert/content"; 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"; import type User from "./Profile.svelte";
</script> </script>
@ -16,21 +11,17 @@
let usersInterval: ReturnType<typeof setInterval>; let usersInterval: ReturnType<typeof setInterval>;
let blockedUsers: Array<User> = []; let blockedUsers: Array<User> = [];
let chatMembers: Array<User> = []; let chatMembers: Array<User> = [];
let chatMessages: Array<chatMessagesType> = [];
export let channel: ChannelsType; export let channel: ChannelsType;
export let messages: Array<chatMessagesType> = [];
let newText = ""; let newText = "";
onMount(async () => { onMount(async () => {
socket.connect();
getMembers(); getMembers();
usersInterval = setInterval(async () => { usersInterval = setInterval(async () => {
getMembers(); getMembers();
}, 1000); }, 1000);
}); });
socket.on("messages", (msgs: Array<chatMessagesType>) => {
chatMessages = msgs;
});
async function getMembers() { async function getMembers() {
if (!channel) return; if (!channel) return;
@ -48,7 +39,7 @@
socket.on("newMessage", (msg: chatMessagesType) => { socket.on("newMessage", (msg: chatMessagesType) => {
console.log(msg) console.log(msg)
chatMessages = [...chatMessages, msg]; messages = [...messages, msg];
}); });
onDestroy(() => { onDestroy(() => {
@ -301,7 +292,7 @@
<div class="overlay"> <div class="overlay">
<div class="chat" on:click|stopPropagation on:keydown|stopPropagation> <div class="chat" on:click|stopPropagation on:keydown|stopPropagation>
<div class="messages"> <div class="messages">
{#each chatMessages as message} {#each messages as message}
<p class="message"> <p class="message">
{#if !blockedUsers.filter((user) => user.username == message.author).length} {#if !blockedUsers.filter((user) => user.username == message.author).length}
<span <span

Loading…
Cancel
Save