replace alert et prompt

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

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   export let message;
   export let form = true;
   export let onCancel = () => {};
@@ -18,14 +18,17 @@
 
   function _onOkay() {
     onOkay();
+    if (form)
       $content = value;
+    else
+      $content = "ok"
     popup.set(null);
   }
 
   $: onChange();
 </script>
 
-<div class="overlay">
+<div>
   <h2>{message}</h2>
   {#if form === true}
     <input
@@ -43,7 +46,7 @@
 
 <style>
   h2 {
-    font-size: 2rem;
+    font-size: 1rem;
     text-align: center;
   }
 

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

@@ -3,8 +3,13 @@ import Alert__SvelteComponent_ from './Alert.svelte';
 export const content = writable("")
 export const popup = writable(null)
 import { bind } from 'svelte-simple-modal';
+
 let val;
 export async function show_popup(message, form = true) {
+    const unsub = popup.subscribe((value) => {val = value})
+    unsub()
+    if (val != null)
+        return
     popup.set(bind(Alert__SvelteComponent_, {
         message,
         form
@@ -18,7 +23,7 @@ export async function waitForCondition() {
         if (val == null) {
             console.log("finished",val)
             unsub()
-            return new Promise(resolve => setTimeout(resolve, 0));
+            return new Promise(resolve => setTimeout(resolve, 100));
         } else {
             console.log("waiting")
             await new Promise(resolve => setTimeout(resolve, 1000));

front/volume/src/components/Channels.svelte

@@ -1,8 +1,5 @@
 <script lang="ts" context="module">
-  	import { getContext } from 'svelte';
+	  import { content, show_popup } from './Alert/content'
-	  import Alert from './Alert/Alert.svelte';
-	  import { content,  popup} from './Alert/content'
-    import { bind } from 'svelte-simple-modal';
 	  const showDialog = () => {
 	  }
 
@@ -104,7 +101,7 @@
         joinChannel(id);
         onSelectChannel(channel);
       } else {
-        popup.set(bind(Alert, {message:"Did not find channel", form : false}))
+        show_popup("Did not find channel", false)
       }
     });
   };
@@ -112,14 +109,16 @@
   const createChannel = async () => {
     let name: string;
     let password = "";
-    name = prompt("Enter a name for the new channel:");
+    await show_popup("Enter a name for the new channel:")
+    name = $content;
     if (name.includes("#")) {
-    popup.set(bind(Alert, {message:"Channel name cannot contain #", form : false}))
+        await show_popup("Channel name cannot contain #", false)
       return;
     }
     if (name) {
       if (channelMode === 'protected')
-        password = prompt("Enter a password for the new channel:");
+        await show_popup("Enter a password for the new channel:")
+        password = $content
         name = "🚪 " + name;
         const response = await fetch(API_URL + "/channels", {
         credentials: "include",
@@ -136,7 +135,7 @@
         }),
       });
       if (!response.ok) 
-        popup.set(bind(Alert, {message:"Error creating channel", form : false}))
+        await show_popup("Error creating channel", false)
       getChannels()
     }
   };
@@ -144,8 +143,8 @@
   //--------------------------------------------------------------------------------/
 
   const removeChannel = async (id: number) => {
-    let string = prompt("type 'delete' to delete this channel");
+    await show_popup("press \"Okay\"to delete this channel", false);
-    if (string === "delete") {
+    if ($content === "ok") {
       const response = await fetch(API_URL + "/channels/" + id, {
         credentials: "include",
         method: "DELETE",
@@ -153,14 +152,15 @@
       });
       if (response.ok) channels = channels.filter((c) => c.id !== id);
       else
-        popup.set(bind(Alert, {message:"Error deleting channel", form : false}))
+        await show_popup("Error deleting channel", false)
     }
   };
 
   //--------------------------------------------------------------------------------/
 
   const inviteChannel = async (id: number) => {
-    let string = prompt("Enter the username of the user you want to invite");
+    await show_popup("Enter the username of the user you want to invite");
+    let string = $content
     const response = await fetch(API_URL + "/users/" + string + "/byname", {
       credentials: "include",
       method: "GET",
@@ -180,21 +180,20 @@
         }),
       });
       if (response2.ok) {
-        popup.set(bind(Alert, {message:"User invited", form : false}))
+        await show_popup("User invited", false)
       } else {
-        popup.set(bind(Alert, {message:"Error inviting user", form : false}))
+        await show_popup("Error inviting user", false)
       }
     } else {
-        popup.set(bind(Alert, {message:"Error getting user infos", form : false}))
+        await show_popup("Error getting user infos", false)
     }
   };
 
   //--------------------------------------------------------------------------------/
 
   const changePassword = async (id: number) => {
-    let string = prompt(
+    await show_popup("Enter the new password for this channel (leave empty to remove password) :");
-      "Enter the new password for this channel (leave empty to remove password) :"
+    let string = $content 
-    );
     const response = await fetch(API_URL + "/channels/" + id + "/password", {
       credentials: "include",
       method: "POST",
@@ -209,7 +208,7 @@
     if (response.ok) {
       channels.push(await response.json());
     } else {
-        popup.set(bind(Alert, {message:"Error changing password", form : false}))
+        await show_popup("Error changing password", false)
     }
   };
 

front/volume/src/components/Chat.svelte

@@ -7,9 +7,9 @@
   import { createEventDispatcher, onDestroy, onMount } from "svelte";
   import { store, API_URL } from "../Auth";
   import { socket } from "../socket";
+    import { show_popup, content } from "./Alert/content";
   import type { ChannelsType } from "./Channels.svelte";
   import type User from "./Profile.svelte";
-  
 </script>
 
 <script lang="ts">
@@ -119,8 +119,9 @@
         body: JSON.stringify({ id: target.ftId }),
       });
     }
