Hackathon | Frontend | Add Login page button

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<AuthState>({authenticatedUser: undefined, isLoading: false});
+  if (state.authenticatedUser === undefined) {
+    return <LoginPage onAuthenticated={user => setState({authenticatedUser: user, isLoading: false})} />
+  }
   return (
-    <MuiThemeProvider theme={THEME}>
-      <Router>
-        <Switch>
-          <Route path={PATH_FOR_MAIN_VIEW} exact>
-            <Typography variant="h2">Responsive h3</Typography>
+      <MuiThemeProvider theme={THEME}>
+        <Router>
+          <Switch>
+            <Route path={PATH_FOR_MAIN_VIEW} exact>
+              <Typography variant="h2">Responsive h3</Typography>
 
-            <ClickButton text={'ZADAJ PYTANIE'} onClick={() => onClick()} />
+              <ClickButton text={'ZADAJ PYTANIE'} onClick={() => onClick()} />
 
-            <UserAvatarAndName />
-            <Logo />
-          </Route>
-        </Switch>
-      </Router>
-    </MuiThemeProvider>
+              <UserAvatarAndName />
+              <Logo />
+            </Route>
+          </Switch>
+        </Router>
+      </MuiThemeProvider>
   );
 }
+
+export type AuthState = {
+  readonly authenticatedUser: { email: string } | undefined;
+  readonly isLoading: boolean
+}
+

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 <div>Logowanie za pomocą Google nie zostało skonfigurowane.</div>
+  }
+
+  return (
+      <GoogleLogin
+          clientId={googleClientId}
+          buttonText="Zaloguj się za pomocą Google"
+          onSuccess={onSuccess}
+          onFailure={onFailure}
+          cookiePolicy={"single_host_origin"}
+          isSignedIn={true}
+      />
+  )
+}

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');
+}