update favicon.ico, add logo.svg, add styles and background to the SignInPage, finish the SignInForm logic
This commit is contained in:
parent
958f280a2c
commit
ab2296af13
|
@ -19,6 +19,7 @@
|
||||||
"clsx": "^1.1.1",
|
"clsx": "^1.1.1",
|
||||||
"date-fns": "^2.19.0",
|
"date-fns": "^2.19.0",
|
||||||
"graphql": "^15.5.0",
|
"graphql": "^15.5.0",
|
||||||
|
"material-ui-snackbar-provider": "^1.4.0",
|
||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
"react-hook-form": "^6.15.4",
|
"react-hook-form": "^6.15.4",
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 361 KiB |
1
public/logo.svg
Normal file
1
public/logo.svg
Normal file
|
@ -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>
|
After Width: | Height: | Size: 2.0 KiB |
|
@ -1,6 +1,8 @@
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { ApolloError } from '@apollo/client';
|
import { useSnackbar } from 'material-ui-snackbar-provider';
|
||||||
import { useAuth } from 'libs/auth';
|
import { useAuth } from 'libs/auth';
|
||||||
|
import { ApolloError } from '@apollo/client';
|
||||||
|
import { makeStyles } from '@material-ui/core/styles';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
|
@ -11,6 +13,7 @@ import {
|
||||||
FormGroup,
|
FormGroup,
|
||||||
TextField,
|
TextField,
|
||||||
Typography,
|
Typography,
|
||||||
|
Box,
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
import { Role } from '../../config/app';
|
import { Role } from '../../config/app';
|
||||||
|
|
||||||
|
@ -21,8 +24,10 @@ type FormData = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const SignInPage = () => {
|
const SignInPage = () => {
|
||||||
|
const snackbar = useSnackbar();
|
||||||
const { signIn } = useAuth();
|
const { signIn } = useAuth();
|
||||||
const { register, errors, handleSubmit } = useForm<FormData>();
|
const { register, errors, handleSubmit } = useForm<FormData>();
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
const onSubmit = async (data: FormData) => {
|
const onSubmit = async (data: FormData) => {
|
||||||
try {
|
try {
|
||||||
|
@ -32,18 +37,26 @@ const SignInPage = () => {
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
snackbar.showMessage('Logowanie przebiegło pomyślnie.');
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (e instanceof ApolloError) {
|
snackbar.showMessage(
|
||||||
if (e.graphQLErrors.length > 0) {
|
e instanceof ApolloError && e.graphQLErrors.length > 0
|
||||||
console.log(e.graphQLErrors[0]);
|
? e.graphQLErrors[0].message
|
||||||
}
|
: e.message
|
||||||
}
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={classes.container}>
|
||||||
<Container maxWidth="xs">
|
<Container maxWidth="xs">
|
||||||
|
<div className={classes.logoWrapper}>
|
||||||
|
<img
|
||||||
|
className={classes.logo}
|
||||||
|
src="/logo.svg"
|
||||||
|
alt="Zdam Egzamin Zawodowy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Typography gutterBottom variant="h4">
|
<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;
|
export default SignInPage;
|
||||||
|
|
|
@ -9,6 +9,7 @@ import TokenStorage from './libs/tokenstorage/TokenStorage';
|
||||||
import createClient from './libs/graphql/createClient';
|
import createClient from './libs/graphql/createClient';
|
||||||
import { API_URI } from './config/api';
|
import { API_URI } from './config/api';
|
||||||
import reportWebVitals from './reportWebVitals';
|
import reportWebVitals from './reportWebVitals';
|
||||||
|
import { SnackbarProvider } from 'material-ui-snackbar-provider';
|
||||||
|
|
||||||
const tokenStorage = new TokenStorage();
|
const tokenStorage = new TokenStorage();
|
||||||
|
|
||||||
|
@ -17,7 +18,14 @@ ReactDOM.render(
|
||||||
<ApolloProvider client={createClient(API_URI, tokenStorage)}>
|
<ApolloProvider client={createClient(API_URI, tokenStorage)}>
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
<AuthProvider tokenStorage={tokenStorage}>
|
<AuthProvider tokenStorage={tokenStorage}>
|
||||||
<App />
|
<SnackbarProvider
|
||||||
|
SnackbarProps={{
|
||||||
|
autoHideDuration: 4000,
|
||||||
|
anchorOrigin: { vertical: 'top', horizontal: 'center' },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<App />
|
||||||
|
</SnackbarProvider>
|
||||||
</AuthProvider>
|
</AuthProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</ApolloProvider>
|
</ApolloProvider>
|
||||||
|
|
|
@ -17,8 +17,10 @@ type MeQueryResult = {
|
||||||
};
|
};
|
||||||
|
|
||||||
type SignInMutationResult = {
|
type SignInMutationResult = {
|
||||||
token: string;
|
signIn?: {
|
||||||
user: User;
|
token: string;
|
||||||
|
user: User;
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
type SignInMutationVariables = {
|
type SignInMutationVariables = {
|
||||||
|
@ -75,19 +77,19 @@ export function AuthProvider(props: AuthProviderProps) {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
if (result.data?.user) {
|
if (result.data?.signIn?.user) {
|
||||||
if (isFunction(validate) && !validate(result.data?.user)) {
|
if (isFunction(validate) && !validate(result.data.signIn.user)) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
tokenStorage.setToken(result.data.token);
|
tokenStorage.setToken(result.data.signIn.token);
|
||||||
setUser(result.data.user);
|
setUser(result.data.signIn.user);
|
||||||
client.writeQuery<MeQueryResult>({
|
client.writeQuery<MeQueryResult>({
|
||||||
query: QUERY_ME,
|
query: QUERY_ME,
|
||||||
data: {
|
data: {
|
||||||
me: result.data.user,
|
me: result.data.signIn.user,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return result.data.user;
|
return result.data.signIn.user;
|
||||||
}
|
}
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
|
|
|
@ -7469,6 +7469,13 @@ map-visit@^1.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
object-visit "^1.0.0"
|
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:
|
md5.js@^1.3.4:
|
||||||
version "1.3.5"
|
version "1.3.5"
|
||||||
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
|
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
|
||||||
|
|
Reference in New Issue
Block a user