Merge pull request #39 from CPSC319-Winter-term-2/login-pass-uuid

Login pass UUID

package-lock.json

@@ -14,6 +14,7 @@
         "@mui/material": "^5.4.3",
         "@reduxjs/toolkit": "^1.8.0",
         "@types/react-big-calendar": "^0.36.2",
+        "axios": "^0.26.1",
         "moment": "^2.29.1",
         "react": "^17.0.2",
         "react-big-calendar": "^0.39.3",
@@ -3522,6 +3523,14 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "node_modules/babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -7094,7 +7103,6 @@
       "version": "1.14.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
       "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -15456,6 +15464,14 @@
         "lodash": "^4.17.14"
       }
     },
+    "axios": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
+      "requires": {
+        "follow-redirects": "^1.14.8"
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
@@ -18253,8 +18269,7 @@
     "follow-redirects": {
       "version": "1.14.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
-      "dev": true
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
     },
     "forwarded": {
       "version": "0.2.0",

package.json

@@ -14,6 +14,7 @@
     "@mui/material": "^5.4.3",
     "@reduxjs/toolkit": "^1.8.0",
     "@types/react-big-calendar": "^0.36.2",
+    "axios": "^0.26.1",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-big-calendar": "^0.39.3",

src/api/axios.tsx

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export default axios.create({
+    baseURL: "https://g17vmhsvwi.execute-api.us-west-2.amazonaws.com/Prod"
+});

src/components/login/Login.tsx

@@ -8,6 +8,11 @@ import hsbcLogo from "../../assets/logo-png.png";
 import zoomLogo from "../../assets/zoom.png";
 import LoginIcon from "@mui/icons-material/Login";
 import useAuth from "../../hooks/useAuth";
+import { store } from "../../redux/store";
+import { fetchFavorites } from "../../redux/slices/favoritesSlice";
+import { fetchMeetings } from "../../redux/slices/meetingsAndUserStatusSlice";
+import { fetchUsers } from "../../redux/slices/usersSlice";
+import axios from "../../api/axios"
 
 interface LocationState {
   from: { pathname: string };
@@ -20,7 +25,7 @@ const Login: React.FC = () => {
   const state = location.state as LocationState;
   const from = state?.from?.pathname || "/";
 
-  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   // const [errMsg, setErrMsg] = useState('');
 
@@ -35,14 +40,47 @@ const Login: React.FC = () => {
   //     setErrMsg('');
   // }, [user, pwd])
 
-  const handleLogin = () => {
-    if (username === "" && password === "") {
-      // setAuth({username: username, isLoggedIn: true});
-      setAuth["username"] = username;
+  const handleLogin = async(e: React.SyntheticEvent) => {
+    e.preventDefault();
+
+    try {
+      if (email === "" && password === "") {
+        setAuth["email"] = email;
         setAuth["isLoggedIn"] = true;
+  
+        store.dispatch(fetchMeetings(""));
+        store.dispatch(fetchUsers(""));
+        store.dispatch(fetchFavorites(""));
         navigate(from, { replace: true });
       }
-    setUsername("");
+
+      const response = await axios.post(
+        '/login',
+        JSON.stringify({ email: email, password: password })
+        // { headers: { 'Content-Type': 'application/json' } }
+      )
+      // const response = { data: { userid: "123456" }}; // delete later
+      
+      const logedInUserId = response?.data?.userId;
+
+      console.log(email);
+      console.log(password);
+      console.log(response?.data);
+
+      if (logedInUserId != undefined) {
+        setAuth["email"] = email;
+        setAuth["isLoggedIn"] = true;
+  
+        store.dispatch(fetchMeetings(logedInUserId));
+        store.dispatch(fetchUsers(logedInUserId));
+        store.dispatch(fetchFavorites(logedInUserId));
+        navigate(from, { replace: true });
+      }
+
+    } catch (error) {
+      
+    }
+    setEmail(email);
     setPassword("");
   };
 
@@ -52,13 +90,14 @@ const Login: React.FC = () => {
         <img className="login-logo" src={hsbcLogo} alt="HSBC Logo" />
         {/* <p ref={errRef} className={errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p> */}
         <TextField
-          className="username-input"
+          className="email-input"
           id="outlined-basic"
-          label="Username"
+          label="Email"
           variant="outlined"
-          placeholder="Username"
+          value={email}
+          placeholder="Email"
           onChange={(event) => {
-            setUsername(event.target.value);
+            setEmail(event.target.value);
           }}
         />
         <TextField
@@ -66,6 +105,7 @@ const Login: React.FC = () => {
           id="outlined-basic"
           label="Password"
           variant="outlined"
+          value={password}
           placeholder="Password"
           type="password"
           onChange={(event) => {

src/context/AuthProvider.tsx

@@ -1,17 +1,17 @@
 import { createContext, useState } from "react";
 
 interface loginInfo {
-  username: string;
+  email: string;
   isLoggedIn: boolean;
 }
 
 const AuthContext = createContext<loginInfo>({
-  username: "",
+  email: "",
   isLoggedIn: false,
 });
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-  const [auth] = useState<loginInfo>({ username: "", isLoggedIn: false });
+  const [auth] = useState<loginInfo>({ email: "", isLoggedIn: false });
 
   return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
 };

src/hooks/useAuth.tsx

@@ -2,7 +2,7 @@ import { useContext } from "react";
 import AuthContext from "../context/AuthProvider";
 
 interface loginInfo {
-  username: string;
+  email: string;
   isLoggedIn: boolean;
 }
 

src/index.tsx

@@ -4,13 +4,10 @@ import "./style/App.css";
 import { AuthProvider } from "./context/AuthProvider";
 import { Provider } from "react-redux";
 import { store } from "./redux/store";
-import { fetchFavorites } from "./redux/slices/favoritesSlice";
-import { fetchMeetings } from "./redux/slices/meetingsAndUserStatusSlice";
-import { fetchUsers } from "./redux/slices/usersSlice";
 
-store.dispatch(fetchMeetings(""));
-store.dispatch(fetchUsers(""));
-store.dispatch(fetchFavorites(""));
+// store.dispatch(fetchMeetings(""));
+// store.dispatch(fetchUsers(""));
+// store.dispatch(fetchFavorites(""));
 
 const Index: React.FC = () => {
   return (