Ask for confirmation when user leaves unsaved reply (#1519)

frontend/src/components/posting/edit.js

@@ -165,15 +165,13 @@ export default class extends Form {
   }
 
   handleSuccess(success) {
-    snackbar.success(gettext("Reply has been edited."))
-    window.location = success.url.index
-
-    // keep form loading
-    this.setState({
-      isLoading: true,
-    })
+    this.setState({ isLoading: true })
+    this.close()
 
     setGlobalState(false, this.onQuote)
+
+    snackbar.success(gettext("Reply has been edited."))
+    window.location = success.url.index
   }
 
   handleError(rejection) {

frontend/src/components/posting/reply.js

@@ -149,15 +149,13 @@ export default class extends Form {
   }
 
   handleSuccess(success) {
-    snackbar.success(pgettext("post reply", "Your reply has been posted."))
-    window.location = success.url.index
-
-    // keep form loading
-    this.setState({
-      isLoading: true,
-    })
+    this.setState({ isLoading: true })
+    this.close()
 
     setGlobalState(false, this.onQuote)
+
+    snackbar.success(pgettext("post reply", "Your reply has been posted."))
+    window.location = success.url.index
   }
 
   handleError(rejection) {

frontend/src/components/posting/start-private.js

@@ -108,13 +108,11 @@ export default class extends Form {
   }
 
   handleSuccess(success) {
+    this.setState({ isLoading: true })
+    this.close()
+
     snackbar.success(pgettext("post thread", "Your thread has been posted."))
     window.location = success.url
-
-    // keep form loading
-    this.setState({
-      isLoading: true,
-    })
   }
 
   handleError(rejection) {

frontend/src/components/posting/start.js

@@ -218,13 +218,11 @@ export default class extends Form {
   }
 
   handleSuccess(success) {
+    this.setState({ isLoading: true })
+    this.close()
+
     snackbar.success(pgettext("post thread", "Your thread has been posted."))
     window.location = success.url
-
-    // keep form loading
-    this.setState({
-      isLoading: true,
-    })
   }
 
   handleError(rejection) {

frontend/src/services/posting.js

@@ -17,12 +17,31 @@ export class Posting {
 
     this._isOpen = false
     this._isClosing = false
+
+    this._beforeunloadSet = false
   }
 
   isOpen() {
     return this._isOpen
   }
 
+  setBeforeUnload() {
+    if (!this._beforeunloadSet) {
+      window.addEventListener("beforeunload", this.beforeUnload, { capture: true })
+      this._beforeunloadSet = true
+    }
+  }
+
+  unsetBeforeUnload() {
+    window.removeEventListener("beforeunload", this.beforeUnload, { capture: true })
+    this._beforeunloadSet = false
+  }
+
+  beforeUnload(event) {
+    event.returnValue = "true"
+    return "true"
+  }
+
   open(props) {
     if (this._isOpen === false) {
       this._mode = props.mode
@@ -49,9 +68,12 @@ export class Posting {
 
     this._mount.classList.add("show")
     this._observer.observe(this._mount)
+    this.setBeforeUnload()
   }
 
   close = () => {
+    this.unsetBeforeUnload()
+
     if (this._isOpen && !this._isClosing) {
       this._isClosing = true
       this._mount.classList.remove("show")