mirror of
https://github.com/ClaytonWWilson/CS307-Team24.git
synced 2025-12-16 02:08:47 +00:00
Circular progress when the editProfile page is loading
This commit is contained in:
parent
825c126c6c
commit
a4cce0b75e
@ -56,6 +56,7 @@ export class editProfile extends Component {
|
|||||||
// Sets the default values of all the textboxes to the data
|
// Sets the default values of all the textboxes to the data
|
||||||
// that is stored in the database for the user.
|
// that is stored in the database for the user.
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
this.setState({pageLoading: true})
|
||||||
axios
|
axios
|
||||||
.get("/getProfileInfo")
|
.get("/getProfileInfo")
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
@ -64,7 +65,8 @@ export class editProfile extends Component {
|
|||||||
lastName: res.data.lastName,
|
lastName: res.data.lastName,
|
||||||
email: res.data.email,
|
email: res.data.email,
|
||||||
handle: res.data.handle,
|
handle: res.data.handle,
|
||||||
bio: res.data.bio
|
bio: res.data.bio,
|
||||||
|
pageLoading: false
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -89,6 +91,7 @@ export class editProfile extends Component {
|
|||||||
bio: "",
|
bio: "",
|
||||||
anchorEl: null,
|
anchorEl: null,
|
||||||
loading: false,
|
loading: false,
|
||||||
|
pageLoading: false,
|
||||||
errors: {}
|
errors: {}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@ -171,187 +174,190 @@ export class editProfile extends Component {
|
|||||||
const id = open ? 'simple-popover' : undefined;
|
const id = open ? 'simple-popover' : undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid container className={classes.form} id="container-grid">
|
this.state.pageLoading ?
|
||||||
<Grid item sm >
|
<CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress>
|
||||||
<Button
|
:
|
||||||
variant="outlined"
|
<Grid container className={classes.form} id="container-grid">
|
||||||
color="primary"
|
<Grid item sm >
|
||||||
className={classes.back}
|
|
||||||
component={ Link }
|
|
||||||
to='/user'
|
|
||||||
>
|
|
||||||
Back to Profile
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
<Grid item sm>
|
|
||||||
<Typography variant="h2" className={classes.pageTitle}>
|
|
||||||
Edit Profile
|
|
||||||
</Typography>
|
|
||||||
<form noValidate onSubmit={this.handleSubmit}>
|
|
||||||
<Grid container className={classes.form} spacing={4}>
|
|
||||||
<Grid item sm>
|
|
||||||
<TextField
|
|
||||||
id="firstName"
|
|
||||||
name="firstName"
|
|
||||||
label="First Name"
|
|
||||||
className={classes.textField}
|
|
||||||
value={this.state.firstName}
|
|
||||||
helperText={errors.firstName}
|
|
||||||
error={errors.firstName ? true : false}
|
|
||||||
variant="outlined"
|
|
||||||
onChange={this.handleChange}
|
|
||||||
fullWidth
|
|
||||||
autoComplete='off'
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item sm>
|
|
||||||
<TextField
|
|
||||||
id="lastName"
|
|
||||||
name="lastName"
|
|
||||||
label="Last Name"
|
|
||||||
className={classes.textField}
|
|
||||||
value={this.state.lastName}
|
|
||||||
helperText={errors.lastname}
|
|
||||||
error={errors.lastName ? true : false}
|
|
||||||
variant="outlined"
|
|
||||||
onChange={this.handleChange}
|
|
||||||
fullWidth
|
|
||||||
autoComplete='off'
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<TextField
|
|
||||||
id="email"
|
|
||||||
name="email"
|
|
||||||
label="Email*"
|
|
||||||
className={classes.textField}
|
|
||||||
value={this.state.email}
|
|
||||||
disabled
|
|
||||||
helperText="(disabled)"
|
|
||||||
// INFO: These will be uncommented if changing emails is allowed
|
|
||||||
// helperText={errors.email}
|
|
||||||
// error={errors.email ? true : false}
|
|
||||||
variant="outlined"
|
|
||||||
onChange={this.handleChange}
|
|
||||||
fullWidth
|
|
||||||
autoComplete='off'
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
id="handle"
|
|
||||||
name="handle"
|
|
||||||
label="Handle*"
|
|
||||||
className={classes.textField}
|
|
||||||
value={this.state.handle}
|
|
||||||
disabled
|
|
||||||
helperText="(disabled)"
|
|
||||||
// INFO: These will be uncommented if changing usernames is allowed
|
|
||||||
// helperText={errors.handle}
|
|
||||||
// error={errors.handle ? true : false}
|
|
||||||
variant="outlined"
|
|
||||||
onChange={this.handleChange}
|
|
||||||
fullWidth
|
|
||||||
autoComplete='off'
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
id="bio"
|
|
||||||
name="bio"
|
|
||||||
label="Bio"
|
|
||||||
className={classes.textField}
|
|
||||||
value={this.state.bio}
|
|
||||||
helperText={errors.bio}
|
|
||||||
error={errors.bio ? true : false}
|
|
||||||
multiline
|
|
||||||
rows="8"
|
|
||||||
variant="outlined"
|
|
||||||
onChange={this.handleChange}
|
|
||||||
fullWidth
|
|
||||||
autoComplete='off'
|
|
||||||
/>
|
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
variant="outlined"
|
||||||
variant="contained"
|
|
||||||
color="primary"
|
color="primary"
|
||||||
className={classes.button}
|
className={classes.back}
|
||||||
disabled={loading}
|
component={ Link }
|
||||||
//component={ Link }
|
to='/user'
|
||||||
//to='/user'
|
|
||||||
>
|
>
|
||||||
Submit
|
Back to Profile
|
||||||
{loading && (
|
|
||||||
<CircularProgress size={30} className={classes.progress} />
|
|
||||||
)}
|
|
||||||
</Button>
|
</Button>
|
||||||
|
</Grid>
|
||||||
</form>
|
<Grid item sm>
|
||||||
</Grid>
|
<Typography variant="h2" className={classes.pageTitle}>
|
||||||
<Grid item sm>
|
Edit Profile
|
||||||
<Button
|
</Typography>
|
||||||
variant="outlined"
|
<form noValidate onSubmit={this.handleSubmit}>
|
||||||
color="secondary"
|
<Grid container className={classes.form} spacing={4}>
|
||||||
className={classes.delete}
|
<Grid item sm>
|
||||||
onClick={this.handleOpenConfirmDelete}
|
<TextField
|
||||||
>
|
id="firstName"
|
||||||
Delete Account
|
name="firstName"
|
||||||
</Button>
|
label="First Name"
|
||||||
</Grid>
|
className={classes.textField}
|
||||||
<Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box>
|
value={this.state.firstName}
|
||||||
<Popover
|
helperText={errors.firstName}
|
||||||
id={id}
|
error={errors.firstName ? true : false}
|
||||||
open={open}
|
variant="outlined"
|
||||||
anchorEl={this.state.anchorEl}
|
onChange={this.handleChange}
|
||||||
onClose={this.handleCloseConfirmDelete}
|
fullWidth
|
||||||
anchorOrigin={{
|
autoComplete='off'
|
||||||
vertical: 'center',
|
/>
|
||||||
horizontal: 'center'
|
</Grid>
|
||||||
}}
|
<Grid item sm>
|
||||||
transformOrigin={{
|
<TextField
|
||||||
vertical: 'top',
|
id="lastName"
|
||||||
horizontal: 'center'
|
name="lastName"
|
||||||
}}
|
label="Last Name"
|
||||||
style={{
|
className={classes.textField}
|
||||||
marginTop: "-200px"
|
value={this.state.lastName}
|
||||||
}}
|
helperText={errors.lastname}
|
||||||
>
|
error={errors.lastName ? true : false}
|
||||||
<Box
|
variant="outlined"
|
||||||
|
onChange={this.handleChange}
|
||||||
|
fullWidth
|
||||||
|
autoComplete='off'
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<TextField
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
label="Email*"
|
||||||
|
className={classes.textField}
|
||||||
|
value={this.state.email}
|
||||||
|
disabled
|
||||||
|
helperText="(disabled)"
|
||||||
|
// INFO: These will be uncommented if changing emails is allowed
|
||||||
|
// helperText={errors.email}
|
||||||
|
// error={errors.email ? true : false}
|
||||||
|
variant="outlined"
|
||||||
|
onChange={this.handleChange}
|
||||||
|
fullWidth
|
||||||
|
autoComplete='off'
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
id="handle"
|
||||||
|
name="handle"
|
||||||
|
label="Handle*"
|
||||||
|
className={classes.textField}
|
||||||
|
value={this.state.handle}
|
||||||
|
disabled
|
||||||
|
helperText="(disabled)"
|
||||||
|
// INFO: These will be uncommented if changing usernames is allowed
|
||||||
|
// helperText={errors.handle}
|
||||||
|
// error={errors.handle ? true : false}
|
||||||
|
variant="outlined"
|
||||||
|
onChange={this.handleChange}
|
||||||
|
fullWidth
|
||||||
|
autoComplete='off'
|
||||||
|
/>
|
||||||
|
<TextField
|
||||||
|
id="bio"
|
||||||
|
name="bio"
|
||||||
|
label="Bio"
|
||||||
|
className={classes.textField}
|
||||||
|
value={this.state.bio}
|
||||||
|
helperText={errors.bio}
|
||||||
|
error={errors.bio ? true : false}
|
||||||
|
multiline
|
||||||
|
rows="8"
|
||||||
|
variant="outlined"
|
||||||
|
onChange={this.handleChange}
|
||||||
|
fullWidth
|
||||||
|
autoComplete='off'
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
className={classes.button}
|
||||||
|
disabled={loading}
|
||||||
|
//component={ Link }
|
||||||
|
//to='/user'
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
{loading && (
|
||||||
|
<CircularProgress size={30} className={classes.progress} />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</Grid>
|
||||||
|
<Grid item sm>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
color="secondary"
|
||||||
|
className={classes.delete}
|
||||||
|
onClick={this.handleOpenConfirmDelete}
|
||||||
|
>
|
||||||
|
Delete Account
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
<Box hidden={!Boolean(this.state.anchorEl)} className={classes.popoverBackground}></Box>
|
||||||
|
<Popover
|
||||||
|
id={id}
|
||||||
|
open={open}
|
||||||
|
anchorEl={this.state.anchorEl}
|
||||||
|
onClose={this.handleCloseConfirmDelete}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: 'center',
|
||||||
|
horizontal: 'center'
|
||||||
|
}}
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: 'top',
|
||||||
|
horizontal: 'center'
|
||||||
|
}}
|
||||||
style={{
|
style={{
|
||||||
height: 200,
|
marginTop: "-200px"
|
||||||
width: 400
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Grid container direction="column" spacing={3}>
|
<Box
|
||||||
<Grid item>
|
style={{
|
||||||
<Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography>
|
height: 200,
|
||||||
|
width: 400
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid container direction="column" spacing={3}>
|
||||||
|
<Grid item>
|
||||||
|
<Typography style={{marginTop: 30, marginLeft: 50, marginRight: 50, textAlign: "center", fontSize: 24}}>Are you sure you want to delete your account?</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item>
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
variant="contained"
|
||||||
|
component={ Link }
|
||||||
|
to='/delete'
|
||||||
|
style={{
|
||||||
|
marginBottom: "-40px",
|
||||||
|
marginLeft: 10,
|
||||||
|
width: 90
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Yes
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
variant="outlined"
|
||||||
|
onClick={this.handleCloseConfirmDelete}
|
||||||
|
style={{
|
||||||
|
marginBottom: "-40px",
|
||||||
|
marginLeft: 195
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item>
|
</Box>
|
||||||
<Button
|
</Popover>
|
||||||
color="secondary"
|
</Grid>
|
||||||
variant="contained"
|
|
||||||
component={ Link }
|
|
||||||
to='/delete'
|
|
||||||
style={{
|
|
||||||
marginBottom: "-40px",
|
|
||||||
marginLeft: 10,
|
|
||||||
width: 90
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Yes
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
variant="outlined"
|
|
||||||
onClick={this.handleCloseConfirmDelete}
|
|
||||||
style={{
|
|
||||||
marginBottom: "-40px",
|
|
||||||
marginLeft: 195
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Box>
|
|
||||||
</Popover>
|
|
||||||
</Grid>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user