update favicon.ico, add logo.svg, add styles and background to the SignInPage, finish the SignInForm logic

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

public/logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#f0dc6a;}.cls-2{fill:#525354;}.cls-3{fill:#fff;}.cls-4{fill:#d7dadb;}.cls-5{fill:#52b1b1;}</style></defs><title/><circle class="cls-1" cx="70" cy="70" r="64"/><rect class="cls-2" height="98" rx="1" ry="1" width="64" x="39" y="22"/><rect class="cls-3" height="98" rx="1" ry="1" width="64" x="38" y="21"/><rect class="cls-2" height="4" rx="1" ry="1" width="32" x="62.9" y="32.79"/><rect class="cls-2" height="4" rx="1" ry="1" width="20" x="62.9" y="41"/><rect class="cls-4" height="8" rx="1" ry="1" width="8" x="47.68" y="34.89"/><path class="cls-5" d="M49.38,38.74l-1.52-1.52a1.09,1.09,0,0,0-1.54,0l-.91.91a1.09,1.09,0,0,0,0,1.54l4,4a1.09,1.09,0,0,0,1.54,0L52.6,42l5.35-5.35a1.09,1.09,0,0,0,0-1.54L57,34.16a1.09,1.09,0,0,0-1.54,0l-4.58,4.58A1.09,1.09,0,0,1,49.38,38.74Z"/><rect class="cls-2" height="4" rx="1" ry="1" width="32" x="62.9" y="53.46"/><rect class="cls-2" height="4" rx="1" ry="1" width="20" x="62.9" y="61.67"/><rect class="cls-4" height="8" rx="1" ry="1" width="8" x="47.68" y="55.56"/><path class="cls-5" d="M49.38,59.4l-1.52-1.52a1.09,1.09,0,0,0-1.54,0l-.91.91a1.09,1.09,0,0,0,0,1.54l4,4a1.09,1.09,0,0,0,1.54,0l1.68-1.68,5.35-5.35a1.09,1.09,0,0,0,0-1.54L57,54.83a1.09,1.09,0,0,0-1.54,0L50.92,59.4A1.09,1.09,0,0,1,49.38,59.4Z"/><rect class="cls-2" height="4" rx="1" ry="1" width="32" x="62.9" y="74.12"/><rect class="cls-2" height="4" rx="1" ry="1" width="20" x="62.9" y="82.33"/><rect class="cls-4" height="8" rx="1" ry="1" width="8" x="47.68" y="76.23"/><path class="cls-5" d="M49.38,80.07l-1.52-1.52a1.09,1.09,0,0,0-1.54,0l-.91.91a1.09,1.09,0,0,0,0,1.54l4,4a1.09,1.09,0,0,0,1.54,0l1.68-1.68,5.35-5.35a1.09,1.09,0,0,0,0-1.54L57,75.49a1.09,1.09,0,0,0-1.54,0l-4.58,4.58A1.09,1.09,0,0,1,49.38,80.07Z"/><rect class="cls-2" height="4" rx="1" ry="1" width="32" x="62.9" y="94.79"/><rect class="cls-2" height="4" rx="1" ry="1" width="20" x="62.9" y="103"/><rect class="cls-4" height="8" rx="1" ry="1" width="8" x="47.68" y="96.89"/></svg>

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<FormData>();
+  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 (
-    <div>
+    <div className={classes.container}>
       <Container maxWidth="xs">
+        <div className={classes.logoWrapper}>
+          <img
+            className={classes.logo}
+            src="/logo.svg"
+            alt="Zdam Egzamin Zawodowy"
+          />
+        </div>
         <Card>
           <CardContent>
             <Typography gutterBottom variant="h4">
@@ -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;

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(
     <ApolloProvider client={createClient(API_URI, tokenStorage)}>
       <ThemeProvider>
         <AuthProvider tokenStorage={tokenStorage}>
-          <App />
+          <SnackbarProvider
+            SnackbarProps={{
+              autoHideDuration: 4000,
+              anchorOrigin: { vertical: 'top', horizontal: 'center' },
+            }}
+          >
+            <App />
+          </SnackbarProvider>
         </AuthProvider>
       </ThemeProvider>
     </ApolloProvider>

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<MeQueryResult>({
         query: QUERY_ME,
         data: {
-          me: result.data.user,
+          me: result.data.signIn.user,
         },
       });
-      return result.data.user;
+      return result.data.signIn.user;
     }
 
     return null;

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"