Validate project name while creating/editing project

frontend/src/components/projectCreate/index.js

@@ -191,6 +191,14 @@ const ProjectCreate = () => {
 
   const handleCreate = useCallback(
     (cloneProjectData) => {
+      if (!metadata.projectName.trim()) {
+        setErr({ error: true, message: intl.formatMessage(messages.noProjectName) });
+        throw new Error('Missing project name.');
+      }
+      if (!/^[a-zA-Z]/.test(metadata.projectName)) {
+        setErr({ error: true, message: intl.formatMessage(messages.projectNameValidationError) });
+        throw new Error('Project name validation error.');
+      }
       if (!metadata.geom) {
         setErr({ error: true, message: intl.formatMessage(messages.noGeometry) });
         throw new Error('Missing geom.');

frontend/src/components/projectCreate/messages.js

@@ -123,6 +123,14 @@ export default defineMessages({
     id: 'management.projects.create.errors.closed_linestring',
     defaultMessage: 'Points do not form a closed linestring',
   },
+  noProjectName: {
+    id: 'management.projects.create.errors.no_project_name',
+    defaultMessage: 'Name is a required field.',
+  },
+  projectNameValidationError: {
+    id: 'management.projects.create.errors.project_name_validation_error',
+    defaultMessage: 'Project name should start with an alphabet.',
+  },
   noGeometry: {
     id: 'management.projects.create.errors.no_geometry',
     defaultMessage: "You need to define the project's area of interest.",

frontend/src/components/projectEdit/messages.js

@@ -1,5 +1,7 @@
 import { defineMessages } from 'react-intl';
 
+import projectCreateMessages from '../projectCreate/messages';
+
 /**
  * Internationalized messages for use on project edit.
  */
@@ -439,6 +441,7 @@ export default defineMessages({
     id: 'projects.formInputs.name',
     defaultMessage: 'Name of the project',
   },
+  projectNameValidationError: { ...projectCreateMessages.projectNameValidationError },
   dueDate: {
     id: 'projects.formInputs.dueDate',
     defaultMessage: 'Due date',

frontend/src/views/projectEdit.js

@@ -121,7 +121,9 @@ export function ProjectEdit() {
       });
     } else {
       const mandatoryFieldsMissing = mandatoryFields.filter(
-        (m) => Object.keys(defaultLocaleInfo).includes(m) === false || defaultLocaleInfo[m] === '',
+        (m) =>
+          Object.keys(defaultLocaleInfo).includes(m) === false ||
+          defaultLocaleInfo[m].trim() === '',
       );
       if (mandatoryFieldsMissing.length) {
         missingFields.push({
@@ -130,7 +132,6 @@ export function ProjectEdit() {
         });
       }
     }
-
     const nonLocaleMissingFields = [];
     if (projectInfo.mappingTypes.length === 0) nonLocaleMissingFields.push('mappingTypes');
     const { mappingEditors, validationEditors, customEditor } = projectInfo;
@@ -160,7 +161,17 @@ export function ProjectEdit() {
     ) {
       missingFields.push({ type: 'noTeamsAssigned' });
     }
-
+    // validate name
+    if (!missingFields?.[0]?.fields?.includes('name')) {
+      const projectName = defaultLocaleInfo.name;
+      if (!/^[a-zA-Z]/.test(projectName)) {
+        missingFields.push({
+          locale: projectInfo.defaultLocale,
+          fields: ['projectNameValidationError'],
+          type: 'nameValidationError',
+        });
+      }
+    }
     if (missingFields.length > 0) {
       setError(missingFields);
       return new Promise((resolve, reject) => reject());
@@ -350,6 +361,14 @@ const ErrorTitle = ({ locale, numberOfMissingFields, type, projectInfo }) => {
       />
     );
   }
+  if (type === 'nameValidationError') {
+    return (
+      <FormattedMessage
+        id="management.projects.create.errors.project_name_validation_error"
+        defaultMessage="Project Name Validation Error"
+      />
+    );
+  }
   if (locale === null) {
     return (
       <FormattedMessage {...messages.missingFields} values={{ number: numberOfMissingFields }} />