Feat/sign up

backend/tests/e2e/__init__.py

@@ -0,0 +1 @@
+# This file can be left empty or used for package-level imports and initialization

backend/tests/e2e/citizen_signup_test.py

@@ -0,0 +1 @@
+# test the signup flow for a citizen from start to end

backend/tests/integration/create_view_issue_test.py

@@ -0,0 +1,4 @@
+# test for example that if a user reports an issue,
+# then they can view their newly created issue
+
+# this is an integration test since it tests the integration between creating an issue and viewing it

backend/tests/unit/validate_email_test.py

@@ -0,0 +1,2 @@
+# let's say a function called validate_email is defined somewhere
+# this test file will test if the function works as intended

frontend/__tests__/unit/CitizenLogin.test.tsx

@@ -0,0 +1,33 @@
+import CitizenLogin from "@/components/Login/CitizenLogin";
+import { render, screen } from "@testing-library/react";
+
+describe("CitizenLogin", () => {
+
+
+
+    it("renders an email input", () => {
+        render(<CitizenLogin />);
+        const emailInput = screen.getByLabelText("Email");
+        expect(emailInput).toHaveAttribute("type", "email");
+    });
+
+    it("renders a password input", () => {
+        render(<CitizenLogin />);
+        const passwordInput = screen.getByLabelText("Password");
+        expect(passwordInput).toHaveAttribute("type", "password");
+    });
+
+
+    it("renders a forgot password link", () => {
+        render(<CitizenLogin />);
+        const forgotPasswordLink = screen.getByText("Forgot password?");
+        expect(forgotPasswordLink).toBeInTheDocument();
+    });
+
+
+    // it("renders a heading", () => {
+    //     const forgotPasswordLink = screen.getByText("Forgot pasword?");
+    //     expect(forgotPasswordLink).toBeInTheDocument();
+    // });
+
+})

frontend/jest.config.ts

@@ -1,11 +1,11 @@
 import type { Config } from 'jest'
 import nextJest from 'next/jest.js'
-
+ 
 const createJestConfig = nextJest({
   // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
   dir: './',
 })
-
+ 
 // Add any custom config to be passed to Jest
 const config: Config = {
   coverageProvider: 'v8',
@@ -22,6 +22,6 @@ const config: Config = {
   // coverageReporters: [['html', {}]],
 }
 
-
+ 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
 export default createJestConfig(config)

frontend/package.json

@@ -8,18 +8,18 @@
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
-    "test:watch": "jest --watch",
-    "test:e2e": "npx playwright test"
+    "test:watch": "jest --watch"
   },
   "dependencies": {
     "@nextui-org/react": "^2.3.6",
     "framer-motion": "^11.2.6",
+    "icons": "^1.0.0",
+    "lucide-react": "^0.381.0",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.1",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@types/jest": "^29.5.12",

frontend/src/app/globals.scss

@@ -17,13 +17,13 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  // color: rgb(var(--foreground-rgb));
+  // background: linear-gradient(
+  //     to bottom,
+  //     transparent,
+  //     rgb(var(--background-end-rgb))
+  //   )
+  //   rgb(var(--background-start-rgb));
 }
 
 @layer utilities {

frontend/src/app/home/page.tsx

@@ -1,9 +1,27 @@
+'use client'
+
+import { Button } from "@nextui-org/react";
 import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from 'next/navigation';
+
+import styles from "./styles.module.scss";
 
 export default function Home() {
+  const router = useRouter();
+
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24 dark">
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <h1 className="opacity-15">Hello</h1>
+
+      {/* The linking or routing examples */}
+      <Link href="/signup">
+        Go to signup using method 1
+      </Link>
+
+
+      <Button onClick={() => router.push('/signup')}>Go to signup using method 2</Button>
+
       <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
         <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
           Get started by adding new routes to&nbsp;

frontend/src/app/login/page.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { Tabs, Tab } from "@nextui-org/react";
+import CitizenLogin from "@/components/Login/CitizenLogin";
+import MunicipalityLogin from "@/components/Login/MunicipalityLogin";
+import ServiceProviderLogin from "@/components/Login/ServiceProviderLogin";
+
+
+export default function Signup() {
+    const formHeader: string = "Sign In.";
+
+    return (
+        <main className="h-screen flex justify-center p-20">
+
+            <div className="flex flex-col items-center justify-center rounded-lg border-t-0 border shadow-lg shadow-orange-800/15 w-[32em] h-fit py-12">
+
+                <span className="text-[2.5em] font-bold">{formHeader}</span>
+
+                <Tabs aria-label="Signup Options" defaultSelectedKey={0} className="mt-5 flex justify-center w-full" classNames={{
+                    tab: "min-w-32 min-h-10",
+                    panel: "w-full",
+                    cursor: "w-full bg-orange-200/20 border-3 border-orange-700/40",
+                    tabContent: "group-data-[selected=true]:font-bold group-data-[selected=true]:dop-shadow-md"
+                }}>
+                    <Tab key={0} title="Citizen">
+                        <CitizenLogin />
+                    </Tab>
+
+                    <Tab key={1} title="Municipality" >
+                        <MunicipalityLogin />
+                    </Tab>
+
+                    <Tab key={2} title="Service Provider" >
+                        <ServiceProviderLogin />
+                    </Tab>
+                </Tabs>
+
+            </div>
+        </main>
+    );
+}

frontend/src/app/signup/page.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import React, { Key, useState } from "react";
+import { Tabs, Tab } from "@nextui-org/react";
+
+import CitizenSignup from "@/components/Signup/CitizenSignup";
+import MunicipalitySignup from "@/components/Signup/MunicipalitySignup";
+import ServiceProviderSignup from "@/components/Signup/ServiceProviderSignup";
+
+
+
+export default function Signup() {
+    const headers: string[] = ["Get Connected.", "Take Control.", "Be The Change."];
+    const [currentFormHeader, setCurrentFormHeader] = useState(headers[0]);
+
+
+    const handleTabChange = (key: Key) => {
+        const index = Number(key);
+        setCurrentFormHeader(headers[index]);
+    };
+
+
+    return (
+        <main className="h-screen flex justify-center p-20">
+
+            <div className="flex flex-col items-center justify-center rounded-lg border-t-0 border shadow-lg shadow-orange-800/15 w-[32em] h-fit py-12">
+
+                <span className="text-[2.5em] font-bold">{currentFormHeader}</span>
+
+                <Tabs aria-label="Signup Options" defaultSelectedKey={0} className="mt-5 flex justify-center w-full" classNames={{
+                    tab: "min-w-32 min-h-10",
+                    panel: "w-full",
+                    cursor: "w-full bg-orange-200/20 border-3 border-orange-700/40",
+                    tabContent: "group-data-[selected=true]:font-bold group-data-[selected=true]:dop-shadow-md"
+                }} onSelectionChange={handleTabChange}>
+                    <Tab key={0} title="Citizen">
+                        <CitizenSignup />
+                    </Tab>
+
+                    <Tab key={1} title="Municipality" >
+                        <MunicipalitySignup />
+                    </Tab>
+
+                    <Tab key={2} title="Service Provider" >
+                        <ServiceProviderSignup />
+                    </Tab>
+                </Tabs>
+
+            </div>
+        </main>
+    );
+}