Front end part of Google Login

webapp/package.json

@@ -10,11 +10,12 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.6.5",
+    "gapi-script": "^1.2.0",
     "i18next": "^23.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^3.5.1"
   },
   "scripts": {
@@ -48,15 +49,15 @@
     "@babel/plugin-transform-private-property-in-object": "^7.23.4",
     "axios-mock-adapter": "^1.22.0",
     "expect-puppeteer": "^9.0.2",
+    "i18next": "^19.4.5",
     "jest": "^29.3.1",
     "jest-cucumber": "^3.0.1",
     "jest-environment-node": "^29.7.0",
     "mongodb-memory-server": "^9.1.4",
     "puppeteer": "^2.1.1",
+    "react-i18next": "^11.6.0",
     "serve": "^14.2.1",
     "start-server-and-test": "^2.0.3",
-    "typescript": "4.9.5",
-    "i18next": "^19.4.5",
-    "react-i18next": "^11.6.0"
+    "typescript": "4.9.5"
   }
 }

webapp/src/App.tsx

@@ -7,32 +7,42 @@ import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Init from './components/Init';
 import './i18n';
+/* import GoogleLoginMenu from './components/GoogleLoginMenu'; */
 
 function App() {
   const { t } = useTranslation()
+  // const [showGoogleLM, setShowGoogleLM] = useState(false);
   const [showLogin, setShowLogin] = useState(true);
   const [showInit, setShowInit] = useState(true);
 
   const handleToggleView = (state: boolean) => {
     setShowLogin(state);
   };
 
-  const handleLogginRegisterToggleView = (state?:boolean) => {
+  const handleLoginRegisterToggleView = (state?:boolean) => {
     setShowInit(!showInit);
     state? handleToggleView(state) : handleToggleView(false)
   };
 
+  /* const handleGoogleViewChange = () => {
+    setShowGoogleLM(!showGoogleLM);
+    setShowInit(!showInit);
+  } */
+
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />
       <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
         {t('app_name')}
       </Typography>
+
       {showInit ? 
-       < Init changeView={handleLogginRegisterToggleView}/>
-       : showLogin?
-          <Login goBack={handleLogginRegisterToggleView} /> 
-          : <AddUser goBack={handleLogginRegisterToggleView}/>}
+       <Init changeView={handleLoginRegisterToggleView}/*  changeGoogleView={handleGoogleViewChange} */ />
+       /* : showGoogleLM ?
+        <GoogleLoginMenu goBack={handleGoogleViewChange} /> */
+          : showLogin ?
+            <Login goBack={handleLoginRegisterToggleView} /> 
+            : <AddUser goBack={handleLoginRegisterToggleView} />}
 
 
     </Container>

webapp/src/components/GLoginButton.tsx

@@ -0,0 +1,50 @@
+/* import GoogleLogin from "react-google-login";
+import { useTranslation } from 'react-i18next';
+
+
+const GClientId = "http://259836370797-brpmuu6pn6a20eecpjag1l2nkoqp3eo6.apps.googleusercontent.com";
+const GLoginButton = () => {
+    const { t } = useTranslation();
+
+    const onSuccess = (response: any) => {
+        console.log(  "LOGIN SUCCESS! Current User: ",response.profileObject); 
+         // handle successful login""
+         var authResponse = response.getAuthResponse();
+         var accessToken = authResponse.access_token;
+
+         //Validations in backend should be done
+
+         // Obtener el perfil del usuario
+          var profile = accessToken.getBasicProfile();
+
+         // Obtener el email del usuario
+         var email = profile.getEmail();
+         console.log(email);
+         //send email to backend
+
+    };
+
+    const onFailure = (error: any) => {
+        console.log(  "LOGIN FAILED! Error: ",error); 
+        // handle failed login
+    };
+
+
+
+
+    return (
+        <div id='signInButton'>
+            <GoogleLogin
+                clientId={GClientId}
+                buttonText={t('login_google')}
+                onSuccess={onSuccess}
+                onFailure={onFailure}
+                cookiePolicy={'single_host_origin'}
+                isSignedIn={true}
+            />
+        </div>
+
+    )
+}
+
+export default GLoginButton; */

webapp/src/components/GoogleLoginMenu.tsx

@@ -0,0 +1,38 @@
+
+/* import { Container} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import GLoginButton from './GLoginButton';
+
+
+type ActionProps = {
+    goBack:()=> void;
+}
+
+const GoogleLogin = (props: ActionProps) => {
+
+    const { t } = useTranslation();
+
+
+    return(
+        <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
+
+
+        <p>{t("login_google")}</p>
+
+
+        <div>
+       <GLoginButton/>
+        <button color="primary" onClick={props.goBack}>
+            {t('go_back')}
+        </button>
+        </div>
+
+
+        </Container>
+
+    )
+
+
+}
+
+export default GoogleLogin; */

webapp/src/components/Init.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 
 type ActionProps = {
     changeView:(arg:boolean)=> void;
+    /* changeGoogleView:()=> void; */
 }
 
 const Init = (props:ActionProps) =>{
@@ -16,6 +17,10 @@ const Init = (props:ActionProps) =>{
           onClick={() => props.changeView(true)}>
             {t('login')}
           </button>
+          {/* <button className={'app-button'}
+          onClick={props.changeGoogleView}>
+            {t('login_google')}
+          </button> */}
         </div> 
     );
 };

webapp/src/i18n.ts

@@ -16,7 +16,8 @@ i18n
                     login: 'Login',
                     go_back: 'Go back',
                     register: 'Register',
-                    add_user: 'Add user'
+                    add_user: 'Add user',
+                    login_google: 'Login with Google'
                 }
             },
             es: {
@@ -25,7 +26,8 @@ i18n
                     login: 'Iniciar sesión',
                     go_back: 'Ir atrás',
                     register: 'Registrarse',
-                    add_user: 'Añadir usuario'
+                    add_user: 'Añadir usuario',
+                    login_google: 'Iniciar sesión con Google'
                 }
             },