Skip to content

Commit

Permalink
Merge pull request #11 from DISIC/dev
Browse files Browse the repository at this point in the history 
fix: fixing authentication url
  • Loading branch information
@HamzaKhait
HamzaKhait authored Mar 20, 2024
2 parents ec704ef + 817ce0e commit 9c5fe7a
Showing 1 changed file with 5 additions and 238 deletions.
243 changes: 5 additions & 238 deletions src/pages/home/HomeForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,13 @@ import { Input } from '@codegouvfr/react-dsfr/Input';
import { Button } from '@codegouvfr/react-dsfr/Button';
import { Badge } from '@codegouvfr/react-dsfr/Badge';
import styles from './Home.module.css';
import AuthModal from './AuthModal';
import { Accordion } from '@codegouvfr/react-dsfr/Accordion';
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';
import { createModal } from '@codegouvfr/react-dsfr/Modal';
import { Checkbox } from '@codegouvfr/react-dsfr/Checkbox';
import CalendarModalComponent from './CalendarModal';
import Authstyles from './AuthModal.module.css';

const modal = createModal({
id: 'AgentConnect',
isOpenedByDefault: false,
});

interface AuthModalProps {
roomName: string;
Expand All @@ -39,17 +29,6 @@ function HomeForm(props: AuthModalProps) {
const [message, setMessage] = useState<JSX.Element | string>(<></>);
const [messageType, setMessageType] = useState<string>('');
const [open, setOpen] = useState(false);
const [msg, setMsg] = useState<string | null>('');
const [buttonMsg, setButtonMsg] = useState(
'Recevoir le code de vérification par email'
);
const [isCheked, setIsChecked] = useState(false);

const copyLink = () => {
navigator.clipboard.writeText(window.location.href + props.roomName);
setOpen(true);
};
const navigate = useNavigate();

const change = (e: string) => {
verifyAndSetVAlue(e);
Expand Down Expand Up @@ -170,110 +149,6 @@ function HomeForm(props: AuthModalProps) {
setOpen(false);
};

function roomNameConstraintOk(roomName: string) {
/**
* Verify if the room name is valid
* @param {String} roomName The room name
* @return {Boolean} True if the room name is valid, false otherwise
*/
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);
}

useEffect(() => {
props.setIsWhitelisted(null);
const mail = localStorage.getItem('email');
const checked1 = localStorage.getItem('checked');
const checked = checked1 === 'true';
if (checked) {
if (mail) {
props.setEmail(mail);
}
} else {
props.setEmail('');
localStorage.setItem('email', '');
}
setIsChecked(checked);
setMsg(null);
setButtonMsg('Recevoir le code de vérification par email');
}, []);

const agentConnect = (room: string) => {
fetch(
`${import.meta.env.VITE_BASE_URL}/auth/login_authorize?room=${room}`,
{
redirect: 'manual',
}
).then(res => {
if (res.type === 'opaqueredirect') {
window.location.href = res.url;
} else {
// handle normally / pass on to next handler
window.location.href = res.url;
}
});
};
const onCheck = () => {
setIsChecked(!isCheked);
localStorage.setItem('checked', (!isCheked).toString());
};

const mailchanger = (e: any) => {
props.setEmail(e.target.value);
localStorage.setItem('email', e.target.value);
};

const mailSender = (e: any) => {
props.sendEmail(e);
setButtonMsg('Email non reçu ? Cliquez ici pour recevoir un nouvel email');
};

function handle(e: any) {
e.preventDefault();
if (!props.roomName) {
const room = generateRoomName();
props.setRoomName(room);
if (roomNameConstraintOk(room)) {
api.get('/feedback/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('/feedback/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);
}
});
});
}
}

