add react hook form, add all input fields to SignInPage and some basic logic
This commit is contained in:
parent
8c8296fb74
commit
958f280a2c
|
@ -21,6 +21,7 @@
|
|||
"graphql": "^15.5.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-hook-form": "^6.15.4",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"typescript": "^4.1.2",
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Panel administratora | Zdam Egzamin Zawodowy</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
@ -1,5 +1,89 @@
|
|||
import { useForm } from 'react-hook-form';
|
||||
import { ApolloError } from '@apollo/client';
|
||||
import { useAuth } from 'libs/auth';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardContent,
|
||||
Checkbox,
|
||||
Container,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
TextField,
|
||||
Typography,
|
||||
} from '@material-ui/core';
|
||||
import { Role } from '../../config/app';
|
||||
|
||||
type FormData = {
|
||||
email: string;
|
||||
password: string;
|
||||
staySignedIn: boolean;
|
||||
};
|
||||
|
||||
const SignInPage = () => {
|
||||
return <div>SignInPage</div>;
|
||||
const { signIn } = useAuth();
|
||||
const { register, errors, handleSubmit } = useForm<FormData>();
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
try {
|
||||
await signIn(data.email, data.password, data.staySignedIn, user => {
|
||||
if (user.role !== Role.Admin) {
|
||||
throw new Error('Brak uprawnień.');
|
||||
}
|
||||
return true;
|
||||
});
|
||||
} catch (e) {
|
||||
if (e instanceof ApolloError) {
|
||||
if (e.graphQLErrors.length > 0) {
|
||||
console.log(e.graphQLErrors[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Container maxWidth="xs">
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h4">
|
||||
Zaloguj się
|
||||
</Typography>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Adres e-mail"
|
||||
name="email"
|
||||
margin="dense"
|
||||
inputRef={register({ required: 'Te pole jest wymagane.' })}
|
||||
error={!!errors.email}
|
||||
helperText={errors.email ? errors.email.message : ''}
|
||||
/>
|
||||
<TextField
|
||||
type="password"
|
||||
label="Hasło"
|
||||
margin="dense"
|
||||
fullWidth
|
||||
name="password"
|
||||
inputRef={register({ required: 'Te pole jest wymagane.' })}
|
||||
error={!!errors.password}
|
||||
helperText={errors.password ? errors.password.message : ''}
|
||||
/>
|
||||
<FormGroup>
|
||||
<FormControlLabel
|
||||
control={<Checkbox inputRef={register} name="staySignedIn" />}
|
||||
label="Pozostań zalogowany"
|
||||
/>
|
||||
</FormGroup>
|
||||
<Button variant="contained" color="primary" type="submit">
|
||||
Zaloguj się
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignInPage;
|
||||
|
|
|
@ -11,7 +11,7 @@ const AdminRoute = ({ children, ...rest }: RouteProps) => {
|
|||
{!isNil(user) && user.role === Role.Admin ? (
|
||||
children
|
||||
) : (
|
||||
<Redirect to={ROUTE.DASHBOARD_PAGE} />
|
||||
<Redirect to={ROUTE.SIGN_IN_PAGE} />
|
||||
)}
|
||||
</Route>
|
||||
);
|
||||
|
|
|
@ -1,13 +1,18 @@
|
|||
import { Route, Redirect, RouteProps } from 'react-router-dom';
|
||||
import { Redirect, Route, RouteProps } from 'react-router-dom';
|
||||
import { isNil } from 'lodash';
|
||||
import { useAuth } from '../auth';
|
||||
import { ROUTE } from '../../config/routing';
|
||||
import { Role } from '../../config/app';
|
||||
|
||||
const PublicRoute = ({ children, ...rest }: RouteProps) => {
|
||||
const { user } = useAuth();
|
||||
return (
|
||||
<Route {...rest}>
|
||||
{isNil(user) ? children : <Redirect to={ROUTE.DASHBOARD_PAGE} />}
|
||||
{isNil(user) || user.role !== Role.Admin ? (
|
||||
children
|
||||
) : (
|
||||
<Redirect to={ROUTE.DASHBOARD_PAGE} />
|
||||
)}
|
||||
</Route>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -9475,6 +9475,11 @@ react-error-overlay@^6.0.9:
|
|||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
|
||||
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
|
||||
|
||||
react-hook-form@^6.15.4:
|
||||
version "6.15.4"
|
||||
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.4.tgz#328003e1ccc096cd158899ffe7e3b33735a9b024"
|
||||
integrity sha512-K+Sw33DtTMengs8OdqFJI3glzNl1wBzSefD/ksQw/hJf9CnOHQAU6qy82eOrh0IRNt2G53sjr7qnnw1JDjvx1w==
|
||||
|
||||
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
|
|
Reference in New Issue
Block a user