-    if (response.ok) alert("User blocked");
+    if (response.ok) 
-    else alert("Failed to block user");
+      await show_popup("User blocked", false);
+    else await show_popup("Failed to block user",false);
   };
 
   //--------------------------------------------------------------------------------/
@@ -142,8 +143,8 @@
         body: JSON.stringify({ id: target.ftId }),
       });
     }
-    if (response.ok) alert("User blocked");
+    if (response.ok) show_popup("User blocked", false);
-    else alert("Failed to block user");
+    else show_popup("Failed to block user", false);
   };
 
   //--------------------------------------------------------------------------------/
@@ -155,7 +156,8 @@
     });
     if (response.ok) {
       const target = await response.json();
-      const duration = prompt("Enter a time for which the user will be banned from this channel")
+      await show_popup("Enter a time for which the user will be banned from this channel")
+      const duration = $content 
       response = await fetch(API_URL + "/channels/" + channel.id + "/ban", {
         credentials: "include",
         method: "POST",
@@ -168,8 +170,8 @@
       socket.emit("kickUser", channel.id, $store.ftId, target.ftId);
     }
     if (response.ok) {
-      alert("User banned");
+      show_popup("User banned", false);
-    } else alert("Failed to ban user");
+    } else show_popup("Failed to ban user", false);
   };
 
   //--------------------------------------------------------------------------------/
@@ -191,8 +193,8 @@
         body: JSON.stringify({ id: target.ftId }),
       });
     }
-    if (response.ok) alert("User unbanned");
+    if (response.ok) show_popup("User unbanned",false);
-    else alert("Failed to unban user");
+    else show_popup("Failed to unban user",false);
   };
 
   //--------------------------------------------------------------------------------/
@@ -205,7 +207,7 @@
     if (response.ok) {
       const target = await response.json();
       socket.emit("kickUser", {chan : channel.id, from : $store.ftId, to: target.ftId});
-    } else {alert("merde")}
+    } else {show_popup("merde",false)}
   };
 
   //--------------------------------------------------------------------------------/
@@ -228,8 +230,8 @@
         body: JSON.stringify({ data: [target.ftId, +prompt] }),
       });
     }
-    if (response.ok) alert("User muted");
+    if (response.ok) show_popup("User muted",false);
-    else alert("Failed to mute user");
+    else show_popup("Failed to mute user",false);
   };
 
   //--------------------------------------------------------------------------------/
@@ -252,9 +254,9 @@
       });
     }
     if (response.ok) {
-      alert("User admined");
+      show_popup("User admined",false);
     } else {
-      alert("Failed to admin user");
+      show_popup("Failed to admin user",false);
     }
   };
 
@@ -278,17 +280,17 @@
       });
     }
     if (response.ok) {
-      alert("User admined");
+      show_popup("User admined", false);
     } else {
-      alert("Failed to admin user");
+      show_popup("Failed to admin user", false);
     }
   };
 
   //--------------------------------------------------------------------------------/
 
   const leaveChannel = async () => {
-    const prompt = window.prompt("Are you sure you want to leave this channel? (y/n)");
+    await show_popup("Press \"Okay\" to leave this channel?", false);
-    if (prompt == "y") {
+    if ($content == 'ok') {
       const response = await fetch(API_URL + "/channels/" + channel.id + "/leave", {
         credentials: "include",
         mode: "cors",
@@ -296,7 +298,7 @@
       if (response.ok) {
         window.location.href = "/channels";
       } else {
-        alert("Failed to leave channel");
+        await show_popup("Failed to leave channel",false);
       }
     }
   }