Skip to content
Snippets Groups Projects
Commit 1de66e6e authored by Francesco's avatar Francesco
Browse files

Link ProfilePage

parent 7f7a58c4
No related branches found
No related tags found
1 merge request!60New component to search senior (see #12). Enhance responsiveness and solve #10 and #11
Pipeline #12669 passed
Stage: build
This commit is part of merge request !60. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/App.tsx
+ 1
− 1
Edit View file @ 1de66e6e
...@@ -40,7 +40,7 @@ export const App: FC = () => { ...@@ -40,7 +40,7 @@ export const App: FC = () => {
<Switch> <Switch>
<Route exact path={NonAuthRoutes.home} component={LandingPage} /> <Route exact path={NonAuthRoutes.home} component={LandingPage} />
<Route path={NonAuthRoutes.auth} component={AuthUser} /> <Route path={NonAuthRoutes.auth} component={AuthUser} />
<Route path={AuthRoutes.dashboard} component={All(Dashboard)} /> <Route path={AuthRoutes.dashboard} component={Dashboard} />
<Route <Route
path={NonAuthRoutes.unauthorized} path={NonAuthRoutes.unauthorized}
component={Unauthorized} component={Unauthorized}
......
src/components/Dashboard/ProfilePage/ProfilePage.tsx
+ 238
− 6
Edit View file @ 1de66e6e
import React, { FC, useContext } from 'react'; import React, { FC, useContext } from 'react';
import Button from '@material-ui/core/Button'; import { makeStyles } from '@material-ui/core/styles';
import axios from 'axios'; import axios from 'axios';
import { NonAuthRoutes } from 'api/routes'; import { NonAuthRoutes } from 'api/routes';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { AuthContext } from 'components/Auth/AuthContext'; import { AuthContext } from 'components/Auth/AuthContext';
import {
CssBaseline,
Grid,
Typography,
Hidden,
createMuiTheme,
responsiveFontSizes,
MuiThemeProvider,
Container,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
TextField,
Button,
Select,
MenuItem,
} from '@material-ui/core';
import { NavBar } from 'components/Dashboard/HomePage/NavBar';
let themeResp = createMuiTheme();
themeResp = responsiveFontSizes(themeResp);
const useStyles = makeStyles(() => ({
root: {
minHeight: '36vh',
backgroundImage: `url(${'/assets/bg7.png'})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
},
rightAlign: {
marginLeft: 'auto',
},
whiteText: {
color: 'white',
},
imageIcon: {
maxHeight: '50%',
},
paddingBottom: {
paddingBottom: '65px',
},
paddingTop: {
paddingTop: '65px',
},
bodyIcon: {
fontSize: '90px',
paddingBottom: '10px',
paddingTop: '10px',
},
contIcon: {
width: '100%',
left: '0',
right: '0',
},
noShadow: {
border: 'none',
boxShadow: 'none',
backgroundColor: 'transparent',
},
extendedIcon: {
fontSize: '50px',
},
fab: {
margin: '10px 90px 80px 10px',
bottom: '0',
right: '0',
position: 'fixed',
padding: '45px',
},
fabSmall: {
margin: '10px 45px 70px 10px',
bottom: '0',
right: '0',
position: 'fixed',
padding: '35px',
},
}));
export const ProfilePage: FC = () => { export const ProfilePage: FC = () => {
const history = useHistory(); const history = useHistory();
...@@ -15,11 +94,164 @@ export const ProfilePage: FC = () => { ...@@ -15,11 +94,164 @@ export const ProfilePage: FC = () => {
}); });
}; };
const classes = useStyles();
const [lang, setLang] = React.useState<string | number>('');
const [open, setOpen] = React.useState(false);
const handleChange = (event: React.ChangeEvent<{ value: unknown }>): void => {
setLang(event.target.value as number);
};
const handleClose = (): void => {
setOpen(false);
};
const handleOpen = (): void => {
setOpen(true);
};
return ( return (
<div data-testid="ProfilePage"> <Grid container direction="column" className={classes.paddingBottom}>
<Button variant="outlined" color="default" onClick={logout}> <div className={classes.root}>
Logout <CssBaseline />
</Button>
</div> <Grid item>
<NavBar />
</Grid>
<MuiThemeProvider theme={themeResp}>
<Grid item container className={classes.paddingBottom}>
<Grid item xs={1} md={2} lg={2} />
<Grid item xs={10} md={6} lg={4}>
<Typography variant="h2" className={classes.whiteText}>
Set Here Your
</Typography>
<Typography variant="h1" className={classes.whiteText}>
PROFILE
</Typography>
</Grid>
<Grid item xs={1} />
</Grid>
</MuiThemeProvider>
</div>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />
<Grid item container xs={8}>
<Grid item xs={12}>
<Typography variant="h3">Your Profile Settings</Typography>
</Grid>
<Grid item xs={5}>
<TextField
autoFocus
margin="dense"
id="name"
label="First Name"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2} />
<Grid item xs={5}>
<TextField
autoFocus
margin="dense"
id="name"
label="Last Name"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={5}>
<TextField
autoFocus
margin="dense"
id="name"
label="Address"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={2} />
<Grid item xs={2}>
<TextField
autoFocus
margin="dense"
id="name"
label="CAP"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={1} />
<Grid item xs={2}>
<TextField
autoFocus
margin="dense"
id="name"
label="Province"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12}>
<TextField
autoFocus
margin="dense"
id="name"
label="Email"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12}>
<TextField
autoFocus
margin="dense"
id="name"
label="Card No"
type="text"
fullWidth
/>
</Grid>
<Grid item xs={12}>
<Select
labelId="Language"
id="Language"
label="Language"
open={open}
onClose={handleClose}
onOpen={handleOpen}
value={lang}
onChange={handleChange}
fullWidth
>
<MenuItem value={20}>Italiano</MenuItem>
<MenuItem value={10}>English</MenuItem>
<MenuItem value={30}>Deutsch</MenuItem>
<MenuItem value={40}>Ladinisch</MenuItem>
</Select>
</Grid>
<div data-testid="ProfilePage">
<Button variant="outlined" color="default" onClick={logout}>
Logout
</Button>
</div>
</Grid>
<Grid item xs={2} />
</Grid>
</Grid>
); );
}; };
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment