From dad381ead4931a1a1cda683f9743a44cce1884aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9e?= <16293415+maltheism@users.noreply.github.com>
Date: Fri, 25 Oct 2019 09:44:32 -0400
Subject: [PATCH] [publication] 21.0 release publication email verify fix
 (#4730)

Incorporated the frontend browser check for validation of email by changing type to email.
---
 modules/publication/jsx/projectFields.js | 32 ++++++++++--------
 modules/publication/jsx/uploadForm.js    | 42 +++++++++---------------
 modules/publication/jsx/viewProject.js   | 23 ++-----------
 3 files changed, 37 insertions(+), 60 deletions(-)

diff --git a/modules/publication/jsx/projectFields.js b/modules/publication/jsx/projectFields.js
index 55e6a83af48..c18f2ea0e88 100644
--- a/modules/publication/jsx/projectFields.js
+++ b/modules/publication/jsx/projectFields.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
 class EmailElement extends React.Component {
   constructor() {
     super();
@@ -39,7 +41,7 @@ class EmailElement extends React.Component {
         </label>
         <div className="col-sm-7">
           <input
-            type="text"
+            type="email"
             className="form-control"
             name={this.props.name}
             id={this.props.id}
@@ -170,13 +172,15 @@ class ProjectFormFields extends React.Component {
     for (let i = 0; i <= this.props.numFiles; i++) {
       let fileName = 'file_' + i;
       fileFields.push(
-        <FileElement
-          name={fileName}
-          id={'publicationUploadEl_' + i}
-          onUserInput={this.props.setFileData}
-          label="File to upload"
-          value={this.props.formData[fileName]}
-        />
+        <div key={'file_element_' + i}>
+          <FileElement
+            name={fileName}
+            id={'publicationUploadEl_' + i}
+            onUserInput={this.props.setFileData}
+            label="File to upload"
+            value={this.props.formData[fileName]}
+          />
+        </div>
       );
       if (this.props.formData[fileName]) {
         let publicationType = 'publicationType_' + i;
@@ -223,7 +227,6 @@ class ProjectFormFields extends React.Component {
               name={name}
               label={c.name + (c.name.slice(-1) === 's' ? '\'' : '\'s') + ' Email'}
               onUserInput={this.setCollaboratorEmail}
-              onUserBlur={this.props.validateEmail}
               toggleEmailNotify={this.toggleEmailNotify}
               errorMessage={this.props.formErrors[name]}
               required={false}
@@ -281,9 +284,12 @@ class ProjectFormFields extends React.Component {
     let collabEmails = this.createCollabEmailFields();
     let fileFields = this.createFileFields();
 
-    let voiHelp = (<div>For help finding variables of interest, consult
+    let voiHelp = (
+      <span>
+        For help finding variables of interest, consult
       the <a href={loris.BaseURL + '/datadict/'}>Data Dictionary</a>
-      </div>);
+      </span>
+    );
     let collabNames = [];
     if (this.props.formData.collaborators) {
       collabNames = this.props.formData.collaborators.map((c) => c.name);
@@ -326,7 +332,6 @@ class ProjectFormFields extends React.Component {
           name="leadInvestigatorEmail"
           label="Lead Investigator Email"
           onUserInput={this.props.setFormData}
-          onUserBlur={this.props.validateEmail}
           toggleEmailNotify={this.toggleEmailNotify}
           errorMessage={this.props.formErrors.leadInvestigatorEmail}
           required={true}
@@ -407,7 +412,8 @@ class ProjectFormFields extends React.Component {
           text={voiHelp}
         />
         {fileFields}
-        <ButtonElement label={this.props.editMode ? 'Submit' : 'Propose Project'}/>
+        <ButtonElement label={this.props.editMode ? 'Submit' : 'Propose Project'}
+        />
       </div>
     );
   }
diff --git a/modules/publication/jsx/uploadForm.js b/modules/publication/jsx/uploadForm.js
index b2d392c4202..46fa78d9ba3 100644
--- a/modules/publication/jsx/uploadForm.js
+++ b/modules/publication/jsx/uploadForm.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import ProjectFormFields from './projectFields';
 
 class PublicationUploadForm extends React.Component {
@@ -20,26 +21,10 @@ class PublicationUploadForm extends React.Component {
     this.handleSubmit = this.handleSubmit.bind(this);
     this.addListItem = this.addListItem.bind(this);
     this.removeListItem = this.removeListItem.bind(this);
-    this.validateEmail = this.validateEmail.bind(this);
     this.setFileData = this.setFileData.bind(this);
     this.fetchData = this.fetchData.bind(this);
   }
 
-  validateEmail(field, email) {
-    let formErrors = this.state.formErrors;
-
-    // don't supply error if email is blank
-    if (email === '' || email === null || email === undefined) {
-      delete formErrors[field];
-      // if email is invalid, set error, else nullify error
-    } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) === false) {
-      formErrors[field] = 'Invalid email';
-    } else {
-      delete formErrors[field];
-    }
-    this.setState({formErrors});
-  }
-
   fetchData() {
     let self = this;
     $.ajax(this.props.DataURL, {
@@ -194,16 +179,20 @@ class PublicationUploadForm extends React.Component {
     let createElements;
     let formClass = 'col-md-12 col-lg-12';
     if (!this.props.editMode) {
-      createElements = [
-        <h3 className="col-md-offset-3 col-lg-offset-3">Propose a new project</h3>,
-        <TextboxElement
-          name="title"
-          label="Title"
-          onUserInput={this.setFormData}
-          required={true}
-          value={this.state.formData.title}
-        />,
-      ];
+      createElements = (
+        <div key='propose_new_project'>
+          <h3 className="col-md-offset-3 col-lg-offset-3">
+            Propose a new project
+          </h3>
+          <TextboxElement
+            name="title"
+            label="Title"
+            onUserInput={this.setFormData}
+            required={true}
+            value={this.state.formData.title}
+          />
+        </div>
+    );
       // if not in edit mode, shrink form for consistent display
       formClass = 'col-md-8 col-lg-7';
     }
@@ -226,7 +215,6 @@ class PublicationUploadForm extends React.Component {
               setFileData={this.setFileData}
               addListItem={this.addListItem}
               removeListItem={this.removeListItem}
-              validateEmail={this.validateEmail}
               toggleEmailNotify={this.toggleEmailNotify}
               uploadTypes={this.state.Data.uploadTypes}
               users={this.state.Data.users}
diff --git a/modules/publication/jsx/viewProject.js b/modules/publication/jsx/viewProject.js
index f17589c5329..d73ce86ed65 100644
--- a/modules/publication/jsx/viewProject.js
+++ b/modules/publication/jsx/viewProject.js
@@ -19,25 +19,9 @@ class ViewProject extends React.Component {
     this.createEditableComponents = this.createEditableComponents.bind(this);
     this.addListItem = this.addListItem.bind(this);
     this.removeListItem = this.removeListItem.bind(this);
-    this.validateEmail = this.validateEmail.bind(this);
     this.fetchData = this.fetchData.bind(this);
   }
 
-  validateEmail(field, email) {
-    let formErrors = this.state.formErrors;
-
-    // don't supply error if email is blank
-    if (email === '' || email === null || email === undefined) {
-      delete formErrors[field];
-      // if email is invalid, set error, else nullify error
-    } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email) === false) {
-      formErrors[field] = 'Invalid email';
-    } else {
-      delete formErrors[field];
-    }
-    this.setState({formErrors});
-  }
-
   handleSubmit(e) {
     e.preventDefault();
 
@@ -258,9 +242,9 @@ class ViewProject extends React.Component {
           text={this.state.formData.leadInvestigator}
         />
         <StaticElement
-         name="leadInvestigatorEmail"
-         label="Lead Investigator Email"
-         text={this.state.formData.leadInvestigatorEmail}
+          name='leadInvestigatorEmail'
+          label='Lead Investigator Email'
+          text={this.state.formData.leadInvestigatorEmail}
         />
         {collaborators}
         {keywords}
@@ -282,7 +266,6 @@ class ViewProject extends React.Component {
           setFileData={this.setFileData}
           addListItem={this.addListItem}
           removeListItem={this.removeListItem}
-          validateEmail={this.validateEmail}
           toggleEmailNotify={this.toggleEmailNotify}
           uploadTypes={this.state.uploadTypes}
           users={this.state.users}