Add login page

frontend/src/components/Landing.tsx

@@ -0,0 +1,83 @@
+/**
+ * Navigation Component
+ *
+ * Wraps the content of the current page with the navbar
+ * Uses the constant in `src/constants` to populate the actual sidebar
+ */
+import { Poppins } from "next/font/google";
+import Image from "next/image";
+import React, { useMemo } from "react";
+
+import { useWindowSize } from "../hooks/useWindowSize";
+import { cn } from "../lib/utils";
+
+const poppins = Poppins({ subsets: ["latin"], weight: "400" });
+
+// the logo and company name component
+const Logo = () => {
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <div className="mb-14 flex flex-col items-center">
+        <h1 className="font-[alternate-gothic] text-6xl text-white max-lg:text-5xl">WELCOME TO</h1>
+        <h1 className="font-[alternate-gothic] text-6xl text-white max-lg:text-5xl">
+          PLANT IT AGAIN!
+        </h1>
+      </div>
+      <div className="flex h-[50%] flex-col items-center">
+        <Image alt="company logo" src="/sidebar/logo.png" width={250} height={250} className="" />
+      </div>
+    </div>
+  );
+};
+
+// Navigation component that wraps the content of the page
+function Landing({ children }: { children: React.ReactNode }) {
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+
+  return (
+    <main
+      className={cn(
+        "flex h-full w-full bg-pia_primary_light_green max-sm:relative sm:max-lg:flex-col",
+        poppins.className,
+      )}
+    >
+      {/* Login left side */}
+      {!isMobile ? (
+        <div
+          className={cn(
+            "flex h-screen w-full bg-pia_primary_light_green max-sm:relative",
+            poppins.className,
+          )}
+        >
+          <div
+            className={cn(
+              "z-10 flex h-screen w-[50%] flex-col", // Adjust the width based on the isMobile flag
+              "flex-col gap-12 bg-pia_dark_green pt-16 text-pia_accent_green transition-transform",
+            )}
+          >
+            <Logo />
+          </div>
+          <div
+            className={cn(
+              "flex h-screen w-[50%] flex-col", // Adjust the width based on the isMobile flag
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            "flex h-screen w-full bg-pia_primary_light_green max-sm:relative",
+            poppins.className,
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </main>
+  );
+}
+
+export default Landing;

frontend/src/components/StudentForm/types.ts

@@ -24,6 +24,7 @@ export type StudentFormData = {
   student_name: string;
   student_last: string;
   student_email: string;
+  student_password: string;
   student_phone: string;
   emergency_name: string;
   emergency_last: string;

frontend/src/pages/_app.tsx

@@ -1,14 +1,20 @@
 import { AppProps } from "next/app";
 
-import Navigation from "../components/Navigation";
+import Landing from "../components/Landing";
+
 import "../styles/global.css";
 import "../styles/globals.css";
 
+// import Navigation from "../components/Navigation";
+
 function App({ Component, pageProps }: AppProps) {
   return (
-    <Navigation>
+    <Landing {...pageProps}>
       <Component {...pageProps} />
-    </Navigation>
+    </Landing>
+    // <Navigation>
+    //   <Component {...pageProps} />
+    // </Navigation>
   );
 }
 export default App;

frontend/src/pages/index.tsx

@@ -1,40 +1,113 @@
-import { useForm } from "react-hook-form";
+import Image from "next/image";
+import { useMemo } from "react";
+import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
 
-import { Button } from "../components/Button";
-import { Checkbox } from "../components/Checkbox";
-import StudentFormButton from "../components/StudentFormButton";
-import { Textfield } from "../components/Textfield";
-import sampleStudentData from "../sampleStudentData.json";
-
-type FruitData = {
-  fruits: string[];
-  favoriteFruit: string;
-};
+import { Textfield } from "@/components/Textfield";
+import { useWindowSize } from "@/hooks/useWindowSize";
+import { cn } from "@/lib/utils";
 
 export default function Home() {
-  const { register, handleSubmit, reset } = useForm<FruitData>();
+  const { register, handleSubmit } = useForm();
 
-  const onSubmit = (formData: FruitData) => {
-    console.log(formData);
-    reset();
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    console.log(data);
   };
-
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+  const isTablet = useMemo(() => width <= 1300, [width]);
   return (
-    <div className="w-1/2">
-      <div className="flex gap-5">
-        <StudentFormButton type="edit" data={sampleStudentData} />
-        <StudentFormButton type="add" />
-      </div>
+    <main className="flex h-screen w-full items-center justify-center">
+      <div className="flex h-full w-full items-center justify-center">
+        <div
+          className={cn(
+            "flex h-full flex-col",
+            isMobile ? "w-[80%] pt-[20%]" : "mb-[8%] w-[65%] justify-center",
+          )}
+        >
+          {isMobile && (
+            <div className="flex flex-col justify-center">
+              <div className="flex h-full flex-col justify-center">
+                <div className="flex flex-col items-center">
+                  <Image
+                    alt="company logo"
+                    src="/sidebar/logo.png"
+                    width={130}
+                    height={130}
+                    className=""
+                  />
+                </div>
+                <div className="mb-5 mt-5 flex flex-col items-center">
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">WELCOME TO</h1>
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">
+                    PLANT IT AGAIN!
+                  </h1>
+                </div>
+              </div>
+            </div>
+          )}
+          {!isMobile && (
+            <div>
+              <h1 className="mb-2 text-4xl font-bold text-black ">Sign in to PIA</h1>
+              <h1 className="text-1xl max-lg:text-1xl mb-6 text-pia_accent">
+                Don&lsquo;t have an account?{" "}
+                <a className="text-1xl max-lg:text-1xl font-bold text-pia_dark_green hover:cursor-pointer">
+                  Sign up
+                </a>
+              </h1>
+            </div>
+          )}
 
-      {/* Example */}
-      <div className="mt-5">
-        <h2 className="text-2xl font-bold">Example</h2>
-        <form className="grid gap-5" onSubmit={handleSubmit(onSubmit)}>
-          <Checkbox name="fruits" register={register} options={["apples", "oranges", "bananas"]} />
-          <Textfield name="favoriteFruit" register={register} placeholder="Favorite Fruit" />
-          <Button label="Submit" />
-        </form>
+          <div className="grid gap-5">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex w-full flex-col justify-between gap-8"
+            >
+              <div>
+                <h1 className="text-lg font-light text-pia_accent max-lg:text-lg">Email Address</h1>
+                <Textfield
+                  register={register}
+                  name="student_email"
+                  label={""}
+                  type="email"
+                  placeholder="[email protected]"
+                />
+              </div>
+              <div>
+                <h1 className="text-lg font-light text-pia_accent max-lg:text-lg">Password</h1>
+                <Textfield
+                  register={register}
+                  name={"student_password"}
+                  label=""
+                  type="password"
+                  placeholder="Enter Password"
+                />
+                <h1
+                  className={cn(
+                    "mt-1 text-lg font-light text-pia_accent hover:cursor-pointer",
+                    isTablet ? "underline" : "text-right text-pia_dark_green",
+                    isMobile ? "text-sm underline max-lg:text-sm" : "text-lg max-lg:text-lg",
+                  )}
+                >
+                  Forgot Password?
+                </h1>
+              </div>
+              <button type="submit" className="rounded-md bg-pia_dark_green px-5 py-3 text-white">
+                Sign In
+              </button>
+              {isMobile && (
+                <div className="flex items-center justify-center">
+                  <h1 className={cn("text-sm text-pia_accent max-lg:text-sm")}>
+                    Don&lsquo;t have an account?{" "}
+                    <a className="text-sm font-bold text-pia_dark_green hover:cursor-pointer max-lg:text-sm">
+                      Sign up
+                    </a>
+                  </h1>
+                </div>
+              )}
+            </form>
+          </div>
+        </div>
       </div>
-    </div>
+    </main>
   );
 }

frontend/src/pages/profile.tsx

@@ -1,7 +1,56 @@
+import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
+
+import { Checkbox } from "../components/Checkbox";
+import Radio from "../components/Radio";
+import { Textfield } from "../components/Textfield";
+
 export default function Profile() {
+  const dietaryList = ["Nuts", "Eggs", "Seafood", "Pollen", "Dairy", "Other"];
+
+  const { register, setValue, handleSubmit } = useForm();
+
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    console.log(data);
+  };
   return (
     <main>
-      <h1>PIA Profile Page!</h1>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex flex-col items-center justify-between gap-10 p-12"
+      >
+        <div className="grid gap-5">
+          <Textfield register={register} name={"firstname"} label="First" placeholder="John" />
+          <Textfield
+            register={register}
+            name={"email"}
+            label={"Email"}
+            type="email"
+            placeholder="[email protected]"
+          />
+          <Textfield
+            register={register}
+            setValue={setValue}
+            name={"date"}
+            label="Date"
+            placeholder="00/00/0000"
+            calendar={true}
+          />
+        </div>
+
+        <div className="grid w-full sm:w-1/2 ">
+          <h2 className="mb-2 text-pia_accent">Dietary Restrictions</h2>
+          <Checkbox register={register} name="dietary" options={dietaryList} />
+        </div>
+
+        <div className="">
+          <h2 className="mb-5 text-2xl font-bold">Gender</h2>
+          <Radio register={register} name="gender" options={["Male", "Female", "Rather not say"]} />
+        </div>
+
+        <button type="submit" className="rounded-md bg-pia_dark_green px-5 py-3 text-white">
+          Submit
+        </button>
+      </form>
     </main>
   );
 }