upload avatar, chat fixed, working on change username

back/volume/src/main.ts

@@ -7,6 +7,7 @@ import * as session from 'express-session'
 import * as passport from 'passport'
 import { type NestExpressApplication } from '@nestjs/platform-express'
 import * as cookieParser from 'cookie-parser'
+import { Response } from 'express';
 
 async function bootstrap () {
   const logger = new Logger()

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

@@ -5,7 +5,7 @@ import { Express } from 'express'
 
 export class UserDto {
   @IsPositive()
-  @IsNotEmpty()
+  @IsOptional()
   readonly ftId: number
 
   @IsString()

front/volume/src/components/Channels.svelte

@@ -3,6 +3,8 @@
 	export interface ChannelsType {
 		id: string;
 		name: string;
+		privacy: string;
+		password: string;
 		messages: Array<chatMessagesType>;
 	}
 </script>
@@ -19,12 +21,27 @@
 	const createChannel = () => {
 		const name = prompt("Enter a name for the new channel:");
 		if (name) {
-			const newChannel: ChannelsType = {
-				id: Math.random().toString(),
-				name,
-				messages: []
-			};
-			channels = [newChannel, ...channels];
+			const privacy = prompt("Enter a privacy setting for the new channel (public/private):");
+			if (privacy !== "public" && privacy !== "private") {
+				alert("Invalid privacy setting");
+			}
+			let password = "";
+			if (privacy === "private") {
+				password = prompt("Enter a password for the new channel:");
+				if (!password) {
+					alert("Invalid password");
+				}
+			}
+			if (privacy === "public" || password) {
+				const newChannel: ChannelsType = {
+					id: Math.random().toString(),
+					name,
+					privacy,
+					password,
+					messages: []
+				};
+				channels = [newChannel, ...channels];
+			}
 		}
 		// TODO: save to database
   	};

front/volume/src/components/Chat2.svelte

@@ -95,15 +95,4 @@
     height: 200px;
     overflow-y: scroll;
   }
-
-  .options-modal {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: white;
-  padding: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  z-index: 9999;
-  }
 </style>

front/volume/src/components/NavBar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  let api = "http://" + import.meta.env.VITE_HOST + ":" + import.meta.env.VITE_BACK_PORT;
   export let links = [
     { text: "Home", url: "img/pong.png" },
     { text: "Spectate" },
@@ -41,7 +42,7 @@
       {#if link.text === "Profile"}
         <li>
           <button on:click={clickProfile}>
-            <img src="img/profileicon.png" alt="profile icon" />
+            <img src={api + '/avatar'} alt="avatar" />
           </button>
         </li>
       {/if}

front/volume/src/components/Profile.svelte

@@ -1,3 +1,9 @@
+<script lang="ts" context="module">
+  export interface User {
+    username: string;
+  }
+</script>
+
 <script lang="ts">
   let api = "http://" + import.meta.env.VITE_HOST + ":" + import.meta.env.VITE_BACK_PORT
   export let username = "";
@@ -7,45 +13,21 @@
   export let elo = 0;
   export let rank = -1;
   export let is2faEnabled = false;
-  async function handleSubmit(event: Event) {
-    event.preventDefault();
-    // const response = await fetch('', {
-    //     method: 'POST',
-    //     headers: {
-    //         'Content-Type': 'application/json'
-    //     },
-    //     body: JSON.stringify({
-    //         username
-    //     })
-    // });
-    // if (response.ok) {
-    //     console.log('username updated');
-    // }
-    // else {
-    //     console.log('username update failed');
-    // }
-    alert("Trying to update username to " + username);
-  }
-  async function handleAvatarUpload(event: Event) {
-    event.preventDefault();
-    const fileInput = document.getElementById('avatar-input') as HTMLInputElement;
-    const file = fileInput.files[0];
-
-    const formData = new FormData();
-    formData.append('avatar', file);
-
-    try {
-      const response = await fetch(api + '/avatar', {
-        method: 'POST',
-        body: formData,
-        mode: 'cors'
+  export let avatar = api + "/avatar";
+  const handleSubmit = () => {
+    const user: User = { username : username};
+    fetch("http://localhost:3001/", {
+      method: "POST",
+      body: JSON.stringify(user),
+      credentials: 'include'
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+      })
+      .catch((err) => {
+        console.error(err);
       });
-
-      const data = await response.json();
-      console.log(data);
-    } catch (error) {
-      console.error(error);
-    }
   }
   async function handle2fa(event: Event) {
     event.preventDefault();
@@ -56,16 +38,19 @@
 <div class="overlay">
   <div class="profile" on:click|stopPropagation on:keydown|stopPropagation>
     <div class="profile-header">
-      <img class="profile-img" src="img/profileicon.png" alt="Profile Icon" />
+      <img class="profile-img" src={avatar} alt="avatar" />
       <h3>{realname}</h3>
-      <form on:submit={handleAvatarUpload}>
-        <label for="avatar-input">Choose avatar:</label>
-        <input type="file" id="avatar-input" accept="image/*">
-        <button type="submit" id="upload-button">Upload</button>
+      <form action="http://localhost:3001/avatar"
+        method="post"
+        enctype="multipart/form-data">
+        <label for="mavatar-input">Select a file:</label>
+        <input type="file" id="avatar-input" name="avatar" />
+        <br /><br />
+        <input type="submit" />
       </form>
     </div>
     <div class="profile-body">
-      <form on:submit={handleSubmit}>
+      <form on:submit|preventDefault={handleSubmit}>
         <div class="username">
           <label for="username">Username</label>
           <input type="text" id="username" bind:value={username} />