diff --git a/src/components/fieldsDisplayForm/DisplayForm.js b/src/components/fieldsDisplayForm/DisplayForm.js index a1f257e236ce521afed7665a2af787941c2bac54..8c5d8f21f8bb5492aec3961024647904cb92aa2b 100644 --- a/src/components/fieldsDisplayForm/DisplayForm.js +++ b/src/components/fieldsDisplayForm/DisplayForm.js @@ -17,39 +17,39 @@ import { FormEditionContext } from "../../contexts/FormContext"; import useForm from "../../contexts/useForm"; import SubmitButton from "./SubmitButton"; /** CSS styles used on page components */ -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ app: { margin: "0", padding: "40px", display: "flex", ["@media (max-width: 600px)"]: { flexDirection: "column-reverse", - justifyContent: "flex-end", + justifyContent: "flex-end" }, paddingBottom: "78px", ["@media (min-width: 600px)"]: { - minHeight: "calc(100vh - 92.4px - 78px -60px)", + minHeight: "calc(100vh - 92.4px - 78px -60px)" }, minHeight: "calc(100vh - 71.6px - 78px -60px)", - marginBottom: "60px", + marginBottom: "60px" }, addButton: { - fontSize: "100%", + fontSize: "100%" }, sideMenuFormatingGrid: { ["@media (max-width:600px)"]: { - marginTop: "-90px", - }, + marginTop: "-90px" + } }, sizeFormating: { ["@media (max-width:600px)"]: { ["@media (max-width:430px)"]: { marginLeft: "1%", - width: "95%", + width: "95%" }, - marginLeft: "2%", - }, - }, + marginLeft: "2%" + } + } })); /** CSS style used through Material Ui. */ const theme = createMuiTheme({ @@ -57,19 +57,19 @@ const theme = createMuiTheme({ MuiInput: { underline: { "&:before": { - borderBottom: "1px solid #35c7fc", + borderBottom: "1px solid #35c7fc" }, "&:after": { - borderBottom: "1px solid #3f51b5", - }, - }, + borderBottom: "1px solid #3f51b5" + } + } }, MuiButton: { label: { - color: "white", - }, - }, - }, + color: "white" + } + } + } }); /** Main function that returns the children that composes the form creation or edition page. */ function DisplayForm() { @@ -90,6 +90,10 @@ function DisplayForm() { */ useEffect(() => { setValidToSend(verifyError(form)); + window.onbeforeunload = confirmExit; + function confirmExit() { + return "show warning"; + } }, [form]); return ( <MuiThemeProvider theme={theme}> diff --git a/src/pages/AnswerForm.js b/src/pages/AnswerForm.js index f86d9093decc5391f6306dbf863053d617b9482a..22b11ae66d6a39585c6d67ef5d6250b5f8530264 100644 --- a/src/pages/AnswerForm.js +++ b/src/pages/AnswerForm.js @@ -222,6 +222,10 @@ function AnwserForm() { /** First thing the page does is getting the form from the API. */ useEffect(() => { getForm(id); + window.onbeforeunload = confirmExit; + function confirmExit() { + return "show warning"; + } }, []); return (