const AlertMui = React.forwardRef(function Alert(props, ref) {
return (
<MuiAlert
Expand All @@ -289,20 +164,14 @@ function HomeForm(props: AuthModalProps) {
</MuiAlert>
);
});
const handleKeypress = (e: any) => {
//it triggers by pressing the enter key
if (e.code === 'Enter') {
handle(e);
}
};

const up = '+';
const down = '--';
return (
<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>
<form className={styles.form}>
<div className={styles.form}>
<div className={styles.confButtons}>
<Input
style={{ width: '100%' }}
Expand All @@ -317,7 +186,6 @@ function HomeForm(props: AuthModalProps) {
value: props.roomName,
placeholder: 'Saisissez un nom de conférence...',
onChange: (e: any) => change(e.target.value),
onKeyPress: e => handleKeypress(e),
}}
/>
<Button
Expand All @@ -330,108 +198,7 @@ function HomeForm(props: AuthModalProps) {
</Button>
</div>
<div className={styles.confButtons}>
{/* <AuthModal {...props} setOpen={setOpen} buttons={props.buttons} /> */}
<>
<modal.Component title="Vous êtes l’organisateur de la réunion ?">
<p>
<small>
Nous avons besoin de vérifier votre identité afin de créer la
conférence {props.roomName}.
</small>
</p>
<button type="button">
<span className={Authstyles.hidden} id="input-desc-error">
text
</span>
<img
alt="agentConnect"
src="/static/media/ac-btn-bleu.svg"
onClick={() => agentConnect(props.roomName)}
/>
</button>
<p>
<small>
<a href="https://agentconnect.gouv.fr/">
Qu'est ce que Agent Connect ?
</a>
</small>
</p>
<Input
label={
<span id="input3-desc-error">
Ou saissez votre adresse email professionnelle:
</span>
}
nativeInputProps={{
'aria-describedby': 'input3-desc-error',
'aria-labelledby': 'input3-desc-error',
id: 'input3',
value: props.email,
onChange: e => mailchanger(e),
required: true,
}}
/>
<Checkbox
options={[
{
label: 'se rappeler de mon adresse email',
nativeInputProps: {
checked: isCheked,
name: 'checkboxes-1',
value: 'value1',
onChange: () => onCheck(),
},
},
]}
/>
<Button
className={Authstyles.modalButtons}
onClick={() => mailSender(props.roomName)}
>
<span className={Authstyles.hidden} id="input-desc-error">
text
</span>
{buttonMsg}
</Button>
{msg}
{props.isWhitelisted === false ? (
<p>
<Badge severity="error">
votre adresse email n'est pas valide. Merci de saisir votre
adresse email professionelle.
</Badge>
</p>
) : null}
{props.isWhitelisted === true ? (
<p>
<Badge severity="success">Message envoyé.</Badge>
</p>
) : null}
</modal.Component>
<div className={Authstyles.buttons}>
<Button
type="submit"
onClick={handle}
className={Authstyles.button}
disabled={roomNameConstraintOk(props.roomName) ? false : true}
>
Rejoindre ou créer
</Button>
<br />
{props.buttons ? (
<div id="Calendar">
<CalendarModalComponent {...props} />
<Button
className={Authstyles.button}
nativeButtonProps={{ id: 'copyButton' }}
onClick={copyLink}
>
Copier le lien
</Button>
</div>
) : null}
</div>
</>
<AuthModal {...props} setOpen={setOpen} buttons={props.buttons} />
<Button
className={styles.plusButton}
onClick={() => props.setButtons(!props.buttons)}
Expand All @@ -440,7 +207,7 @@ function HomeForm(props: AuthModalProps) {
{props.buttons ? down : up}
</Button>
</div>
</form>
</div>
<p>{message}</p>
<Badge severity="info">
Actuellement, il y a 0 conférences et 0 participants.
Expand Down Expand Up @@ -504,4 +271,4 @@ function generateRoomName() {
Math.floor(Math.random() * 10) +
Math.floor(Math.random() * 10)
);
}
}

0 comments on commit 9c5fe7a

Please sign in to comment.