From c29cb5e3bee29b9de338803243710418361be2a0 Mon Sep 17 00:00:00 2001
From: Daniel Strano <stranoj@gmail.com>
Date: Thu, 23 Feb 2023 15:21:57 -0500
Subject: [PATCH] #645: Indicate submission required fields

---
 src/components/CategoryItemBox.js | 2 +-
 src/components/FormFieldRow.js    | 2 +-
 src/components/ValidationRegex.js | 4 ++--
 src/views/AddSubmission.js        | 3 +++
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/CategoryItemBox.js b/src/components/CategoryItemBox.js
index 792191c2..4f8e5387 100644
--- a/src/components/CategoryItemBox.js
+++ b/src/components/CategoryItemBox.js
@@ -60,7 +60,7 @@ const CategoryItemBox = (props) => {
     <tr>
       <td>
         <div className='row submission'>
-          <div className={'col-12 col-md-7'}>
+          <div className='col-12 col-md-7'>
             <Link to={pickDetailUrl(props.type, props.item)}>
               {props.type !== 'tag' && props.item.description &&
                 <div>
diff --git a/src/components/FormFieldRow.js b/src/components/FormFieldRow.js
index 22d7154f..e98c7191 100644
--- a/src/components/FormFieldRow.js
+++ b/src/components/FormFieldRow.js
@@ -7,7 +7,7 @@ const TooltipTrigger = React.lazy(() => import('./TooltipTrigger'))
 const FormFieldRow = (props) => {
   const [value, setValue] = useState(props.value)
   const [checked, setChecked] = useState(props.checked ? props.checked : false)
-  const [isValid, setIsValid] = useState(true)
+  const [isValid, setIsValid] = useState((props.isValidatedOnStart && props.validRegex) ? props.validRegex.test(props.value) : true)
   const [imagePreviewUrl, setImagePreviewUrl] = useState('')
 
   useEffect(() => { setValue(props.value) }, [props.value])
diff --git a/src/components/ValidationRegex.js b/src/components/ValidationRegex.js
index 46f39839..f42a6a96 100644
--- a/src/components/ValidationRegex.js
+++ b/src/components/ValidationRegex.js
@@ -14,12 +14,12 @@ const urlValidRegex = new RegExp('^(https?:\\/\\/)?' + // protocol
       '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
       '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
       '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
-const blankOrurlValidRegex = new RegExp('^(^(https?:\\/\\/)?' + // protocol
+const blankOrurlValidRegex = new RegExp('^$|(^(^(https?:\\/\\/)?' + // protocol
       '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
       '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
       '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
       '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-      '(\\#[-a-z\\d_]*)?$)$', 'i') // fragment locator
+      '(\\#[-a-z\\d_]*)?$)$)', 'i') // fragment locator
 const usernameValidRegex = /^(?!\s*$).+/
 
 module.exports = {
diff --git a/src/views/AddSubmission.js b/src/views/AddSubmission.js
index 77686678..d199e308 100644
--- a/src/views/AddSubmission.js
+++ b/src/views/AddSubmission.js
@@ -477,6 +477,7 @@ class AddSubmission extends React.Component {
               onChange={this.handleOnChange}
               onBlur={this.handleOnFieldBlur}
               validRegex={this.state.isAlreadyInDatabase ? /^$/ : urlValidRegex}
+              isValidatedOnStart
             />
             <FormFieldAlertRow>
               <b>The external content URL points to the full content of the submission.<br />(This could be a link to arXiv, for example.)<br /><i>This cannot be changed after hitting "Submit."</i></b>
@@ -503,6 +504,7 @@ class AddSubmission extends React.Component {
               onChange={this.handleOnChange}
               validRegex={nonblankRegex}
               value={this.state.name}
+              isValidatedOnStart
             />
             <FormFieldAlertRow>
               <b>The submission name must be unique.</b>
@@ -522,6 +524,7 @@ class AddSubmission extends React.Component {
               onChange={this.handleOnChange}
               validRegex={blankOrurlValidRegex}
               value={this.state.thumbnailUrl}
+              isValidatedOnStart
             />
             <FormFieldAlertRow>
               <b>The image URL is loaded as a thumbnail, for the submission.<br />(For free image hosting, see <a href='https://imgbb.com/' target='_blank' rel='noreferrer'>https://imgbb.com/</a>, for example.)</b>