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

1 files changed, 122 insertions, 106 deletions

diff --git a/ui/src/components/site-form.tsx b/ui/src/components/site-form.tsx
index 113e9c66..df913043 100644
--- a/ui/src/components/site-form.tsx
+++ b/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,123 +60,138 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
 
   render() {
     return (
-      <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
-        <h5>{`${
-          this.props.site
-            ? capitalizeFirstLetter(i18n.t('edit'))
-            : capitalizeFirstLetter(i18n.t('name'))
-        } ${i18n.t('your_site')}`}</h5>
-        <div class="form-group row">
-          <label class="col-12 col-form-label" htmlFor="create-site-name">
-            {i18n.t('name')}
-          </label>
-          <div class="col-12">
-            <input
-              type="text"
-              id="create-site-name"
-              class="form-control"
-              value={this.state.siteForm.name}
-              onInput={linkEvent(this, this.handleSiteNameChange)}
-              required
-              minLength={3}
-              maxLength={20}
-            />
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-12 col-form-label" htmlFor={this.id}>
-            {i18n.t('sidebar')}
-          </label>
-          <div class="col-12">
-            <textarea
-              id={this.id}
-              value={this.state.siteForm.description}
-              onInput={linkEvent(this, this.handleSiteDescriptionChange)}
-              class="form-control"
-              rows={3}
-              maxLength={10000}
-            />
-          </div>
-        </div>
-        <div class="form-group row">
-          <div class="col-12">
-            <div class="form-check">
+      <>
+        <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
+              ? capitalizeFirstLetter(i18n.t('edit'))
+              : capitalizeFirstLetter(i18n.t('name'))
+          } ${i18n.t('your_site')}`}</h5>
+          <div class="form-group row">
+            <label class="col-12 col-form-label" htmlFor="create-site-name">
+              {i18n.t('name')}
+            </label>
+            <div class="col-12">
               <input
-                class="form-check-input"
-                id="create-site-downvotes"
-                type="checkbox"
-                checked={this.state.siteForm.enable_downvotes}
-                onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
+                type="text"
+                id="create-site-name"
+                class="form-control"
+                value={this.state.siteForm.name}
+                onInput={linkEvent(this, this.handleSiteNameChange)}
+                required
+                minLength={3}
+                maxLength={20}
               />
-              <label class="form-check-label" htmlFor="create-site-downvotes">
-                {i18n.t('enable_downvotes')}
-              </label>
             </div>
           </div>
-        </div>
-        <div class="form-group row">
-          <div class="col-12">
-            <div class="form-check">
-              <input
-                class="form-check-input"
-                id="create-site-enable-nsfw"
-                type="checkbox"
-                checked={this.state.siteForm.enable_nsfw}
-                onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
+          <div class="form-group row">
+            <label class="col-12 col-form-label" htmlFor={this.id}>
+              {i18n.t('sidebar')}
+            </label>
+            <div class="col-12">
+              <textarea
+                id={this.id}
+                value={this.state.siteForm.description}
+                onInput={linkEvent(this, this.handleSiteDescriptionChange)}
+                class="form-control"
+                rows={3}
+                maxLength={10000}
               />
-              <label class="form-check-label" htmlFor="create-site-enable-nsfw">
-                {i18n.t('enable_nsfw')}
-              </label>
             </div>
           </div>
-        </div>
-        <div class="form-group row">
-          <div class="col-12">
-            <div class="form-check">
-              <input
-                class="form-check-input"
-                id="create-site-open-registration"
-                type="checkbox"
-                checked={this.state.siteForm.open_registration}
-                onChange={linkEvent(
-                  this,
-                  this.handleSiteOpenRegistrationChange
-                )}
-              />
-              <label
-                class="form-check-label"
-                htmlFor="create-site-open-registration"
-              >
-                {i18n.t('open_registration')}
-              </label>
+          <div class="form-group row">
+            <div class="col-12">
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  id="create-site-downvotes"
+                  type="checkbox"
+                  checked={this.state.siteForm.enable_downvotes}
+                  onChange={linkEvent(
+                    this,
+                    this.handleSiteEnableDownvotesChange
+                  )}
+                />
+                <label class="form-check-label" htmlFor="create-site-downvotes">
+                  {i18n.t('enable_downvotes')}
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="form-group row">
-          <div class="col-12">
-            <button type="submit" class="btn btn-secondary mr-2">
-              {this.state.loading ? (
-                <svg class="icon icon-spinner spin">
-                  <use xlinkHref="#icon-spinner"></use>
-                </svg>
-              ) : this.props.site ? (
-                capitalizeFirstLetter(i18n.t('save'))
-              ) : (
-                capitalizeFirstLetter(i18n.t('create'))
-              )}
-            </button>
-            {this.props.site && (
-              <button
-                type="button"
-                class="btn btn-secondary"
-                onClick={linkEvent(this, this.handleCancel)}
-              >
-                {i18n.t('cancel')}
+          <div class="form-group row">
+            <div class="col-12">
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  id="create-site-enable-nsfw"
+                  type="checkbox"
+                  checked={this.state.siteForm.enable_nsfw}
+                  onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
+                />
+                <label
+                  class="form-check-label"
+                  htmlFor="create-site-enable-nsfw"
+                >
+                  {i18n.t('enable_nsfw')}
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class="form-group row">
+            <div class="col-12">
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  id="create-site-open-registration"
+                  type="checkbox"
+                  checked={this.state.siteForm.open_registration}
+                  onChange={linkEvent(
+                    this,
+                    this.handleSiteOpenRegistrationChange
+                  )}
+                />
+                <label
+                  class="form-check-label"
+                  htmlFor="create-site-open-registration"
+                >
+                  {i18n.t('open_registration')}
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class="form-group row">
+            <div class="col-12">
+              <button type="submit" class="btn btn-secondary mr-2">
+                {this.state.loading ? (
+                  <svg class="icon icon-spinner spin">
+                    <use xlinkHref="#icon-spinner"></use>
+                  </svg>
+                ) : this.props.site ? (
+                  capitalizeFirstLetter(i18n.t('save'))
+                ) : (
+                  capitalizeFirstLetter(i18n.t('create'))
+                )}
               </button>
-            )}
+              {this.props.site && (
+                <button
+                  type="button"
+                  class="btn btn-secondary"
+                  onClick={linkEvent(this, this.handleCancel)}
+                >
+                  {i18n.t('cancel')}
+                </button>
+              )}
+            </div>
           </div>
-        </div>
-      </form>
+        </form>
+      </>
     );
   }