diff --git a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardAvatarStyle.js b/jams-react-client/src/assets/jss/material-dashboard-react/components/cardAvatarStyle.js
index 422418760772d0e43d7f54dbdda5fd64132ec613..7213d0a537b81007b4285830f5b40a955166b38d 100644
--- a/jams-react-client/src/assets/jss/material-dashboard-react/components/cardAvatarStyle.js
+++ b/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: {}
};
diff --git a/jams-react-client/src/components/Card/CardAvatar.js b/jams-react-client/src/components/Card/CardAvatar.js
index ef323252e267b2bc484b528c86b25b88faad7fe7..bc519e625d0c0a68ae053049b117fc72372e50f1 100644
--- a/jams-react-client/src/components/Card/CardAvatar.js
+++ b/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
};
diff --git a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
index d15eddfb6e1443aa6f5f2271101f61694355c5cb..2d5d6ab7d0f6d4598901d37ca9855aa628453cce 100644
--- a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
+++ b/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,46 +421,31 @@ 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}>
+ <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" >
+ <PhotoCamera />
+ </IconButton> Change profile image
+ </label>
+ </Grid>
<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" >
- <PhotoCamera />
- </IconButton> Change profile image
- </label>
- </Grid>
{createUser &&
<Grid item align="center" xs={12} sm={12} md={12}>
<FormikField name="username" label="Username" placeholder="Username"