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

src/components/Authorization/Login.js

@@ -6,7 +6,7 @@ import "./Login.css";
 
 // IMAGES
 import pageImage from "../../assets/images/cover-image.jpeg";
-import LoginView from "./LoginView/Login";
+import LoginView from "./LoginView/LoginView";
 import { useNavigate } from "react-router";
 
 // LOGIN PAGE

src/components/Authorization/LoginView/LoginView.css

@@ -0,0 +1,8 @@
+.br-10 {
+    border-radius: 50px;
+}
+
+.ant-col.ant-form-item-label {
+    padding: 0 !important;
+}
+

src/components/Authorization/LoginView/LoginView.jsx

@@ -0,0 +1,127 @@
+// IMPORTS
+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 "./LoginView.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);
+    }
+
+
+    useEffect(() => {
+        if (user) {
+            navigate("/dashboard");
+        }
+    }
+        , [user]);
+
+
+    // DISPLAY ADMIN LOGIN VIEW
+    return props.show ? (
+        <div className="login">
+            <div className="login__container">
+                <img className="coverLogo" src={publicLogo}></img>
+                <Form
+                    layout='vertical'
+                    name="basic"
+                    className="login_form"
+                    style={{
+                        width: 300,
+                    }}
+                    initialValues={{
+                        remember: true,
+                    }}
+                    autoComplete="off"
+                    size="large"
+                    onFinish={login}
+                >
+                    <p className="padded-text">
+                        WPI Roadmap is a universal solution to introduce you to WPI's major requirement system. Developed by WPI students for WPI students (GoatHacks 2024).
+                    </p>
+                    <Form.Item
+                        label="Email"
+                        style={{marginTop:0, fontWeight:"bold"}}
+                        wrapperCol={{
+                            span: 20,
+                        }}
+                    >
+                        <Input
+                            size="large"
+                            className="br-10 my-2"
+                            style={{ width: 300 }}
+                            onChange={(e) => {
+                                setEmail(e.target.value);
+                            }}
+                        ></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="Password"
+                        style={{marginTop:0, fontWeight:"bold"}}
+                    >
+                        <Input.Password
+                            size="large"
+                            className="br-10 my-3"
+                            style={{ width: 300 }}
+                            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;

src/components/Dashboard/Dashboard.js

@@ -586,7 +586,7 @@ function Dashboard() {
 
                         <Form.Item>
                             <Button type="primary" htmlType="submit" onClick={() => { signupyayslay() }}>
-                                Signup
+                                Sign Up
                             </Button>
                         </Form.Item>
                     </Form>