From cb5077cfcc7aa64dad57132bc4bb2f48cc31f067 Mon Sep 17 00:00:00 2001
From: DJKnaeckebrot <dennis.lueke@pm.me>
Date: Mon, 30 Dec 2024 10:54:47 +0100
Subject: [PATCH] style(2fa): make pin input centered and make boarder more
 white to make it more visible

---
 apps/dokploy/components/auth/login-2fa.tsx | 28 ++++++++++++++--------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/apps/dokploy/components/auth/login-2fa.tsx b/apps/dokploy/components/auth/login-2fa.tsx
index dcb004f1..f3d001f8 100644
--- a/apps/dokploy/components/auth/login-2fa.tsx
+++ b/apps/dokploy/components/auth/login-2fa.tsx
@@ -13,10 +13,12 @@ import { CardTitle } from "@/components/ui/card";
 import {
 	InputOTP,
 	InputOTPGroup,
+	InputOTPSeparator,
 	InputOTPSlot,
 } from "@/components/ui/input-otp";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { REGEXP_ONLY_DIGITS } from "input-otp";
 import { AlertTriangle } from "lucide-react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -96,16 +98,22 @@ export const Login2FA = ({ authId }: Props) => {
 						<FormItem className="flex flex-col justify-center max-sm:items-center">
 							<FormLabel>Pin</FormLabel>
 							<FormControl>
-								<InputOTP maxLength={6} {...field}>
-									<InputOTPGroup>
-										<InputOTPSlot index={0} />
-										<InputOTPSlot index={1} />
-										<InputOTPSlot index={2} />
-										<InputOTPSlot index={3} />
-										<InputOTPSlot index={4} />
-										<InputOTPSlot index={5} />
-									</InputOTPGroup>
-								</InputOTP>
+								<div className="flex justify-center">
+									<InputOTP
+										maxLength={6}
+										{...field}
+										pattern={REGEXP_ONLY_DIGITS}
+									>
+										<InputOTPGroup>
+											<InputOTPSlot index={0} className="border-gray-700" />
+											<InputOTPSlot index={1} className="border-gray-700" />
+											<InputOTPSlot index={2} className="border-gray-700" />
+											<InputOTPSlot index={3} className="border-gray-700" />
+											<InputOTPSlot index={4} className="border-gray-700" />
+											<InputOTPSlot index={5} className="border-gray-700" />
+										</InputOTPGroup>
+									</InputOTP>
+								</div>
 							</FormControl>
 							<FormDescription>
 								Please enter the 6 digits code provided by your authenticator