Added Unsaved Changes Warning

app/components/UnsavedChangesWarning.js

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+
+const UnsavedChangesWarning = () => {
+  useEffect(() => {
+    const handleBeforeUnload = (event) => {
+      event.preventDefault();
+      event.returnValue = ""; // Современные браузеры требуют, чтобы значение было пустой строкой
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, []);
+
+  return null;
+};
+
+export default UnsavedChangesWarning;

app/questionnaire/layout.jsx

@@ -12,7 +12,7 @@ import FormNavigationButton from "../components/FormNavigationButton";
 import Building from "../model/Building";
 import monthlyDurationIntervals from "../model/reference-data/monthlyDurationIntervals";
 import CustomAppBar from "../components/MyAppBar";
-import Background from "../components/Background";
+import UnsavedChangesWarning from "../components/UnsavedChangesWarning";
 
 const steps = [
   {
@@ -156,6 +156,7 @@ export default function QuestionnaireLayout({ children }) {
 
   return (
     <>
+      <UnsavedChangesWarning />
       <CustomAppBar color="secondary" />
       <Container
         maxWidth="lg"

app/results/page.jsx

@@ -17,8 +17,9 @@ import {
   Button,
   TextField,
 } from "@mui/material";
-import Background from "../components/Background";
 import MyAppBar from "../components/MyAppBar";
+import UnsavedChangesWarning from "../components/UnsavedChangesWarning";
+import Link from "next/link";
 
 const biluxSystem = {
   heatGenerator:
@@ -203,6 +204,7 @@ const SuccessfulResult = ({ inputData }) => {
     <Grid container spacing={2} mt={1}>
       <Grid item xs={12} md={6} spacing={2}>
         <Button
+          LinkComponent={Link}
           href="/questionnaire/step-7"
           color="primary"
           variant="contained"
@@ -311,9 +313,12 @@ export default function Results() {
   return !inputData.city ? (
     router.push("/")
   ) : (
-    <Container maxWidth="lg">
-      <MyAppBar color="transparent" />
-      <SuccessfulResult inputData={inputData} />
-    </Container>
+    <>
+      <UnsavedChangesWarning />
+      <Container maxWidth="lg">
+        <MyAppBar color="transparent" />
+        <SuccessfulResult inputData={inputData} />
+      </Container>
+    </>
   );
 }