diff --git a/package.json b/package.json index b4ad89f..28850f0 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "clsx": "^1.1.1", "date-fns": "^2.19.0", "graphql": "^15.5.0", + "material-ui-snackbar-provider": "^1.4.0", "react": "^17.0.1", "react-dom": "^17.0.1", "react-hook-form": "^6.15.4", diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..c923fda 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..fb6c1a1 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/features/SignInPage/SignInPage.tsx b/src/features/SignInPage/SignInPage.tsx index 6521bcc..9e15be2 100644 --- a/src/features/SignInPage/SignInPage.tsx +++ b/src/features/SignInPage/SignInPage.tsx @@ -1,6 +1,8 @@ import { useForm } from 'react-hook-form'; -import { ApolloError } from '@apollo/client'; +import { useSnackbar } from 'material-ui-snackbar-provider'; import { useAuth } from 'libs/auth'; +import { ApolloError } from '@apollo/client'; +import { makeStyles } from '@material-ui/core/styles'; import { Button, Card, @@ -11,6 +13,7 @@ import { FormGroup, TextField, Typography, + Box, } from '@material-ui/core'; import { Role } from '../../config/app'; @@ -21,8 +24,10 @@ type FormData = { }; const SignInPage = () => { + const snackbar = useSnackbar(); const { signIn } = useAuth(); const { register, errors, handleSubmit } = useForm(); + const classes = useStyles(); const onSubmit = async (data: FormData) => { try { @@ -32,18 +37,26 @@ const SignInPage = () => { } return true; }); + snackbar.showMessage('Logowanie przebiegło pomyślnie.'); } catch (e) { - if (e instanceof ApolloError) { - if (e.graphQLErrors.length > 0) { - console.log(e.graphQLErrors[0]); - } - } + snackbar.showMessage( + e instanceof ApolloError && e.graphQLErrors.length > 0 + ? e.graphQLErrors[0].message + : e.message + ); } }; return ( -
+
+
+ Zdam Egzamin Zawodowy +
@@ -86,4 +99,25 @@ const SignInPage = () => { ); }; +const useStyles = makeStyles(theme => ({ + container: { + minHeight: '100vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#330000', + backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23D18'/%3E%3Cstop offset='1' stop-color='%23330000'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23FA3' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FA3' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E")`, + backgroundAttachment: 'fixed', + backgroundSize: 'cover', + backgroundPosition: 'center', + }, + logo: { + width: '112px', + }, + logoWrapper: { + textAlign: 'center', + marginBottom: theme.spacing(3), + }, +})); + export default SignInPage; diff --git a/src/index.tsx b/src/index.tsx index e625beb..b2d4518 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,6 +9,7 @@ import TokenStorage from './libs/tokenstorage/TokenStorage'; import createClient from './libs/graphql/createClient'; import { API_URI } from './config/api'; import reportWebVitals from './reportWebVitals'; +import { SnackbarProvider } from 'material-ui-snackbar-provider'; const tokenStorage = new TokenStorage(); @@ -17,7 +18,14 @@ ReactDOM.render( - + + + diff --git a/src/libs/auth/Provider.tsx b/src/libs/auth/Provider.tsx index d19093b..12be8fd 100644 --- a/src/libs/auth/Provider.tsx +++ b/src/libs/auth/Provider.tsx @@ -17,8 +17,10 @@ type MeQueryResult = { }; type SignInMutationResult = { - token: string; - user: User; + signIn?: { + token: string; + user: User; + }; }; type SignInMutationVariables = { @@ -75,19 +77,19 @@ export function AuthProvider(props: AuthProviderProps) { }, }); - if (result.data?.user) { - if (isFunction(validate) && !validate(result.data?.user)) { + if (result.data?.signIn?.user) { + if (isFunction(validate) && !validate(result.data.signIn.user)) { return null; } - tokenStorage.setToken(result.data.token); - setUser(result.data.user); + tokenStorage.setToken(result.data.signIn.token); + setUser(result.data.signIn.user); client.writeQuery({ query: QUERY_ME, data: { - me: result.data.user, + me: result.data.signIn.user, }, }); - return result.data.user; + return result.data.signIn.user; } return null; diff --git a/yarn.lock b/yarn.lock index c0fb97b..b1600d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7469,6 +7469,13 @@ map-visit@^1.0.0: dependencies: object-visit "^1.0.0" +material-ui-snackbar-provider@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/material-ui-snackbar-provider/-/material-ui-snackbar-provider-1.4.0.tgz#93948effc8e34d794e66bf7ea7cdee7dadc88fc7" + integrity sha512-ANwIFb3c46iWGNYIFlU7H0yNet9gLXoWrrxJKEG0A30j+HnjgAwe7u+HA3Y3Rts0qCsDGb/M3pMeRx6kOvI8Fw== + dependencies: + prop-types "^15.7.2" + md5.js@^1.3.4: version "1.3.5" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"