From 49d92321980101c01124f187f29021670954bf6a Mon Sep 17 00:00:00 2001
From: Spencer Schoeneman <78219375+Spencer-Sch@users.noreply.github.com>
Date: Thu, 16 Nov 2023 10:48:27 -0600
Subject: [PATCH] added UI for initial login/signup process (#3)

---
 .../web-3-crew/ExistingOrNewMember.tsx        | 34 +++++++++
 .../web-3-crew/LoginEmailOrWallet.tsx         | 42 +++++++++++
 .../web-3-crew/RegisterCompanyOrEmployee.tsx  | 42 +++++++++++
 packages/nextjs/pages/dapp.tsx                | 74 +++++++++++++++++++
 4 files changed, 192 insertions(+)
 create mode 100644 packages/nextjs/components/web-3-crew/ExistingOrNewMember.tsx
 create mode 100644 packages/nextjs/components/web-3-crew/LoginEmailOrWallet.tsx
 create mode 100644 packages/nextjs/components/web-3-crew/RegisterCompanyOrEmployee.tsx
 create mode 100644 packages/nextjs/pages/dapp.tsx

diff --git a/packages/nextjs/components/web-3-crew/ExistingOrNewMember.tsx b/packages/nextjs/components/web-3-crew/ExistingOrNewMember.tsx
new file mode 100644
index 0000000..c1fce54
--- /dev/null
+++ b/packages/nextjs/components/web-3-crew/ExistingOrNewMember.tsx
@@ -0,0 +1,34 @@
+import { FormSteps } from "~~/pages/dapp";
+
+interface props {
+  updateFormState: (value: FormSteps) => void;
+}
+
+const ExistingOrNewMember = ({ updateFormState }: props) => {
+  return (
+    <div className="flex items-center justify-center pt-10 space-x-5">
+      <button
+        onClick={() => updateFormState("login")}
+        className="btn card w-96 h-96 bg-primary hover:shadow-xl transition-shadow"
+      >
+        <span className="flex flex-col items-center pt-10">
+          <span className="text-4xl">Existing</span>
+          <span className="underline text-4xl">Member?</span>
+        </span>
+        <p className="text-xl">&#40;Attach Wallet&#41;</p>
+      </button>
+      <button
+        onClick={() => updateFormState("signup")}
+        className="btn card w-96 h-96 bg-primary hover:shadow-xl transition-shadow"
+      >
+        <span className="flex flex-col items-center pt-10">
+          <span className="text-4xl">New</span>
+          <span className="underline text-4xl">Member?</span>
+        </span>
+        <p className="text-xl">&#40;Create Account&#41;</p>
+      </button>
+    </div>
+  );
+};
+
+export default ExistingOrNewMember;
diff --git a/packages/nextjs/components/web-3-crew/LoginEmailOrWallet.tsx b/packages/nextjs/components/web-3-crew/LoginEmailOrWallet.tsx
new file mode 100644
index 0000000..497ef84
--- /dev/null
+++ b/packages/nextjs/components/web-3-crew/LoginEmailOrWallet.tsx
@@ -0,0 +1,42 @@
+import { FormSteps } from "~~/pages/dapp";
+
+interface props {
+  updateFormState: (value: FormSteps) => void;
+}
+
+const LoginEmailOrWallet = ({ updateFormState }: props) => {
+  return (
+    <>
+      {/* Back Button */}
+      <button onClick={() => updateFormState("start")} className="btn btn-square btn-outline absolute">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="w-6 h-6"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+        </svg>
+      </button>
+      {/* Main Buttons */}
+      <div className="flex items-center justify-center pt-10 space-x-5">
+        <button
+          // onClick={/* Trigger login with wallet */}
+          className="btn card w-96 h-96 bg-primary hover:shadow-xl transition-shadow"
+        >
+          <span className="flex flex-col text-4xl items-center pt-10">Login with Email</span>
+        </button>
+        <button
+          // onClick={/* Trigger login with wallet */}
+          className="btn card w-96 h-96 bg-primary hover:shadow-xl transition-shadow"
+        >
+          <span className="flex flex-col text-4xl items-center pt-10">Login with Wallet</span>
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default LoginEmailOrWallet;
diff --git a/packages/nextjs/components/web-3-crew/RegisterCompanyOrEmployee.tsx b/packages/nextjs/components/web-3-crew/RegisterCompanyOrEmployee.tsx
new file mode 100644
index 0000000..98cc1e9
--- /dev/null
+++ b/packages/nextjs/components/web-3-crew/RegisterCompanyOrEmployee.tsx
@@ -0,0 +1,42 @@
+import { FormSteps } from "~~/pages/dapp";
+
+interface props {
+  updateFormState: (value: FormSteps) => void;
+}
+
+const RegisterCompanyOrEmployee = ({ updateFormState }: props) => {
+  return (
+    <>
+      {/* Back Button */}
+      <button onClick={() => updateFormState("start")} className="btn btn-square btn-outline absolute">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="currentColor"
+          className="w-6 h-6"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+        </svg>
+      </button>
+      {/* Main Buttons */}
+      <div className="flex items-center justify-center pt-10 space-x-5">
+        <button
+          onClick={() => updateFormState("register-company")}
+          className="btn card w-96 h-96 bg-primary hover:shadow-xl transition-shadow"
+        >
+          <span className="flex flex-col text-4xl items-center pt-10">Register as Company</span>
+        </button>
+        <button
+          onClick={() => updateFormState("register-employee")}
+          className="btn card w-96 h-96 bg-primary hover:shadow-xl transition-shadow"
+        >
+          <span className="flex flex-col text-4xl items-center pt-10">Register as Employee</span>
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default RegisterCompanyOrEmployee;
diff --git a/packages/nextjs/pages/dapp.tsx b/packages/nextjs/pages/dapp.tsx
new file mode 100644
index 0000000..b2e3dce
--- /dev/null
+++ b/packages/nextjs/pages/dapp.tsx
@@ -0,0 +1,74 @@
+import { ReactElement, useState } from "react";
+// import Link from "next/link";
+import type { NextPageWithLayout } from "./_app";
+// import { MetaHeader } from "~~/components/MetaHeader";
+import CleanLayout from "~~/components/layouts/CleanLayout";
+import ExistingOrNewMember from "~~/components/web-3-crew/ExistingOrNewMember";
+import LoginEmailOrWallet from "~~/components/web-3-crew/LoginEmailOrWallet";
+import RegisterCompanyOrEmployee from "~~/components/web-3-crew/RegisterCompanyOrEmployee";
+
+export type FormSteps = "start" | "login" | "signup" | "register-company" | "register-employee";
+
+const LandingPage: NextPageWithLayout = () => {
+  const [formState, setFormState] = useState<string>("start");
+
+  function updateFormState(value: FormSteps) {
+    switch (value) {
+      case "start":
+        setFormState(value);
+        break;
+      case "login":
+        setFormState(value);
+        break;
+      case "signup":
+        setFormState(value);
+        break;
+      case "register-company":
+        setFormState(value);
+        break;
+      case "register-employee":
+        setFormState(value);
+        break;
+      default:
+    }
+  }
+
+  return (
+    <>
+      {/* <MetaHeader /> Look into MetaHeader - should it be moved to _app.tsx ??? */}
+      {/* Container */}
+      <div className="flex flex-col items-center pt-10">
+        {/* Form container */}
+        <div className="card w-5/6 p-10 bg-secondary shadow-xl">
+          {/* Initial Options */}
+          {formState === "start" || "login" ? (
+            <>
+              <div className="px-5">
+                <h1 className="text-center mb-8 block text-4xl font-bold">CCIP Payroll</h1>
+              </div>
+              {formState === "start" && <ExistingOrNewMember updateFormState={updateFormState} />}
+              {formState === "login" && <LoginEmailOrWallet updateFormState={updateFormState} />}
+            </>
+          ) : null}
+          {/* Signup Options */}
+          {formState === "signup" ? (
+            <>
+              <div className="px-5">
+                <h2 className="text-center mb-4 block text-3xl font-bold">
+                  Are you registering as a company or employee?
+                </h2>
+              </div>
+              <RegisterCompanyOrEmployee updateFormState={updateFormState} />
+            </>
+          ) : null}
+        </div>
+      </div>
+    </>
+  );
+};
+
+LandingPage.getLayout = function getLayout(page: ReactElement) {
+  return <CleanLayout>{page}</CleanLayout>;
+};
+
+export default LandingPage;