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",
|
"graphql": "^15.5.0",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
|
"react-hook-form": "^6.15.4",
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
"typescript": "^4.1.2",
|
"typescript": "^4.1.2",
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
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`.
|
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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<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 = () => {
|
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;
|
export default SignInPage;
|
||||||
|
|
|
@ -11,7 +11,7 @@ const AdminRoute = ({ children, ...rest }: RouteProps) => {
|
||||||
{!isNil(user) && user.role === Role.Admin ? (
|
{!isNil(user) && user.role === Role.Admin ? (
|
||||||
children
|
children
|
||||||
) : (
|
) : (
|
||||||
<Redirect to={ROUTE.DASHBOARD_PAGE} />
|
<Redirect to={ROUTE.SIGN_IN_PAGE} />
|
||||||
)}
|
)}
|
||||||
</Route>
|
</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 { isNil } from 'lodash';
|
||||||
import { useAuth } from '../auth';
|
import { useAuth } from '../auth';
|
||||||
import { ROUTE } from '../../config/routing';
|
import { ROUTE } from '../../config/routing';
|
||||||
|
import { Role } from '../../config/app';
|
||||||
|
|
||||||
const PublicRoute = ({ children, ...rest }: RouteProps) => {
|
const PublicRoute = ({ children, ...rest }: RouteProps) => {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
return (
|
return (
|
||||||
<Route {...rest}>
|
<Route {...rest}>
|
||||||
{isNil(user) ? children : <Redirect to={ROUTE.DASHBOARD_PAGE} />}
|
{isNil(user) || user.role !== Role.Admin ? (
|
||||||
|
children
|
||||||
|
) : (
|
||||||
|
<Redirect to={ROUTE.DASHBOARD_PAGE} />
|
||||||
|
)}
|
||||||
</Route>
|
</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"
|
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
|
||||||
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
|
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:
|
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
|
||||||
version "16.13.1"
|
version "16.13.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||||
|
|
Reference in New Issue
Block a user