Login page WIP

misses-ed-app/misses-ed-app/ClientApp/package.json

@@ -3,10 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@azure/msal-browser": "^3.6.0",
+    "@azure/msal-common": "^14.5.0",
+    "@azure/msal-react": "^2.0.8",
+    "@react-oauth/google": "^0.12.1",
     "@types/jest": "^29.5.6",
     "@types/node": "^20.8.7",
     "@types/react": "^18.2.29",
     "@types/react-dom": "^18.2.14",
+    "axios": "^1.6.2",
     "bootstrap": "^5.2.3",
     "http-proxy-middleware": "^2.0.6",
     "jquery": "^3.6.4",

misses-ed-app/misses-ed-app/ClientApp/src/App.js

@@ -1,22 +1,83 @@
-import React, { Component } from 'react';
+import React, { Component, useState, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import AppRoutes from './AppRoutes';
-import { Layout } from './components/Layout';
+import Layout from './components/Layout';
 import './custom.css';
+import './login.css';
+import { Login } from './components/Login';
+import { GoogleLogin, googleLogout, useGoogleLogin } from '@react-oauth/google';
+import axios from 'axios';
 
-export default class App extends Component {
-  static displayName = App.name;
+function App() {
+  const [ authenticated, setAuthenticated] = useState(false);
+  const [ user, setUser ] = useState([]);
+  const [ profile, setProfile ] = useState([]);
 
-  render() {
-    return (
-      <Layout>
-        <Routes>
-          {AppRoutes.map((route, index) => {
-            const { element, ...rest } = route;
-            return <Route key={index} {...rest} element={element} />;
-          })}
-        </Routes>
-      </Layout>
+  const login = useGoogleLogin({
+      onSuccess: (codeResponse) => setUser(codeResponse),
+      onError: (error) => console.log('Login Failed:', error)
+  });
+
+  useEffect(
+      () => {
+        console.log(user);
+          if (user.access_token) {
+              axios
+                  .get(`https://www.googleapis.com/oauth2/v3/userinfo?access_token=${user.access_token}`, {
+                      headers: {
+                          Authorization: `Bearer ${user.access_token}`,
+                          Accept: 'application/json'
+                      }
+                  })
+                  .then((res) => {
+                      setProfile(res.data);
+                      console.log(res.data);
+                      setAuthenticated(true);
+                  })
+                  .catch((err) => console.log(err));
+          }
+      },
+      [ user ]
+  );
+
+  // log out function to log the user out of google and set the profile array to null
+  const logOut = () => {
+      googleLogout();
+      setProfile(null);
+      setAuthenticated(false);
+  };
+
+
+  if(authenticated) {
+  return (
+    <Layout logOut={logOut}>
+      <Routes>
+        {AppRoutes.map((route, index) => {
+          const { element, ...rest } = route;
+          return <Route key={index} {...rest} element={element} />;
+        })}
+      </Routes>
+    </Layout>
+  );
+  } else {
+    return(
+    <div className='floating-wrapper'>
+      <h1>Misses ED</h1>
+      <h3 className='mb-5'>SENG 350 - Group 6</h3>
+      <h6 className='mb-4'>Sign in to continue with all features</h6>
+      <button className='mb-4 button nice-button' onClick={() => login()}>
+        <div className='inset nice-button-active lead'>
+          Sign in with Google
+        </div>
+      </button>
+      <h6 className='mb-4 text-center'>Or</h6>
+      {/* FYI this will be changed in the future to set a flag indicating whether user is a guest */}
+      <button className='button lead' onClick={() => setAuthenticated(true)}>Continue as Guest</button>
+      <p className='bottom'>©2023</p>
+    </div>
     );
   }
+
 }
+
+export default App;

misses-ed-app/misses-ed-app/ClientApp/src/components/Layout.js

@@ -3,22 +3,22 @@ import { Container } from 'reactstrap';
 import { NavMenu } from './NavMenu';
 import { Footer } from './Footer/Footer';
 
-export class Layout extends Component {
-  static displayName = Layout.name;
+const Layout = ({ children, logOut }) => {
 
-  render() {
-    return (
-      <div className="main-page">
-        <div>
-            <NavMenu />
-            <Container tag="main">
-                {this.props.children}
-            </Container>
-        </div>
-
-       <Footer />
 
+  return (
+    <div className="main-page">
+      <div>
+          <NavMenu logOut={logOut}/>
+          <Container tag="main">
+              {children}
+          </Container>
       </div>
-    );
-  }
-}
+
+      <Footer />
+
+    </div>
+  );
+};
+
+export default Layout;

misses-ed-app/misses-ed-app/ClientApp/src/components/Login.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+export class Login extends Component {
+    static displayName = Login.name;
+
+render() {
+    return (
+        <a href="/.auth/login/google">Log in with Google</a>
+    );
+  }
+}

misses-ed-app/misses-ed-app/ClientApp/src/components/NavMenu.css

@@ -36,6 +36,7 @@ a.navbar-brand {
 
 a:hover {
     background-color: #efefef;
+    cursor: pointer;
 }
 
 

misses-ed-app/misses-ed-app/ClientApp/src/components/NavMenu.jsx

@@ -47,9 +47,9 @@ export class NavMenu extends Component {
                 <NavLink tag={Link} className="text-dark" to="/user-management">User Management</NavLink>
               </NavItem>
               <NavItem>
-                   <NavLink to="/user-management" className="icon">
+                   <a onClick={() => this.props.logOut()} className="icon">
                    <img src={accountIcon} width="32" alt="Account Icon" />
-                   </NavLink>
+                   </a>
               </NavItem>
               <NavItem>
                    <NavLink to="/user-management" className="icon">