diff --git a/frontend/src/components/pages/Integramic/Integramic.tsx b/frontend/src/components/pages/Integramic/Integramic.tsx index 7211f18d..d9643703 100644 --- a/frontend/src/components/pages/Integramic/Integramic.tsx +++ b/frontend/src/components/pages/Integramic/Integramic.tsx @@ -1,29 +1,41 @@ -import React from 'react'; -import { MuiThemeProvider, Typography, unstable_createMuiStrictModeTheme as createMuiTheme } from '@material-ui/core'; -import { THEME } from '../../atoms/constants/ThemeMUI'; +import React, {useState} from 'react'; +import {MuiThemeProvider, Typography} from '@material-ui/core'; +import {THEME} from '../../atoms/constants/ThemeMUI'; import ClickButton from '../../atoms/Button/ClickButton'; import UserAvatarAndName from '../../molecules/UserAvatarAndName/UserAvatarAndName'; -import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; -import { PATH_FOR_MAIN_VIEW } from '../../atoms/constants/routerPaths'; -import Logo from '../../atoms/Logo/Logo'; +import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; +import {PATH_FOR_MAIN_VIEW} from '../../atoms/constants/routerPaths'; +import {LoginPage} from "../LoginPage/LoginPage"; +import Logo from "../../atoms/Logo/Logo"; -const onClick = () => {}; +const onClick = () => { +}; export function Integramic() { + const [state, setState] = useState({authenticatedUser: undefined, isLoading: false}); + if (state.authenticatedUser === undefined) { + return setState({authenticatedUser: user, isLoading: false})} /> + } return ( - - - - - Responsive h3 + + + + + Responsive h3 - onClick()} /> + onClick()} /> - - - - - - + + + + + + ); } + +export type AuthState = { + readonly authenticatedUser: { email: string } | undefined; + readonly isLoading: boolean +} + diff --git a/frontend/src/components/pages/LoginPage/LoginPage.tsx b/frontend/src/components/pages/LoginPage/LoginPage.tsx new file mode 100644 index 00000000..0277eb63 --- /dev/null +++ b/frontend/src/components/pages/LoginPage/LoginPage.tsx @@ -0,0 +1,35 @@ +import GoogleLogin, {GoogleLoginResponse, GoogleLoginResponseOffline} from "react-google-login"; +import {authenticated, unauthenticated} from "../../../restapi/authentication/authentication"; +import React from "react"; + +const googleClientId = process.env.REACT_APP_GOOGLE_CLIENT_ID; + +export function LoginPage(props: { onAuthenticated: (user: { email: string }) => void }) { + const onSuccess = (loginResponse: GoogleLoginResponse | GoogleLoginResponseOffline) => { + if (loginResponse.code) { + unauthenticated(); + return; + } + const successResponse = loginResponse as GoogleLoginResponse + authenticated({token: successResponse.tokenId, email: successResponse.profileObj.email}) + props.onAuthenticated({email: successResponse.profileObj.email}); + }; + const onFailure = (error: any) => { + unauthenticated() + }; + + if (googleClientId === undefined) { + return
Logowanie za pomocą Google nie zostało skonfigurowane.
+ } + + return ( + + ) +} diff --git a/frontend/src/restapi/authentication/authentication.ts b/frontend/src/restapi/authentication/authentication.ts new file mode 100644 index 00000000..6961bdd1 --- /dev/null +++ b/frontend/src/restapi/authentication/authentication.ts @@ -0,0 +1,13 @@ +import Cookies from 'universal-cookie'; + +const cookies = new Cookies(); + +export function authenticated(props: { token: string; email: string }) { + cookies.set('authenticationToken', JSON.stringify({ type: 'Google', value: props.token })); + cookies.set('currentUser', JSON.stringify({ email: props.email })); +} + +export function unauthenticated() { + cookies.remove('authenticationToken'); + cookies.remove('currentUser'); +}