From 4dba75f9139c903480f37849bf60e857aeef2567 Mon Sep 17 00:00:00 2001
From: miloschwartz <mschwartz10612@gmail.com>
Date: Wed, 23 Apr 2025 16:33:55 -0400
Subject: [PATCH] obscure pin code input closes #580

---
 .../authentication/SetResourcePasswordForm.tsx       |  6 ------
 .../authentication/SetResourcePincodeForm.tsx        | 12 ++++++------
 .../resource/[resourceId]/ResourceAuthPortal.tsx     |  6 ++++++
 src/components/ui/input-otp.tsx                      | 10 +++++-----
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx
index e4bdd1b4..3bf2966a 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx
@@ -140,12 +140,6 @@ export default function SetResourcePasswordForm({
                                                 />
                                             </FormControl>
                                             <FormMessage />
-                                            <FormDescription>
-                                                Users will be able to access
-                                                this resource by entering this
-                                                password. It must be at least 4
-                                                characters long.
-                                            </FormDescription>
                                         </FormItem>
                                     )}
                                 />
diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx
index 58a997bf..31ccbea6 100644
--- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx
+++ b/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx
@@ -147,33 +147,33 @@ export default function SetResourcePincodeForm({
                                                         <InputOTPGroup className="flex">
                                                             <InputOTPSlot
                                                                 index={0}
+                                                                obscured
                                                             />
                                                             <InputOTPSlot
                                                                 index={1}
+                                                                obscured
                                                             />
                                                             <InputOTPSlot
                                                                 index={2}
+                                                                obscured
                                                             />
                                                             <InputOTPSlot
                                                                 index={3}
+                                                                obscured
                                                             />
                                                             <InputOTPSlot
                                                                 index={4}
+                                                                obscured
                                                             />
                                                             <InputOTPSlot
                                                                 index={5}
+                                                                obscured
                                                             />
                                                         </InputOTPGroup>
                                                     </InputOTP>
                                                 </div>
                                             </FormControl>
                                             <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>
                                     )}
                                 />
diff --git a/src/app/auth/resource/[resourceId]/ResourceAuthPortal.tsx b/src/app/auth/resource/[resourceId]/ResourceAuthPortal.tsx
index d7efa59c..c7eca2c7 100644
--- a/src/app/auth/resource/[resourceId]/ResourceAuthPortal.tsx
+++ b/src/app/auth/resource/[resourceId]/ResourceAuthPortal.tsx
@@ -377,31 +377,37 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
                                                                                 index={
                                                                                     0
                                                                                 }
+                                                                                obscured
                                                                             />
                                                                             <InputOTPSlot
                                                                                 index={
                                                                                     1
                                                                                 }
+                                                                                obscured
                                                                             />
                                                                             <InputOTPSlot
                                                                                 index={
                                                                                     2
                                                                                 }
+                                                                                obscured
                                                                             />
                                                                             <InputOTPSlot
                                                                                 index={
                                                                                     3
                                                                                 }
+                                                                                obscured
                                                                             />
                                                                             <InputOTPSlot
                                                                                 index={
                                                                                     4
                                                                                 }
+                                                                                obscured
                                                                             />
                                                                             <InputOTPSlot
                                                                                 index={
                                                                                     5
                                                                                 }
+                                                                                obscured
                                                                             />
                                                                         </InputOTPGroup>
                                                                     </InputOTP>
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
index f13ce8a6..57cfe388 100644
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -8,8 +8,8 @@ import { cn } from "@app/lib/cn"
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof OTPInput> & { obscured?: boolean }
+>(({ className, containerClassName, obscured = false, ...props }, ref) => (
   <OTPInput
     ref={ref}
     containerClassName={cn(
@@ -32,8 +32,8 @@ InputOTPGroup.displayName = "InputOTPGroup"
 
 const InputOTPSlot = React.forwardRef<
   React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<"div"> & { index: number; obscured?: boolean }
+>(({ index, className, obscured = false, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext)
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
 
@@ -47,7 +47,7 @@ const InputOTPSlot = React.forwardRef<
       )}
       {...props}
     >
-      {char}
+      {char && obscured ? "•" : char}
       {hasFakeCaret && (
         <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" />