Ask for confirmation on leaving pages with incomplete forms. Fixes #529

ui/src/components/comment-form.tsx

@@ -1,4 +1,5 @@
 import { Component, linkEvent } from 'inferno';
+import { Prompt } from 'inferno-router';
 import {
   CommentNode as CommentNodeI,
   CommentForm as CommentFormI,
@@ -87,6 +88,10 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
   render() {
     return (
       <div class="mb-3">
+        <Prompt
+          when={this.state.commentForm.content}
+          message={i18n.t('block_leaving')}
+        />
         <form onSubmit={linkEvent(this, this.handleCommentSubmit)}>
           <div class="form-group row">
             <div className={`col-sm-12`}>

ui/src/components/community-form.tsx

@@ -1,4 +1,5 @@
 import { Component, linkEvent } from 'inferno';
+import { Prompt } from 'inferno-router';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
 import {
@@ -105,6 +106,16 @@ export class CommunityForm extends Component<
 
   render() {
     return (
+      <>
+        <Prompt
+          when={
+            !this.state.loading &&
+            (this.state.communityForm.name ||
+              this.state.communityForm.title ||
+              this.state.communityForm.description)
+          }
+          message={i18n.t('block_leaving')}
+        />
         <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
           <div class="form-group row">
             <label class="col-12 col-form-label" htmlFor="community-name">
@@ -219,6 +230,7 @@ export class CommunityForm extends Component<
             </div>
           </div>
         </form>
+      </>
     );
   }
 

ui/src/components/post-form.tsx

@@ -1,4 +1,5 @@
 import { Component, linkEvent } from 'inferno';
+import { Prompt } from 'inferno-router';
 import { PostListings } from './post-listings';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
@@ -153,6 +154,15 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
   render() {
     return (
       <div>
+        <Prompt
+          when={
+            !this.state.loading &&
+            (this.state.postForm.name ||
+              this.state.postForm.url ||
+              this.state.postForm.body)
+          }
+          message={i18n.t('block_leaving')}
+        />
         <form onSubmit={linkEvent(this, this.handlePostSubmit)}>
           <div class="form-group row">
             <label class="col-sm-2 col-form-label" htmlFor="post-url">

ui/src/components/private-message-form.tsx

@@ -1,4 +1,5 @@
 import { Component, linkEvent } from 'inferno';
+import { Prompt } from 'inferno-router';
 import { Link } from 'inferno-router';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
@@ -116,6 +117,10 @@ export class PrivateMessageForm extends Component<
   render() {
     return (
       <div>
+        <Prompt
+          when={!this.state.loading && this.state.privateMessageForm.content}
+          message={i18n.t('block_leaving')}
+        />
         <form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
           {!this.props.privateMessage && (
             <div class="form-group row">

ui/src/components/site-form.tsx

@@ -1,4 +1,5 @@
 import { Component, linkEvent } from 'inferno';
+import { Prompt } from 'inferno-router';
 import { Site, SiteForm as SiteFormI } from '../interfaces';
 import { WebSocketService } from '../services';
 import { capitalizeFirstLetter, randomStr, setupTribute } from '../utils';
@@ -59,6 +60,14 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
 
   render() {
     return (
+      <>
+        <Prompt
+          when={
+            !this.state.loading &&
+            (this.state.siteForm.name || this.state.siteForm.description)
+          }
+          message={i18n.t('block_leaving')}
+        />
         <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
           <h5>{`${
             this.props.site
@@ -105,7 +114,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                   id="create-site-downvotes"
                   type="checkbox"
                   checked={this.state.siteForm.enable_downvotes}
-                onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
+                  onChange={linkEvent(
+                    this,
+                    this.handleSiteEnableDownvotesChange
+                  )}
                 />
                 <label class="form-check-label" htmlFor="create-site-downvotes">
                   {i18n.t('enable_downvotes')}
@@ -123,7 +135,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                   checked={this.state.siteForm.enable_nsfw}
                   onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
                 />
-              <label class="form-check-label" htmlFor="create-site-enable-nsfw">
+                <label
+                  class="form-check-label"
+                  htmlFor="create-site-enable-nsfw"
+                >
                   {i18n.t('enable_nsfw')}
                 </label>
               </div>
@@ -176,6 +191,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             </div>
           </div>
         </form>
+      </>
     );
   }
 

ui/translations/en.json

@@ -245,5 +245,6 @@
     "no_private_message_edit_allowed": "Not allowed to edit private message.",
     "couldnt_update_private_message": "Couldn't update private message.",
     "time": "Time",
-    "action": "Action"
+    "action": "Action",
+    "block_leaving": "Are you sure you want to leave?"
 }