fix: show error messages in forms for required fields (#839)

* initial

* show error messages in forms when required fields are empty

* revert package.lock.json

* Revert "revert package.lock.json"

This reverts commit 748b18f.

* package-lock.json revert changes

zubhub_frontend/zubhub/public/locales/en/translation.json

@@ -670,20 +670,22 @@
         "label": "Location",
         "errors": {
           "min": "Your location is too short",
-          "required": "Looks like your missed this one"
+          "required": "Looks like you missed this one"
         }
       },
       "email": {
         "label": "Email",
         "disabledHelperText": "To edit this field, send a mail to [email protected]",
         "errors": {
+          "phoneOrEmail": "You must enter either your email or phone number",
           "invalid": "Your email seems invalid. Is the email address correct?"
         }
       },
       "phone": {
         "label": "Phone",
         "disabledHelperText": "To edit this field, send a mail to [email protected]",
         "errors": {
+          "phoneOrEmail": "You must enter either your email or phone number",
           "invalid": "I'm having trouble understanding this number. Make sure it's in this format: '+911234567890'. Upto 15 digits are allowed."
         }
       },

zubhub_frontend/zubhub/public/locales/hi/translation.json

@@ -618,13 +618,15 @@
         "label": "ईमेल",
         "disabledHelperText": "इस फ़ील्ड मेल को संपादित करने के लिए [email protected]",
         "errors": {
+          "phoneOrEmail": "आपको ईमेल या फोन नंबर देना होगा",
           "invalid": "अमान्य ईमेल"
         }
       },
       "phone": {
         "label": "फ़ोन",
         "disabledHelperText": "इस फ़ील्ड मेल को संपादित करने के लिए [email protected]",
         "errors": {
+          "phoneOrEmail": "आपको ईमेल या फोन नंबर देना होगा",
           "invalid": "फ़ोन नंबर प्रारूप में दर्ज किया जाना चाहिए: '+999999999'। 15 अंकों तक की अनुमति।"
         }
       },

zubhub_frontend/zubhub/src/views/edit_profile/EditProfile.jsx

@@ -304,7 +304,18 @@ function EditProfile(props) {
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                         label={t('editProfile.inputs.email.label')}
-                      />
+                        />
+                      <FormHelperText
+                        className={classes.fieldHelperTextStyle}
+                        error
+                      >
+                        {(props.status && props.status['email']) ||
+                          (props.touched['email'] &&
+                            props.errors['email'] &&
+                            t(
+                              `editProfile.inputs.email.errors.${props.errors['email']}`,
+                            ))}
+                      </FormHelperText>
                     </FormControl>
                   </Grid>
 
@@ -338,6 +349,17 @@ function EditProfile(props) {
                         onBlur={props.handleBlur}
                         label={t('editProfile.inputs.phone.label')}
                       />
+                      <FormHelperText
+                        className={classes.fieldHelperTextStyle}
+                        error
+                      >
+                        {(props.status && props.status['phone']) ||
+                          (props.touched['phone'] &&
+                            props.errors['phone'] &&
+                            t(
+                              `editProfile.inputs.phone.errors.${props.errors['phone']}`,
+                            ))}
+                      </FormHelperText>
                     </FormControl>
                   </Grid>
 

zubhub_frontend/zubhub/src/views/edit_profile/editProfileScripts.js

@@ -137,11 +137,16 @@ export const deleteAccount = (username_el, props, toast) => {
  */
 export const editProfile = (e, props, toast) => {
   e.preventDefault();
+  props.setFieldTouched('username', true);
+  props.setFieldTouched('email', true);
+  props.setFieldTouched('phone', true);
+  props.setFieldTouched('password', true);
+  props.setFieldTouched('user_location', true);
   let password_match = true;
   if (props.values.user_location.length < 1) {
     props.validateField('user_location');
   } else if (props.values.password.length < 1) {
-    props.validateField('editProfile.inputs.password.errors');
+    props.validateField('password');
   } else {
     props.login({ values: props.values, history: props.history }).catch(error => {
       try{
@@ -217,9 +222,15 @@ export const validationSchema = Yup.object().shape({
   username: Yup.string().required('required'),
   user_location: Yup.string().min(1, 'min').required('required'),
   password: Yup.string().required('required'),
-  email: Yup.string().email('invalid'),
-  phone: Yup.string().test('phone_is_invalid', 'invalid', function (value) {
+  email: Yup.string().email('invalid').when('phone', {
+    is: (phone) => !phone || phone.length === 0,
+    then: Yup.string().required('phoneOrEmail')
+  }),
+  phone: Yup.string().when('email', {
+    is: (email) => !email || email.length === 0,
+    then: Yup.string().required('phoneOrEmail')
+  }).test('phone_is_invalid', 'invalid', function (value) {
     return /^[+][0-9]{9,15}$/g.test(value) || !value ? true : false;
   }),
   bio: Yup.string().max(255, 'tooLong'),
-});
+}, ['phone', 'email']);

zubhub_frontend/zubhub/src/views/login/Login.jsx

@@ -298,6 +298,7 @@ export default connect(
 )(
   withFormik({
     mapPropsToValue: () => ({
+      username: '',
       password: '',
     }),
     validationSchema,

zubhub_frontend/zubhub/src/views/login/loginScripts.js

@@ -29,6 +29,7 @@ export const handleMouseDownPassword = e => {
  */
 export const login = (e, props) => {
   e.preventDefault();
+  props.setFieldTouched('username', true);
   return props
     .login({ values: props.values, history: props.history })
     .catch(error => {