From a306054b2c0e02f9d605371837dbce6a817ff84f Mon Sep 17 00:00:00 2001
From: youssefElMkhantar <youssef.mkht@gmail.com>
Date: Fri, 22 Mar 2024 17:21:36 +0100
Subject: [PATCH] fix(pencil): activating join button when roomName is valide

---
 src/pages/home/AuthModal.tsx | 21 ++++++++++++++++-----
 src/pages/home/HomeForm.tsx  |  5 +++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/pages/home/AuthModal.tsx b/src/pages/home/AuthModal.tsx
index 49bc896..09a52c6 100644
--- a/src/pages/home/AuthModal.tsx
+++ b/src/pages/home/AuthModal.tsx
@@ -56,7 +56,8 @@ export default function AuthModal(props: AuthModalProps) {
 
   const navigate = useNavigate();
 
-  function handle() {
+  function handle(e: any) {
+    e.preventDefault();
     if (!props.roomName) {
       const room = generateRoomName();
       props.setRoomName(room);
@@ -118,9 +119,14 @@ export default function AuthModal(props: AuthModalProps) {
   }, []);
 
   const agentConnect = (room: string) => {
-    fetch(`${import.meta.env.VITE_BASE_URL}/authentication/login_authorize?room=${room}`, {
-      redirect: 'manual',
-    }).then(res => {
+    fetch(
+      `${
+        import.meta.env.VITE_BASE_URL
+      }/authentication/login_authorize?room=${room}`,
+      {
+        redirect: 'manual',
+      }
+    ).then(res => {
       if (res.type === 'opaqueredirect') {
         window.location.href = res.url;
       } else {
@@ -222,7 +228,12 @@ export default function AuthModal(props: AuthModalProps) {
         ) : null}
       </modal.Component>
       <div className={styles.buttons}>
-        <Button onClick={handle} className={styles.button}>
+        <Button
+          onClick={handle}
+          className={styles.button}
+          disabled={!roomNameConstraintOk(props.roomName)}
+          type="submit"
+        >
           Rejoindre ou créer
         </Button>
         <br />
diff --git a/src/pages/home/HomeForm.tsx b/src/pages/home/HomeForm.tsx
index 7f69c81..a774876 100644
--- a/src/pages/home/HomeForm.tsx
+++ b/src/pages/home/HomeForm.tsx
@@ -190,7 +190,8 @@ function HomeForm(props: AuthModalProps) {
           />
           <Button
             className={styles.plusButton}
-            onClick={() => {
+            onClick={e => {
+              e.preventDefault();
               verifyAndSetVAlue(generateRoomName());
             }}
           >
@@ -271,4 +272,4 @@ function generateRoomName() {
     Math.floor(Math.random() * 10) +
     Math.floor(Math.random() * 10)
   );
-}
\ No newline at end of file
+}