Skip to content

Commit d814722

Browse files
elfiyang16elfiyang16
committed
feat: add the UI in place
1 parent f831f5e commit d814722

2 files changed

Lines changed: 283 additions & 213 deletions

File tree

‎client/src/components/Account.js‎

Lines changed: 128 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@ import Typography from '@material-ui/core/Typography'
77
import { withStyles } from '@material-ui/core/styles'
88
import Menu from './common/Menu'
99
import AccountIcon from '@material-ui/icons/Person'
10+
import Dialog from '@material-ui/core/Dialog'
11+
import DialogActions from '@material-ui/core/DialogActions'
12+
import DialogContent from '@material-ui/core/DialogContent'
13+
import TextField from '@material-ui/core/TextField'
14+
import DialogContentText from '@material-ui/core/DialogContentText'
15+
import DialogTitle from '@material-ui/core/DialogTitle'
1016
import { AppContext } from './MainFrame'
1117

1218
const style = (theme) => ({
@@ -50,80 +56,143 @@ function Account(props) {
5056
const { classes } = props
5157
const appContext = React.useContext(AppContext)
5258
const { user } = appContext
59+
const [openPwdForm, setOpenPwdForm] = React.useState(false)
5360

54-
function handleLogout(){
55-
appContext.logout();
61+
function handleLogout() {
62+
appContext.logout()
63+
}
64+
65+
const handleClickOpen = () => {
66+
setOpenPwdForm(true)
67+
}
68+
69+
const handleClose = () => {
70+
setOpenPwdForm(false)
71+
// setSelectedValue(value)
5672
}
5773

5874
return (
59-
<Grid container className={classes.box}>
60-
<Grid item xs={3}>
61-
<Paper elevation={3} className={classes.menu}>
62-
<Menu variant="plain" />
63-
</Paper>
64-
</Grid>
65-
<Grid item xs={9}>
66-
<Grid container className={classes.rightBox}>
67-
<Grid item xs="12">
68-
<Grid container className={classes.titleBox}>
69-
<Grid item>
70-
<AccountIcon className={classes.accountIcon} />
71-
</Grid>
72-
<Grid item>
73-
<Typography variant="h2">Account</Typography>
74-
</Grid>
75-
</Grid>
76-
<Grid container direction="column" className={classes.bodyBox}>
77-
<Grid item>
78-
<Typography className={classes.title}>Username</Typography>
79-
<Typography className={classes.item}>{user.username}</Typography>
80-
</Grid>
81-
<Grid item>
82-
<Typography className={classes.title}>Name</Typography>
83-
<Typography className={classes.item}>
84-
{user.firstName} {user.lastName}
85-
</Typography>
86-
</Grid>
87-
<Grid item>
88-
<Typography className={classes.title}>Email</Typography>
89-
<Typography className={classes.item}>{user.email}</Typography>
90-
</Grid>
91-
<Grid item>
92-
<Typography className={classes.title}>Role</Typography>
93-
<Typography className={classes.item}>
94-
{user.role.map((e) => (
95-
<span>{e.name}/</span>
96-
))}
97-
</Typography>
75+
<>
76+
<Grid container className={classes.box}>
77+
<Grid item xs={3}>
78+
<Paper elevation={3} className={classes.menu}>
79+
<Menu variant="plain" />
80+
</Paper>
81+
</Grid>
82+
<Grid item xs={9}>
83+
<Grid container className={classes.rightBox}>
84+
<Grid item xs="12">
85+
<Grid container className={classes.titleBox}>
86+
<Grid item>
87+
<AccountIcon className={classes.accountIcon} />
88+
</Grid>
89+
<Grid item>
90+
<Typography variant="h2">Account</Typography>
91+
</Grid>
9892
</Grid>
99-
<Grid item xs="8">
100-
<Grid container justify="space-between">
101-
<Grid item>
102-
<Typography className={classes.title}>Password</Typography>
93+
<Grid container direction="column" className={classes.bodyBox}>
94+
<Grid item>
95+
<Typography className={classes.title}>Username</Typography>
96+
<Typography className={classes.item}>{user.username}</Typography>
97+
</Grid>
98+
<Grid item>
99+
<Typography className={classes.title}>Name</Typography>
100+
<Typography className={classes.item}>
101+
{user.firstName} {user.lastName}
102+
</Typography>
103+
</Grid>
104+
<Grid item>
105+
<Typography className={classes.title}>Email</Typography>
106+
<Typography className={classes.item}>{user.email}</Typography>
107+
</Grid>
108+
<Grid item>
109+
<Typography className={classes.title}>Role</Typography>
110+
<Typography className={classes.item}>
111+
{user.role.map((e) => (
112+
<span>{e.name}/</span>
113+
))}
114+
</Typography>
115+
</Grid>
116+
<Grid item xs="8">
117+
<Grid container justify="space-between">
118+
<Grid item>
119+
<Typography className={classes.title}>Password</Typography>
120+
</Grid>
121+
<Grid item>
122+
<Grid
123+
container
124+
justif="center"
125+
alignItems="center"
126+
className={classes.changeBox}
127+
>
128+
<Button onClick={handleClickOpen} color="primary">
129+
CHANGE
130+
</Button>
131+
</Grid>
132+
</Grid>
103133
</Grid>
104134
<Grid item>
105-
<Grid
106-
container
107-
justif="center"
108-
alignItems="center"
109-
className={classes.changeBox}
135+
<Box height={20} />
136+
<Button
137+
onClick={handleLogout}
138+
color="secondary"
139+
variant="contained"
140+
className={classes.logout}
110141
>
111-
<Button color="primary">CHANGE</Button>
112-
</Grid>
142+
LOG OUT
143+
</Button>
113144
</Grid>
114145
</Grid>
115-
<Grid item>
116-
<Box height={20} />
117-
<Button onClick={handleLogout} color="secondary" variant="contained" className={classes.logout}>
118-
LOG OUT
119-
</Button>
120-
</Grid>
121146
</Grid>
122147
</Grid>
123148
</Grid>
124149
</Grid>
125150
</Grid>
126-
</Grid>
151+
<Dialog open={openPwdForm} onClose={handleClose} aria-labelledby="form-dialog-title">
152+
<DialogTitle id="form-dialog-title">Change Password</DialogTitle>
153+
<DialogContent>
154+
<TextField
155+
variant="outlined"
156+
margin="normal"
157+
required
158+
fullWidth
159+
name="password"
160+
label="old password"
161+
type="password"
162+
id="password"
163+
164+
// onChange={handlePasswordChange}
165+
// value={password}
166+
/>
167+
<TextField
168+
variant="outlined"
169+
margin="normal"
170+
required
171+
fullWidth
172+
name="password"
173+
label="new password"
174+
type="password"
175+
id="password"
176+
/>
177+
<TextField
178+
variant="outlined"
179+
margin="normal"
180+
required
181+
fullWidth
182+
name="password"
183+
label="confirm password"
184+
type="password"
185+
id="password"
186+
/>
187+
</DialogContent>
188+
<DialogActions>
189+
<Button color="primary">Confirm</Button>
190+
<Button onClick={handleClose} color="primary">
191+
Close
192+
</Button>
193+
</DialogActions>
194+
</Dialog>
195+
</>
127196
)
128197
}
129198

0 commit comments

Comments
 (0)