mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-09 12:24:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

obscure pin code input closes #580

Browse source
This commit is contained in:
miloschwartz 2025-04-23 16:33:55 -04:00
parent 548a883e3f
commit 4dba75f913
No known key found for this signature in database
4 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx
View file

@ -140,12 +140,6 @@ export default function SetResourcePasswordForm({
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
<FormDescription>
Users will be able to access
this resource by entering this
password. It must be at least 4
characters long.
</FormDescription>
</FormItem> </FormItem>
)} )}
/> />

12
src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx
View file

@ -147,33 +147,33 @@ export default function SetResourcePincodeForm({
<InputOTPGroup className="flex"> <InputOTPGroup className="flex">
<InputOTPSlot <InputOTPSlot
index={0} index={0}
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={1} index={1}
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={2} index={2}
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={3} index={3}
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={4} index={4}
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={5} index={5}
obscured
/> />
</InputOTPGroup> </InputOTPGroup>
</InputOTP> </InputOTP>
</div> </div>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
<FormDescription>
Users will be able to access
this resource by entering this
PIN code. It must be at least 6
digits long.
</FormDescription>
</FormItem> </FormItem>
)} )}
/> />

6
src/app/auth/resource/[resourceId]/ResourceAuthPortal.tsx
View file

@ -377,31 +377,37 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
index={ index={
0 0
} }
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={ index={
1 1
} }
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={ index={
2 2
} }
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={ index={
3 3
} }
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={ index={
4 4
} }
obscured
/> />
<InputOTPSlot <InputOTPSlot
index={ index={
5 5
} }
obscured
/> />
</InputOTPGroup> </InputOTPGroup>
</InputOTP> </InputOTP>

10
src/components/ui/input-otp.tsx
View file

@ -8,8 +8,8 @@ import { cn } from "@app/lib/cn"
const InputOTP = React.forwardRef< const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>, React.ElementRef<typeof OTPInput>,
React.ComponentPropsWithoutRef<typeof OTPInput> React.ComponentPropsWithoutRef<typeof OTPInput> & { obscured?: boolean }
>(({ className, containerClassName, ...props }, ref) => ( >(({ className, containerClassName, obscured = false, ...props }, ref) => (
<OTPInput <OTPInput
ref={ref} ref={ref}
containerClassName={cn( containerClassName={cn(
@ -32,8 +32,8 @@ InputOTPGroup.displayName = "InputOTPGroup"
const InputOTPSlot = React.forwardRef< const InputOTPSlot = React.forwardRef<
React.ElementRef<"div">, React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div"> & { index: number } React.ComponentPropsWithoutRef<"div"> & { index: number; obscured?: boolean }
>(({ index, className, ...props }, ref) => { >(({ index, className, obscured = false, ...props }, ref) => {
const inputOTPContext = React.useContext(OTPInputContext) const inputOTPContext = React.useContext(OTPInputContext)
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
@ -47,7 +47,7 @@ const InputOTPSlot = React.forwardRef<
)} )}
{...props} {...props}
> >
{char} {char && obscured ? "•" : char}
{hasFakeCaret && ( {hasFakeCaret && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center"> <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" /> <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />