cette fois on est bon

frontend/src/components/exos/EditForm.svelte

@@ -41,11 +41,13 @@
   const tagsStore = getContext<{ tagsStore: any }>("tagsStore");
   const { navigate } = getContext<{ navigate: Function }>("navigation");
   const { success, error } = getContext<{ success: Function, error: Function }>("notif");
+  let loading = false
 </script>
 
 <form
   action=""
   on:submit|preventDefault={() => {
+    loading = true
 		if (editing && exo != null) {
 			editExo(exo.id_code, {
 				name: $name.value,
@@ -53,21 +55,25 @@
 				private: $prv.value,
 				...($model.dirty == true && { file: $model.value[0] })
 			}).then((r) => {
+        loading=false
         success('Exercice modifié !', `Exercice ${r.data.name} modifié avec succès !`)
 				exo=r.data
 				updateExo(r.data);
 				cancel()
 			}).catch((e) => {
+        loading=false
         console.log(e)
         error('Erreur', 'Une erreur est survenue lors de la modification de l\'exercice')
       });
 		} else {
+
 			createExo({
 				name: $name.value,
 				consigne: $consigne.value,
 				private: $prv.value,
 				file: $model.value[0]
 			}).then((r) => {
+        loading=false
 				updateExo(r.data);
         success('Exercice créé !', `Exercice ${r.data.name} créé avec succès !`)
 				goto(`/exercices/${r.data.id_code}`)
@@ -84,6 +90,7 @@
             }, true
           );
 			}).catch((e) => {
+        loading=false
         error('Erreur', 'Une erreur est survenue lors de la création de l\'exercice')
       });
 		}
@@ -117,7 +124,13 @@
              defaultValue={editing &&exo!= null?  exo.exo_source: null} />
 
   <div class="wp-100">
