From 9731fe275decb7012a78c97459e53c4f7fd23341 Mon Sep 17 00:00:00 2001
From: Olasunkanmi Oyinlola <olasunkanmioyinlola@Olasunkanmis-Mac-mini.local>
Date: Fri, 16 Feb 2024 15:16:45 +0800
Subject: [PATCH] create the home page and update the sign in Page

---
 .../src/components/AppForms/SignInForm.tsx    | 98 ++++++++++++++-----
 .../src/components/Utilities/AuthModal.tsx    | 28 ++++++
 frontend/src/components/Utilities/Navbar.tsx  |  3 +
 frontend/src/components/Utilities/tab.tsx     | 28 ++++++
 frontend/src/pages/Landing.tsx                | 16 ++-
 5 files changed, 148 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/components/Utilities/AuthModal.tsx
 create mode 100644 frontend/src/components/Utilities/tab.tsx

diff --git a/frontend/src/components/AppForms/SignInForm.tsx b/frontend/src/components/AppForms/SignInForm.tsx
index f538ea07..87d7de2a 100644
--- a/frontend/src/components/AppForms/SignInForm.tsx
+++ b/frontend/src/components/AppForms/SignInForm.tsx
@@ -3,6 +3,8 @@ import { Button, Card, Form } from "react-bootstrap";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { z } from "zod";
 import { FormInput } from "../Forms/form-input";
+import { TabComponent } from "../Utilities/tab";
+import { Link } from "react-router-dom";
 
 export type loginFormProps = {
   email: string;
@@ -22,31 +24,81 @@ export const LoginForm = () => {
     handleSubmit,
     formState: { errors },
   } = useForm<validationSchema>({ resolver: zodResolver(validateInputSchema) });
+  const EmailSignUp = () => {
+    return (
+      <Card>
+        <Card.Body>
+          <Form onSubmit={handleSubmit(onSubmit)}>
+            <FormInput<loginFormProps>
+              id="email"
+              name="email"
+              placeholder="Enter email"
+              register={register}
+              errors={errors}
+            />
+            <FormInput<loginFormProps>
+              id="password"
+              name="password"
+              placeholder="Enter password"
+              register={register}
+              errors={errors}
+            />
+            <Button className="w-100" style={{ backgroundColor: "#407c54", borderColor: "#407c54" }} type="submit">
+              Login
+            </Button>
+          </Form>
+        </Card.Body>
+      </Card>
+    );
+  };
+
+  const PhoneNumberSignUp = () => {
+    return (
+      <Card>
+        <Card.Body>
+          <Form onSubmit={handleSubmit(onSubmit)}>
+            <FormInput<loginFormProps>
+              id="email"
+              name="email"
+              placeholder="Enter phone number"
+              register={register}
+              errors={errors}
+            />
+            <Button className="w-100" style={{ backgroundColor: "#407c54", borderColor: "#407c54" }} type="submit">
+              Login
+            </Button>
+          </Form>
+        </Card.Body>
+      </Card>
+    );
+  };
+
+  const signUpTab = [
+    { title: "Email", children: <EmailSignUp /> },
+    { title: "Phone", children: <PhoneNumberSignUp /> },
+  ];
 
   const onSubmit: SubmitHandler<validationSchema> = (data) => console.log(data);
   return (
-    <Card>
-      <Card.Body>
-        <Form onSubmit={handleSubmit(onSubmit)}>
-          <FormInput<loginFormProps>
-            id="email"
-            name="email"
-            placeholder="Enter email"
-            register={register}
-            errors={errors}
-          />
-          <FormInput<loginFormProps>
-            id="password"
-            name="password"
-            placeholder="Enter password"
-            register={register}
-            errors={errors}
-          />
-          <Button className="w-100" variant="primary" type="submit">
-            Submit
-          </Button>
-        </Form>
-      </Card.Body>
-    </Card>
+    <div
+      style={{
+        border: "0.1px solid #407c54",
+        padding: "20px",
+        borderRadius: "15px",
+        boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
+      }}
+    >
+      <div>
+        <span>
+          <p style={{ fontSize: "12px" }}>Login to your Account</p>
+        </span>
+      </div>
+      <TabComponent tabs={signUpTab}></TabComponent>
+      <div style={{ justifyContent: "center", display: "flex", marginTop: "15px" }}>
+        <p style={{ fontSize: "12px" }}>
+          Don't have an account? <Link to="/register">Sign up</Link>
+        </p>
+      </div>
+    </div>
   );
 };
