Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style(2fa): make pin input centered and make boarder more white to make it more visible

Browse Source
This commit is contained in:
DJKnaeckebrot
2024-12-30 10:54:47 +01:00
parent 638fbe17a6
commit cb5077cfcc
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/dokploy/components/auth/login-2fa.tsx
View File

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