42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' into luke

Browse Source
This commit is contained in:
LuckyLaszlo
2023-01-15 19:34:58 +01:00
parent e3407b8a9d fa8e3d7473
commit b2b54f1fdc
25 changed files with 407 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -81,7 +81,7 @@
- [/] leave room
- [/] leave direct impossible
- [/] protect room with password
- [ ] add and change password in room
- [/] add, change, and remove password in room
- [ ] make admin
- [ ] ban
- [ ] mute

90
srcs/requirements/nestjs/api_back/src/chat/chat.controller.ts
View File

@@ -123,19 +123,30 @@ export class ChatController {
throw new HttpException({ error: true, code: 'FORBIDDEN_CHARACTERS', message: `Your room name can not contains these characters : ${forbidden_chars}` }, HttpStatus.UNPROCESSABLE_ENTITY);
}
// check for password protection
if (typeof room.protection === 'undefined')
room.protection = false;
else if (room.protection === true)
{
if (!room.password || room.password.length === 0)
{
printCaller(`throw error: error: true, code: 'PASSWORD_TOO_SHORT', message: 'your password is too short'`);
throw new HttpException({ error: true, code: 'PASSWORD_TOO_SHORT', message: `your password is too short` }, HttpStatus.UNPROCESSABLE_ENTITY);
printCaller(`throw error: error: true, code: 'PASSWORD_INVALID', message: 'your password is invalid'`);
throw new HttpException({ error: true, code: 'PASSWORD_INVALID', message: `your password is invalid` }, HttpStatus.UNPROCESSABLE_ENTITY);
}
}
room.users = [req.user.username];
await this.chatService.addUserToNewRoom(req.user.username, room);
if (room.protection)
{
let message = `${req.user.username} changed the password`;
room.allowed_users = [req.user.username];
await this.chatService.setPassword(req.user.username, message, room);
let socket: socketDto = this.chatGateway.sockets.get(req.user.username);
await socket.to(socket.room).emit('message', "SERVER", message);
}
const ret_room = this.format_room(room);
res.status(HttpStatus.OK).json({ room: ret_room });
printCaller("- out ");
@@ -196,6 +207,7 @@ export class ChatController {
let fields = ["protection", "allowed_users"];
const room_db = await this.chatService.getRoomByName(room.name, fields);
if (room_db.protection === true)
{
if (!room_db.allowed_users.includes(req.user.username))
@@ -216,8 +228,8 @@ export class ChatController {
@UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard)
@Post('password')
async setPassword(@Body() room: roomDto, @Req() req, @Res() res): Promise<void>
@Post('passwordauth')
async passwordAuthentication(@Body() room: roomDto, @Req() req, @Res() res): Promise<void>
{
printCaller("- in ");
@@ -239,6 +251,69 @@ export class ChatController {
printCaller("- out ");
}
@UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard)
@Post('changepassword')
async changePassword(@Body('room') room: roomDto, @Body('old_password') old_password: string, @Req() req, @Res() res): Promise<void>
{
printCaller("- in ");
let message = `${req.user.username} changed the password`;
room.allowed_users = [req.user.username];
room.protection = true;
await this.chatService.setPassword(req.user.username, message, room, old_password);
// inform other connected users
let socket: socketDto = this.chatGateway.sockets.get(req.user.username);
await socket.to(socket.room).emit('message', "SERVER", message);
const ret_room = this.format_room(room);
res.status(HttpStatus.OK).json({ room: ret_room });
printCaller("- out ");
}
@UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard)
@Post('addpassword')
async addPassword(@Body() room: roomDto, @Req() req, @Res() res): Promise<void>
{
printCaller("- in ");
let message = `${req.user.username} added a password`;
room.allowed_users = [req.user.username];
room.protection = true;
await this.chatService.setPassword(req.user.username, message, room);
// inform other connected users
let socket: socketDto = this.chatGateway.sockets.get(req.user.username);
await socket.to(socket.room).emit('message', "SERVER", message);
const ret_room = this.format_room(room);
res.status(HttpStatus.OK).json({ room: ret_room });
printCaller("- out ");
}
@UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard)
@Delete('removepassword')
async removePassword(@Body() room: roomDto, @Req() req, @Res() res): Promise<void>
{
printCaller("- in ");
let message = `${req.user.username} removed a new password`;
room.allowed_users = [];
room.protection = false;
await this.chatService.setPassword(req.user.username, message, room);
// inform other connected users
let socket: socketDto = this.chatGateway.sockets.get(req.user.username);
await socket.to(socket.room).emit('message', "SERVER", message);
const ret_room = this.format_room(room);
res.status(HttpStatus.OK).json({ room: ret_room });
printCaller("- out ");
}
@UseGuards(AuthenticateGuard)
@UseGuards(TwoFactorGuard)
@Post('invite')
@@ -302,6 +377,13 @@ export class ChatController {
const room_name = await this.chatService.getCurrentRoomName(req.user.username);
const room = await this.chatService.getRoomByName(room_name);
const users = room.users;
let index = users.indexOf(req.user.username);
if (index > -1)
{
users.splice(index, 1);
}
res.status(HttpStatus.OK).json({ users: users });
printCaller("- out ");
}

