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