Forbid users to use empty titles for posts (#930)

- Add a regex that checks if string contains anything but whitespace
- Check for whitespace-only titles on post creation and edit
- Trim whitespace from titles before saving
- Add frontend validation to title

3 files changed, 20 insertions, 2 deletions

diff --git a/ui/src/components/post-form.tsx b/ui/src/components/post-form.tsx
index 247c4cc6..30527510 100644
--- a/ui/src/components/post-form.tsx
+++ b/ui/src/components/post-form.tsx
@@ -35,6 +35,7 @@ import {
   setupTippy,
   hostname,
   pictrsDeleteToast,
+  validTitle,
 } from '../utils';
 import autosize from 'autosize';
 import Tribute from 'tributejs/src/Tribute.js';
@@ -271,12 +272,19 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                 value={this.state.postForm.name}
                 id="post-title"
                 onInput={linkEvent(this, this.handlePostNameChange)}
-                class="form-control"
+                class={`form-control ${
+                  !validTitle(this.state.postForm.name) && 'is-invalid'
+                }`}
                 required
                 rows={2}
                 minLength={3}
                 maxLength={MAX_POST_TITLE_LENGTH}
               />
+              {!validTitle(this.state.postForm.name) && (
+                <div class="invalid-feedback">
+                  {i18n.t('invalid_post_title')}
+                </div>
+              )}
               {this.state.suggestedPosts.length > 0 && (
                 <>
                   <div class="my-1 text-muted small font-weight-bold">
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 2f06b70c..6276519b 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -986,3 +986,12 @@ function canUseWebP() {
   // // very old browser like IE 8, canvas not supported
   // return false;
 }
+
+export function validTitle(title?: string): boolean {
+  // Initial title is null, minimum length is taken care of by textarea's minLength={3}
+  if (title === null || title.length < 3) return true;
+
+  const regex = new RegExp(/.*\S.*/, 'g');
+
+  return regex.test(title);
+}
diff --git a/ui/translations/en.json b/ui/translations/en.json
index 89f69f69..cb4347f1 100644
--- a/ui/translations/en.json
+++ b/ui/translations/en.json
@@ -268,5 +268,6 @@
     "block_leaving": "Are you sure you want to leave?",
     "what_is": "What is",
     "cake_day_title": "Cake day:",
-    "cake_day_info": "It's {{ creator_name }}'s cake day today!"
+    "cake_day_info": "It's {{ creator_name }}'s cake day today!",
+    "invalid_post_title": "Invalid post title"
 }