74
srcs/requirements/nestjs/api_back/src/chat/chat.service.ts
View File

@@ -206,6 +206,60 @@ export class ChatService {
await this.chatroomRepository.save(room_db);
}
async setPassword(username: string, message: string, room: roomDto, old_password?: string): Promise<void>
{
printCaller("-- in ");
if (room.type === 'direct')
{
console.log("throw error: error: true, code: 'DIRECT_PASSWORD_FORBIDDEN', message: 'you cannot set a password in a direct message room'");
throw new HttpException({ error: true, code: 'DIRECT_PASSWORD_FORBIDDEN', message: `you cannot set a password in a direct message room` }, HttpStatus.FORBIDDEN);
}
const current_room = await this.getRoomByName(room.name);
if (!room.password)
{
console.log("throw error: error: true, code: 'NO_PASSWORD', message: 'this room has no password protection'");
throw new HttpException({ error: true, code: 'NO_PASSWORD', message: `this room has no password protection` }, HttpStatus.FORBIDDEN);
}
if (current_room.protection)
{
if (room.protection && !old_password)
{
console.log("throw error: error: true, code: 'MISSING_OLD_PASSWORD', message: 'you need to provide the old password to set a new one'");
throw new HttpException({ error: true, code: 'MISSING_OLD_PASSWORD', message: `you need to provide the old password to set a new one` }, HttpStatus.FORBIDDEN);
}
if (old_password)
{
const is_match = await bcrypt.compare(old_password, current_room.hash);
if (!is_match)
{
printCaller(`throw error: error: true, code: 'BAD_PASSWORD', message: 'you provided a bad password'`);
throw new HttpException({ error: true, code: 'BAD_PASSWORD', message: `you provided a bad password` }, HttpStatus.BAD_REQUEST);
}
}
}
const saltOrRounds = 10;
const password = room.password;
let hash: string;
if (room.protection)
hash = await bcrypt.hash(password, saltOrRounds);
// add password to chatroom
current_room.allowed_users = room.allowed_users;
current_room.protection = room.protection;
if (room.protection)
current_room.hash = hash;
else
delete current_room.hash;
current_room.messages.push({ name: "SERVER", message: message });
await this.chatroomRepository.save(current_room);
printCaller("-- out ");
}
/* ADDERS *************************************************
*/
@@ -221,19 +275,6 @@ export class ChatService {
throw new HttpException({ error: true, code: 'ROOM_CONFLICT', message: `This room name already exist` }, HttpStatus.CONFLICT);
}
let hash;
if (room.protection)
{
if (room.type === 'direct')
{
console.log("throw error: error: true, code: 'DIRECT_PASSWORD_FORBIDDEN', message: 'you cannot set a password in a direct message room'");
throw new HttpException({ error: true, code: 'DIRECT_PASSWORD_FORBIDDEN', message: `you cannot set a password in a direct message room`}, HttpStatus.FORBIDDEN);
}
const saltOrRounds = 10;
const password = room.password;
hash = await bcrypt.hash(password, saltOrRounds);
}
// create chatroom
let newChatroom = new Chatroom();
newChatroom.name = room.name;
@@ -241,12 +282,7 @@ export class ChatService {
newChatroom.owner = username;
newChatroom.users = room.users;
newChatroom.allowed_users = [];
newChatroom.protection = room.protection;
if (room.protection)
{
newChatroom.hash = hash;
newChatroom.allowed_users.push(username);
}
newChatroom.protection = false;
newChatroom.messages =
[
{ name: "SERVER", message: `creation of room ${room.name}` },

22
srcs/requirements/svelte/api_front/public/global.css
View File

@@ -1,4 +1,5 @@
html, body {
position: relative;
width: 100%;
@@ -12,11 +13,23 @@ body {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
/* tmp? */
background: bisque;
background-color: #333;
display: flex;
flex-direction: column;
}
@font-face {
font-family: "Bit5x3";
src:
url("./fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("./fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
a {
color: rgb(0,100,200);
text-decoration: none;
@@ -30,6 +43,13 @@ a:visited {
color: rgb(0,80,160);
}
.background-pages {
background-color: #333;
font-family: "Bit5x3";
font-size: 2vw;
color: white;
}
label {
display: block;
}

28
srcs/requirements/svelte/api_front/src/pages/NotFound.svelte
View File

@@ -1,10 +1,26 @@
<script>
import { link } from "svelte-spa-router";
import Header from '../pieces/Header.svelte';
</script>
<h1>We are sorry!</h1>
<p>This isn't a url that we use.</p>
<p>Go home you're drunk.</p>
<a href="/" use:link>
<h2>Take me home →</h2>
</a>
<div class="background-pages">
<div class="content">
<h1>We are sorry!</h1>
<p>This isn't a url that we use.</p>
<p>Go home you're drunk.</p>
</div>
</div>
<style>
.content {
left: 50%;
position: absolute;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>

8
srcs/requirements/svelte/api_front/src/pages/SplashPage.svelte
View File

@@ -78,8 +78,8 @@
.button-in {
background-color: #8c0000;
border-color: black;
border-width: 4px;
border-color: #071013;
border-width: 2px;
color: white;
font-family: "Bit5x3";
font-size: x-large;
@@ -88,8 +88,8 @@
.button-out {
background-color: #008c8c;
border-color: black;
border-width: 4px;
border-color: #071013;
border-width: 2px;
color: white;
font-family: "Bit5x3";
font-size: x-large;

4
srcs/requirements/svelte/api_front/src/pages/game/Ranking.svelte
View File

@@ -28,7 +28,7 @@
</script>
<Header />
<br />
<div class="background-pages">
<div class="principal-div">
<table class="stats-table">
<thead>
@@ -59,6 +59,7 @@
</tbody>
</table>
</div>
</div>
<style>
@@ -71,7 +72,6 @@
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
}

7
srcs/requirements/svelte/api_front/src/pages/profile/ProfileDisplay.svelte
View File

@@ -19,6 +19,7 @@
<Chat color="bisque"/>
<div class="background-pages">
<div class="outer">
{#if user !== undefined}
<GenerateUserDisplay user={user}/>
@@ -28,13 +29,13 @@
<div>Failed to load current</div>
{/if}
</div>
</div>
<style>
div.outer{
max-width: 960px;
margin: 40px auto;
max-width: 100%;
text-align: center;
padding-bottom: 10px;
}
</style>

28
srcs/requirements/svelte/api_front/src/pages/profile/ProfileFriends.svelte
View File

@@ -24,22 +24,10 @@
onMount( async() => {
// DO I ACTUALLY NEED TO ON MOUNT ALL THIS STUFF?
// ALSO I COULD JUST USE THE FUNCITONS I MADE...
// yea no idea what
// i mean do i fetch user? i will for now
user = await fetch(`http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}/api/v2/user`)
.then( (x) => x.json() );
fetchAll();
// ok this shit works!
// const interval = setInterval(() => {
// fetchAll();
// }, 1000);
// return () => clearInterval(interval);
});
const fetchAll = async() => {
@@ -234,6 +222,7 @@
</script>
<div class="background-pages">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-grid">
@@ -353,7 +342,7 @@
</div>
</div>
</div>
<style>
/* ok so i want a 12 column grid with a sidebar */
@@ -368,7 +357,14 @@
div.sidebar-list{
grid-column: 1 / span 2;
background: white;
background: #FB8B24;
padding: 1vw;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 4px solid #071013;
}
div.sidebar-item{
@@ -393,7 +389,7 @@
}
div.placeholder{
color: darkgray;
color: white;
text-align: center;
}
@@ -402,7 +398,7 @@
}
div.tip{
color: darkgray;
color: white;
font-size: 0.8em;
font-weight: bold;
}

8
srcs/requirements/svelte/api_front/src/pages/profile/ProfileSettings.svelte
View File

@@ -106,6 +106,7 @@
<main>
<div class="background-pages">
<h2>Look! You can change stuff</h2>
<div class="cards">
<Card>
@@ -114,7 +115,7 @@
<div class="label">New Username</div>
<!-- it really hates {user.username} and ${user.username} -->
<!-- <input type="text" placeholder="current username: ${user.username}" bind:value={set.username}> -->
<input type="text" placeholder="current username: {nameTmp}" bind:value={set.username}>
<input type="text" placeholder="{nameTmp}" bind:value={set.username}>
<div class="success">{success.username}</div>
<div class="error">{errors.username}</div>
</div>
@@ -144,7 +145,7 @@
</form>
</Card>
</div>
</div>
</main>
@@ -158,6 +159,8 @@
grid-gap: 20px; */
}
div.cards{
display: grid;
grid-template-columns: 1fr 1fr;
@@ -190,6 +193,7 @@
.inline-check{
display: inline;
color: #333;
}

135
srcs/requirements/svelte/api_front/src/pieces/Header.svelte
View File

@@ -21,101 +21,84 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<header>
<img src="/img/potato_logo.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<h1>Potato Pong</h1>
<nav>
<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
<!-- <button class:selected="{current === '/profile/settings'}" on:click={() => (push('/profile/settings'))}>Settings</button> -->
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
<button on:click={handleClickLogout}>Log Out</button>
</nav>
</header>
<div class="header">
<img src="/img/logo_potato.png" alt="Potato Pong Logo" on:click={() => (push('/'))}>
<div class="center">
<button class:selected="{current === '/game'}" on:click={() => (push('/game'))}>Play</button>
<button class:selected="{current === '/spectator'}" on:click={() => (push('/spectator'))}>Spectate</button>
<button class:selected="{current === '/ranking'}" on:click={() => (push('/ranking'))}>Ranking</button>
<button class:selected="{current === '/profile'}" on:click={() => (push('/profile'))}>My Profile</button>
<button class:selected="{current === '/profile/friends'}" on:click={() => (push('/profile/friends'))}>Friends</button>
</div>
<button class="logout" on:click={handleClickLogout}>Log Out</button>
</div>
<style>
/* See "possible_fonts.css" for more font options... */
@font-face {
font-family: 'Bondi';
src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');
font-family: "Bit5x3";
src:
url("/fonts/Bit5x3.woff2") format("woff2"),
local("Bit5x3"),
url("/fonts/Bit5x3.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
.selected {
background-color: chocolate;
.header div.center button.selected {
text-decoration: underline;
/* TMP so it's obvious but we need to pick good colors */
background-color: #2B3A67;
}
.header div.center button {
background-color: #8c0000;
border-color: #071013;
color: white;
font-family: "Bit5x3";
border-width: 2px;
font-size: 2vw;
}
/* There is a bunch of unncessary shit in here... why so many flex grids, why is everything the same class? just seemed easier but... */
header{
/* background: #f7f7f7; */
background: #618174;
/* padding: 20px; */
margin: 0;
/* does nothing so far... */
/* display: flex; */
.header button.logout {
background-color: #008c8c;
border-color: #071013;
color: white;
font-family: "Bit5x3";
border-width: 2px;
font-size: 2vw;
}
header{
/* for some reason this doesn't do shit! */
position: sticky;
/* position: absolute; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
.header {
resize: vertical;
overflow: hidden;
background: #FB8B24;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 4px solid #071013;
position: relative;
display: block;
padding: 10px;
}
/* Headers */
h1{
font-family: 'Bondi';
}
h1{
margin: 0;
text-align: left;
/* max-width: 40px; */
/* this helped with the weird extra space under the image... */
display: flex;
.header div.center {
width: fit-content;
justify-self: center;
align-self: center;
position: absolute;
left: 50%;
display: inline-block;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/* Images */
.header button.logout {
float: right;
}
img{
.header img{
cursor: pointer;
max-width: 40px;
padding: 7px 20px;
justify-self: left;
max-width: 10%;
float: left;
}
nav{
display: flex;
justify-content: right;
}
nav button{
margin: 7px 20px;
/* padding: 5px; */
border-radius: 4px;
}
/* .none{
} */
</style>

2
srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import Layouts from './Chat_layouts.svelte';
import { init_socket } from './Socket_init';
import { init_socket } from './Socket_chat';
export let color = "transparent";

20
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
View File

@@ -1,7 +1,5 @@
<script lang="ts">
import Debug from './tmp_debug.svelte';
import { layout } from './Store_chat';
import ChatBox from './Chat_box_css.svelte';
@@ -11,7 +9,7 @@
import NewLayout from './Layout_new.svelte';
import SettingsLayout from './Layout_settings.svelte';
import RoomsetLayout from './Layout_room_set.svelte';
import ProtectedLayout from './Layout_protected.svelte';
import PasswordLayout from './Layout_password.svelte';
import CreateLayout from './Layout_create.svelte';
import MuteLayout from './Layout_mute.svelte';
import UserLayout from './Layout_user.svelte';
@@ -68,8 +66,17 @@
{:else if $layout === "room_set"}
<RoomsetLayout back={layouts[1]} />
{:else if $layout === "protected"}
<ProtectedLayout back={layouts[1]} />
{:else if $layout === "password"}
<PasswordLayout back={layouts[1]} />
{:else if $layout === "add_password"}
<PasswordLayout back={layouts[1]} mode="add" />
{:else if $layout === "change_password"}
<PasswordLayout back={layouts[1]} mode="change" />
{:else if $layout === "remove_password"}
<PasswordLayout back={layouts[1]} mode="remove" />
{:else if $layout === "create"}
<CreateLayout back={layouts[1]} />
@@ -87,8 +94,5 @@
</ChatBox>
<!-- TMP DEBUG -->
<Debug bind:layouts />
<style></style>

4
srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
View File

@@ -2,7 +2,6 @@
<Button
bind:layout
new_layout=""
on_click={}
my_class=""
my_title=""
>
@@ -17,7 +16,6 @@
export let my_class = "";
export let my_title = "";
export let new_layout = "";
export let on_click = "";
function update_layout() {
layout.set(new_layout);
@@ -25,7 +23,7 @@
</script>
<button on:click={update_layout} on:click={on_click} title={my_title} class={my_class}>
<button on:click={update_layout} on:click title={my_title} class={my_class}>
<p><slot></slot></p>
</button>

4
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
View File

@@ -16,7 +16,7 @@
if (room.protection && !room.allowed)
{
await current_room.set(room);
layout.set("protected");
layout.set("password");
}
else
{
@@ -55,7 +55,7 @@
<p>rooms are loading...</p>
{:then rooms}
{#each rooms as room}
<Button my_class="list" on_click={function() {go_to_room(room)}}>
<Button my_class="list" on:click={function() {go_to_room(room)}}>
{room.client_name}
</Button>
{/each}

2
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_invite.svelte
View File

@@ -52,7 +52,7 @@
<p>users are loading...</p>
{:then users}
{#each users as user}
<Button my_class="list" on_click={function() {invite_this_user(user.username)}}>
<Button my_class="list" on:click={function() {invite_this_user(user.username)}}>
{user.username}
</Button>
{/each}

4
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte
View File

@@ -17,7 +17,7 @@
if (updated_room.protection)
{
current_room.set(updated_room);
layout.set("protected");
layout.set("password");
}
else
await change_room(updated_room);
@@ -56,7 +56,7 @@
<p>rooms are loading...</p>
{:then rooms}
{#each rooms as room}
<Button my_class="list" on_click={function() {join_rooms(room)}}>
<Button my_class="list" on:click={function() {join_rooms(room)}}>
{room.name}
</Button>
{/each}

51
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_protected.svelte → srcs/requirements/svelte/api_front/src/pieces/chat/Layout_password.svelte
View File

@@ -1,14 +1,22 @@
<script lang="ts">
import { layout, current_room } from './Store_chat';
import { change_room, send_password } from './Request_rooms';
import { change_room, validate_password, change_password, add_password, remove_password } from './Request_rooms';
import { FetchResponse } from './Types_chat';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';
export let back = "";
export let mode = "validate";
let password_state = "";
if (mode === 'change')
password_state = "new";
if (mode === 'remove')
password_state = "current";
let room_password: string;
let room_old_password: string;
let response: FetchResponse;
let show_error = false;
@@ -24,12 +32,21 @@
let room = {
name: $current_room.name,
type: $current_room.type,
protection: true,
password: room_password,
};
room.protection = true;
if (mode === 'remove')
room.protection = false;
// send password
response = await send_password(room);
if (mode === 'validate')
response = await validate_password(room);
if (mode === 'add')
response = await add_password(room);
if (mode === 'change')
response = await change_password(room, room_old_password);
if (mode === 'remove')
response = await remove_password(room);
// go to room
if (response.status >= 300 || response.error)
@@ -49,7 +66,7 @@
<!-- room_name -->
<Button my_class="room_name deactivate">
&lt;room_name&gt;
{$current_room.name}
</Button>
<!-- close -->
@@ -57,14 +74,18 @@
close
</Button>
<!-- panel_protected -->
<div class="panel panel_protected __border_top">
<!-- panel_password -->
<div class="panel panel_password __border_top">
<p class="title __center">this room is protected</p>
<form on:submit|preventDefault={handleSubmit}>
{#if show_error}
<Warning content={response.message}/>
{/if}
<label for="chat_pswd"><p>enter password :</p></label>
{#if mode === 'change'}
<label for="chat_old_pswd"><p>enter old password :</p></label>
<input id="chat_old_pswd" bind:value={room_old_password} type="password" placeholder="minimum 8 characters" minlength="8" name="old_password" required>
{/if}
<label for="chat_pswd"><p>enter {password_state} password :</p></label>
<input id="chat_pswd" bind:value={room_password} type="password" placeholder="minimum 8 characters" minlength="8" name="password" required>
<input type="submit" value="&#x2BA1">
</form>
@@ -74,17 +95,17 @@
<style>
/* grid layout "protected"
/* grid layout "password"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_protected) {grid-area: panel_protected;}
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_password) {grid-area: panel_password;}
.grid_box {
grid:
' back room_name close ' auto
' panel_protected panel_protected panel_protected ' 1fr
/ auto 1fr auto ;
' back room_name close ' auto
' panel_password panel_password panel_password ' 1fr
/ auto 1fr auto ;
}

2
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

@@ -71,7 +71,7 @@
</div>
<!-- send -->
<Button my_class="send" on_click={send_msg}>
<Button my_class="send" on:click={send_msg}>
send
</Button>

21
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room_set.svelte
View File

@@ -8,9 +8,11 @@
let users = get_room_users();
console.log("current_room:", $current_room);
function user_profile()
{
console/log("in user_profile");
console.log("in user_profile");
}
function user_leave_room()
@@ -42,13 +44,26 @@
<!-- panel_room_set -->
<div class="panel panel_room_set __border_top">
{#if $current_room.type !== "direct"}
<Button on_click={user_leave_room}>
<Button on:click={user_leave_room}>
leave
</Button>
<Button new_layout="invite">
invite someone
</Button>
{/if}
{#if $current_room.protection }
<p class="__center">this room is password protected</p>
<Button new_layout="change_password">
change password
</Button>
<Button new_layout="remove_password">
remove password
</Button>
{:else}
<Button new_layout="add_password">
add password
</Button>
{/if}
<p>room users :</p>
<div class="room_users">
<div class="__show_if_only_child">
@@ -58,7 +73,7 @@
<p>list of users is loading...</p>
{:then users}
{#each users as user}
<Button new_layout="user" my_class="list" on_click={user_profile}>
<Button new_layout="user" my_class="list" on:click={user_profile}>
{user}
</Button>
{/each}

46
srcs/requirements/svelte/api_front/src/pieces/chat/Request_rooms.ts
View File

@@ -60,14 +60,52 @@ console.log("room returned from change:", response.room);
layout.set("room");
}
export async function validate_password(room: Room)
{
console.log("in validate_password");
export async function send_password(room: Room)
console.log("room sent to validate password:", room);
let response: FetchResponse = await fetch_chat_request('passwordauth', FetchMethod.POST, room);
console.log("room returned from validate password:", response.room);
return response;
}
export async function add_password(room: Room)
{
console.log("in add_password");
console.log("room sent to add password:", room);
let response: FetchResponse = await fetch_chat_request('addpassword', FetchMethod.POST, room);
console.log("room returned from add password:", response.room);
return response;
}
export async function change_password(room: Room, old_password: string)
{
console.log("in send_password");
console.log("room sent to set password:", room);
let response: FetchResponse = await fetch_chat_request('password', FetchMethod.POST, room);
console.log("room returned from set password:", response.room);
let request_body =
{
room: room,
old_password: old_password,
}
console.log("room sent to change password:", room);
let response: FetchResponse = await fetch_chat_request('changepassword', FetchMethod.POST, request_body);
console.log("room returned from change password:", response.room);
return response;
}
export async function remove_password(room: Room)
{
console.log("in send_password");
console.log("room sent to remove password:", room);
let response: FetchResponse = await fetch_chat_request('removepassword', FetchMethod.DELETE, room);
console.log("room returned from remove password:", response.room);
return response;
}

21
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_init.ts → srcs/requirements/svelte/api_front/src/pieces/chat/Socket_chat.ts
View File

@@ -1,6 +1,6 @@
import io from 'socket.io-client';
import { set_socket, set_user } from './Store_chat';
import { socket_events } from './Socket_events';
import { user, msgs } from './Store_chat';
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
@@ -21,6 +21,23 @@ export async function init_socket()
});
set_socket(socket);
socket_states(socket);
socket_events(socket);
}
function socket_events(socket)
{
socket.on('message', function(from, message)
{
console.log("received msg:", message, from);
if (from === user.username)
from = "me";
msgs.update(msgs => [...msgs, { name: from, message: message }]);
});
}
function socket_states(socket)
{
socket.on('connect', function(){ console.log("socket.io connected"); });
socket.on('disconnect', function(){ console.log("socket.io disconnected"); });
socket.on('connect_error', function(){ console.log("socket.io connect_error"); });
@@ -33,7 +50,5 @@ export async function init_socket()
socket.on('reconnect_failed', function(){ console.log("socket.io reconnect_failed"); });
socket.on('ping', function(){ console.log("socket.io ping"); });
socket.on('pong', function(){ console.log("socket.io pong"); });
socket_events(socket);
}

12
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_events.ts
View File

@@ -1,12 +0,0 @@
import { user, msgs } from './Store_chat';
export function socket_events(socket)
{
socket.on('message', function(from, message)
{
console.log("received msg:", message, from);
if (from === user.username)
from = "me";
msgs.update(msgs => [...msgs, { name: from, message: message }]);
});
}

2
srcs/requirements/svelte/api_front/src/pieces/chat/Types_chat.ts
View File

@@ -28,6 +28,6 @@ export enum FetchMethod
{
POST = 'POST',
GET = 'GET',
LEAVE = 'LEAVE',
DELETE = 'DELETE',
}

27
srcs/requirements/svelte/api_front/src/pieces/chat/tmp_debug.svelte
View File

@@ -1,27 +0,0 @@
<script>
export let layout = "";
export let layouts = [];
</script>
<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">
<p>temp, for testing :</p>
<button on:click={function(){layout = "close" }}>close</button>
<button on:click={function(){layout = "home" }}>home</button>
<button on:click={function(){layout = "room" }}>room</button>
<button on:click={function(){layout = "new" }}>new</button>
<button on:click={function(){layout = "settings" }}>settings</button>
<button on:click={function(){layout = "room_set" }}>room_set</button>
<button on:click={function(){layout = "protected"}}>protected</button>
<button on:click={function(){layout = "create" }}>create</button>
<button on:click={function(){layout = "mute" }}>mute</button>
<button on:click={function(){
layouts = ["settings", "settings"];
layout = "user";
}}>user from settings</button>
<button on:click={function(){
layouts = ["room_set", "room_set"];
layout = "user";
}}>user from room_set</button>
</div>