[Bug Bash] Ca profile bug bash - 2

.circleci/config.yml

@@ -349,7 +349,7 @@ workflows:
           filters:
             branches:
               only:                
-                - free
+                - ca-profile-bug-bash
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      

src/shared/components/Settings/Profile/BasicInfo/ImageInput/index.jsx

@@ -25,6 +25,7 @@ export default class ImageInput extends React.Component {
     this.state = {
       newBasicInfo: {},
       isImageOversize: false,
+      isImageFile: true,
     };
   }
 
@@ -72,6 +73,13 @@ export default class ImageInput extends React.Component {
     if (file === undefined) {
       return;
     }
+    const allowedTypes = ['image/png', 'image/jpg', 'image/jpeg'];
+    if (!allowedTypes.includes(file.type)) {
+      this.setState({
+        isImageFile: false,
+      });
+      return;
+    }
     if (file.size > 2 * 1024 * 1024) {
       // If file size is greater than 2 MB, show error message
       this.setState({
@@ -81,6 +89,7 @@ export default class ImageInput extends React.Component {
     }
     this.setState({
       isImageOversize: false,
+      isImageFile: true,
     });
     uploadPhotoInit();
     loadImage.parseMetaData(file, (data) => {
@@ -126,7 +135,7 @@ export default class ImageInput extends React.Component {
       deletingPhoto,
     } = profileState;
 
-    const { newBasicInfo, isImageOversize } = this.state;
+    const { newBasicInfo, isImageOversize, isImageFile } = this.state;
 
     return (
       <div styleName="image">
@@ -157,7 +166,8 @@ export default class ImageInput extends React.Component {
             <input type="file" name="image" accept="image/*" onChange={this.onUploadPhoto} id="change-image-input" className="hidden" />
           </div>
         </div>
-        {isImageOversize && <div styleName="error-message">Please select an image smaller than 2MB</div>}
+        {!isImageFile && <div styleName="error-message">Please select jpg, jpeg or png image files only</div>}
+        {isImageFile && isImageOversize && <div styleName="error-message">Please select an image smaller than 2MB</div>}
       </div>
     );
   }

src/shared/components/Settings/Profile/BasicInfo/index.jsx

@@ -41,6 +41,7 @@ export default class BasicInfo extends ConsentComponent {
 
     const { userTraits } = props;
     this.state = {
+      componentMounted: false,
       inputChanged: false,
       formInvalid: false,
       basicInfoTrait: this.loadBasicInfoTraits(userTraits),
@@ -81,6 +82,9 @@ export default class BasicInfo extends ConsentComponent {
     const { basicInfoTrait } = this.state;
     const basicInfo = basicInfoTrait.traits ? basicInfoTrait.traits.data[0] : {};
     this.processBasicInfo(basicInfo);
+    this.setState({
+      componentMounted: true,
+    });
   }
 
   componentWillReceiveProps(nextProps) {
@@ -461,6 +465,7 @@ export default class BasicInfo extends ConsentComponent {
     const {
       newBasicInfo,
       inputChanged,
+      componentMounted,
     } = this.state;
 
     const canModifyTrait = !this.props.traitRequestCount;
@@ -501,7 +506,7 @@ export default class BasicInfo extends ConsentComponent {
               <div styleName="field col-2">
                 <span styleName="text-required">* Required</span>
                 <input disabled={!canModifyTrait} id="firstName" name="firstName" type="text" placeholder="First Name" onChange={this.onUpdateInput} value={newBasicInfo.firstName} maxLength="64" required />
-                <ErrorMessage invalid={_.isEmpty(newBasicInfo.firstName) && inputChanged} message="First Name cannot be empty" />
+                <ErrorMessage invalid={_.isEmpty(newBasicInfo.firstName) && componentMounted} message="First Name cannot be empty" />
               </div>
             </div>
             <div styleName="row">
@@ -514,7 +519,7 @@ export default class BasicInfo extends ConsentComponent {
               <div styleName="field col-2">
                 <span styleName="text-required">* Required</span>
                 <input disabled={!canModifyTrait} id="lastName" name="lastName" type="text" placeholder="Last Name" onChange={this.onUpdateInput} value={newBasicInfo.lastName} maxLength="64" required />
-                <ErrorMessage invalid={_.isEmpty(newBasicInfo.lastName) && inputChanged} message="Last Name cannot be empty" />
+                <ErrorMessage invalid={_.isEmpty(newBasicInfo.lastName) && componentMounted} message="Last Name cannot be empty" />
               </div>
             </div>
             <div styleName="row">