Merge branch 'main' into frontend/chore/deps_update

frontend/src/App.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
+import Main from './Main';
+import Login from './components/LoginSignup/LoginSignup';
+
+const App = () => {
+  return (
+    <Router>
+      <Switch>
+        <Route path="/" exact component={Main} />
+        <Route path="/login" component={Login} />
+      </Switch>
+    </Router>
+  );
+};
+
+export default App;

frontend/src/Main.js

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { HashRouter } from "react-router-dom";
+import React, { useState, useEffect } from "react";
+import { HashRouter, Redirect } from "react-router-dom";
 import { Button, Link } from "@mui/material";
 
 import {
@@ -10,8 +10,6 @@ import {
 } from "@react-google-maps/api";
 import mapStyles from './mapStyles';
 
-const API_KEY = process.env.REACT_APP_API_KEY;
-
 function Map() {
     const [selectedPin, setSelectedPin] = useState(null);
     const [pins, setPins] = useState([]);
@@ -95,48 +93,81 @@ function Map() {
                     </div>
                 </InfoWindow>
             )}
-
-            <Button
-                color="primary"
-                variant="contained"
-                style={{
-                    zIndex: 1,
-                    position: "absolute",
-                    top: "4vh",
-                    right: "12vh"
-                }}
-            >Filter</Button>
-            <Button
-                color="primary"
-                variant="contained"
-                style={{
-                    zIndex: 1,
-                    marginTop: "-15vh",
-                    position: "absolute",
-                    right: "12vh",
-                    height: "65px",
-                    width: "50px",
-                    fontSize: "60px",
-                    borderRadius: "50px",
-                    fontWeight: "300"
-                }}
-                onClick={() => {
-                    setIsListening(true);
-                }}
-            >+</Button>
         </GoogleMap>
     );
 }
 
 const MapWrapped = Map;
+const API_KEY = process.env.REACT_APP_API_KEY;
 
 export default function Main() {
+    const [isListening, setIsListening] = useState(false);
+    const [mapOpacity, setMapOpacity] = useState(1)
+    const [goToLogin, setGoToLogin] = useState(false);
+
+    useEffect(() => {
+        if (isListening) {
+            window.addEventListener('mousedown', handleCreatePin)
+
+            // Set a timeout to stop listening after 10 seconds
+            const timer = setTimeout(() => {
+                setIsListening(false)
+                setMapOpacity(1)
+            }, 10000);
+
+            // Cleanup function to remove the event listener
+            return () => {
+                window.removeEventListener('mousedown', handleCreatePin)
+                clearTimeout(timer)
+            };
+        }
+
+    }, [isListening])
+
+    if (goToLogin) {
+        return <Redirect to="/login" />
+    }
+
+    const handleCreatePin = (event) => {
+        console.log(event)
+    }
 
     return (
         <HashRouter>
-            <div style={{ width: "97vw", height: "100vh" }}>
-
+            <div style={{ width: "97vw", height: "100vh", opacity: mapOpacity }}>
                 <MapWrapped />
+                <Button
+                    color="primary"
+                    variant="contained"
+                    style={{
+                        zIndex: 1,
+                        position: "absolute",
+                        top: "4vh",
+                        right: "12vh"
+                    }}
+                    onClick={() => {
+                        setGoToLogin(true);
+                    }}
+                >Sign In</Button>
+                <Button
+                    color="primary"
+                    variant="contained"
+                    style={{
+                        zIndex: 1,
+                        marginTop: "-15vh",
+                        position: "absolute",
+                        right: "12vh",
+                        height: "65px",
+                        width: "50px",
+                        fontSize: "60px",
+                        borderRadius: "50px",
+                        fontWeight: "300"
+                    }}
+                    onClick={() => {
+                        setIsListening(true)
+                        setMapOpacity(0.5)
+                    }}
+                >+</Button>
             </div>
         </HashRouter>
     );

frontend/src/components/LoginSignup/LoginSignup.css

@@ -0,0 +1,57 @@
+.container{
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    margin-top: 5%;
+    width: 60%
+}
+
+.inputs {
+    margin-top: 5%;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    width: 100%
+}
+
+.input {
+    display: flex;
+    align-items:center;
+    margin: auto;
+    width: 100%;
+}
+
+.input input {
+    background: transparent;
+}
+
+.submit-container{
+    display: flex;
+    margin: 5% auto;
+    width: 100%;
+}
+
+.submit {
+    display: flex;
+    justify-content:center;
+    align-items:center;
+    margin: auto;
+    width: 100%;
+}
+
+.login span{
+    text-decoration: underline;
+    color: #1565c0
+
+}
+
+ .header{
+    display: flex;
+    justify-content:center;
+
+}
+
+img{
+    width: 50%;
+    height: auto;
+}

frontend/src/components/LoginSignup/LoginSignup.jsx

@@ -0,0 +1,99 @@
+import React,{ useState } from "react";
+import './LoginSignup.css'
+import { TextField, Button } from "@material-ui/core/"
+import logo from '../assets/Greenpeace_logo.png'
+
+const LoginSignup =  () => {
+
+    const [action, setAction] = useState("Login");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [errorPassword, setErrorPassword] = useState(false);
+    const [errorEmail, setErrorEmail] = useState(false);
+
+
+    const handleEmailChange = (event) => {
+        setEmail(event.target.value);
+        setErrorEmail(false);
+    };
+
+    const handlePasswordChange = (event) => {
+        setPassword(event.target.value);
+        setErrorPassword(false);
+    };
+
+    const handleLoginSignup = () => {
+        //console.log(email);
+        //console.log(password); 
+        if (email.trim() !== "" && password.trim() !== ""){
+            setEmail('');
+            setErrorEmail(false);
+            setPassword('');
+            setErrorPassword(false);
+        } else {
+            if (email.trim() === "" && password.trim() !== ""){
+                setErrorEmail(true);
+                setErrorPassword(false);
+            } else if (password.trim() === "" && email.trim() !== "") {
+                setErrorEmail(false);
+                setErrorPassword(true);
+            }else {
+                setErrorEmail(true);
+                setErrorPassword(true);
+            }
+        }
+    };
+
+
+    return (
+        <div className="container">
+            <div className="header">
+                <img src={logo} alt="Logo" />
+            </div>  
+            <div className="inputs">
+                <div className="input">
+                    <TextField fullWidth id="email-input" label="Email" variant="outlined" 
+                        value={email}
+                        onChange={handleEmailChange}
+                        error={Boolean(errorEmail)} 
+                    />
+                </div>
+                <div className="input">
+                    <TextField fullWidth id="password-input" label="Password" variant="outlined" 
+                        value={password}
+                        onChange={handlePasswordChange}
+                        error={Boolean(errorPassword)} 
+
+                    />
+                </div>
+            </div>
+
+            <div className="submit-container">
+                {action==="Login"?
+                    <div className="submit">
+                        <Button fullWidth variant="contained" color="primary" disableElevation
+                        onClick={handleLoginSignup}>
+                            LOG IN         
+                        </Button>
+                    </div>:
+                    <div className="submit">
+                        <Button fullWidth variant="contained" color="primary" disableElevation
+                        onClick={handleLoginSignup}>
+                            SIGN UP           
+                        </Button>
+                    </div>
+                }
+
+
+            </div>
+
+            { action==="Login"?
+                <div className="login" onClick={()=> {setAction("Sign Up")}}>or <span>Sign Up</span></div>:
+                <div className="login" onClick={()=> {setAction("Login")}}>or <span>Log In</span></div>
+            }
+
+        </div>
+    )
+}
+
+export default LoginSignup