Frontend Assignment

frontend/package.json

@@ -13,6 +13,7 @@
     "test:ci": "NODE_ENV=test jest --ci --reporters jest-silent-reporter"
   },
   "dependencies": {
+    "focus-trap-react": "^10.0.0",
     "next": "12.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0"

frontend/src/components/Dialog.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function Dialog() {
+  return (
+    <div>
+      <div className="">Are you sure the details are correct?</div>
+      <div className="buttons-list">
+        <button>Yes</button>
+        <button style={{ marginLeft: 10 }}>Cancel</button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/Form.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+interface FormProps {
+  openNewModal: () => void;
+}
+
+export default function Form({ openNewModal }: FormProps) {
+  return (
+    <>
+      <h2>Please Enter your Details</h2>
+      <div className="form-container">
+        <div>
+          <label>Name</label>
+        </div>
+        <div>
+          <input type="text" />
+        </div>
+        <div>
+          <label>Date of Birth</label>
+        </div>
+        <div>
+          <input type="date" />
+        </div>
+        <div>
+          <label>Email Address</label>
+        </div>
+        <div>
+          <input type="email" />
+        </div>
+        <div>
+          <label>Password</label>
+        </div>
+        <div>
+          <input type="password" />
+        </div>
+        <div>
+          <button onClick={openNewModal}>Submit</button>
+        </div>
+      </div>
+    </>
+  );
+}

frontend/src/components/Modal.tsx

@@ -0,0 +1,55 @@
+import { KeyboardEvent } from 'react';
+import ReactDOM from 'react-dom';
+import FocusTrap from 'focus-trap-react';
+
+interface ModalProps {
+  onClose: () => void;
+  onClick?: () => void;
+  children: JSX.Element;
+  width?: number | string;
+  height?: number | string;
+  zIndex?: number;
+  backdrop?: boolean;
+  background?: string;
+}
+
+export default function Modal({
+  onClose,
+  onClick,
+  children,
+  width,
+  height,
+  zIndex,
+  backdrop,
+  background,
+}: ModalProps) {
+  const handleKeyDown = (event: KeyboardEvent<HTMLImageElement>) => {
+    if (event.key === 'Escape') {
+      onClose();
+    }
+  };
+  return ReactDOM.createPortal(
+    <FocusTrap>
+      <div className={backdrop ? 'backdrop' : 'no-backdrop'}>
+        <div
+          className="modal"
+          style={{ height, width, zIndex, background }}
+          onClick={onClick}
+          onKeyDown={handleKeyDown}
+        >
+          <span
+            className="modal-close"
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose();
+            }}
+          >
+            &times;
+          </span>
+          {children}
+        </div>
+      </div>
+    </FocusTrap>,
+    document.body
+  );
+}

frontend/src/lib/random.ts

@@ -0,0 +1,17 @@
+export const random = (min: number, max: number) => {
+  // min and max included
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+export const randomColor = () => {
+  const color = [
+    '#f44336',
+    '#f44336',
+    '#3f51b5',
+    '#2196f3',
+    '#4caf50',
+    '#673ab7',
+    '#00bcd4',
+  ];
+  return color[random(0, 6)];
+};

frontend/src/pages/_app.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable canonical/filename-match-exported */
 import { type AppProps } from 'next/app';
+import '../styles/style.css';
 
 const App = ({ Component, pageProps }: AppProps) => {
   return <Component {...pageProps} />;

frontend/src/pages/index.tsx

@@ -1,8 +1,165 @@
 /* eslint-disable canonical/filename-match-exported */
+import Dialog from '@/components/Dialog';
+import Form from '@/components/Form';
 import { type NextPage } from 'next';
+import { useState } from 'react';
+import Modal from '../components/Modal';
 
 const Index: NextPage = () => {
-  return <h1>Welcome to Contra!</h1>;
+  interface ModalData {
+    flag: boolean;
+  }
+
+  const [modalData, setModalData] = useState<ModalData[]>([]);
+
+  const onOpen = (index: number) => {
+    const temp = structuredClone(modalData);
+    temp.push({
+      flag: true,
+    });
+    document.body.style.overflow = 'hidden';
+
+    setModalData(temp);
+  };
+
+  const onClose = (index: number) => {
+    const temp = structuredClone(modalData);
+    temp.splice(index, 1);
+    setModalData(temp);
+    document.body.style.overflow = 'auto';
+  };
+
+  return (
+    <div>
+      {modalData[0] && modalData[0].flag && (
+        <Modal
+          width="auto"
+          height="auto"
+          backdrop={true}
+          onClose={() => {
+            onClose(0);
+          }}
+          background="white"
+        >
+          <div>
+            <Form openNewModal={() => onOpen(1)} />
+          </div>
+        </Modal>
+      )}
+
+      {modalData[1] && modalData[1].flag && (
+        <Modal
+          width={300}
+          height={100}
+          backdrop={true}
+          onClose={() => {
+            onClose(1);
+          }}
+          background="white"
+        >
+          <Dialog />
+        </Modal>
+      )}
+
+      <div className="home-page-container">
+        <div className="text">
+          <h1>Welcome to Contra!</h1>
+          <button
+            onClick={(e) => {
+              onOpen(0);
+            }}
+          >
+            Open Modal
+          </button>
+          <p></p>
+          <div className="information">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas
+            pharetra convallis posuere morbi leo urna molestie. Odio euismod
+            lacinia at quis. Nec nam aliquam sem et tortor consequat id.
+            Bibendum ut tristique et egestas quis ipsum. Quis commodo odio
+            aenean sed adipiscing diam donec. Venenatis a condimentum vitae
+            sapien. Amet risus nullam eget felis eget. Risus in hendrerit
+            gravida rutrum quisque non tellus. In est ante in nibh. Sagittis
+            purus sit amet volutpat consequat. Pharetra diam sit amet nisl
+            suscipit adipiscing bibendum. Massa tincidunt dui ut ornare lectus
+            sit amet est placerat. Posuere urna nec tincidunt praesent semper
+            feugiat nibh. Felis imperdiet proin fermentum leo vel orci porta.
+            Consequat interdum varius sit amet. Ullamcorper dignissim cras
+            tincidunt lobortis. Risus at ultrices mi tempus imperdiet nulla.
+            Nisl pretium fusce id velit ut tortor pretium. Nunc sed blandit
+            libero volutpat sed cras ornare arcu dui. Auctor augue mauris augue
+            neque gravida in. Nibh tellus molestie nunc non blandit. Risus quis
+            varius quam quisque id diam vel. Urna cursus eget nunc scelerisque
+            viverra. Porttitor leo a diam sollicitudin tempor. Mattis
+            ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget.
+            Nullam non nisi est sit amet. Cras pulvinar mattis nunc sed blandit
+            libero volutpat sed. Diam sollicitudin tempor id eu nisl. Magna
+            fermentum iaculis eu non diam phasellus vestibulum lorem sed. Mauris
+            cursus mattis molestie a iaculis. Nulla pharetra diam sit amet nisl
+            suscipit. Mauris ultrices eros in cursus turpis massa. Nibh tellus
+            molestie nunc non blandit massa enim nec dui. Leo integer malesuada
+            nunc vel risus commodo viverra maecenas accumsan. Ligula ullamcorper
+            malesuada proin libero. Fames ac turpis egestas sed tempus urna.
+            Pharetra convallis posuere morbi leo urna molestie at elementum.
+            Aliquam id diam maecenas ultricies mi eget mauris pharetra et.
+            Turpis egestas integer eget aliquet nibh praesent tristique magna
+            sit. Tellus mauris a diam maecenas sed enim ut. Faucibus interdum
+            posuere lorem ipsum dolor. Leo in vitae turpis massa sed elementum
+            tempus egestas sed. Posuere ac ut consequat semper viverra nam. Id
+            aliquet lectus proin nibh nisl condimentum id. Facilisi etiam
+            dignissim diam quis enim lobortis scelerisque. Turpis egestas
+            integer eget aliquet nibh praesent tristique. Facilisis magna etiam
+            tempor orci eu. Maecenas ultricies mi eget mauris pharetra et
+            ultrices neque ornare. Potenti nullam ac tortor vitae purus. Semper
+            viverra nam libero justo laoreet sit amet cursus. In hac habitasse
+            platea dictumst vestibulum rhoncus est pellentesque elit. Tellus
+            cras adipiscing enim eu turpis. Suspendisse faucibus interdum
+            posuere lorem ipsum dolor. Odio morbi quis commodo odio aenean.
+            Porta lorem mollis aliquam ut porttitor. Sed tempus urna et pharetra
+            pharetra massa massa. Amet venenatis urna cursus eget nunc
+            scelerisque. Eget velit aliquet sagittis id consectetur purus. Lacus
+            laoreet non curabitur gravida arcu ac. Penatibus et magnis dis
+            parturient. Viverra maecenas accumsan lacus vel facilisis volutpat
+            est. Nulla pellentesque dignissim enim sit. Mauris pharetra et
+            ultrices neque ornare aenean euismod elementum. Nisl vel pretium
+            lectus quam id leo. Ut sem nulla pharetra diam sit amet nisl. Ac
+            tortor dignissim convallis aenean et tortor at risus viverra. Donec
+            ac odio tempor orci dapibus ultrices in iaculis nunc. Morbi tempus
+            iaculis urna id. Arcu felis bibendum ut tristique. At elementum eu
+            facilisis sed odio morbi. Justo donec enim diam vulputate ut
+            pharetra sit amet. Scelerisque viverra mauris in aliquam sem. Duis
+            at tellus at urna. Orci nulla pellentesque dignissim enim sit amet.
+            Et netus et malesuada fames ac turpis. Sed felis eget velit aliquet
+            sagittis. Risus ultricies tristique nulla aliquet enim tortor at
+            auctor. Consectetur purus ut faucibus pulvinar. Risus at ultrices mi
+            tempus imperdiet. Id neque aliquam vestibulum morbi blandit cursus
+            risus. Ultricies mi quis hendrerit dolor magna eget. Urna neque
+            viverra justo nec ultrices dui sapien. Amet risus nullam eget felis.
+            Ut tortor pretium viverra suspendisse potenti nullam ac tortor
+            vitae. Vitae purus faucibus ornare suspendisse. Sed turpis tincidunt
+            id aliquet risus feugiat in ante metus. Amet tellus cras adipiscing
+            enim eu turpis egestas. Eleifend donec pretium vulputate sapien nec
+            sagittis. Urna nunc id cursus metus aliquam eleifend mi in nulla.
+            Donec massa sapien faucibus et molestie ac feugiat sed. Non
+            consectetur a erat nam at lectus urna duis. Eget nulla facilisi
+            etiam dignissim diam quis enim. Eget duis at tellus at urna.
+            Senectus et netus et malesuada fames ac turpis. Ut diam quam nulla
+            porttitor massa id neque. Aliquet risus feugiat in ante metus dictum
+            at. Cras ornare arcu dui vivamus arcu felis. Posuere morbi leo urna
+            molestie at elementum. Orci a scelerisque purus semper eget duis at
+            tellus. Quis imperdiet massa tincidunt nunc pulvinar. Ornare massa
+            eget egestas purus viverra accumsan in nisl. Varius vel pharetra vel
+            turpis nunc eget. Lorem ipsum dolor sit amet consectetur adipiscing
+            elit duis tristique. Pellentesque id nibh tortor id aliquet lectus
+            proin. In hac habitasse platea dictumst. Varius vel pharetra vel
+            turpis nunc eget. Gravida neque convallis a cras semper auctor. Leo
+            integer malesuada nunc vel risus commodo viverra maecenas accumsan.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Index;