Merge pull request #14 from DISIC/dev

Dev
DISIC · Mar 27, 2024 · d149714 · d149714
2 parents 0b411ac + b93624c
commit d149714
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 53 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -302,6 +302,8 @@ function App() {
                 sendEmail={sendEmail}
                 joinConference={joinConference}
                 authenticated={authenticated}
+                conferenceNumber={conferenceNumber}
+                participantNumber={participantsNumber}
               />
             }
           />

diff --git a/src/pages/home/AuthModal.tsx b/src/pages/home/AuthModal.tsx
@@ -4,10 +4,8 @@ import { Input } from '@codegouvfr/react-dsfr/Input';
 import { Checkbox } from '@codegouvfr/react-dsfr/Checkbox';
 import { Badge } from '@codegouvfr/react-dsfr/Badge';
 import CalendarModalComponent from './CalendarModal';
-import api from '../../axios/axios';
 
 import { useState, useEffect } from 'react';
-import { redirect, useNavigate } from 'react-router-dom';
 
 import styles from './AuthModal.module.css';
 
@@ -28,6 +26,7 @@ interface AuthModalProps {
   authenticated: boolean | null;
   setOpen: (e: boolean) => void;
   buttons: boolean;
+  openModal: boolean;
 }
 
 function roomNameConstraintOk(roomName: string) {
@@ -54,51 +53,9 @@ export default function AuthModal(props: AuthModalProps) {
     props.setOpen(true);
   };
 
-  const navigate = useNavigate();
-
-  function handle(e: any) {
-    e.preventDefault();
-    if (!props.roomName) {
-      const room = generateRoomName();
-      props.setRoomName(room);
-      if (roomNameConstraintOk(room)) {
-        api.get('/authentication/whereami').then(res => {
-          if (res.data.toLowerCase() == 'internet') {
-            if (!props.authenticated) {
-              modal.open();
-            }
-            if (props.authenticated) {
-              props.joinConference(room);
-            }
-          }
-          if (res.data.toLowerCase() !== 'internet') {
-            props.joinConference(room);
-          }
-        });
-      }
-    } else if (roomNameConstraintOk(props.roomName)) {
-      api
-        .get('/roomExists/' + props.roomName)
-        .then(res => {
-          return navigate('/' + props.roomName);
-        })
-        .catch(err => {
-          api.get('/authentication/whereami').then(res => {
-            if (res.data.toLowerCase() == 'internet') {
-              if (!props.authenticated) {
-                return modal.open();
-              }
-              if (props.authenticated) {
-                return props.joinConference(props.roomName);
-              }
-            }
-            if (res.data.toLowerCase() !== 'internet') {
-              return props.joinConference(props.roomName);
-            }
-          });
-        });
-    }
-  }
+  useEffect(() => {
+    props.openModal ? modal.open() : null;
+  }, [props.openModal]);
 
   useEffect(() => {
     props.setIsWhitelisted(null);
@@ -206,6 +163,7 @@ export default function AuthModal(props: AuthModalProps) {
         <Button
           className={styles.modalButtons}
           onClick={() => mailSender(props.roomName)}
+          type="button"
         >
           <span className={styles.hidden} id="input-desc-error">
             text
@@ -229,10 +187,10 @@ export default function AuthModal(props: AuthModalProps) {
       </modal.Component>
       <div className={styles.buttons}>
         <Button
-          onClick={handle}
+          // onClick={handle}
+          type="submit"
           className={styles.button}
           disabled={!roomNameConstraintOk(props.roomName)}
-          type="submit"
         >
           Rejoindre ou créer
         </Button>
@@ -244,6 +202,7 @@ export default function AuthModal(props: AuthModalProps) {
               className={styles.button}
               nativeButtonProps={{ id: 'copyButton' }}
               onClick={copyLink}
+              type="button"
             >
               Copier le lien
             </Button>

diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -13,6 +13,8 @@ interface AuthModalProps {
   setRoomName: (e: any) => void;
   joinConference: (e: any) => void;
   authenticated: boolean | null;
+  conferenceNumber: number;
+  participantNumber: number;
 }
 
 function Home(props: AuthModalProps) {

diff --git a/src/pages/home/HomeForm.tsx b/src/pages/home/HomeForm.tsx
@@ -9,6 +9,8 @@ import { Alert } from '@codegouvfr/react-dsfr/Alert';
 import MuiAlert from '@mui/material/Alert';
 import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
 import ShuffleIcon from '@mui/icons-material/Shuffle';
+import api from '../../axios/axios';
+import { redirect, useNavigate } from 'react-router-dom';
 import { fr } from '@codegouvfr/react-dsfr';
 
 interface AuthModalProps {
@@ -23,12 +25,68 @@ interface AuthModalProps {
   authenticated: boolean | null;
   setButtons: (a: boolean) => void;
   buttons: boolean;
+  conferenceNumber: number;
+  participantNumber: number;
 }
 
 function HomeForm(props: AuthModalProps) {
   const [message, setMessage] = useState<JSX.Element | string>(<></>);
   const [messageType, setMessageType] = useState<string>('');
   const [open, setOpen] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
+
+  const navigate = useNavigate();
+
+  function handle() {
+    function roomNameConstraintOk(roomName: string) {
+      const regex = new RegExp(
+        '^(?=(?:[a-zA-Z0-9]*[a-zA-Z]))(?=(?:[a-zA-Z0-9]*[0-9]){3})[a-zA-Z0-9]{10,}$'
+      );
+      return regex.test(roomName);
+    }
+    if (!props.roomName) {
+      const room = generateRoomName();
+      props.setRoomName(room);
+      if (roomNameConstraintOk(room)) {
+        api.get('/authentication/whereami').then(res => {
+          if (res.data.toLowerCase() == 'internet') {
+            if (!props.authenticated) {
+              // modal.open();
+              setOpenModal(true);
+            }
+            if (props.authenticated) {
+              props.joinConference(room);
+            }
+          }
+          if (res.data.toLowerCase() !== 'internet') {
+            props.joinConference(room);
+          }
+        });
+      }
+    } else if (roomNameConstraintOk(props.roomName)) {
+      api
+        .get('/roomExists/' + props.roomName)
+        .then(res => {
+          return navigate('/' + props.roomName);
+        })
+        .catch(err => {
+          api.get('/authentication/whereami').then(res => {
+            if (res.data.toLowerCase() == 'internet') {
+              if (!props.authenticated) {
+                setOpenModal(true);
+              }
+              if (props.authenticated) {
+                return props.joinConference(props.roomName);
+              }
+            }
+            if (res.data.toLowerCase() !== 'internet') {
+              return props.joinConference(props.roomName);
+            }
+          });
+        });
+    }
+    setOpenModal(false);
+  }
 
   const change = (e: string) => {
     verifyAndSetVAlue(e);
@@ -171,7 +229,13 @@ function HomeForm(props: AuthModalProps) {
     <div className={styles.HomeForm}>
       <h3>La WebConférence de l'État pour tous les agents publics</h3>
       <p>Audio, vidéo, chat, partage d'écran et de documents</p>
-      <div className={styles.form}>
+      <form
+        className={styles.form}
+        onSubmit={e => {
+          e.preventDefault();
+          handle();
+        }}
+      >
         <div className={styles.confButtons}>
           <Input
             style={{ width: '100%' }}
@@ -188,30 +252,39 @@ function HomeForm(props: AuthModalProps) {
               onChange: (e: any) => change(e.target.value),
             }}
           />
+
           <Button
             className={styles.plusButton}
             onClick={e => {
               e.preventDefault();
               verifyAndSetVAlue(generateRoomName());
             }}
+            type="button"
           >
             <ShuffleIcon />
           </Button>
         </div>
         <div className={styles.confButtons}>
-          <AuthModal {...props} setOpen={setOpen} buttons={props.buttons} />
+          <AuthModal
+            {...props}
+            setOpen={setOpen}
+            buttons={props.buttons}
+            openModal={openModal}
+          />
           <Button
             className={styles.plusButton}
             onClick={() => props.setButtons(!props.buttons)}
             nativeButtonProps={{ id: 'plusButton' }}
+            type="button"
           >
             {props.buttons ? down : up}
           </Button>
         </div>
-      </div>
+      </form>
       <p>{message}</p>
       <Badge severity="info">
-        Actuellement, il y a 0 conférences et 0 participants.
+        Actuellement, il y a {props.conferenceNumber} conférences et{' '}
+        {props.participantNumber} participants.
       </Badge>
       <hr />
       <Alert