Release (#495)

* update the authorization technique to check if user role matches ite priority (#488) Co-authored-by: Olasunkanmi Oyinlola <olasunkanmioyinlola@Olasunkanmis-Mac-mini.local> * include roles as a sign up property, add the history menu to the landing page * fix build errors * Development (#492) * update the authorization technique to check if user role matches ite priority * include roles as a sign up property, add the history menu to the landing page * fix build errors * Add landing page background image --------- Co-authored-by: Olasunkanmi Oyinlola <olasunkanmioyinlola@Olasunkanmis-Mac-mini.local> * create the home page and update the sign in Page * Development (#494) * update the authorization technique to check if user role matches ite priority * include roles as a sign up property, add the history menu to the landing page * fix build errors * Add landing page background image --------- Co-authored-by: Olasunkanmi Oyinlola <olasunkanmioyinlola@Olasunkanmis-Mac-mini.local> --------- Co-authored-by: Olasunkanmi Oyinlola <olasunkanmioyinlola@Olasunkanmis-Mac-mini.local>
olasunkanmi-SE · Feb 17, 2024 · 82fee12 · 82fee12
1 parent bc57270
commit 82fee12
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
+  );
+};