Display back button warning in app installation

Author: oharsta

account-gui/src/locale/en.js

@@ -261,7 +261,10 @@ const en = {
         finalizedRegistration: "Existing recovery method",
         finalizedRegistrationExplanation: "You are not allowed to register a phone number, as you already have an existing backup code as recovery method.",
         finalizedRegistrationBackupCode: "Your recovery code is: ",
-        next: "Proceed"
+        next: "Proceed",
+        backButtonWarning: "Your eduID app is successfully added to your account. You are not allowed to change your recovery code using the back button.",
+        backButtonWarningTitle: "Back button not recommended",
+        backButtonWarningConfirmation: "Ok",
     },
     phoneVerification: {
         header: "Add a recovery phone number",

account-gui/src/locale/nl.js

@@ -260,7 +260,10 @@ const nl = {
         finalizedRegistration: "Bestaande herstelmethode",
         finalizedRegistrationExplanation: "Je mag geen telefoonnummer registreren, omdat je al een bestaande back-upcode als herstelmethode hebt.",
         finalizedRegistrationBackupCode: "Je herstelcode is: ",
-        next: "Doorgaan"
+        next: "Doorgaan",
+        backButtonWarning: "Je eduID-app is succesvol toegevoegd aan je account. Je kunt je herstelcode niet wijzigen met de terugknop.",
+        backButtonWarningTitle: "Terugknop niet aanbevolen",
+        backButtonWarningConfirmation: "Ok",
     },
     phoneVerification: {
         header: "Voeg een hersteltelefoonnummer toe",

account-gui/src/routes/RecoveryCode.svelte

@@ -6,6 +6,7 @@
     import {generateBackupCode} from "../api";
     import Spinner from "../components/Spinner.svelte";
     import {navigate} from "svelte-routing";
+    import Modal from "../components/Modal.svelte";
 
     const RECOVERY_CODE = "recovery-code";
     const REDIRECT = "redirect";
@@ -15,13 +16,20 @@
     let recoveryCode;
     let redirect;
     let copied = false;
+    let showModalBackButton = false;
 
     const onConfirmRefresh = e => {
         e.preventDefault();
         window.removeEventListener("beforeunload", onConfirmRefresh, {capture: true});
         return e.returnValue = I18n.t("Recovery.LeaveConfirmation.COPY");
     }
 
+    const handlePopState = (event) => {
+        event.preventDefault();
+        showModalBackButton = true;
+        window.history.pushState(null, null, window.location.pathname); // Prevent navigation
+    };
+
     onMount(() => {
         $links.displayBackArrow = false;
 
@@ -37,6 +45,10 @@
             sessionStorage.setItem(RECOVERY_CODE, recoveryCode);
             sessionStorage.setItem(REDIRECT, redirect);
             showSpinner = false;
+
+            window.addEventListener('popstate', handlePopState);
+            // Push a state so the first "back" triggers popstate
+            window.history.pushState(null, null, window.location.pathname);
         }).catch(() => {
             showSpinner = false;
             recoveryCode = sessionStorage.getItem(RECOVERY_CODE);
@@ -46,6 +58,7 @@
 
     onDestroy(() => {
         window.removeEventListener("beforeunload", onConfirmRefresh, {capture: true});
+        window.removeEventListener('popstate', handlePopState);
     });
 
     const copyToClipboard = () => {
@@ -106,3 +119,15 @@
             href={"/next"}
             label={I18n.t("Recovery.Continue.COPY")}/>
 </div>
+{#if showModalBackButton}
+    <Modal submit={() => {
+        showModalBackButton = false;
+        window.removeEventListener('popstate', handlePopState);
+    }}
+           cancel={null}
+           warning={false}
+           question={I18n.t("recovery.backButtonWarning")}
+           confirmTitle={I18n.t("recovery.backButtonWarningConfirmation")}
+           title={I18n.t("recovery.backButtonWarningTitle")}>
+    </Modal>
+{/if}

myconext-gui/src/locale/en.js

@@ -441,7 +441,10 @@ const en = {
         finalizedRegistration: "Existing recovery method",
         finalizedRegistrationExplanation: "You are not allowed to register a phone number, as you already have an existing backup code as recovery method. You can change your recovery-method ",
         finalizedRegistrationHere: "here.",
-        finalizedRegistrationBackupCode: "Your recovery code is: "
+        finalizedRegistrationBackupCode: "Your recovery code is: ",
+        backButtonWarning: "Your eduID app is successfully added to your account. You are not allowed to change your recovery code using the back button.",
+        backButtonWarningTitle: "Back button not recommended",
+        backButtonWarningConfirmation: "Ok",
     },
     phoneVerification: {
         header: "Add a recovery phone number",

myconext-gui/src/locale/nl.js

@@ -441,7 +441,10 @@ const nl = {
         finalizedRegistration: "Bestaande herstelmethode",
         finalizedRegistrationExplanation: "Je mag geen telefoonnummer registreren, omdat je al een bestaande back-upcode als herstelmethode hebt. Wijzig je herstelmethode ",
         finalizedRegistrationHere: "hier.",
-        finalizedRegistrationBackupCode: "Je herstelcode is: "
+        finalizedRegistrationBackupCode: "Je herstelcode is: ",
+        backButtonWarning: "Je eduID-app is succesvol toegevoegd aan je account. Je kunt je herstelcode niet wijzigen met de terugknop.",
+        backButtonWarningTitle: "Terugknop niet aanbevolen",
+        backButtonWarningConfirmation: "Ok",
     },
     phoneVerification: {
         header: "Voeg een hersteltelefoonnummer toe",

myconext-gui/src/routes/tiqr/RecoveryCode.svelte

@@ -5,6 +5,7 @@
     import {generateBackupCode, regenerateBackupCode} from "../../api";
     import Spinner from "../../components/Spinner.svelte";
     import {navigate} from "svelte-routing";
+    import Modal from "../../components/Modal.svelte";
 
     export let change = false;
 
@@ -13,13 +14,21 @@
     let showSpinner = true;
     let recoveryCode = "";
     let copied = false;
+    let showModalBackButton = false;
+
 
     const onConfirmRefresh = e => {
         e.preventDefault();
         window.removeEventListener("beforeunload", onConfirmRefresh, {capture: true});
         return e.returnValue = I18n.t("Recovery.LeaveConfirmation.COPY");
     }
 
+    const handlePopState = (event) => {
+        event.preventDefault();
+        showModalBackButton = true;
+        window.history.pushState(null, null, window.location.pathname); // Prevent navigation
+    };
+
     onMount(() => {
         const promise = change ? regenerateBackupCode : generateBackupCode;
         promise()
@@ -29,6 +38,10 @@
                 sessionStorage.setItem(RECOVERY_CODE, recoveryCode);
                 showSpinner = false;
                 window.addEventListener("beforeunload", onConfirmRefresh, {capture: true});
+
+                window.addEventListener('popstate', handlePopState);
+                // Push a state so the first "back" triggers popstate
+                window.history.pushState(null, null, window.location.pathname);
             }).catch(() => {
             showSpinner = false;
             recoveryCode = sessionStorage.getItem(RECOVERY_CODE);
@@ -37,6 +50,7 @@
 
     onDestroy(() => {
         window.removeEventListener("beforeunload", onConfirmRefresh, {capture: true});
+        window.removeEventListener('popstate', handlePopState);
     });
 
     const copyToClipboard = () => {
@@ -47,6 +61,7 @@
 
     const next = () => {
         window.removeEventListener("beforeunload", onConfirmRefresh, {capture: true});
+        window.removeEventListener('popstate', handlePopState);
         navigate(change ? `/change-congrats` : `/congrats`);
     }
 
@@ -118,4 +133,16 @@
                     label={I18n.t("Recovery.Continue.COPY")}/>
         </div>
     </div>
-</div>
+</div>
+{#if showModalBackButton}
+    <Modal submit={() => {
+        showModalBackButton = false;
+        window.removeEventListener('popstate', handlePopState);
+    }}
+           cancel={null}
+           warning={false}
+           question={I18n.t("recovery.backButtonWarning")}
+           confirmTitle={I18n.t("recovery.backButtonWarningConfirmation")}
+           title={I18n.t("recovery.backButtonWarningTitle")}>
+    </Modal>
+{/if}