diff --git a/frontend/src/components/Utilities/AuthModal.tsx b/frontend/src/components/Utilities/AuthModal.tsx
new file mode 100644
index 00000000..b304ad19
--- /dev/null
+++ b/frontend/src/components/Utilities/AuthModal.tsx
@@ -0,0 +1,28 @@
+import { CSSProperties } from "react";
+import { Button } from "react-bootstrap";
+import { useNavigate } from "react-router-dom";
+
+export const AuthModal = () => {
+  const navigate = useNavigate();
+  const handleSignIn = () => {
+    navigate("/login");
+  };
+  const buttonStyle: CSSProperties = {
+    width: "100%",
+    margin: "auto",
+  };
+  return (
+    <div>
+      <div style={{ marginBottom: "15px" }}>
+        <Button onClick={handleSignIn} variant="dark" className="w-10" size="lg" style={buttonStyle}>
+          Sign In
+        </Button>
+      </div>
+      <div>
+        <Button variant="outline-dark " className="w-10" size="sm" style={buttonStyle}>
+          Continue as a Guest
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/Utilities/Navbar.tsx b/frontend/src/components/Utilities/Navbar.tsx
index 56cef286..aa8b6de7 100644
--- a/frontend/src/components/Utilities/Navbar.tsx
+++ b/frontend/src/components/Utilities/Navbar.tsx
@@ -50,6 +50,9 @@ export const Navigation = () => {
               </Stack>
             </Nav.Link>
           </Nav>
+          {/* <span style={{ fontWeight: 600 }} onClick={previousPage}>
+            <FontAwesomeIcon icon={faCircleUser} size="xl" /> Profile
+          </span> */}
           <Button
             style={{ width: "3rem", height: "3rem", position: "relative" }}
             variant="outline-secondary"
diff --git a/frontend/src/components/Utilities/tab.tsx b/frontend/src/components/Utilities/tab.tsx
new file mode 100644
index 00000000..6b01e4e2
--- /dev/null
+++ b/frontend/src/components/Utilities/tab.tsx
@@ -0,0 +1,28 @@
+import React, { CSSProperties } from "react";
+import { Tabs, Tab } from "react-bootstrap";
+
+interface TabProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+interface TabComponentProps {
+  tabs: TabProps[];
+  style?: CSSProperties;
+}
+
+export const TabComponent = ({ tabs, style }: Readonly<TabComponentProps>) => {
+  const renderTabs = () => {
+    return tabs.map(({ title, children }) => (
+      <Tab style={style} key={title} eventKey={title} title={title}>
+        {children}
+      </Tab>
+    ));
+  };
+
+  return (
+    <Tabs defaultActiveKey={"Email"} className="mb-3">
+      {renderTabs()}
+    </Tabs>
+  );
+};
diff --git a/frontend/src/pages/Landing.tsx b/frontend/src/pages/Landing.tsx
index 400f1247..7bc8829c 100644
--- a/frontend/src/pages/Landing.tsx
+++ b/frontend/src/pages/Landing.tsx
@@ -1,7 +1,12 @@
-import { CSSProperties } from "react";
+import { CSSProperties, useState } from "react";
 import { Button, Stack } from "react-bootstrap";
+import { CallToAction } from "../components/Utilities/modal";
+import { AuthModal } from "../components/Utilities/AuthModal";
 
 export const Landing = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const handleCloseModal = () => setShowModal(false);
+  const handleShowModal = () => setShowModal(true);
   const pageStyle: CSSProperties = {
     margin: 0,
     padding: 0,
@@ -14,7 +19,7 @@ export const Landing = () => {
     left: 0,
     width: "100%",
     height: "100%",
-    backgroundImage: `url(public/food-background.jpg)`,
+    backgroundImage: `url(/food-background.jpg)`,
     backgroundSize: "cover",
     backgroundPosition: "center",
     opacity: 0.5,
@@ -30,6 +35,7 @@ export const Landing = () => {
       <div style={backgroundOverlayStyle}></div>
       <Stack direction="vertical" gap={3} className="p-3 fixed-bottom">
         <Button
+          onClick={handleShowModal}
           className="w-10"
           size="lg"
           style={{ ...buttonStyle, backgroundColor: "#407c54", borderColor: "#407c54" }}
@@ -40,6 +46,12 @@ export const Landing = () => {
           Order HISTORY
         </Button>
       </Stack>
+
+      <div>
+        <CallToAction handleAction={handleCloseModal} handleClose={handleCloseModal} show={showModal}>
+          <AuthModal />
+        </CallToAction>
+      </div>
     </div>
   );
 };