feat: adding otp validation support

apps/web/app/components/Client/sparkle.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { SparklesCore } from "@/components/ui/sparklecore";
+import React from "react";
+
+interface SparklesProps {
+  classname: string;
+  background: string;
+  minSize: number;
+  maxSize: number;
+  body: string;
+  particleColor?: string | "#FFFFFF";
+}
+
+const Sparkles = ({
+  classname,
+  background,
+  minSize,
+  maxSize,
+  particleColor,
+  body,
+}: SparklesProps) => {
+  return (
+    <div className="h-[40rem] w-full flex flex-col items-center justify-center overflow-hidden rounded-md">
+      <h1 className="md:text-7xl text-3xl lg:text-9xl font-bold text-center text-white relative z-20">
+        {body}
+      </h1>
+      <div className="w-[40rem] h-40 relative">
+        {/* Gradients */}
+        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-[2px] w-3/4 blur-sm" />
+        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-indigo-500 to-transparent h-px w-3/4" />
+        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-[5px] w-1/4 blur-sm" />
+        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px w-1/4" />
+
+        {/* Core component */}
+        <SparklesCore
+          background={background}
+          minSize={minSize}
+          maxSize={maxSize}
+          particleDensity={1200}
+          className="w-full h-full"
+          particleColor="#FFFFFF"
+        />
+
+        <div className="absolute inset-0 w-full h-full bg-[04080F] [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]"></div>
+      </div>
+    </div>
+  );
+};
+
+export default Sparkles;

apps/web/app/page.tsx

@@ -2,20 +2,24 @@ import { getServerSession } from "next-auth";
 import Image from "next/image";
 import Link from "next/link";
 import { authOptions } from "./api/auth/[...nextauth]/util";
+import { SparklesCore } from "@/components/ui/sparklecore";
+import Sparkles from "./components/Client/sparkle";
 
 export default async function Home() {
   const session = await getServerSession(authOptions);
   console.log(session?.user);
   return (
     <>
-      {
-        //@ts-ignore
-        session?.user?.firstname ? (
-          <div>{session?.user?.email}</div>
-        ) : (
-          <div>Not logged in</div>
-        )
-      }
+      <div className="flex items-center justify-center">
+        <Sparkles
+          classname="flex flex-col items-center justify-center overflow-hidden rounded-md"
+          background="transparent"
+          minSize={0.4}
+          maxSize={1}
+          particleColor="#FFFFFF"
+          body="PayBox"
+        />
+      </div>
     </>
   );
 }

apps/web/app/profile/appearance/appearance-form.tsx

@@ -67,7 +67,7 @@ export function AppearanceForm() {
                   <select
                     className={cn(
                       buttonVariants({ variant: "outline" }),
-                      "w-[200px] appearance-none bg-transparent font-normal",
+                      "w-[200px] appearance-none bg-transparent font-normal"
                     )}
                     {...field}
                   >

apps/web/app/profile/components/sidebar-nav.tsx

@@ -20,7 +20,7 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
     <nav
       className={cn(
         "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
-        className,
+        className
       )}
       {...props}
     >
@@ -33,7 +33,7 @@ export function SidebarNav({ className, items, ...props }: SidebarNavProps) {
             pathname === item.href
               ? "bg-muted hover:bg-muted"
               : "hover:bg-transparent hover:underline",
-            "justify-start",
+            "justify-start"
           )}
         >
           {item.title}

apps/web/app/profile/display/display-form.tsx

@@ -107,8 +107,8 @@ export function DisplayForm() {
                                 ? field.onChange([...field.value, item.id])
                                 : field.onChange(
                                     field.value?.filter(
-                                      (value) => value !== item.id,
-                                    ),
+                                      (value) => value !== item.id
+                                    )
                                   );
                             }}
                           />

apps/web/app/signin/page.tsx

@@ -36,7 +36,7 @@ export default function AuthenticationPage() {
           href="/signup"
           className={cn(
             buttonVariants({ variant: "ghost" }),
-            "absolute right-4 top-4 md:right-8 md:top-8",
+            "absolute right-4 top-4 md:right-8 md:top-8"
           )}
         >
           Signup

apps/web/app/signin/user-auth-signin-form.tsx

@@ -152,7 +152,7 @@ export function ClientSigninForm({
           onClick={() => {
             setIsLoading(true);
             signIn("github", { callbackUrl: "/profile" }).then(() =>
-              setIsLoading(false),
+              setIsLoading(false)
             );
           }}
         >
@@ -170,7 +170,7 @@ export function ClientSigninForm({
           onClick={() => {
             setIsLoading(true);
             signIn("google", { callbackUrl: "/profile" }).then((_) =>
-              setIsLoading(false),
+              setIsLoading(false)
             );
           }}
         >

apps/web/app/signup/components/otp.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+    InputOTPSeparator,
+} from "@/components/ui/input-otp"
+import { toast } from "@/components/ui/use-toast"
+import React from "react"
+import { AccountType, BACKEND_URL, OtpValid, responseStatus } from "@paybox/common"
+import { useSession } from "next-auth/react"
+
+
+export function OTPForm() {
+
+    const session = useSession();
+    console.log(session, "session")
+    const form = useForm<z.infer<typeof OtpValid>>({
+        resolver: zodResolver(OtpValid),
+        defaultValues: {
+            otp: "",
+        },
+    })
+
+    const onSubmit = async (data: z.infer<typeof OtpValid>) => {
+        const { status, msg, valid, walletId, account }: { status: responseStatus, msg: string, valid?: boolean, walletId?: string, account?: AccountType } =
+            await fetch(`${BACKEND_URL}/client/valid?otp=${data.otp}`, {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                    //@ts-ignore
+                    "Authorization": `Bearer ${session.data?.user?.jwt}`
+                },
+            }).then((res) => res.json());
+        console.log(status, "valid")
+        toast({
+            title: "Otp Validation Status",
+            description: (
+                <h1>{msg}</h1>
+            ),
+        })
+    }
+
+    return (
+        <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+                <FormField
+                    control={form.control}
+                    name="otp"
+                    render={({ field }) => (
+                        <FormItem>
+                            <FormControl>
+                                <InputOTP
+                                    maxLength={6}
+                                    render={({ slots }) => (
+                                        <InputOTPGroup className="gap-2">
+                                            {slots.map((slot, index) => (
+                                                <React.Fragment key={index}>
+                                                    <InputOTPSlot className="rounded-md border" {...slot} />
+                                                    {index !== slots.length - 1 && <InputOTPSeparator />}
+                                                </React.Fragment>
+                                            ))}{" "}
+                                        </InputOTPGroup>
+                                    )}
+                                    {...field}
+                                />
+                            </FormControl>
+                            <FormDescription>
+                                Please enter the six digit one-time passcode sent to your phone or email by @Paybox.
+                            </FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    )}
+                />
+                <Button type="submit">Submit</Button>
+            </form>
+        </Form>
+    )
+}