From ae1fa9a49353b4503d4837a12ff6b0f61e0f17e5 Mon Sep 17 00:00:00 2001
From: Fullstack Mechanic <fullstack@Fullstacks-MacBook-Air.local>
Date: Thu, 25 Jul 2024 06:51:44 +0100
Subject: [PATCH] fix sign up and organisation sign up

---
 src/app/(auth-routes)/layout.tsx              |   5 +
 .../register/organisation/page.tsx            | 177 +++++++++++----
 src/app/(auth-routes)/register/page.tsx       | 201 ++++++++++++------
 src/components/ui/input.tsx                   |   5 +-
 src/components/ui/select.tsx                  |   3 +-
 5 files changed, 280 insertions(+), 111 deletions(-)

diff --git a/src/app/(auth-routes)/layout.tsx b/src/app/(auth-routes)/layout.tsx
index e17f86071..5b1b9d02d 100644
--- a/src/app/(auth-routes)/layout.tsx
+++ b/src/app/(auth-routes)/layout.tsx
@@ -1,7 +1,12 @@
+import Footer from "~/components/layouts/footer";
+import Navbar from "~/components/layouts/navbar";
+
 function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
+      <Navbar />
       <div className="mx-auto w-5/6">{children}</div>
+      <Footer />
     </>
   );
 }