-    <button class="primary-btn" disabled={!$myForm.valid}>Modifier</button>
+    <button class="primary-btn" disabled={!$myForm.valid}>
+      {#if !loading}
+        {editing ? "Modifier" : "Créer"}
+        {:else}
+        <span class="spinner"></span>
+      {/if}
+    </button>
     <button
       class="danger-btn"
       on:click|preventDefault={() => {
@@ -146,4 +159,9 @@
         gap: 10px;
         align-items: flex-start;
     }
+    .spinner{
+        width: 15px;
+        height: 15px;
+        border-width: 2px!important;
+    }
 </style>

frontend/src/components/forms/InputWithLabel.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <span class="inputLabel" class:error={errors.length !== 0}>
-
+	<div style:position="relative">
 	<input
 		use:typeAction
 		on:input={(e)=>{change(e)}}
@@ -48,7 +48,7 @@
 			{/if}
 		</div>
 	{/if}
-
+	</div>
 	<span class="bar" />
 
 	{#if errors.length !== 0}

frontend/src/components/rooms/Members.svelte

@@ -12,7 +12,7 @@
   const room: Writable<Room> = getContext("room");
   const member: Writable<Member> = getContext("member");
   const { send } = getContext<{ send: Function }>("ws");
-
+  const { alert } = getContext<{ alert: Function }>("alert");
   $: online =
     $room != null
       ? $room.members.filter((r): r is Member => "online" in r && r.online == true)
@@ -25,6 +25,16 @@
     $room != null
       ? $room.members.filter((r): r is Waiter => "waiter_id" in r && !!r.waiter_id)
       : [];
+  const ban = (m: Member) => {
+    if (!$member.isAdmin || m.isAdmin) return;
+    alert(
+      {
+        title: "Bannir", description: "Êtes-vous sûr de vouloir bannir cet utilisateur ?", validate: () => {
+          send("ban", { member_id: m.id_code });
+        }, validateButton: "Bannir"
+      }
+    );
+  };
 </script>
 
 <div class="members">
@@ -66,9 +76,7 @@
         class:member={m.id_code == $member.id_code}
         class="online"
         title={$member.isAdmin && !m.isAdmin ? 'Bannir' : ''}
-        on:click={() => {
-					$member.isAdmin && !m.isAdmin && send('ban', { member_id: m.id_code });
-				}}
+        on:click={(e)=>ban(m)}
         on:keydown={() => {}}
       >
         {m.username}
@@ -90,9 +98,7 @@
           class:bannable={m.id_code != $member.id_code && $member.isAdmin && !m.isAdmin}
           class:member={m.id_code == $member.id_code}
           title={$member.isAdmin && !m.isAdmin ? 'Bannir' : ''}
-          on:click={() => {
-						$member.isAdmin && !m.isAdmin &&  send('ban', { member_id: m.id_code });
-					}}
+          on:click={(e)=>ban(m)}
           on:keydown={() => {}}
         >
           {m.username}

frontend/src/routes/room/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 
     import {goto} from "$app/navigation";
+
 </script>
 
 <div class="rooms">
@@ -26,4 +27,5 @@
         display: flex;
         gap: 20px;
     }
+
 </style>

frontend/src/routes/room/[...slug]/+page.svelte

@@ -102,6 +102,7 @@
           return;
         }
         if ($room != null) {
+          info("Départ", `*${data.member.username}* n'est plus dans la salle`);
           $room.members = [
             ...$room.members.filter((r) => "waiter_id" in r || r.id_code != data.member.id_code)
           ];
@@ -211,6 +212,7 @@
 
       case "joined":
         if ($room != null) {
+          info("Arrivée", `*${data.member.username}* a rejoint la salle`)
           $room.members = [
             ...$room?.members.filter(
               (m) =>
@@ -358,6 +360,7 @@
             $parcours.validated = $parcours.pb.mistakes <= $parcours.max_mistakes;
           }
         }
+        return
       case "challenge_change":
         if ($parcours != null && $member != null && !!$parcours.challenges[data.member]) {
           $parcours.challenges[data.member].challenges = $parcours.challenges[
@@ -447,6 +450,7 @@
 
   $: console.log("edit", $page.url.searchParams.get("a"));
   onDestroy(() => {
+
     ws.close(1000);
   });
 

frontend/src/routes/room/create/+page.svelte

@@ -7,6 +7,8 @@
   let name = "";
   let pseudo = "";
   const { isAuth } = getContext("auth");
+  let loading = false;
+  const { error } = getContext("notif");
 </script>
 
 <div class="container">
@@ -20,15 +22,27 @@
       class="primary-btn"
       on:click={() => {
         console.log('(NAME)', name)
+        loading = true
 		createRoom({ name }, !$isAuth ? pseudo : null).then((r) => {
+
             if(!$isAuth){
                 sessionStorage.setItem('reconnect', r.member)
             }
 			      goto(`/room/${r.room}`);
+            loading= false
+		}).catch((e) => {
+      error("Erreur", "Une erreur est survenue lors de la création de la salle")
+      loading= false
+      console.log(e);
     });
 	}}
     >
-      Valider
+      {#if loading}
+        <span class="spinner"></span>
+      {:else}
+        Créer
+      {/if}
+
     </button>
   </div>
 </div>
@@ -51,4 +65,10 @@
     display: flex;
     justify-content: center;
   }
+
+  .spinner {
+    width: 15px;
+    height: 15px;
+    border-width: 2px !important;
+  }
 </style>

frontend/src/routes/room/join/+page.svelte

@@ -4,7 +4,6 @@
 
 
   let room = "";
-
 </script>
 
 <div class="container">

frontend/src/routes/signin/+page.svelte

@@ -11,6 +11,7 @@
 	$: {
 		!$initialLoading && !!$isAuth && goto('/dashboard');
 	}
+	let loading = false
 </script>
 
 <div class="parent">
@@ -37,13 +38,19 @@
 		<button
 			class="primary-btn"
 			on:click={() => {
-				login(username, password).catch((r) => {
+				loading = true;
+				login(username, password).then(()=>{loading=false}).catch((r) => {
 					errors = { ...errors, ...r.data.detail };
+					loading = false;
 				});
 			}}
 
 		>
+			{#if loading}
+				<span class="spinner" />
+			{:else}
 				Se connecter
+			{/if}
 		</button>
 	</div>
 </div>
@@ -65,4 +72,9 @@
 			gap: 20px;
 		}
 	}
+	.spinner{
+		width: 15px;
+		height: 15px;
+		border-width: 2px!important;
+	}
 </style>

frontend/src/routes/signup/+page.svelte

@@ -18,6 +18,7 @@
 	const myForm = form(username, password, confirm);
 
 	$: !$initialLoading && !!$isAuth && goto('/dashboard');
+	let loading = false
 </script>
 
 <div class="parent">
@@ -62,7 +63,9 @@
 		<button
 			class="primary-btn"
 			on:click={() => {
-				register($username.value, $password.value, $confirm.value).catch((r) => {
+				loading = true
+				register($username.value, $password.value, $confirm.value).then(()=>{loading=false}).catch((r) => {
+					loading = false
 					console.log('ERREUR', r);
 
 					errors = { ...errors, ...r.data.detail };
@@ -70,7 +73,12 @@
 			}}
 			disabled={!$myForm.valid}
 		>
+<!--			loading et span.spinner else text-->
+			{#if loading}
+				<span class="spinner"></span>
+			{:else}
 				S'inscrire
+			{/if}
 		</button>
 	</div>
 </div>
@@ -92,4 +100,9 @@
 			gap: 20px;
 		}
 	}
+	.spinner{
+		width: 15px;
+		height: 15px;
+		border-width: 2px!important;
+	}
 </style>

frontend/src/store/ws.ts

@@ -9,7 +9,6 @@ export const connect = (url,) => {
     const ws = new ReconnectingWebSocket(url);
     
     ws.onmessage = (m) => {
-        console.log('MESAGE', m)
 
 		messages.update((o) => [JSON.parse(m.data), ...o]);
         Object.values(get(handlers)).map(h => {