Merge pull request #40 from Informatik-Projekt-Kurs/IPK-174-Add-compa…

…ny-setup-process

IPK-174-Add-company-setup-process

.eslintrc.cjs

@@ -83,7 +83,7 @@ const config = {
         "no-implicit-coercion": "error",
         "@typescript-eslint/return-await": "error",
         "no-unneeded-ternary": "error",
-        "@typescript-eslint/no-confusing-void-expression": "error",
+        "@typescript-eslint/no-confusing-void-expression": "warn",
         "@typescript-eslint/no-meaningless-void-operator": "warn",
         "no-plusplus": [
           "error",

package.json

@@ -34,6 +34,7 @@
     "@next/eslint-plugin-next": "^14.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",

src/app/setup/page.tsx

@@ -1,7 +1,98 @@
-import React from "react";
+"use client";
+import React, { useRef } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import Image from "next/image";
 
 function Setup() {
-  return <div>Setup</div>;
+  const [step, setStep] = React.useState(0);
+  type Inputs = {
+    "Full Company Name": string;
+    "CEO Email": string;
+    "CEO Name": string;
+    "CEO Password": string;
+    "Company Logo": string;
+  };
+
+  const [inputs, setInputs] = React.useState<Inputs>({
+    "Full Company Name": "",
+    "CEO Email": "",
+    "CEO Name": "",
+    "CEO Password": "",
+    "Company Logo": ""
+  });
+
+  const placeholders = ["Full Company Name", "CEO Email", "CEO Name", "CEO Password", "Company Logo"];
+  const input: React.MutableRefObject<HTMLInputElement | null> = useRef(null);
+  const [error, setError] = React.useState<string>("");
+  const nextStep = () => {
+    if (input.current?.value === "") {
+      setError("Please fill in the input field");
+      return;
+    } else setError("");
+    if (input.current?.validity.valid === false) {
+      setError("Please enter a valid email");
+      return;
+    } else setError("");
+    setStep(step + 1);
+  };
+  const submit = () => {
+    if (input.current?.value === "") {
+      setError("Please fill in the input field");
+      return;
+    } else setError("");
+    if (input.current?.validity.valid === false) {
+      setError("Please enter a valid password");
+      return;
+    } else setError("");
+    console.log(inputs); // send request here
+  };
+  return (
+    <div className={"flex h-screen flex-col items-center justify-start"}>
+      <div className={"flex h-1/6 items-center justify-center gap-2"}>
+        <Image src={"/landingLogo.png"} width={40} height={40} alt={""} />
+        <h1 className={"text-2xl font-semibold"}>MeetMate</h1>
+      </div>
+      <div className={"mt-[-16.667svh] flex h-full flex-col items-center justify-center"}>
+        <Input
+          maxLength={45}
+          type={step === 1 ? "email" : step === 3 ? "password" : "text"}
+          ref={input}
+          value={inputs[placeholders[step] as keyof Inputs]}
+          onChange={(e) => {
+            setInputs({ ...inputs, [placeholders[step]]: e.target.value });
+          }}
+          placeholder={placeholders[step]}
+          className={"border-0 text-lg font-medium text-foreground focus-visible:ring-0"}
+        />
+        <Progress className={"h-1 max-sm:w-[350px] sm:w-[450px] md:w-[600px] lg:w-[960px]"} value={(step / 3) * 100} />
+
+        <div className={"mt-2 flex items-center justify-center gap-x-2 self-end"}>
+          <p className={"text-sm text-red-500"}>{error}</p>
+          {step > 0 && (
+            <Button
+              size={"sm"}
+              onClick={() => {
+                setStep(step - 1);
+              }}>
+              Back
+            </Button>
+          )}
+          {step < 3 && (
+            <Button size={"sm"} onClick={nextStep}>
+              Next
+            </Button>
+          )}
+          {step === 3 && (
+            <Button size={"sm"} onClick={submit}>
+              Finish
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default Setup;

src/components/ui/progress.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      className
+    )}
+    {...props}>
+    <ProgressPrimitive.Indicator
+      className="size-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };