Merge pull request #30 from NUS-Fintech-Society/feature/TAS-1-Login-Form

Feature/tas 1 login form

package.json

@@ -22,10 +22,12 @@
     "msw": "^2.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.2",
     "react-router-dom": "^6.22.3",
     "sort-by": "^1.2.0"
   },
   "devDependencies": {
+    "@iconify/react": "^4.1.1",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@types/node": "^20.11.13",

src/assets/css/authentication/LoginContainer.module.css

@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh; /* Example to fill the screen */
+  background: linear-gradient(180deg, #0C1747 0%, rgba(37, 60, 92, 0.62) 100%);
+  border: 1px black solid;
+}

src/assets/css/authentication/LoginFormComponent.module.css

@@ -0,0 +1,108 @@
+@import url("https://fonts.cdnfonts.com/css/dm-sans");
+
+.login {
+  width: 70%;
+  background-color: white;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: "DM Sans", sans-serif;
+}
+
+.login-image {
+  width: 0%;
+}
+
+.login-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.login-form > * {
+  margin-bottom: 25px;
+}
+
+.login-form > p {
+  font-size: 40px;
+  font-weight: bold;
+  margin-top: 20px;
+}
+
+.login-form > input {
+  outline: none;
+  border: none;
+  height: 45%;
+  width: 80%;
+  border-radius: 7px;
+  padding: 12px;
+  background-color: #d9d9d9;
+  font-family: "DM Sans";
+  font-size: 20px;
+}
+
+.login-form > input::placeholder {
+  color: #fff;
+  font-family: "DM Sans";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  text-align: left;
+}
+
+.forgot-password {
+  color: #151515;
+  font-family: "DM Sans";
+  font-size: 15px;
+  text-decoration: underline;
+}
+
+.login-button-container {
+  width: 30%;
+  height: auto;
+  border-radius: 7px;
+  margin: auto;
+}
+
+.password-visibility-button {
+  position: relative;
+  bottom: 60px;
+  left: 30%;
+  margin: 0;
+}
+
+.sign-in-button {
+  /* put in container */
+  height: 100%;
+  width: 35%;
+  padding: 10px;
+  border-radius: 7px;
+
+  color: #fff;
+  background-color: #0c1747 !important;
+  font-family: "DM Sans";
+  font-size: 20px;
+  text-align: center;
+  cursor: pointer;
+}
+
+/* For desktops */
+@media (min-width: 992px) {
+  .login {
+    max-width: 1037px;
+    background-color: white;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-family: "DM Sans", sans-serif;
+  }
+
+  .login-image {
+    width: 50%;
+    height: 100%;
+  }
+}

src/components/authentication/LoginContainer.tsx

@@ -0,0 +1,12 @@
+import styles from '../../assets/css/authentication/LoginContainer.module.css'; // Import web-specific CSS
+import LoginFormComponent from "components/authentication/LoginFormComponent.tsx";
+
+const WebLoginContainer = () => {
+  return (
+    <div className={styles.container}>
+        <LoginFormComponent/>
+    </div>
+  );
+}
+
+export default WebLoginContainer;

src/components/authentication/LoginFormComponent.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { Icon } from "@iconify/react";
+
+import styles from "css/authentication/LoginFormComponent.module.css";
+import loginImage from "/login-image.svg";
+import { signIn } from "@/api/authentication.ts";
+
+type Inputs = {
+  email: string,
+  password: string
+}
+
+const LoginFormComponent = () => {
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+
+  const {
+    register,
+    handleSubmit,
+  } = useForm<Inputs>();
+  const onSubmit: SubmitHandler<Inputs> = (data) => signIn(data.email, data.password);
+
+  const changePasswordVisibility = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  return (
+    <div className={styles.login}>
+      <img src={loginImage} alt="login-image" className={styles["login-image"]} />
+      <form className={styles["login-form"]} onSubmit={handleSubmit(onSubmit)}>
+        <p>Login</p>
+        <input type="text" placeholder="Email" {...register("email", {required: true })} />
+        <input
+          type={showPassword ? "text" : "password"}
+          placeholder="Password"
+          {...register("password", {required: true })}
+        />
+        <button className={styles["password-visibility-button"]} onClick={changePasswordVisibility}>
+          {showPassword ? <Icon icon="mdi:eye" style={{color: "white" }} /> : <Icon icon="mdi:eye-off" style={{color: "white" }} />}
+        </button>
+        <a href="" className={styles["forgot-password"]}>
+          Forgot your password?
+        </a>
+
+        <input type="submit" className={styles["sign-in-button"]} value="Sign In" />
+      </form>
+    </div>
+  );
+};
+
+export default LoginFormComponent;

src/routes/App.tsx

@@ -1,13 +1,7 @@
-import { useWindowSize } from "@uidotdev/usehooks";
-
-import MobileLoginContainer from "components/authentication/MobileLoginContainer.tsx";
-import WebLoginContainer from "components/authentication/WebLoginContainer.tsx";
-import { BREAKPOINTS } from "components/constants.tsx";
-
+import LoginContainer from "@/components/authentication/LoginContainer";
 
 const App = () => {
-    const size = useWindowSize();
-    return size.width && size.width <= BREAKPOINTS.MD ? <MobileLoginContainer/> : <WebLoginContainer/>;
+  return <LoginContainer />;
 };
 
-export default App
+export default App;

src/routes/shared/TestPage.tsx

@@ -5,7 +5,6 @@ import viteLogo from "/vite.svg";
 import reactLogo from "/react.svg";
 import resolveURL from "@/api/fetch.ts";
 
-
 const getResourceOptions = {
   queryKey: ['resourceData'],
   queryFn: () => fetch(resolveURL('/resource')).then((res) => res.json())

yarn.lock

@@ -412,6 +412,18 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
   integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
+"@iconify/react@^4.1.1":
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/@iconify/react/-/react-4.1.1.tgz#da1bf03cdca9427f07cf22cf5b63fa8f02db4722"
+  integrity sha512-jed14EjvKjee8mc0eoscGxlg7mSQRkwQG3iX3cPBCO7UlOjz0DtlvTqxqEcHUJGh+z1VJ31Yhu5B9PxfO0zbdg==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
+"@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
 "@jest/schemas@^29.6.3":
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
@@ -3097,6 +3109,11 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-hook-form@^7.51.2:
+  version "7.51.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.2.tgz#79f7f72ee217c5114ff831012d1a7ec344096e7f"
+  integrity sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"