Merge branch 'main' of https://github.com/WPI-Roadmap/client-side

package.json

@@ -10,6 +10,7 @@
         "antd": "^5.13.0",
         "dayjs": "^1.11.10",
         "elkjs": "^0.9.1",
+        "firebase": "^10.7.1",
         "install": "^0.13.0",
         "intro.js-react": "^1.0.0",
         "npm": "^10.3.0",

src/Firebase.js

@@ -34,6 +34,7 @@ provider.setCustomParameters({
 
 // AUTHENTICATION WITH EMAIL AND PASSWORD
 const logInWithEmailAndPassword = async (email, password) => {
+    console.log(auth)
     try {
         await signInWithEmailAndPassword(auth, email, password);
     } catch (err) {

src/Utils/RequestUtils.js

@@ -0,0 +1,40 @@
+class RequestUtils {
+
+    static getDomain() {
+       //return "https://mams-siso.wpi.edu/api";
+       return "http://localhost:8000";
+    }
+
+    /**
+     * Make a GET request to the specified URL
+     * @param {String} url
+     * @returns 
+     */
+    static get(url, token) {
+        let response = null;
+         response = fetch(this.getDomain() + url, {
+            method: "get",
+            headers: {"Content-Type": "application/json", "Access-Control-Allow-Origin": "*"}
+        }).catch((e) => {
+            return e;
+        });
+    return response;
+    }
+
+    /**
+     * Make a POST request to the specified URL with given JSON body
+     * @param {String} url 
+     * @param {JSONObject} object 
+     * @returns 
+     */
+    static post(url, object) {
+
+        return fetch(this.getDomain() + url, {
+            method: "post",
+            headers: {"Content-Type": "application/json", "Access-Control-Allow-Origin": "*"}, 
+            body: JSON.stringify(object)
+        });
+    }
+}
+
+export default RequestUtils;

src/components/Authorization/Login.css

@@ -144,4 +144,5 @@ body {
   border-radius: 25px!important;
   padding-left: 40px!important;
   padding-right: 40px!important;
-}
+}
+

src/components/Authorization/LoginView/Login.css

@@ -0,0 +1,3 @@
+.br-10 {
+    border-radius: 50px;
+}

src/components/Authorization/LoginView/Login.jsx

@@ -1,64 +1,124 @@
 // IMPORTS
-import { Button, Form } from "antd";
-import { loginWithMicrosoft } from "../../../Firebase"
+import { Button, Form, Input } from "antd";
+import { auth, logInWithEmailAndPassword, loginWithMicrosoft, registerWithEmailAndPassword } from "../../../Firebase";
 // IMAGES
 // import publicLogo from "../../../assets/images/public.png";
 import microsoft from "../../../assets/images/Microsoft_icon.svg.png";
 import { useNavigate } from "react-router";
+import "./Login.css";
+import { useEffect, useState } from "react";
+import { useAuthState } from "react-firebase-hooks/auth";
+
+import publicLogo from "../../../assets/images/logo-black.png";
 
 // ADMIN LOGIN VIEW
 function LoginView(props) {
+  const navigate = useNavigate();
+
+  let [tab, setTab] = useState(false);
+
+  let [email, setEmail] = useState("");
+    let [password, setPassword] = useState("");
+
+    let [user, loading] = useAuthState(auth);
+
+  const login = (values) => {
+
+    tab === false ? logInWithEmailAndPassword(email, password) : registerWithEmailAndPassword(email, password);
+};
+
+    const register = (values) => {
+        registerWithEmailAndPassword(email, password);
+    }
 
-    const navigate = useNavigate();
 
-    // DISPLAY ADMIN LOGIN VIEW
-    return props.show ? (
-        <div className="login">
-            <div className="login__container">
-                <img className="coverLogo" src='/logo-black.png'></img>
-                <Form
-                    name="basic"
-                    className="login_form"
-                    style={{
-                        width: 300,
-                    }}
-                    initialValues={{
-                        remember: true,
-                    }}
-                    autoComplete="off"
-                    size="large"
-                >
-                    <h2>
-                        <strong>Welcome to WPI Roadmap</strong>
-                    </h2>
-                    <p className="padded-text">
-                        Plan your academic success at WPI with a universal solution to WPI's major requirement system Developed by WPI students for WPI students (GoatHack 2024).
-                    </p>
-                    <Form.Item
-                        wrapperCol={{
-                            span: 20,
-                        }}
-                    >
-                        <Button
-                            type="primary"
-                            className="microsoft"
-                            onClick={() => {
-                                // loginWithMicrosoft();
-                                navigate("/dashboard");
-                            }}
-                        >
-                            {/* <img src={microsoft} height={"20px"} className="msft"></img> */}
-                            Get Started
-                        </Button>
-                    </Form.Item>
+    useEffect(() => {
+        if (user) {
+            navigate("/dashboard");
+        }
+    }
+    , [user]);
 
-                </Form>
 
-            </div>
-        </div>
-    ) : (
-        <></>
-    );
+  // DISPLAY ADMIN LOGIN VIEW
+  return props.show ? (
+    <div className="login">
+      <div className="login__container">
+        <img className="coverLogo" src={publicLogo}></img>
+        <Form
+          name="basic"
+          className="login_form"
+          style={{
+            width: 300,
+          }}
+          initialValues={{
+            remember: true,
+          }}
+          autoComplete="off"
+          size="large"
+          onFinish={login}
+        >
+          <h2>
+            <strong>Welcome to Roadmap-WPI</strong>
+          </h2>
+          <p className="padded-text">
+          A universal solution to introduce you to WPI's major requirement system Developed by WPI students for WPI students (GoatHacks 2024).
+          </p>
+          <Form.Item
+            wrapperCol={{
+              span: 20,
+            }}
+          >
+            <Input
+              size="large"
+              className="br-10 my-2"
+              placeholder="email"
+              onChange={(e) => {
+                setEmail(e.target.value);
+              }}
+            ></Input>
+          </Form.Item>
+          <Form.Item>
+            <Input.Password
+              size="large"
+              className="br-10 my-3"
+              placeholder="password"
+                onChange={(e) => {
+                    setPassword(e.target.value);
+                }
+                }
+            ></Input.Password>
+          </Form.Item>
+          <Form.Item>
+            <Button
+              type="primary"
+              className="microsoft"
+              htmlType="submit"
+
+            >
+              {/* <img src={microsoft} height={"20px"} className="msft"></img> */}
+              {tab === false ? "Login" : "Register"}
+            </Button>
+          </Form.Item>
+        </Form>
+        <p className="footerText mx-auto">
+          <a className="link" onClick={() => setTab(!tab)} target="0">
+            {tab === false ? "Register" : "Back to login"}
+          </a>{" "}
+          •{" "}
+          <a className="link" href="" target="0">
+            Privacy policy
+          </a>{" "}
+          •{" "}
+          <a className="link" href="https://github.com/WPI-Roadmap" target="0">
+            Github
+          </a>{" "}
+        </p>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
 }
 
 export default LoginView;