alert component

back/volume/src/users/users.controller.ts

@@ -192,7 +192,6 @@ export class UsersController {
   }
 
   @Post(':id')
-  @UseGuards(AuthenticatedGuard)
   async createById (@Body() payload: UserDto): Promise<void> {
     const user = await this.usersService.findUser(payload.ftId)
     if (user != null) {

front/volume/package-lock.json

@@ -19,7 +19,8 @@
       "devDependencies": {
         "prettier": "^2.8.4",
         "svelte-check": "^2.10.3",
-        "svelte-select": "^5.5.2"
+        "svelte-select": "^5.5.2",
+        "svelte-simple-modal": "^1.5.2"
       }
     },
     "node_modules/@esbuild/android-arm": {
@@ -1462,6 +1463,15 @@
         "svelte-floating-ui": "1.2.8"
       }
     },
+    "node_modules/svelte-simple-modal": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/svelte-simple-modal/-/svelte-simple-modal-1.5.2.tgz",
+      "integrity": "sha512-kQ+9/bonxMMJe6dGTCPXBkYQQ4zF8rqqPp+PvTWOJB8QtB+Z0S/h7ZJRDZOAnkXTUClwd+Qmb2HHTIXVkjlSvA==",
+      "dev": true,
+      "peerDependencies": {
+        "svelte": "^3.31.2"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

front/volume/package.json

@@ -13,7 +13,8 @@
   "devDependencies": {
     "prettier": "^2.8.4",
     "svelte-check": "^2.10.3",
-    "svelte-select": "^5.5.2"
+    "svelte-select": "^5.5.2",
+    "svelte-simple-modal": "^1.5.2"
   },
   "dependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.0.2",

front/volume/src/App.svelte

@@ -16,14 +16,14 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import Navbar from "./components/NavBar.svelte";
-
+  import Modal from "svelte-simple-modal";
   import Profile from "./components/Profile.svelte";
   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 Leaderboard from "./components/Leaderboard.svelte";
-
+  import { popup } from "./components/Alert/content";
   import Pong from "./components/Pong/Pong.svelte";
   import type { ChannelsType } from "./components/Channels.svelte";
   import { API_URL } from "./Auth";
@@ -189,6 +189,7 @@
 </script>
 
 <div>
+  <Modal show={$popup}>
   {#if $store === null}
     <div class="login-div">
       <h3 class="test">Please log in with 42 api to access the website.</h3>
@@ -203,6 +204,7 @@
   {:else if $store.twoFA === true && $store.isVerified === false}
     <h1><button type="button" on:click={verify}>verify</button></h1>
   {:else}
+
     <Navbar
       {clickProfile}
       {clickHistory}
@@ -282,6 +284,8 @@
       <Pong bind:this={pong} {appState} {setAppState} {fakeUser} />
     {/if}
   {/if}
+
+</Modal>
 </div>
 
 <style>

front/volume/src/components/Alert/Alert.svelte

@@ -0,0 +1,65 @@
+	<script>
+  import { getContext } from 'svelte';
+  	export let message;
+  	export let form = true;
+	export let onCancel = () => {};
+	export let onOkay = () => {};
+	import { content, popup } from './content'
+	
+
+	let value;
+	let onChange = () => {
+		$content=''
+	};
+	
+	function _onCancel() {
+		onCancel();
+		$content=''
+		popup.set(null);
+	}
+	
+	function _onOkay() {
+		onOkay();
+		$content=value
+		popup.set(null);
+	}
+	
+	$: onChange()
+</script>
+
+<style>
+  h2 {
+		font-size: 2rem;
+		text-align: center;
+	}
+	
+	input {
+		width: 100%;
+	}
+	
+	.buttons {
+		display: flex;
+		justify-content: space-between;
+	}
+	
+	.hidden {
+		display: none;
+	}
+</style>
+
+<h2>{message}</h2>
+{#if form === true}
+	<input
+    type="text"
+	  bind:value
+	  on:keydown={e => e.which === 13 && _onOkay()} />
+{/if}
+
+<div class="buttons">
+	<button on:click={_onCancel}>
+		Cancel
+	</button>
+	<button on:click={_onOkay}>
+		Okay
+	</button>
+</div>

front/volume/src/components/Alert/content.ts

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+export const content = writable("init")
+export const popup = writable(null)

front/volume/src/components/Channels.svelte

@@ -1,4 +1,11 @@
 <script lang="ts" context="module">
+  	import { getContext } from 'svelte';
+	  import Alert from './Alert/Alert.svelte';
+	  import { content,  popup} from './Alert/content'
+    import { bind } from 'svelte-simple-modal';
+	  const showDialog = () => {
+	  }
+
   export interface ChannelsType {
     id: number;
     name: string;
@@ -54,6 +61,7 @@
 </script>
 
 <script lang="ts">
+
   //--------------------------------------------------------------------------------//
   let channelMode = "";
   const channelOptions = ["public", "private", "protected"];
@@ -87,6 +95,7 @@
   export let onSelectChannel: (channel: ChannelsType) => void;
   export const selectChat = (id: number) => {
     console.log("channel: ", id)
+    popup.set(bind(Alert, {message:"Did not find channel", form : false}))
     getChannels().then(() => {
       const channel = channels.find((c) => c.id === id);
       if (channel) {

front/volume/src/components/Chat.svelte

@@ -9,6 +9,7 @@
   import { socket } from "../socket";
   import type { ChannelsType } from "./Channels.svelte";
   import type User from "./Profile.svelte";
+  
 </script>
 
 <script lang="ts">