diff --git a/src/app/(auth-routes)/register/organisation/page.tsx b/src/app/(auth-routes)/register/organisation/page.tsx
index 3003ceee9..65117f475 100644
--- a/src/app/(auth-routes)/register/organisation/page.tsx
+++ b/src/app/(auth-routes)/register/organisation/page.tsx
@@ -27,18 +27,37 @@ const formSchema = z.object({
   fullname: z.string().min(2, {
     message: "Fullname must be at least 2 characters.",
   }),
-  email: z.string().min(2, {
-    message: "Email must be at least 2 characters.",
+  email: z.string().email({
+    message: "Email must be a valid email address.",
   }),
   password: z.string().min(2, {
     message: "Password must be at least 2 characters.",
   }),
+  companyName: z.string().min(2, {
+    message: "Company name must be at least 2 characters.",
+  }),
+  companyEmail: z.string().email({
+    message: "Company email must be a valid email address.",
+  }),
+  industry: z.string().min(1, {
+    message: "Please select an industry.",
+  }),
+  organizationType: z.string().min(1, {
+    message: "Please select an organization type.",
+  }),
+  country: z.string().min(1, {
+    message: "Please select a country.",
+  }),
+  state: z.string().min(1, {
+    message: "Please select a state.",
+  }),
+  address: z.string().min(1, {
+    message: "Please enter company address.",
+  }),
 });
 
 type FormData = z.infer<typeof formSchema>;
 
-// Updated onSubmit function with unused parameter prefixed
-
 function Organisation() {
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -56,10 +75,10 @@ function Organisation() {
 
         <div className="mx-auto w-2/4">
           <Form {...form}>
-            <form className="space-y-8">
+            <form className="space-y-6">
               <FormField
                 control={form.control}
-                name="fullname"
+                name="companyName"
                 render={({ field }) => (
                   <FormItem className="flex flex-col gap-2">
                     <div>
@@ -72,6 +91,14 @@ function Organisation() {
                       </FormControl>
                       <FormMessage />
                     </div>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="companyEmail"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col gap-2">
                     <div>
                       <FormLabel>Company Email Address</FormLabel>
                       <FormControl>
@@ -82,62 +109,123 @@ function Organisation() {
                       </FormControl>
                       <FormMessage />
                     </div>
-                    <div className="flex gap-4">
+                  </FormItem>
+                )}
+              />
+              <div className="flex gap-4">
+                <FormField
+                  control={form.control}
+                  name="industry"
+                  render={({ field }) => (
+                    <FormItem className="flex w-full flex-col gap-2">
                       <div className="w-full">
                         <FormLabel>Industry</FormLabel>
-                        <Select>
-                          <SelectTrigger className="">
-                            <SelectValue placeholder="Select" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="light">Technology</SelectItem>
-                          </SelectContent>
-                        </Select>
+                        <FormControl>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value || ""}
+                          >
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="Technology">
+                                Technology
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
                       </div>
-
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="organizationType"
+                  render={({ field }) => (
+                    <FormItem className="flex w-full flex-col gap-2">
                       <div className="w-full">
                         <FormLabel>Organization Type</FormLabel>
-                        <Select>
-                          <SelectTrigger className="">
-                            <SelectValue placeholder="Select" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="light">Entertainment</SelectItem>
-                          </SelectContent>
-                        </Select>
+                        <FormControl>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value || ""}
+                          >
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="Entertainment">
+                                Entertainment
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
                       </div>
-                    </div>
-
-                    <div className="flex flex-col gap-2">
-                      <h1 className="text-md">Company Address</h1>
-                      <div className="flex gap-4">
-                        <div className="w-full">
-                          <FormLabel>Country</FormLabel>
-                          <Select>
-                            <SelectTrigger className="">
+                    </FormItem>
+                  )}
+                />
+              </div>
+              <div className="flex flex-col gap-2">
+                <h1 className="text-md">Company Address</h1>
+                <div className="flex gap-4">
+                  <FormField
+                    control={form.control}
+                    name="country"
+                    render={({ field }) => (
+                      <div className="w-full">
+                        <FormLabel>Country</FormLabel>
+                        <FormControl>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value || ""}
+                          >
+                            <SelectTrigger>
                               <SelectValue placeholder="Select" />
                             </SelectTrigger>
                             <SelectContent>
-                              <SelectItem value="light">Nigeria</SelectItem>
+                              <SelectItem value="Nigeria">Nigeria</SelectItem>
                             </SelectContent>
                           </Select>
-                        </div>
-
-                        <div className="w-full">
-                          <FormLabel>State</FormLabel>
-                          <Select>
-                            <SelectTrigger className="">
+                        </FormControl>
+                        <FormMessage />
+                      </div>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="state"
+                    render={({ field }) => (
+                      <div className="w-full">
+                        <FormLabel>State</FormLabel>
+                        <FormControl>
+                          <Select
+                            onValueChange={field.onChange}
+                            value={field.value || ""}
+                          >
+                            <SelectTrigger>
                               <SelectValue placeholder="Select" />
                             </SelectTrigger>
                             <SelectContent>
-                              <SelectItem value="light">Lagos</SelectItem>
+                              <SelectItem value="Lagos">Lagos</SelectItem>
                             </SelectContent>
                           </Select>
-                        </div>
+                        </FormControl>
+                        <FormMessage />
                       </div>
-                    </div>
+                    )}
+                  />
+                </div>
+              </div>
+              <FormField
+                control={form.control}
+                name="address"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col gap-2">
                     <div>
-                      <FormLabel>Address</FormLabel>
+                      <FormLabel>Company Address</FormLabel>
                       <FormControl>
                         <Input
                           placeholder="Enter your company address"
@@ -152,7 +240,6 @@ function Organisation() {
               <Button type="submit" className="w-full">
                 Create Account
               </Button>
-
               <div className="flex justify-center gap-2">
                 <p className="text-sm">Already Have An Account?</p>
                 <Link className="text-sm text-orange-500" href={"#"}>
diff --git a/src/app/(auth-routes)/register/page.tsx b/src/app/(auth-routes)/register/page.tsx
index 64e8c06fe..ce3b5aa33 100644
--- a/src/app/(auth-routes)/register/page.tsx
+++ b/src/app/(auth-routes)/register/page.tsx
@@ -2,9 +2,12 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import Link from "next/link";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import AuthProvider from "~/components/authproviders/AuthProvider";
+import { DialogDemo } from "~/components/common/Dialog";
 import { Button } from "~/components/ui/button";
 import {
   Form,
@@ -15,6 +18,11 @@ import {
   FormMessage,
 } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from "~/components/ui/input-otp";
 
 const formSchema = z.object({
   fullname: z.string().min(2, {
@@ -30,76 +38,141 @@ const formSchema = z.object({
 
 type FormData = z.infer<typeof formSchema>;
 
-function SignUp() {
+const SignUp = () => {
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
   });
+  const [open, setOpen] = useState(false);
 
   return (
-    <>
-      <div>
-        <div className="flex flex-col items-center gap-2">
-          <h1 className="text-2xl font-bold">Sign Up</h1>
-          <p className="text-gray-500">
-            Create an account to get started with us.
-          </p>
-        </div>
-
-        <div className="mx-auto w-2/4">
-          <Form {...form}>
-            <form className="space-y-8">
-              <FormField
-                control={form.control}
-                name="fullname"
-                render={({ field }) => (
-                  <FormItem className="flex flex-col gap-2">
-                    <div>
-                      <FormLabel>Fullname</FormLabel>
-                      <FormControl>
-                        <Input placeholder="Enter your fullname" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </div>
-                    <div>
-                      <FormLabel>Email Address</FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder="Enter your email address"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </div>
-                    <div>
-                      <FormLabel>Password</FormLabel>
-                      <FormControl>
-                        <Input
-                          type="password"
-                          placeholder="Enter your password"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </div>
-                  </FormItem>
-                )}
-              />
-              <Button type="submit" className="w-full">
-                Create Account
-              </Button>
-
-              <div className="flex justify-center gap-2">
-                <p className="text-sm">Already Have An Account?</p>
-                <Link className="text-sm text-orange-500" href={"#"}>
-                  Login
-                </Link>
+    <div>
+      <div className="flex flex-col items-center gap-2">
+        <h1 className="text-2xl font-bold">Sign Up</h1>
+        <p className="text-gray-500">
+          Create an account to get started with us.
+        </p>
+      </div>
+      <div className="flex justify-center gap-4 p-4">
+        <AuthProvider
+          title="Sign in with Google"
+          icon="/public/images/google.png"
+        />
+        <AuthProvider
+          title="Sign in with Google"
+          icon="/public/images/google.png"
+        />
+      </div>
+      <div className="mx-auto w-2/4">
+        <Form {...form}>
+          <form className="space-y-8">
+            <FormField
+              control={form.control}
+              name="fullname"
+              render={({ field }) => (
+                <FormItem className="flex flex-col gap-4">
+                  <div className="flex flex-col gap-2">
+                    <FormLabel>Fullname</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Enter your fullname" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </div>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem className="flex flex-col gap-2">
+                  <div className="flex flex-col gap-2">
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter your email address"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </div>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem className="flex flex-col gap-2">
+                  <div className="flex flex-col gap-2">
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Enter your password"
+                        type="password"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </div>
+                </FormItem>
+              )}
+            />
+            <Button
+              type="submit"
+              className="w-full"
+              onClick={() => setOpen(true)}
+            >
+              Create Account
+            </Button>
+            <DialogDemo open={open} onOpenChanged={setOpen}>
+              <div className="flex w-full flex-col items-center gap-4">
+                <h1 className="text-xl font-bold text-[#0F172A]">Sign Up</h1>
+                <div className="flex flex-col items-center">
+                  <p className="text-xs text-gray-600">
+                    Choose your sign-up method:
+                  </p>
+                  <ul className="flex list-disc flex-col items-center text-xs text-gray-600">
+                    <li>Use the temporary sign-in code sent to your mail or</li>
+                    <li>Continue with email and password</li>
+                  </ul>
+                </div>
+                <p className="text-xs">
+                  Please paste (or type) your 6-digit code:{" "}
+                </p>
+                <InputOTP maxLength={6}>
+                  {...[0, 1, 2, 3, 4, 5].map((number_) => (
+                    <InputOTPGroup key={number_}>
+                      <InputOTPSlot index={number_} />
+                    </InputOTPGroup>
+                  ))}
+                </InputOTP>
+                <Button type="submit" className="w-full">
+                  Continue
+                </Button>
+                <div className="flex flex-col items-center">
+                  <p className="text-xs text-gray-500">
+                    Would you rather use email and password?
+                  </p>
+                  <p className="text-xs text-orange-500">
+                    Continue with email and password
+                  </p>
+                </div>
+                <p className="text-center text-xs text-gray-500">
+                  We would process your data as set forth in our Terms of Use,
+                  Privacy Policy and Data Processing Agreement
+                </p>
               </div>
-            </form>
-          </Form>
-        </div>
+            </DialogDemo>
+            <div className="flex justify-center gap-2">
+              <p className="text-sm">Already Have An Account?</p>
+              <Link className="text-sm text-orange-500" href={"#"}>
+                Login
+              </Link>
+            </div>
+          </form>
+        </Form>
       </div>
-    </>
+    </div>
   );
-}
-
+};
 export default SignUp;
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 5b04a32ad..f9ee190a6 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -10,7 +10,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProperties>(
     return (
       <input
         type={type}
-        className={cn("", className)}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
         ref={reference}
         {...properties}
       />
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index dab46e944..cc2f8b849 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { cn } from "@/lib/utils";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import * as React from "react";
 
+import { cn } from "~/lib/utils";
+
 const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;