zdam-egzamin-zawodowy/admin-panel
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add react hook form, add all input fields to SignInPage and some basic logic

Browse Source
This commit is contained in:
Dawid Wysokiński 2021-03-07 19:47:23 +01:00
parent 8c8296fb74
commit 958f280a2c
6 changed files with 100 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

2
public/index.html
View File

@ -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>

86
src/features/SignInPage/SignInPage.tsx
View File

@ -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;

2
src/libs/router/AdminRoute.tsx
View File

@ -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>
);

9
src/libs/router/PublicRoute.tsx
View File

@ -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>
);
};

5
yarn.lock
View File

@ -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"