From 958f280a2cd6a80159f5c8f1433486912baa4bab Mon Sep 17 00:00:00 2001 From: Kichiyaki Date: Sun, 7 Mar 2021 19:47:23 +0100 Subject: [PATCH] add react hook form, add all input fields to SignInPage and some basic logic --- package.json | 1 + public/index.html | 2 +- src/features/SignInPage/SignInPage.tsx | 86 +++++++++++++++++++++++++- src/libs/router/AdminRoute.tsx | 2 +- src/libs/router/PublicRoute.tsx | 9 ++- yarn.lock | 5 ++ 6 files changed, 100 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 866780b..b4ad89f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/index.html b/public/index.html index aa069f2..ed9acdb 100644 --- a/public/index.html +++ b/public/index.html @@ -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`. --> - React App + Panel administratora | Zdam Egzamin Zawodowy diff --git a/src/features/SignInPage/SignInPage.tsx b/src/features/SignInPage/SignInPage.tsx index edd486f..6521bcc 100644 --- a/src/features/SignInPage/SignInPage.tsx +++ b/src/features/SignInPage/SignInPage.tsx @@ -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
SignInPage
; + const { signIn } = useAuth(); + const { register, errors, handleSubmit } = useForm(); + + 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 ( +
+ + + + + Zaloguj się + +
+ + + + } + label="Pozostań zalogowany" + /> + + + +
+ + +
+ ); }; export default SignInPage; diff --git a/src/libs/router/AdminRoute.tsx b/src/libs/router/AdminRoute.tsx index bdeb87e..1c2d9df 100644 --- a/src/libs/router/AdminRoute.tsx +++ b/src/libs/router/AdminRoute.tsx @@ -11,7 +11,7 @@ const AdminRoute = ({ children, ...rest }: RouteProps) => { {!isNil(user) && user.role === Role.Admin ? ( children ) : ( - + )} ); diff --git a/src/libs/router/PublicRoute.tsx b/src/libs/router/PublicRoute.tsx index 0f2b1ad..290f700 100644 --- a/src/libs/router/PublicRoute.tsx +++ b/src/libs/router/PublicRoute.tsx @@ -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 ( - {isNil(user) ? children : } + {isNil(user) || user.role !== Role.Admin ? ( + children + ) : ( + + )} ); }; diff --git a/yarn.lock b/yarn.lock index c4c2ccf..c0fb97b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"