update: popup the dialog warning at a later stage of registration

Author: yaya-usman

src/components/structures/auth/Registration.tsx

@@ -139,20 +139,8 @@ export default class Registration extends React.Component<IProps, IState> {
 
     componentDidMount() {
         this.replaceClient(this.props.serverConfig);
-        //triggers a confirmation dialog for data loss before page unloads/refreshes
-        window.addEventListener("beforeunload", this.unloadCallback);
     }
 
-    componentWillUnmount() {
-        window.removeEventListener("beforeunload", this.unloadCallback);
-    }
-
-    private unloadCallback = (event: BeforeUnloadEvent) => {
-        event.preventDefault();
-        event.returnValue = "";
-        return "";
-    };
-
     // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
     // eslint-disable-next-line
     UNSAFE_componentWillReceiveProps(newProps) {

src/components/views/auth/CaptchaForm.tsx

@@ -65,12 +65,21 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
             );
             this.recaptchaContainer.current.appendChild(scriptTag);
         }
+        //triggers a confirmation dialog for data loss before page unloads/refreshes
+        window.addEventListener("beforeunload", this.unloadCallback);
     }
 
     componentWillUnmount() {
         this.resetRecaptcha();
+        window.removeEventListener("beforeunload", this.unloadCallback);
     }
 
+    private unloadCallback = (event: BeforeUnloadEvent) => {
+        event.preventDefault();
+        event.returnValue = "";
+        return "";
+    };
+
     // Borrowed directly from: https://github.com/codeep/react-recaptcha-google/commit/e118fa5670fa268426969323b2e7fe77698376ba
     private isRecaptchaReady(): boolean {
         return typeof window !== "undefined" &&

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -320,8 +320,20 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
 
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
+        //triggers a confirmation dialog for data loss before page unloads/refreshes
+        window.addEventListener("beforeunload", this.unloadCallback);
     }
 
+    componentWillUnmount() {
+        window.removeEventListener("beforeunload", this.unloadCallback);
+    }
+
+    private unloadCallback = (event: BeforeUnloadEvent) => {
+        event.preventDefault();
+        event.returnValue = "";
+        return "";
+    };
+
     private togglePolicy(policyId: string) {
         const newToggles = {};
         for (const policy of this.state.policies) {