Fix user validation

Change-Id: I15efa9fc6b700ceb14ee4278d206b82d0b05a665

jams-react-client/src/assets/jss/material-dashboard-react/components/cardAvatarStyle.js

@@ -26,6 +26,25 @@ const cardAvatarStyle = {
       marginTop: "0"
     }
   },
+  cardAvatarEditProfile: {
+    maxWidth: "200px",
+    maxHeight: "200px",
+    margin: "-50px 10px 0",
+    borderRadius: "50%",
+    overflow: "hidden",
+    padding: "0",
+    boxShadow:
+      "0 6px 8px -12px rgba(" +
+      hexToRgb(blackColor) +
+      ", 0.56), 0 4px 25px 0px rgba(" +
+      hexToRgb(blackColor) +
+      ", 0.12), 0 8px 10px -5px rgba(" +
+      hexToRgb(blackColor) +
+      ", 0.2)",
+    "&$cardAvatarPlain": {
+      marginTop: "0"
+    }
+  },
   cardAvatarPlain: {}
 };
 

jams-react-client/src/components/Card/CardAvatar.js

@@ -14,10 +14,11 @@ const useStyles = makeStyles(styles);
 
 export default function CardAvatar(props) {
   const classes = useStyles();
-  const { children, className, plain, profile, ...rest } = props;
+  const { children, className, plain, profile, editProfile, ...rest } = props;
   const cardAvatarClasses = classNames({
     [classes.cardAvatar]: true,
     [classes.cardAvatarProfile]: profile,
+    [classes.cardAvatarEditProfile]: editProfile,
     [classes.cardAvatarPlain]: plain,
     [className]: className !== undefined
   });
@@ -32,5 +33,6 @@ CardAvatar.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   profile: PropTypes.bool,
+  editProfile: PropTypes.bool,
   plain: PropTypes.bool
 };

jams-react-client/src/views/UserProfile/EditCreateUserProfile.js

@@ -11,6 +11,7 @@ import GridItem from "components/Grid/GridItem.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import Button from "components/CustomButtons/Button.js";
 import Card from "components/Card/Card.js";
+import CardAvatar from "components/Card/CardAvatar.js";
 import CardHeader from "components/Card/CardHeader.js";
 import CardIcon from "components/Card/CardIcon.js";
 import CardBody from "components/Card/CardBody.js";
@@ -301,7 +302,26 @@ export default function EditCreateUserProfile(props) {
     }
 
     const EditCreateSchema = Yup.object().shape({
-        username: Yup.string().min(2, 'Username is too short!').required('Required!'),
+        username: Yup.string().min(2, 'Username is too short!').required('Required!').test('checkDuplUsername', 'Username exists!', function (value) {
+            if(createUser){
+                return new Promise((resolve, reject) => {
+                        const data = {
+                            "username": value.toLowerCase()
+                        }
+                        axios(configApiCall(api_path_get_exists_user, 'GET', data, null)).then((response) =>{
+                            if(response.status === 200){
+                                resolve(false)
+                            }    
+                            resolve(true)
+                        }).catch((error) => {
+                            console.log("Error checking for existing users: " + error)
+                            resolve(true)
+                        })
+                });
+            }else{
+                return true;
+            }
+        }).matches(/^[a-zA-Z0-9]*$/, 'Only alphanumeric characters!'),
         firstName: Yup.string().min(2, 'First name is too short!'),
         lastName: Yup.string().min(2, 'Last Name is too short!'),
         email: Yup.string().email('Invalid email!'),
@@ -401,39 +421,22 @@ export default function EditCreateUserProfile(props) {
                     <Formik initialValues={initialValues} 
                     onSubmit={handleFormikSubmit}
                     validationSchema={EditCreateSchema}
-                    // validate={values => {
-                    //     const errors = {};
-                    //     // TODO : Find a way to validate username is unique onChange
-                    //     // handleUserExists(values.username )
-                    //     // if (!values.username) {
-                    //     //   errors.email = 'Required';
-                    //     // } else if (
-                    //     //   !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
-                    //     // ) {
-                    //     //   errors.email = 'Invalid email address';
-                    //     // }
-                    //     return errors;
-                    //   }}
                     >
                         {({ isValid, dirty, handleSubmit}) => (
                             <form onSubmit={handleSubmit}>
                                 <Card profile>
                                     <CardHeader color="info" stats icon>
-                                        <CardIcon color="info">
-                                            {createUser ? <PersonAddOutlinedIcon /> : <EditIcon />}
-                                        </CardIcon>
                                         <p className={classes.cardCategory}>{createUser ? "Create new profile" : "Edit profile"}</p>
                                         {createUser ? "" : <h3 className={classes.cardTitle}>{userName}</h3>}
                                     </CardHeader>
                                     <CardBody profile>
+                                        <CardAvatar editProfile>
+                                            <img src={profilePicturePreview} alt="..." className={classes.editProfilePicture}/>
+                                        </CardAvatar>
                                         <div className={classes.root}>
+
                                             <Grid container spacing={5}>
                                                 <Grid item xs={12} sm={12} md={12}>
-                                                    <Grid container spacing={5} >
-                                                        <Grid item align="center" xs={12} sm={12} md={12} >
-                                                            <img src={profilePicturePreview} alt="..." className={classes.editProfilePicture} />
-                                                        </Grid>
-                                                        <Grid item align="center" xs={12} sm={12} md={12}>
                                                     <input accept="image/*"  className={classes.input} id="icon-button-file" type="file" onChange={handleProfilePictureChange}/>
                                                     <label htmlFor="icon-button-file" >
                                                         <IconButton color="inherit" aria-label="upload picture" component="span" >
@@ -441,6 +444,8 @@ export default function EditCreateUserProfile(props) {
                                                         </IconButton> Change profile image
                                                     </label>
                                                 </Grid>
+                                                <Grid item xs={12} sm={12} md={12}>
+                                                    <Grid container spacing={5} >
                                                         {createUser &&
                                                         <Grid item align="center" xs={12} sm={12} md={12}>
                                                             <FormikField name="username" label="Username" placeholder="Username"