Merge branch 'issue/42-Detection' into 'development'

Issue #42: Detection on user leaving

See merge request !39

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}>

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 (