From bd90d6ecba9cc1242b9fe1169f1fdcac2748a478 Mon Sep 17 00:00:00 2001
From: vvandenb <vvandenb12@gmail.com>
Date: Thu, 23 Mar 2023 21:44:57 +0100
Subject: [PATCH] * Split update user info buttons

---
 back/src/chat/chat.gateway.ts       |  5 ++-
 back/src/users/dto/user.dto.ts      |  3 +-
 front/src/components/Profile.svelte | 69 +++++++++++++++++++----------
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/back/src/chat/chat.gateway.ts b/back/src/chat/chat.gateway.ts
index ce13bfb..b82ed74 100644
--- a/back/src/chat/chat.gateway.ts
+++ b/back/src/chat/chat.gateway.ts
@@ -93,11 +93,11 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
   }
 
   @SubscribeMessage('leaveChannel')
-  async onLeaveChannel(socket: Socket): Promise<void> {
+  async onLeaveChannel(socket: Socket): Promise<boolean> {
     const connect = await this.connectedUserRepository.findOneBy({
       socket: socket.id,
     });
-    if (connect == null) throw new WsException('You must be connected to the channel');
+    if (connect == null) return false;
     const channel = await this.chatService.getFullChannel(connect.channel);
     if (connect.user === channel.owner.ftId) {
       this.server.in(channel.id.toString()).emit('deleted');
@@ -109,6 +109,7 @@ export class ChatGateway implements OnGatewayConnection, OnGatewayDisconnect {
     }
     await this.connectedUserRepository.delete({ socket: socket.id });
     console.log('socket %s has left channel', socket.id)
+    return true;
   }
 
   @SubscribeMessage('addMessage')
diff --git a/back/src/users/dto/user.dto.ts b/back/src/users/dto/user.dto.ts
index 26962f9..9d56847 100644
--- a/back/src/users/dto/user.dto.ts
+++ b/back/src/users/dto/user.dto.ts
@@ -1,4 +1,4 @@
-import { IsString, IsNotEmpty, IsPositive, IsOptional, IsEmail, NotContains } from 'class-validator'
+import { IsNotEmpty, IsPositive, IsOptional, IsEmail, NotContains, MaxLength } from 'class-validator'
 
 import { ApiProperty } from '@nestjs/swagger'
 import { Express } from 'express'
@@ -10,6 +10,7 @@ export class UserDto {
 
   @IsNotEmpty()
   @NotContains(' ')
+  @MaxLength(15)
   readonly username: string
 
   @IsEmail()
diff --git a/front/src/components/Profile.svelte b/front/src/components/Profile.svelte
index fdcd68b..d01cf22 100644
--- a/front/src/components/Profile.svelte
+++ b/front/src/components/Profile.svelte
@@ -38,7 +38,10 @@
       let res = await fetch(API_URL + "/users/" + userId, {
         mode: "cors",
       });
-      if (res.ok) user = await res.json();
+      if (res.ok) {
+        user = await res.json();
+        username = user.username;
+      }
     }
   }
   async function getBlockeds() {
@@ -107,34 +110,23 @@
     dispatch("close")
   };
 
-  async function handleSubmit() {
-    if (gamePlaying) {
-      await show_popup("Cannot change username while playing.", false)
-      return;
-    }
+  async function handleSubmitUsername() {
+    if (gamePlaying) return await show_popup("Cannot change username while playing.", false)
+    if (username === $store.username) return await show_popup(`Username already set to ${username}.`, false)
+    if (username.includes(" ")) return await show_popup("Username cannot contain spaces.", false)
 
-    const body: UserDto = {
-      username: username,
-      ftId: $store.ftId,
-      status: $store.status,
-      authToken: $store.authToken,
-      avatar: $store.avatar,
-      isVerified: $store.isVerified
-    };
-    console.log("body:", body);
     const response = await fetch(API_URL + "/users", {
       headers: { "content-type": "application/json" },
       method: "POST",
       body: JSON.stringify({ 
         username: username,
-        email: email
+        email: $store.email
       }),
       credentials: "include",
     });
     if (response.ok) {
       $store.username = username;
-      $store.email = email;
-      await show_popup("Succefully changed informations.", false)
+      await show_popup("Successfully changed username.", false)
       resetGameConnection();
     } else {
       const error = await response.json();
@@ -142,6 +134,26 @@
     }
   }
 
+  async function handleSubmitEmail() {
+    console.log($store.username)
+    const response = await fetch(API_URL + "/users", {
+      headers: { "content-type": "application/json" },
+      method: "POST",
+      body: JSON.stringify({ 
+        username: $store.username,
+        email: email
+      }),
+      credentials: "include",
+    });
+    if (response.ok) {
+      $store.email = email;
+      await show_popup("Successfully changed email.", false)
+    } else {
+      const error = await response.json();
+      await show_popup(error.message, false)
+    }
+  }
+
   async function handle2fa(event: Event) {
     event.preventDefault();
     user.twoFA = !user.twoFA;
@@ -152,7 +164,7 @@
       credentials: "include",
     });
     if (response.ok) {
-      await show_popup("Succefully " + (user.twoFA ? "enabled" : "disabled") + " 2FA", false)
+      await show_popup("Successfully " + (user.twoFA ? "enabled" : "disabled") + " 2FA", false)
     }
   }
 </script>
@@ -215,20 +227,29 @@
           >View History</button
         >
       </p>
+      <p>Rank: {user.rank}</p>
       <p>Wins: {user.wins}</p>
       <p>Looses: {user.looses}</p>
       <p>Winrate: {user.winrate.toFixed(2)}%</p>
-      <p>Rank: {user.rank}</p>
     </div>
     {#if edit}
       <form
-        id="update-form"
+        id="update-form-username"
         class="username"
-        on:submit|preventDefault={handleSubmit}
+        on:submit|preventDefault={handleSubmitUsername}
       >
         <input type="text" id="username" bind:value={username} required/>
+        <button type="submit" class="username" form="update-form-username"
+          >Change</button
+        >
+      </form>
+      <form
+        id="update-form-email"
+        class="username"
+        on:submit|preventDefault={handleSubmitEmail}
+      >
         <input type="text" id="email" bind:value={email} required/>
-        <button type="submit" class="username" form="update-form"
+        <button type="submit" class="username" form="update-form-email"
           >Change</button
         >
       </form>
@@ -266,7 +287,7 @@
     max-width: 80%;
     max-height: 80vh;
     overflow: auto;
-    width: 375px;
+    width: 500px;
     color: #e8e6e3;
   }