Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-15 17:21:41 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: add pin input to all 2FA components

Browse Source 
Adds the pin input to the currently used 2FA components sunsetting
the standard input that was previously used.
This commit is contained in:
Lucas Smith
2024-05-24 03:31:19 +00:00
parent 0985206088
commit 9cb80aa0bc
6 changed files with 56 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/ui/primitives/pin-input.tsx
View File

@ -2,9 +2,10 @@
import * as React from 'react';
import { cn } from '@/lib/utils';
import { DashIcon } from '@radix-ui/react-icons';
import { OTPInput, OTPInputContext } from 'input-otp';
import { Minus } from 'lucide-react';
import { cn } from '../lib/utils';
const PinInput = React.forwardRef<
React.ElementRef<typeof OTPInput>,
@ -43,7 +44,7 @@ const PinInputSlot = React.forwardRef<
<div
ref={ref}
className={cn(
'border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
'border-input relative flex h-10 w-10 items-center justify-center border-y border-r font-mono shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
isActive && 'ring-ring z-10 ring-1',
className,
)}
@ -66,7 +67,7 @@ const PinInputSeparator = React.forwardRef<
React.ComponentPropsWithoutRef<'div'>
>(({ ...props }, ref) => (
<div ref={ref} role="separator" {...props}>
<DashIcon />
<Minus className="h-5 w-5" />
</div>
));