Add validation

src/views/SurveySetup.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TreeContext } from '../store/treeStore/treeStore';
 import Btn from '../components/Btn/Btn';
@@ -11,7 +11,10 @@ const SurveySetup = () => {
 
     const { t } = useTranslation();
     const { state, dispatch } = useContext(TreeContext);
-    const [title, setTitle] = useState(state.qMetadata.title || 'Untitled')
+    const [title, setTitle] = useState(state.qMetadata.title || 'New Survey')
+    const [isTitleEdited, setIsTitleEdited] = useState(false);
+    const [validationMessage, setValidationMessage] = useState('');
+
 
     const updateMeta = (
         propName: IQuestionnaireMetadataType,
@@ -20,25 +23,41 @@ const SurveySetup = () => {
         dispatch(updateQuestionnaireMetadataAction(propName, value));
     };
 
+    const handleFocus = () => {
+        if (!isTitleEdited) {
+            setTitle("");
+            setIsTitleEdited(true);
+        }
+    }
+
+    const handleSubmit = () => {
+        if (title.trim() !== '') {
+            updateMeta(IQuestionnaireMetadataType.title, title);
+        } else {
+            setValidationMessage(t('Title cannot be empty.'));
+            setTitle('');
+        }
+    };
+
     return (
         <div className="metadata-message-container">
             <p className="metadata-message-header">
-                New Survey Setup
+                Create a New Survey
             </p>
             <div className="metadata-input">
-                <FormField label={'Enter a title to identify your survey'}>
+                <FormField label={'Enter a title for your survey'}>
                     <input
                         style={{ color: 'black' }}
-                        defaultValue={title}
-                        placeholder={t('A title that will be shown to users')}
+                        value={title}
+                        onFocus={handleFocus}
                         onChange={(e) => setTitle(e.target.value)}
                     />
+                    {validationMessage && (
+                        <p className="msg-error">{validationMessage}</p>
+                    )}
                 </FormField>
-                <br />
                 <Btn
-                    onClick={() => {
-                        updateMeta(IQuestionnaireMetadataType.title, title)
-                    }}
+                    onClick={handleSubmit}
                     title={t('Continue')}
                     variant="primary"
                 />