feat: update authentication layout and forms for improved user experience; add new dependencies and enhance styling

app/(auth)/auth/layout.tsx

@@ -1,22 +1,10 @@
-import Image from "next/image";
 
 export default function AuthLayout({
 	children,
 }: { children: React.ReactNode }) {
 	return (
 		<div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
-			<div className="flex flex-col items-center justify-center w-full h-full ">
-				<Image alt="Sar Link Logo" src="/logo.png" width={100} height={100} />
-				<div className="mt-4 flex flex-col items-center justify-center">
-					<h4 className="font-bold text-xl text-sarLinkOrange dark:text-gray-400">
-						SAR Link Portal
-					</h4>
-					<p className="text-gray-400">
-						Pay for your devices and track your bills.
-					</p>
-				</div>
 			{children}
 		</div>
-		</div>
 	);
 }

app/(auth)/auth/verify-otp-registration/page.tsx

@@ -1,7 +1,9 @@
+import { authOptions } from "@/app/auth";
 import VerifyRegistrationOTPForm from "@/components/auth/verify-registration-otp-form";
 import ClientErrorMessage from "@/components/client-error-message";
 import { checkTempIdOrPhone } from "@/queries/authentication";
 import { tryCatch } from "@/utils/tryCatch";
+import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 
 export default async function VerifyRegistrationOTP({
@@ -9,6 +11,11 @@ export default async function VerifyRegistrationOTP({
 }: {
 	searchParams: Promise<{ phone_number: string }>;
 }) {
+	const session = await getServerSession(authOptions)
+	if (session) {
+		// If the user is already logged in, redirect them to the home page
+		return redirect("/");
+	}
 	const phone_number = (await searchParams).phone_number;
 	if (!phone_number) {
 		return redirect("/login");

components/auth/login-form.tsx

@@ -15,7 +15,7 @@ export default function LoginForm() {
 
 	return (
 		<form
-			className="overflow-clip title-bg dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow border mt-4"
+			className="overflow-clip title-bg w-full max-w-xs mx-auto rounded-lg shadow border-2 border-sarLinkOrange/50 dark:border-sarLinkOrange/50 mt-4"
 			action={formAction}
 		>
 			<div className="py-4 px-4">

components/auth/signup-form.tsx

@@ -21,6 +21,7 @@ import {
 import type { ApiResponse, Atoll } from "@/lib/backend-types";
 import { getAtolls } from "@/queries/islands";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import Image from "next/image";
 
 export default function SignUpForm() {
 	const { data: atolls } = useQuery<ApiResponse<Atoll>>({
@@ -58,19 +59,41 @@ export default function SignUpForm() {
 					<Link href="login" className="underline">
 						login
 					</Link>
-				</div>
+				</div>-
 			</>
 		);
 	}
 	return (
+		<div className="grid grid-cols-1 lg:grid-cols-2 w-full rounded h-screen overflow-y-scroll relative items-center justify-center">
+			<div className="absolute inset-0 title-bg mask-dir-to-r mask-from-0 mask-via-100 mask-to-100 mask-linear" />
+			<div className="hidden lg:flex relative overflow-hidden dark:text-white text-gray-900">
+				<div className="relative z-10 flex flex-col justify-center items-center p-12 w-full">
+					<div className="max-w-md text-center">
+						{/* Logo */}
+						<div className="mb-8">
+							<div className="w-20 h-20 bg-transparent backdrop-blur-sm rounded-2xl flex items-center justify-center mx-auto mb-4">
+								<Image src="/logo.png" alt="Company Logo" height={1080} width={1080} className="w-12 h-12 text-white" />
+							</div>
+							<h3 className="text-xl font-semibold dark:text-orange-100">SAR Link Portal</h3>
+						</div>
+
+						<h1 className="text-4xl font-bold mb-6">Welcome to Our Platform</h1>
+						<p className="text-xl mb-8 dark:text-orange-100">
+							Pay for your devices and track your bills.
+						</p>
+					</div>
+				</div>
+				{/* Decorative elements */}
+			</div>
 			<form
 				action={action}
-			className="max-w-xs mt-2 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
+				className="flex flex-col justify-center items-center p-6 lg:p-12 space-y-4 w-full "
 			>
+				<div className="max-w-sm shadow-2xl shadow-sarLinkOrange/20 h-fit my-auto mt-2 w-full bg-white dark:bg-transparent rounded-lg m-auto backdrop-blur-lg self-center border-2 border-sarLinkOrange/10 dark:border-sarLinkOrange/50">
 					<div className="py-2 px-4 my-2 space-y-2">
-				<div>
+						<div className="space-y-2">
-					<label htmlFor="name" className="text-sm">
+							<label htmlFor="name" className="text-sm font-medium text-slate-700 dark:text-slate-300">
-						Name
+								Full Name
 							</label>
 
 							<Input
@@ -91,8 +114,8 @@ export default function SignUpForm() {
 								</span>
 							)}
 						</div>
-				<div>
+						<div className="space-y-2">
-					<label htmlFor="id_card" className="text-sm">
+							<label htmlFor="id_card" className="text-sm font-medium text-slate-700 dark:text-slate-300">
 								ID Card
 							</label>
 							<Input
@@ -122,8 +145,8 @@ export default function SignUpForm() {
 							)}
 						</div>
 						<div>
-					<div>
+							<div className="space-y-2">
-						<label htmlFor="atoll" className="text-sm">
+								<label htmlFor="atoll" className="text-sm font-medium text-slate-700 dark:text-slate-300">
 									Atoll
 								</label>
 								<Select
@@ -157,8 +180,8 @@ export default function SignUpForm() {
 									)}
 								</Select>
 							</div>
-					<div>
+							<div className="space-y-2">
-						<label htmlFor="island" className="text-sm">
+								<label htmlFor="island" className="text-sm font-medium text-slate-700 dark:text-slate-300">
 									Island
 								</label>
 								<Select disabled={isPending} name="island_id">
@@ -184,8 +207,8 @@ export default function SignUpForm() {
 							</div>
 						</div>
 
-				<div>
+						<div className="space-y-2">
-					<label htmlFor="address" className="text-sm">
+							<label htmlFor="address" className="text-sm font-medium text-slate-700 dark:text-slate-300">
 								Address
 							</label>
 							<Input
@@ -209,8 +232,8 @@ export default function SignUpForm() {
 							)}
 						</div>
 
-				<div>
+						<div className="space-y-2">
-					<label htmlFor="dob" className="text-sm">
+							<label htmlFor="dob" className="text-sm font-medium text-slate-700 dark:text-slate-300">
 								Date of Birth
 							</label>
 							<Input
@@ -236,8 +259,8 @@ export default function SignUpForm() {
 								</span>
 							)}
 						</div>
-				<div>
+						<div className="space-y-2">
-					<label htmlFor="accNo" className="text-sm">
+							<label htmlFor="accNo" className="text-sm font-medium text-slate-700 dark:text-slate-300">
 								Account Number
 							</label>
 
@@ -259,8 +282,8 @@ export default function SignUpForm() {
 								</span>
 							)}
 						</div>
-				<div>
+						<div className="space-y-2">
-					<label htmlFor="phone_number" className="text-sm">
+							<label htmlFor="phone_number" className="text-sm font-medium text-slate-700 dark:text-slate-300">
 								Phone Number
 							</label>
 							<Input
@@ -342,13 +365,16 @@ export default function SignUpForm() {
 							{isPending ? <Loader2 className="animate-spin" /> : "Submit"}
 						</Button>
 					</div>
-
 					<div className="mb-4 text-center text-sm">
 						Already have an account?{" "}
 						<Link href="signin" className="underline">
 							login
 						</Link>
 					</div>
+				</div>
+
 			</form>
+		</div>
+
 	);
 }

components/ui/phone-input.tsx

@@ -61,7 +61,7 @@ const InputComponent = React.forwardRef<
 	HTMLInputElement,
 	React.ComponentProps<"input">
 >(({ className, ...props }, ref) => (
-	<Input className={cn("mx-2 bg-white/10", className)} {...props} ref={ref} />
+	<Input className={cn("mx-2 bg-white/10 backdrop-blur-md", className)} {...props} ref={ref} />
 ));
 InputComponent.displayName = "InputComponent";
 

components/ui/sheet.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority"
 import { X } from "lucide-react"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-150 data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
       side: {
@@ -51,7 +51,7 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+  VariantProps<typeof sheetVariants> { }
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,

components/ui/sidebar.tsx

@@ -242,7 +242,7 @@ const Sidebar = React.forwardRef<
 				{/* This is what handles the sidebar gap on desktop */}
 				<div
 					className={cn(
-						"duration-75 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+						"duration-150 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
 						"group-data-[collapsible=offcanvas]:w-0",
 						"group-data-[side=right]:rotate-180",
 						variant === "floating" || variant === "inset"
@@ -252,7 +252,7 @@ const Sidebar = React.forwardRef<
 				/>
 				<div
 					className={cn(
-						"duration-75 fixed inset-y-0 z-0 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+						"duration-150 fixed inset-y-0 z-0 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
 						side === "left"
 							? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
 							: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -457,7 +457,7 @@ const SidebarGroupLabel = React.forwardRef<
 			ref={ref}
 			data-sidebar="group-label"
 			className={cn(
-				"duration-75 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"duration-150 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
 				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
 				className,
 			)}

components/welcome-banner.tsx

@@ -1,39 +1,16 @@
 "use client";
 
-import { useEffect, useState } from "react";
 
 interface WelcomeBannerProps {
   firstName?: string | null;
   lastName?: string | null;
 }
 
-const ANIMATION_DURATION_MS = 500;
 export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
-  const [isMounted, setIsMounted] = useState(true);
-  const [isFadingOut, setIsFadingOut] = useState(false);
-
-  useEffect(() => {
-    const startFadeOutTimer = setTimeout(() => {
-      setIsFadingOut(true);
-    }, 3000);
-    const unmountTimer = setTimeout(() => {
-      setIsMounted(false);
-    }, 3000 + ANIMATION_DURATION_MS);
-
-    return () => {
-      clearTimeout(startFadeOutTimer);
-      clearTimeout(unmountTimer);
-    };
-  }, []);
-
-  if (!isMounted) {
-    return null;
-  }
 
   return (
     <div
-      className={`text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400 ${isFadingOut ? "animate-out fade-out animate-duration-500 animate-ease-out" : "animate-in fade-in"
+      className={"text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400"}
-        }`}
     >
       Welcome,{" "}
       <span className="font-semibold">

package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@faker-js/faker": "^9.3.0",
 				"@hookform/resolvers": "^5.0.1",
+				"@pyncz/tailwind-mask-image": "^2.0.0",
 				"@radix-ui/react-accordion": "^1.2.11",
 				"@radix-ui/react-alert-dialog": "^1.1.2",
 				"@radix-ui/react-checkbox": "^1.1.2",
@@ -856,6 +857,11 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@pyncz/tailwind-mask-image": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@pyncz/tailwind-mask-image/-/tailwind-mask-image-2.0.0.tgz",
+			"integrity": "sha512-BN52RPSp56VIA25ZpLD3SEigwADTrQ6a3Kq8x94rbhU6YP1HpvRjSYtnFenEfGw2nzESvFsNdYT6KKP+JuS73w=="
+		},
 		"node_modules/@radix-ui/number": {
 			"version": "1.1.0",
 			"license": "MIT"

package.json

@@ -11,6 +11,7 @@
 	"dependencies": {
 		"@faker-js/faker": "^9.3.0",
 		"@hookform/resolvers": "^5.0.1",
+		"@pyncz/tailwind-mask-image": "^2.0.0",
 		"@radix-ui/react-accordion": "^1.2.11",
 		"@radix-ui/react-alert-dialog": "^1.1.2",
 		"@radix-ui/react-checkbox": "^1.1.2",

tailwind.config.ts

@@ -11,94 +11,94 @@ export default {
 	theme: {
 		extend: {
 			colors: {
-    			sarLinkOrange: '#f49b5b',
+				sarLinkOrange: "#f49b5b",
-    			background: 'hsl(var(--background))',
+				background: "hsl(var(--background))",
-    			foreground: 'hsl(var(--foreground))',
+				foreground: "hsl(var(--foreground))",
 				card: {
-    				DEFAULT: 'hsl(var(--card))',
+					DEFAULT: "hsl(var(--card))",
-    				foreground: 'hsl(var(--card-foreground))'
+					foreground: "hsl(var(--card-foreground))",
 				},
 				popover: {
-    				DEFAULT: 'hsl(var(--popover))',
+					DEFAULT: "hsl(var(--popover))",
-    				foreground: 'hsl(var(--popover-foreground))'
+					foreground: "hsl(var(--popover-foreground))",
 				},
 				primary: {
-    				DEFAULT: 'hsl(var(--primary))',
+					DEFAULT: "hsl(var(--primary))",
-    				foreground: 'hsl(var(--primary-foreground))'
+					foreground: "hsl(var(--primary-foreground))",
 				},
 				secondary: {
-    				DEFAULT: 'hsl(var(--secondary))',
+					DEFAULT: "hsl(var(--secondary))",
-    				foreground: 'hsl(var(--secondary-foreground))'
+					foreground: "hsl(var(--secondary-foreground))",
 				},
 				muted: {
-    				DEFAULT: 'hsl(var(--muted))',
+					DEFAULT: "hsl(var(--muted))",
-    				foreground: 'hsl(var(--muted-foreground))'
+					foreground: "hsl(var(--muted-foreground))",
 				},
 				accent: {
-    				DEFAULT: 'hsl(var(--accent))',
+					DEFAULT: "hsl(var(--accent))",
-    				foreground: 'hsl(var(--accent-foreground))'
+					foreground: "hsl(var(--accent-foreground))",
 				},
 				destructive: {
-    				DEFAULT: 'hsl(var(--destructive))',
+					DEFAULT: "hsl(var(--destructive))",
-    				foreground: 'hsl(var(--destructive-foreground))'
+					foreground: "hsl(var(--destructive-foreground))",
 				},
-    			border: 'hsl(var(--border))',
+				border: "hsl(var(--border))",
-    			input: 'hsl(var(--input))',
+				input: "hsl(var(--input))",
-    			ring: 'hsl(var(--ring))',
+				ring: "hsl(var(--ring))",
 				chart: {
-    				'1': 'hsl(var(--chart-1))',
+					"1": "hsl(var(--chart-1))",
-    				'2': 'hsl(var(--chart-2))',
+					"2": "hsl(var(--chart-2))",
-    				'3': 'hsl(var(--chart-3))',
+					"3": "hsl(var(--chart-3))",
-    				'4': 'hsl(var(--chart-4))',
+					"4": "hsl(var(--chart-4))",
-    				'5': 'hsl(var(--chart-5))'
+					"5": "hsl(var(--chart-5))",
 				},
 				sidebar: {
-    				DEFAULT: 'hsl(var(--sidebar-background))',
+					DEFAULT: "hsl(var(--sidebar-background))",
-    				foreground: 'hsl(var(--sidebar-foreground))',
+					foreground: "hsl(var(--sidebar-foreground))",
-    				primary: 'hsl(var(--sidebar-primary))',
+					primary: "hsl(var(--sidebar-primary))",
-    				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-    				accent: 'hsl(var(--sidebar-accent))',
+					accent: "hsl(var(--sidebar-accent))",
-    				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-    				border: 'hsl(var(--sidebar-border))',
+					border: "hsl(var(--sidebar-border))",
-    				ring: 'hsl(var(--sidebar-ring))'
+					ring: "hsl(var(--sidebar-ring))",
-    			}
+				},
 			},
 			borderRadius: {
-    			lg: 'var(--radius)',
+				lg: "var(--radius)",
-    			md: 'calc(var(--radius) - 2px)',
+				md: "calc(var(--radius) - 2px)",
-    			sm: 'calc(var(--radius) - 4px)'
+				sm: "calc(var(--radius) - 4px)",
 			},
 			fontFamily: {
-    			sans: [
+				sans: ["var(--font-barlow)"],
-    				'var(--font-barlow)'
+				mono: ["var(--font-mono)"],
-    			],
-    			mono: [
-    				'var(--font-mono)'
-    			]
 			},
 			keyframes: {
-    			'accordion-down': {
+				"accordion-down": {
 					from: {
-    					height: '0'
+						height: "0",
 					},
 					to: {
-    					height: 'var(--radix-accordion-content-height)'
+						height: "var(--radix-accordion-content-height)",
-    				}
 					},
-    			'accordion-up': {
+				},
+				"accordion-up": {
 					from: {
-    					height: 'var(--radix-accordion-content-height)'
+						height: "var(--radix-accordion-content-height)",
 					},
 					to: {
-    					height: '0'
+						height: "0",
-    				}
+					},
-    			}
+				},
 			},
 			animation: {
-    			'accordion-down': 'accordion-down 0.2s ease-out',
+				"accordion-down": "accordion-down 0.2s ease-out",
-    			'accordion-up': 'accordion-up 0.2s ease-out'
+				"accordion-up": "accordion-up 0.2s ease-out",
-    		}
-    	}
 			},
-	plugins: [tailwindcssAnimate, tailwindcssMotion],
+		},
+	},
+	plugins: [
+		tailwindcssAnimate,
+		tailwindcssMotion,
+		require("@pyncz/tailwind-mask-image"),
+	],
 } satisfies Config;