diff --git a/jams-react-client/src/components/Devices/Devices.js b/jams-react-client/src/components/Devices/Devices.js
index b1a06c2f120039f1556a1a7c5c3adf003ecc2961..2c0aa55628fb9e888047d6f8f782331b91be25b1 100755
--- a/jams-react-client/src/components/Devices/Devices.js
+++ b/jams-react-client/src/components/Devices/Devices.js
@@ -1,5 +1,4 @@
import React, {useEffect} from "react";
-import PropTypes from "prop-types";
import classnames from "classnames";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
@@ -13,7 +12,6 @@ import TableCell from "@material-ui/core/TableCell";
// @material-ui/icons
import Edit from "@material-ui/icons/Edit";
import Close from "@material-ui/icons/Close";
-import Check from "@material-ui/icons/Check";
// core components
import styles from "assets/jss/material-dashboard-react/components/devicesStyle.js";
import auth from "auth.js"
diff --git a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
index 348fee312b4dfeeeaad7cb1f9958e87c340a7663..3f2d2bcfc79a43e506bcf75138d357305bac961a 100644
--- a/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/DisplayUserProfile.js
@@ -6,34 +6,129 @@ 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";
import CardFooter from "components/Card/CardFooter.js";
+import noProfilePicture from "assets/img/faces/no-profile-picture.png";
+
import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
import BusinessCenterOutlinedIcon from '@material-ui/icons/BusinessCenterOutlined';
import AlternateEmailOutlinedIcon from '@material-ui/icons/AlternateEmailOutlined';
import PhoneInTalkOutlinedIcon from '@material-ui/icons/PhoneInTalkOutlined';
import SmartphoneOutlinedIcon from '@material-ui/icons/SmartphoneOutlined';
import LocalPrintshopOutlinedIcon from '@material-ui/icons/LocalPrintshopOutlined';
import PhoneForwardedOutlinedIcon from '@material-ui/icons/PhoneForwardedOutlined';
-import PersonOutlineOutlinedIcon from '@material-ui/icons/PersonOutlineOutlined';
import PersonOutlinedIcon from '@material-ui/icons/PersonOutlined';
+import AccountBoxOutlinedIcon from '@material-ui/icons/AccountBoxOutlined';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
+
import auth from "auth.js"
import configApiCall from "api.js";
import { api_path_get_admin_user, api_path_get_user, api_path_get_user_directory_search} from "globalUrls";
-import noProfilePicture from "assets/img/faces/no-profile-picture.png";
+import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import {
infoColor
} from "assets/jss/material-dashboard-react.js";
+import { hexToRgb, blackColor } from "assets/jss/material-dashboard-react.js";
import axios from "axios";
+import FormControl from "@material-ui/core/FormControl";
+import PersonIcon from "../../../node_modules/@material-ui/icons/Person";
+const styles = (theme)=> ( {
+ ...dashboardStyle,
+ root: {
+ flexGrow: 1
+ },
+ cardCategoryWhite: {
+ color: "rgba(255,255,255,.62)",
+ margin: "0",
+ fontSize: "14px",
+ marginTop: "0",
+ marginBottom: "0"
+ },
+ cardTitleWhite: {
+ color: "#FFFFFF",
+ marginTop: "0px",
+ minHeight: "auto",
+ fontWeight: "300",
+ fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
+ marginBottom: "3px",
+ textDecoration: "none"
+ },
+ input: {
+ display: 'none',
+ },
+ profileAsBackground: {
+ backgroundSize: "100% 100%",
+ width: "80px",
+ height: "80px",
+ },
+ centerIconMiddle: {
+ position:"relative",
+ top: "20px",
+ left: "15px"
+ },
+ editProfilePicture: {
+ borderRadius: "50%",
+ width: "200px",
+ height: "200px",
+ 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)",
+ },
+ dialogPaper: {
+ minHeight: '60vh',
+ maxHeight: '60vh',
+ minWidth: '80vh',
+ maxWidth: '80vh'
+ },
+ // controls: {
+ // padding: 16,
+ // display: 'flex',
+ // flexDirection: 'column',
+ // alignItems: 'stretch',
+ // [theme.breakpoints.up('sm')]: {
+ // flexDirection: 'row',
+ // alignItems: 'center',
+ // },
+ // },
+ // sliderContainer: {
+ // display: 'flex',
+ // flex: '1',
+ // alignItems: 'center',
+ // },
+ // sliderLabel: {
+ // [theme.breakpoints.down('xs')]: {
+ // minWidth: 65,
+ // },
+ // },
+ // slider: {
+ // padding: '22px 0px',
+ // marginLeft: 16,
+ // [theme.breakpoints.up('sm')]: {
+ // flexDirection: 'row',
+ // alignItems: 'center',
+ // margin: '0 16px',
+ // },
+ // },
+});
+
+const useStyles = makeStyles(styles);
+
export default function DisplayUserProfile(props) {
+ const classes = useStyles();
+
const [users, setUsers] = React.useState([])
const [userStatus, setUserStatus] = React.useState('')
const searchData = {
@@ -81,115 +176,85 @@ export default function DisplayUserProfile(props) {
return (
<div>
{users.map(user =>
- <GridContainer spacing={3}>
- <GridItem xs={12} sm={12} md={8}>
+ <GridContainer>
+ <Grid item xs={12} sm={12} md={8}>
<Card profile>
- <CardAvatar profile>
- <img src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} alt="..." />
- </CardAvatar>
- <CardBody>
- <GridContainer spacing={3}>
- <GridItem xs={12} sm={12} md={12}>
- <span>{user.username ? user.username : 'no username'}, {userStatus ? userStatus: "no user status"}</span>
- </GridItem>
- <GridItem xs={12} sm={12} md={6}>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <PersonOutlineOutlinedIcon/>
- </Grid>
- <Grid item>
- {user.firstName ? user.firstName : 'no firstname'}
- </Grid>
- </Grid>
- </GridItem>
- <GridItem xs={12} sm={12} md={6}>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <PersonOutlinedIcon/>
- </Grid>
- <Grid item>
- {user.lastName ? user.lastName : 'no lastname'}
- </Grid>
- </Grid>
- </GridItem>
- <GridItem xs={12} sm={12} md={6}>
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <AlternateEmailOutlinedIcon/>
- </Grid>
- <Grid item>
- {user.email ? user.email : 'no email'}
+ <CardHeader color="info" stats icon>
+ <CardIcon color="info">
+ <AccountBoxOutlinedIcon />
+ </CardIcon>
+ <p className={classes.cardCategory}>{"Profile information"}</p>
+ <h3 className={classes.cardTitle}>{user.username}</h3>
+ </CardHeader>
+ <CardBody profile>
+ <div className={classes.root}>
+ <GridContainer spacing={5}>
+ <Grid item xs={12} sm={12} md={6}>
+ <Grid container spacing={5} >
+ <Grid item align="center" xs={12} sm={12} md={12} >
+ <img src={user.profilePicture ? ('data:image/png;base64, ' + user.profilePicture) : noProfilePicture} className={classes.editProfilePicture} alt="..." />
</Grid>
</Grid>
- </GridItem>
- <GridItem xs={12} sm={12} md={6}>
- <Typography variant="subtitle2">
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <BusinessCenterOutlinedIcon/>
- </Grid>
- <Grid item>
- {user.organization ? user.organization : 'no organization'}
+ </Grid>
+ <GridItem xs={12} sm={12} md={6}>
+ <Grid container spacing={5}>
+ <Grid item xs={12} sm={12} md={12}>
+ <FormControl className={classes.margin} fullWidth>
+ <span><AccountCircleIcon /> {user.username ? user.username : 'no username'}, {userStatus ? userStatus: "no user status"}</span>
+ </FormControl>
</Grid>
- </Grid>
- </Typography>
- </GridItem>
- <GridItem xs={12} sm={12} md={6}>
- <Typography variant="subtitle2">
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <PhoneInTalkOutlinedIcon/>
+ <Grid item xs={12} sm={12} md={12}>
+ <FormControl className={classes.margin} fullWidth>
+ <span> <PersonIcon /> {user.firstName ? user.firstName : 'no firstname'}</span>
+ </FormControl>
</Grid>
- <Grid item>
- {user.phoneNumber ? user.phoneNumber : 'no phone number'}
+ <Grid item xs={12} sm={12} md={12}>
+ <FormControl className={classes.margin} fullWidth>
+ <span><PersonOutlinedIcon/> {user.lastName ? user.lastName : 'no lastname'}</span>
+ </FormControl>
</Grid>
</Grid>
- </Typography>
- </GridItem>
- <GridItem xs={12} sm={12} md={6}>
- <Typography variant="subtitle2">
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <PhoneForwardedOutlinedIcon/>
- </Grid>
- <Grid item>
- {user.phoneNumberExtension ? user.phoneNumberExtension : 'no Extension'}
- </Grid>
- </Grid>
- </Typography>
- </GridItem>
- <GridItem xs={12} sm={12} md={6}>
- <Typography variant="subtitle2">
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <SmartphoneOutlinedIcon/>
- </Grid>
- <Grid item>
- {user.mobileNumber ? user.mobileNumber : 'no mobile number'}
- </Grid>
- </Grid>
- </Typography>
- </GridItem>
- <GridItem xs={12} sm={12} md={6}>
- <Typography variant="subtitle2">
- <Grid container direction="row" alignItems="center" spacing={1}>
- <Grid item>
- <LocalPrintshopOutlinedIcon/>
- </Grid>
- <Grid item>
- {user.faxNumber ? user.faxNumber : 'no fax number'}
- </Grid>
- </Grid>
- </Typography>
- </GridItem>
- </GridContainer>
+ </GridItem>
+
+ <Grid item xs={12} sm={12} md={6}>
+ <FormControl className={classes.margin} fullWidth>
+ <span> <AlternateEmailOutlinedIcon/> {user.email ? user.email : 'no email'} </span>
+ </FormControl>
+ </Grid>
+ <Grid item xs={12} sm={12} md={6}>
+ <FormControl className={classes.margin} fullWidth>
+ <span> <BusinessCenterOutlinedIcon/> {user.organization ? user.organization : 'no organization'} </span>
+ </FormControl>
+ </Grid>
+ <Grid item xs={12} sm={12} md={6}>
+ <FormControl className={classes.margin} fullWidth>
+ <span> <PhoneInTalkOutlinedIcon/> {user.phoneNumber ? user.phoneNumber : 'no phone number'} </span>
+ </FormControl>
+ </Grid>
+ <Grid item xs={12} sm={12} md={6}>
+ <FormControl className={classes.margin} fullWidth>
+ <span> <PhoneForwardedOutlinedIcon/> {user.phoneNumberExtension ? user.phoneNumberExtension : 'no Extension'} </span>
+ </FormControl>
+ </Grid>
+ <Grid item xs={12} sm={12} md={6}>
+ <FormControl className={classes.margin} fullWidth>
+ <span> <SmartphoneOutlinedIcon/> {user.mobileNumber ? user.mobileNumber : 'no mobile number'} </span>
+ </FormControl>
+ </Grid>
+ <Grid item xs={12} sm={12} md={6}>
+ <FormControl className={classes.margin} fullWidth>
+ <span> <LocalPrintshopOutlinedIcon/> {user.faxNumber ? user.faxNumber : 'no fax number'} </span>
+ </FormControl>
+ </Grid>
+ </GridContainer>
+ </div>
</CardBody>
<CardFooter>
- <Button color="info">Update Profile</Button>
+ <Button color="info" onClick={() => props.setDisplayUser(false)}>Edit Profile</Button>
{auth.hasAdminScope() && (userStatus == "Active" || userStatus == '') && <Button color="danger">Revoke Profile</Button>}
</CardFooter>
</Card>
- </GridItem>
+ </Grid>
</GridContainer>
)}
diff --git a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
index 87b5ea5e6478db0e09ac475f075660da192e28b5..505fb9484490c91066bab21985c6fb547c0712cb 100644
--- a/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
+++ b/jams-react-client/src/views/UserProfile/EditCreateUserProfile.js
@@ -211,10 +211,13 @@ export default function EditCreateUserProfile(props) {
}
const handleCancel = () => {
- setProfilePicturePreview(originalUploadedImage)
history.push('/admin');
}
+ const handleCancelUpdate = () => {
+ props.setDisplayUser(true)
+ }
+
const handleUserProfileCreation = (data) => {
axios(configApiCall(api_path_post_create_user + "?username="+ data.username, 'POST', null, null)).then((response) => {
console.log("New user successfully created. Here is the one time password: " + response.data["password"])
@@ -249,7 +252,7 @@ export default function EditCreateUserProfile(props) {
}
const handleUserUpdate = () => {
- history.push('/admin');
+ props.setDisplayUser(true)
}
const handleUpdateUser = () => {
@@ -293,6 +296,7 @@ export default function EditCreateUserProfile(props) {
}
const handleClose = () => {
+ setProfilePicturePreview(originalUploadedImage)
setOpen(false);
};
@@ -542,7 +546,7 @@ export default function EditCreateUserProfile(props) {
</div>
</CardBody>
<CardFooter>
- {createUser ? <Button color="danger" onClick={handleCancel}>Cancel</Button> : <Button color="danger" onClick={handleCancel}>Cancel Update</Button>}
+ {createUser ? <Button color="danger" onClick={handleCancel}>Cancel</Button> : <Button color="danger" onClick={handleCancelUpdate}>Cancel Update</Button>}
{createUser ? <Button color="info" onClick={handleCreateUser}>Create Profile</Button> : <Button color="info" onClick={handleUpdateUser}>Update Profile</Button>}
</CardFooter>
</Card>
diff --git a/jams-react-client/src/views/UserProfile/UserProfile.js b/jams-react-client/src/views/UserProfile/UserProfile.js
index 01efe302a61c6378bb02ffb2ca4498bb0614dec7..a4d24300cb593c4e0204413b6a8460e02393e544 100755
--- a/jams-react-client/src/views/UserProfile/UserProfile.js
+++ b/jams-react-client/src/views/UserProfile/UserProfile.js
@@ -29,6 +29,7 @@ import EditCreateUserProfile from "./EditCreateUserProfile"
import {
infoColor
} from "assets/jss/material-dashboard-react.js";
+import DisplayUserProfile from "./DisplayUserProfile";
function TabPanel(props) {
@@ -90,6 +91,7 @@ export default function UserProfile(props) {
const [value, setValue] = React.useState(0);
const [username, setUsername] = React.useState(props.username);
+ const [displayUser, setDisplayUser] = React.useState(true);
const handleChange = (event, newValue) => {
setValue(newValue);
@@ -106,7 +108,9 @@ export default function UserProfile(props) {
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
- <EditCreateUserProfile username={username} createUser={false}/>
+ {displayUser? <DisplayUserProfile username={username} setDisplayUser={setDisplayUser}/>: <EditCreateUserProfile username={username} createUser={false} setDisplayUser={setDisplayUser}/>
+ }
+
</TabPanel>
<TabPanel value={value} index={1}>
<Devices username={props.username}/>