From ac39d61653edb865b1df0357883c7401c6c84659 Mon Sep 17 00:00:00 2001 From: yaya-usman Date: Wed, 20 Apr 2022 21:38:44 +0300 Subject: [PATCH 1/9] warn of data loss on reloading registration page --- src/components/views/auth/AuthBody.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/views/auth/AuthBody.tsx b/src/components/views/auth/AuthBody.tsx index 4532ceeaf44..31a8cdd8a13 100644 --- a/src/components/views/auth/AuthBody.tsx +++ b/src/components/views/auth/AuthBody.tsx @@ -17,6 +17,16 @@ limitations under the License. import React from 'react'; export default class AuthBody extends React.PureComponent { + componentDidMount() { + const unloadCallback = (event) => { + event.preventDefault(); + event.returnValue = ""; + return ""; + }; + window.addEventListener("beforeunload", unloadCallback); + return () => window.removeEventListener("beforeunload", unloadCallback); + } + public render(): React.ReactNode { return
{ this.props.children } From 3c47141d67a9acbb5f43d0080c4f6eec7e1fb8fd Mon Sep 17 00:00:00 2001 From: yaya-usman Date: Thu, 21 Apr 2022 00:03:40 +0300 Subject: [PATCH 2/9] update: warn on loss of data on refresh --- src/components/structures/auth/Registration.tsx | 11 +++++++++++ src/components/views/auth/AuthBody.tsx | 10 ---------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index ecb4691e1b6..a074dd16e6b 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -137,8 +137,19 @@ export default class Registration extends React.Component { componentDidMount() { this.replaceClient(this.props.serverConfig); + window.addEventListener("beforeunload", this.unloadCallback); } + componentWillUnmount() { + window.removeEventListener("beforeunload", this.unloadCallback); + } + + unloadCallback = (event) => { + event.preventDefault(); + event.returnValue = ""; + return ""; + }; + // TODO: [REACT-WARNING] Replace with appropriate lifecycle event // eslint-disable-next-line UNSAFE_componentWillReceiveProps(newProps) { diff --git a/src/components/views/auth/AuthBody.tsx b/src/components/views/auth/AuthBody.tsx index 31a8cdd8a13..4532ceeaf44 100644 --- a/src/components/views/auth/AuthBody.tsx +++ b/src/components/views/auth/AuthBody.tsx @@ -17,16 +17,6 @@ limitations under the License. import React from 'react'; export default class AuthBody extends React.PureComponent { - componentDidMount() { - const unloadCallback = (event) => { - event.preventDefault(); - event.returnValue = ""; - return ""; - }; - window.addEventListener("beforeunload", unloadCallback); - return () => window.removeEventListener("beforeunload", unloadCallback); - } - public render(): React.ReactNode { return
{ this.props.children } From 2c9712bd62359618c88b12286f9cf2a21a4b171e Mon Sep 17 00:00:00 2001 From: yaya-usman Date: Thu, 21 Apr 2022 01:12:40 +0300 Subject: [PATCH 3/9] update: unloadCallback made private --- src/components/structures/auth/Registration.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index 25d46c75b04..7777d1a451d 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -139,6 +139,7 @@ export default class Registration extends React.Component { componentDidMount() { this.replaceClient(this.props.serverConfig); + //triggers a confirmation dialog for data loss before page unloads/refreshes window.addEventListener("beforeunload", this.unloadCallback); } @@ -146,7 +147,7 @@ export default class Registration extends React.Component { window.removeEventListener("beforeunload", this.unloadCallback); } - unloadCallback = (event) => { + private unloadCallback = (event) => { event.preventDefault(); event.returnValue = ""; return ""; From b29c4171ee7219eb92c9f64234770533bf1eef61 Mon Sep 17 00:00:00 2001 From: yaya-usman Date: Thu, 21 Apr 2022 09:38:14 +0300 Subject: [PATCH 4/9] proper event annotation --- src/components/structures/auth/Registration.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index 7777d1a451d..0e620e8d046 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -147,7 +147,7 @@ export default class Registration extends React.Component { window.removeEventListener("beforeunload", this.unloadCallback); } - private unloadCallback = (event) => { + private unloadCallback = (event: BeforeUnloadEvent) => { event.preventDefault(); event.returnValue = ""; return ""; From 9fe77a8906e1ca7d408c80351f98f656d0adad5d Mon Sep 17 00:00:00 2001 From: yaya-usman Date: Thu, 21 Apr 2022 19:02:56 +0300 Subject: [PATCH 5/9] update: popup the dialog warning at a later stage of registration --- src/components/structures/auth/Registration.tsx | 12 ------------ src/components/views/auth/CaptchaForm.tsx | 9 +++++++++ .../views/auth/InteractiveAuthEntryComponents.tsx | 12 ++++++++++++ 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index 0e620e8d046..c5abe526f61 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -139,20 +139,8 @@ export default class Registration extends React.Component { 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) { diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx index 7f718bae6dd..9455cab53c1 100644 --- a/src/components/views/auth/CaptchaForm.tsx +++ b/src/components/views/auth/CaptchaForm.tsx @@ -65,12 +65,21 @@ export default class CaptchaForm extends React.Component { + event.preventDefault(); + event.returnValue = ""; + return ""; + }; + // Borrowed directly from: https://github.com/codeep/react-recaptcha-google/commit/e118fa5670fa268426969323b2e7fe77698376ba private isRecaptchaReady(): boolean { return typeof window !== "undefined" && diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 11a28d1e05d..d0d43340094 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -320,8 +320,20 @@ export class TermsAuthEntry extends React.Component { + event.preventDefault(); + event.returnValue = ""; + return ""; + }; + private togglePolicy(policyId: string) { const newToggles = {}; for (const policy of this.state.policies) { From 9b92c900fa5cd627e9a352e09df3e7d28856ac5d Mon Sep 17 00:00:00 2001 From: yaya-usman Date: Sun, 24 Apr 2022 16:38:03 +0300 Subject: [PATCH 6/9] show warn dialog only at a later stage of registration --- src/components/structures/auth/Registration.tsx | 16 ++++++++++++++++ src/components/views/auth/CaptchaForm.tsx | 9 --------- .../auth/InteractiveAuthEntryComponents.tsx | 12 ------------ 3 files changed, 16 insertions(+), 21 deletions(-) diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index c5abe526f61..1edc66642ce 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -141,6 +141,22 @@ export default class Registration extends React.Component { this.replaceClient(this.props.serverConfig); } + componentDidUpdate() { + if (this.state.doingUIAuth) { + //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) { diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx index 9455cab53c1..7f718bae6dd 100644 --- a/src/components/views/auth/CaptchaForm.tsx +++ b/src/components/views/auth/CaptchaForm.tsx @@ -65,21 +65,12 @@ export default class CaptchaForm extends React.Component { - event.preventDefault(); - event.returnValue = ""; - return ""; - }; - // Borrowed directly from: https://github.com/codeep/react-recaptcha-google/commit/e118fa5670fa268426969323b2e7fe77698376ba private isRecaptchaReady(): boolean { return typeof window !== "undefined" && diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index d0d43340094..11a28d1e05d 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -320,20 +320,8 @@ export class TermsAuthEntry extends React.Component { - event.preventDefault(); - event.returnValue = ""; - return ""; - }; - private togglePolicy(policyId: string) { const newToggles = {}; for (const policy of this.state.policies) { From 584d54ec62721695207cb0b0ba57dbb6b355847a Mon Sep 17 00:00:00 2001 From: yaya-usman Date: Mon, 25 Apr 2022 15:19:26 +0300 Subject: [PATCH 7/9] updated fix --- src/components/structures/auth/Registration.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index 1edc66642ce..d56cf5c7f52 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -141,8 +141,8 @@ export default class Registration extends React.Component { this.replaceClient(this.props.serverConfig); } - componentDidUpdate() { - if (this.state.doingUIAuth) { + componentDidUpdate(_, prevState: IState) { + if (prevState.doingUIAuth !== this.state.doingUIAuth) { //triggers a confirmation dialog for data loss before page unloads/refreshes window.addEventListener("beforeunload", this.unloadCallback); } From 75c3627d2afebf0696160a9f91017a1feca964d7 Mon Sep 17 00:00:00 2001 From: yaya-usman Date: Wed, 27 Apr 2022 12:08:09 +0300 Subject: [PATCH 8/9] updated warn dialog logic --- src/components/structures/auth/Registration.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index d56cf5c7f52..a54879c58be 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -139,13 +139,8 @@ export default class Registration extends React.Component { componentDidMount() { this.replaceClient(this.props.serverConfig); - } - - componentDidUpdate(_, prevState: IState) { - if (prevState.doingUIAuth !== this.state.doingUIAuth) { - //triggers a confirmation dialog for data loss before page unloads/refreshes - window.addEventListener("beforeunload", this.unloadCallback); - } + //triggers a confirmation dialog for data loss before page unloads/refreshes + window.addEventListener("beforeunload", this.unloadCallback); } componentWillUnmount() { @@ -154,8 +149,10 @@ export default class Registration extends React.Component { private unloadCallback = (event: BeforeUnloadEvent) => { event.preventDefault(); - event.returnValue = ""; - return ""; + if (this.state.doingUIAuth) { + event.returnValue = ""; + return ""; + } }; // TODO: [REACT-WARNING] Replace with appropriate lifecycle event // eslint-disable-next-line From 736eae17810d5f2da8c74b38805638b9ee27f3d7 Mon Sep 17 00:00:00 2001 From: yaya-usman Date: Fri, 29 Apr 2022 12:20:02 +0300 Subject: [PATCH 9/9] updated fix --- src/components/structures/auth/Registration.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/auth/Registration.tsx b/src/components/structures/auth/Registration.tsx index a54879c58be..ff7e41b9d58 100644 --- a/src/components/structures/auth/Registration.tsx +++ b/src/components/structures/auth/Registration.tsx @@ -148,8 +148,8 @@ export default class Registration extends React.Component { } private unloadCallback = (event: BeforeUnloadEvent) => { - event.preventDefault(); if (this.state.doingUIAuth) { + event.preventDefault(); event.returnValue = ""; return ""; }