goobs-frontend 0.9.13 → 0.9.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.13",
+  "version": "0.9.15",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",

package/src/components/Checkbox/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Checkbox } from '@mui/material'
+import { Checkbox, styled } from '@mui/material'
 import React from 'react'
 import * as palette from '../../styles/palette'
 
@@ -12,6 +12,40 @@ export interface CheckboxProps {
   disabled?: boolean
 }
 
+// Create a styled version of MUI Checkbox with our custom styles
+const StyledCheckbox = styled(Checkbox)(() => ({
+  padding: '8px',
+  '& .MuiSvgIcon-root': {
+    fontSize: '24px',
+  },
+  // Style for unchecked state
+  '&:not(.Mui-checked):not(.Mui-indeterminate):not(.Mui-disabled)': {
+    '& .MuiSvgIcon-root': {
+      color: 'transparent',
+      // Add a visible background to make it obvious it's a checkbox
+      backgroundColor: palette.grey.light,
+      border: `2px solid ${palette.marine.main}`,
+      borderRadius: '3px',
+    },
+  },
+  '&.Mui-checked .MuiSvgIcon-root': {
+    color: palette.marine.main,
+    border: 'none',
+  },
+  '&.Mui-indeterminate .MuiSvgIcon-root': {
+    color: palette.marine.main,
+    border: 'none',
+  },
+  '&.Mui-disabled .MuiSvgIcon-root': {
+    color: palette.grey.main,
+    border: `2px solid ${palette.grey.main}`,
+    borderRadius: '3px',
+  },
+  '&:hover': {
+    backgroundColor: `${palette.marine.light}33`,
+  },
+}))
+
 function CustomCheckbox({
   onClick,
   checked,
@@ -35,28 +69,13 @@ function CustomCheckbox({
   }
 
   return (
-    <Checkbox
-      sx={{
-        color: palette.marine.main,
-        '&.Mui-checked': {
-          color: palette.marine.main,
-        },
-        '&.Mui-indeterminate': {
-          color: palette.marine.main,
-        },
-        '&.Mui-disabled': {
-          color: palette.grey.main,
-        },
-        '&:hover': {
-          backgroundColor: palette.marine.light,
-          opacity: 0.1,
-        },
-      }}
+    <StyledCheckbox
       checked={checked}
       indeterminate={indeterminate}
       onClick={handleClick}
       onChange={handleChange}
       disabled={disabled}
+      disableRipple
       {...props}
     />
   )

package/src/components/ConfirmationCodeInput/codeinput.stories.tsx

@@ -5,7 +5,7 @@ import { within, userEvent, expect, fireEvent } from '@storybook/test'
 import ConfirmationCodeInputs from './index'
 
 // Helper function to set input values directly without relying on userEvent.clear()
-const setInputValue = (input: HTMLInputElement, value: string) => {
+const setInputValue = (input: HTMLInputElement, value: string): void => {
   // Use fireEvent directly which is more reliable in test environments
   fireEvent.change(input, { target: { value } })
 
@@ -14,7 +14,8 @@ const setInputValue = (input: HTMLInputElement, value: string) => {
 }
 
 // Helper function to wait for a specific time
-const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms))
+const sleep = (ms: number): Promise<void> =>
+  new Promise(resolve => setTimeout(resolve, ms))
 
 /**
  * Configure Storybook metadata
@@ -35,7 +36,8 @@ const meta: Meta<typeof ConfirmationCodeInputs> = {
     onVerify: { action: 'onVerify clicked' },
     onSendResend: { action: 'onSendResend clicked' },
   },
-}
+} as const
+
 export default meta
 
 type Story = StoryObj<typeof ConfirmationCodeInputs>
@@ -53,6 +55,7 @@ export const Basic: Story = {
       isValid={false}
       aria-label="Basic Confirmation Code"
       showActionButtons={false}
+      onDisableVerification={() => {}}
     />
   ),
   play: ({ canvasElement }) => {
@@ -85,6 +88,7 @@ export const PrefilledValue: Story = {
       value="1234"
       aria-label="Prefilled Confirmation Code"
       showActionButtons={false}
+      onDisableVerification={() => {}}
     />
   ),
   play: ({ canvasElement }) => {
@@ -120,6 +124,7 @@ export const ValidCode: Story = {
       isValid={true}
       aria-label="Valid Confirmation Code"
       showActionButtons={false}
+      onDisableVerification={() => {}}
     />
   ),
   play: ({ canvasElement }) => {
@@ -158,6 +163,7 @@ export const ManualTyping: Story = {
       value=""
       aria-label="Manual Code Entry"
       showActionButtons={false}
+      onDisableVerification={() => {}}
     />
   ),
   play: async ({ canvasElement, step }) => {
@@ -168,7 +174,7 @@ export const ManualTyping: Story = {
       // Get each input element
       const element = canvas.getByTestId(`code-input-${i + 1}`)
       // Convert to HTMLInputElement for proper typing
-      return element as unknown as HTMLInputElement
+      return element as HTMLInputElement
     })
 
     // Step 1: Verify initial state
@@ -213,6 +219,7 @@ export const ArrowAndBackspace: Story = {
       value=""
       aria-label="Arrow Navigation Code"
       showActionButtons={false}
+      onDisableVerification={() => {}}
     />
   ),
   play: async ({ canvasElement, step }) => {
@@ -223,7 +230,7 @@ export const ArrowAndBackspace: Story = {
       // Get each input element
       const element = canvas.getByTestId(`code-input-${i + 1}`)
       // Convert to HTMLInputElement for proper typing
-      return element as unknown as HTMLInputElement
+      return element as HTMLInputElement
     })
 
     // Use individual variables for clarity
@@ -281,6 +288,7 @@ export const WithSendCodeButton: Story = {
     codeSent: false,
     onVerify: () => console.log('Verify clicked'),
     onSendResend: () => console.log('Send Code clicked'),
+    onDisableVerification: () => {},
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -312,6 +320,7 @@ export const WithResendCodeButton: Story = {
     codeSent: true,
     onVerify: () => console.log('Verify clicked'),
     onSendResend: () => console.log('Resend Code clicked'),
+    onDisableVerification: () => {},
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -339,6 +348,7 @@ export const ValidCodeWithButtons: Story = {
     codeSent: true,
     onVerify: () => console.log('Verify clicked'),
     onSendResend: () => console.log('Resend Code clicked'),
+    onDisableVerification: () => {},
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -384,6 +394,7 @@ export const WithCustomButtonProps: Story = {
       backgroundcolor: 'green',
       fontvariant: 'merrihelperfooter',
     },
+    onDisableVerification: () => {},
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
@@ -417,6 +428,7 @@ export const ButtonBehaviorTest: Story = {
       codeSent={false}
       onVerify={() => console.log('Verify clicked')}
       onSendResend={() => console.log('Send/Resend Code clicked')}
+      onDisableVerification={() => {}}
     />
   ),
   play: async ({ canvasElement, step }) => {
@@ -449,7 +461,7 @@ export const ButtonBehaviorTest: Story = {
       // Get all inputs by testId
       const inputs = Array.from({ length: 4 }, (_, i) => {
         const element = canvas.getByTestId(`code-input-${i + 1}`)
-        return element as unknown as HTMLInputElement
+        return element as HTMLInputElement
       })
 
       // Fill each input individually and force blur/change events
@@ -551,6 +563,7 @@ export const WithCodeSentFalse: Story = {
     codeSent: false,
     onVerify: () => console.log('Verify clicked'),
     onSendResend: () => console.log('Send/Resend Code clicked'),
+    onDisableVerification: () => {},
   },
   play: ({ canvasElement }) => {
     // Get buttons with direct DOM queries to be more reliable
@@ -579,6 +592,7 @@ export const WithCodeSentTrue: Story = {
     codeSent: true, // This is the key difference
     onVerify: () => console.log('Verify clicked'),
     onSendResend: () => console.log('Send/Resend Code clicked'),
+    onDisableVerification: () => {},
   },
   play: ({ canvasElement }) => {
     // Get buttons with direct DOM queries to be more reliable

package/src/components/ConfirmationCodeInput/index.tsx

@@ -1,14 +1,7 @@
 'use client'
-import React, {
-  ChangeEvent,
-  KeyboardEvent,
-  useState,
-  useEffect,
-  useCallback,
-  FC,
-} from 'react'
-import { Input, Box } from '@mui/material'
-import { red, green } from '../../styles/palette'
+import React, { useState, useEffect, FC, useRef } from 'react'
+import { Box, Typography, styled } from '@mui/material'
+import { CheckCircleOutline } from '@mui/icons-material'
 import CustomButton, { CustomButtonProps } from '../Button'
 
 export interface ConfirmationCodeInputsProps {
@@ -30,146 +23,54 @@ export interface ConfirmationCodeInputsProps {
   /** Callback function for when the Send/Resend button is clicked */
   onSendResend?: () => void | Promise<void>
 
+  /** Required callback function for when verification is disabled */
+  onDisableVerification: () => void | Promise<void>
+
   /** Custom props for the Verify button */
   verifyButtonProps?: Partial<CustomButtonProps>
 
   /** Custom props for the Send/Resend button */
   sendResendButtonProps?: Partial<CustomButtonProps>
 
+  /** Custom props for the Disable Verification button */
+  disableVerificationButtonProps?: Partial<CustomButtonProps>
+
   /** Whether to show action buttons (verify and send/resend) */
   showActionButtons?: boolean
 
   /** Whether to show the Send/Resend button. If false, only the Verify button will be shown. */
   showSendResendButton?: boolean
-}
-
-interface UseCodeConfirmationProps {
-  codeLength: number
-  onChange?: (value: string) => void
-  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>
-  setInternalValue: React.Dispatch<React.SetStateAction<string>>
-}
-
-const useCodeConfirmation = ({
-  codeLength,
-  onChange,
-  inputRefs,
-  setInternalValue,
-}: UseCodeConfirmationProps) => {
-  const [code, setCode] = useState<Record<string, string>>(
-    Object.fromEntries(
-      Array.from({ length: codeLength }, (_, i) => [`code${i + 1}`, ''])
-    )
-  )
-
-  const handleCodeChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
-      // Only keep digits
-      const value = event.target.value.replace(/\D/g, '')
-
-      // Handle the case when the input is cleared
-      if (value === '') {
-        // When clearing, we just update the code
-        setCode(prevCode => {
-          const newCode = {
-            ...prevCode,
-            [`code${index + 1}`]: value,
-          }
-          // Combine all code pieces
-          const combinedValue = Object.values(newCode).join('')
-
-          // Update both internal state and external handler
-          setInternalValue(combinedValue)
-          onChange?.(combinedValue)
-          return newCode
-        })
-        return
-      }
-
-      // Handle direct value setting via typing
-      if (value.length <= 1) {
-        // Only process if it's a single digit or empty
-        setCode(prevCode => {
-          const newCode = {
-            ...prevCode,
-            [`code${index + 1}`]: value,
-          }
-          // Combine all code pieces
-          const combinedValue = Object.values(newCode).join('')
-
-          // Update both internal state and external handler
-          setInternalValue(combinedValue)
-          onChange?.(combinedValue)
-          return newCode
-        })
-      }
-    },
-    [onChange, setInternalValue]
-  )
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {
-      // Allow only numeric keys, navigation keys, and backspace
-      const allowedKeys = [
-        'Backspace',
-        'ArrowLeft',
-        'ArrowRight',
-        'Tab',
-        'Delete',
-        'Home',
-        'End',
-      ]
-
-      if (!allowedKeys.includes(event.key) && !/^\d$/.test(event.key)) {
-        event.preventDefault()
-        return
-      }
-
-      // If user pressed backspace on an empty input, move cursor to previous
-      if (event.key === 'Backspace' && !code[`code${index + 1}`] && index > 0) {
-        event.preventDefault()
-        setCode(prevCode => {
-          const newCode = {
-            ...prevCode,
-            [`code${index}`]: '',
-          }
-          const combinedValue = Object.values(newCode).join('')
 
-          // Update both internal state and external handler
-          setInternalValue(combinedValue)
-          onChange?.(combinedValue)
-          return newCode
-        })
+  /** Custom success message to display */
+  successMessage?: string
 
-        // Move focus to previous input
-        setTimeout(() => {
-          if (inputRefs && inputRefs.current && inputRefs.current[index - 1]) {
-            inputRefs.current[index - 1]?.focus()
-          }
-        }, 0)
-      } else if (event.key === 'ArrowLeft' && index > 0) {
-        // Move focus left
-        event.preventDefault()
-        if (inputRefs && inputRefs.current && inputRefs.current[index - 1]) {
-          inputRefs.current[index - 1]?.focus()
-        }
-      } else if (event.key === 'ArrowRight' && index < codeLength - 1) {
-        // Move focus right
-        event.preventDefault()
-        if (inputRefs && inputRefs.current && inputRefs.current[index + 1]) {
-          inputRefs.current[index + 1]?.focus()
-        }
-      }
-    },
-    [code, codeLength, onChange, inputRefs, setInternalValue]
-  )
+  /** Whether to show the success state UI */
+  showSuccessState?: boolean
 
-  return {
-    handleCodeChange,
-    handleKeyDown,
-  }
+  /** Custom styling for the input fields */
+  inputStyle?: React.CSSProperties
 }
 
+// Custom styled input for verification code digits
+const CodeInput = styled('input')(() => ({
+  width: '40px',
+  height: '50px',
+  padding: '0',
+  textAlign: 'center',
+  fontSize: '16px',
+  fontWeight: 'normal',
+  color: 'black',
+  backgroundColor: 'white',
+  border: '1px solid black',
+  borderRadius: '4px',
+  outline: 'none',
+  // The cursor is visible (not hiding with caretColor)
+  '&:focus': {
+    borderColor: 'black',
+    borderWidth: '2px',
+  },
+}))
+
 const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
   codeLength = 6,
   isValid,
@@ -181,154 +82,255 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
   codeSent = false,
   onVerify,
   onSendResend,
+  onDisableVerification,
   verifyButtonProps = {},
   sendResendButtonProps = {},
+  disableVerificationButtonProps = {},
   showActionButtons = false,
   showSendResendButton = true,
-  ...props
+  successMessage = 'Verification Successful',
+  showSuccessState = false,
+  inputStyle = {},
 }) => {
   // Initialize internal state with the value prop
   const [internalValue, setInternalValue] = useState(value)
-
-  // Create refs for each input
-  const inputRefs = React.useRef<(HTMLInputElement | null)[]>([])
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([])
 
   // Initialize refs array
-  React.useEffect(() => {
-    inputRefs.current = inputRefs.current.slice(0, codeLength)
-    // Fill with nulls if needed
-    while (inputRefs.current.length < codeLength) {
-      inputRefs.current.push(null)
-    }
+  useEffect(() => {
+    inputRefs.current = Array(codeLength).fill(
+      null
+    ) as (HTMLInputElement | null)[]
   }, [codeLength])
 
   // Update internal state when value prop changes
   useEffect(() => {
-    // Only update if the value actually changed to avoid infinite loops
     if (internalValue !== value) {
       setInternalValue(value)
     }
   }, [value, internalValue])
 
-  // Custom onChange handler that updates both internal state and calls the external onChange
-  const handleChangeWithState = (newValue: string) => {
-    // Set internal state only if it's changed
-    if (internalValue !== newValue) {
-      setInternalValue(newValue)
-    }
+  // Auto-focus first input field when component mounts
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (inputRefs.current[0] && internalValue.length === 0) {
+        inputRefs.current[0].focus()
+      }
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [internalValue.length])
 
-    // Call external onChange if provided
-    if (onChange && newValue !== value) {
-      onChange(newValue)
+  // Handle input change for a specific digit
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const target = e.target
+    const val = target.value
+
+    // Only accept numbers
+    if (!/^\d*$/.test(val)) {
+      return
     }
-  }
 
-  const { handleCodeChange, handleKeyDown } = useCodeConfirmation({
-    codeLength,
-    onChange: handleChangeWithState,
-    inputRefs,
-    setInternalValue, // Pass setInternalValue to ensure direct updates
-  })
+    // Create a copy of the current value as an array of characters
+    let newValueArr = internalValue.padEnd(codeLength, '').split('')
 
-  // Special document-level handler for left arrow
-  useEffect(() => {
-    const handleGlobalKeyDown = (e: KeyboardEvent): void => {
-      if (e.key === 'ArrowLeft') {
-        const activeIndex = inputRefs.current.findIndex(
-          ref => ref === document.activeElement
-        )
-        if (activeIndex > 0) {
-          e.preventDefault()
-          inputRefs.current[activeIndex - 1]?.focus()
+    // If input has multiple characters (from paste), process them
+    if (val.length > 1) {
+      const digits = val.split('')
+      for (let i = 0; i < digits.length; i++) {
+        if (index + i < codeLength) {
+          newValueArr[index + i] = digits[i]
         }
       }
+    } else {
+      // Only replace the single character at the index
+      newValueArr[index] = val.charAt(val.length - 1)
     }
 
-    document.addEventListener(
-      'keydown',
-      handleGlobalKeyDown as unknown as EventListener
-    )
-    return () => {
-      document.removeEventListener(
-        'keydown',
-        handleGlobalKeyDown as unknown as EventListener
-      )
-    }
-  }, [])
+    // Convert back to string and remove trailing spaces
+    const newValue = newValueArr.join('').trimEnd()
 
-  // Calculate container width based on number of inputs
-  // Each input is 40px + 4px gap (MUI spacing 1) between them
-  const inputAreaWidth = codeLength * 40 + (codeLength - 1) * 8 + 44 // Add 44px for the indicator dot and margin
+    // Update internal state and call onChange
+    setInternalValue(newValue)
+    onChange?.(newValue)
 
-  // Calculate button container width - ensure minimum width for buttons
-  // Each button should be at least 120px for good UX
-  const minButtonWidth = 120
-  // If only showing the verify button, we need less space
-  const buttonContainerWidth = showSendResendButton
-    ? Math.max(inputAreaWidth, minButtonWidth * 2 + 16) // 16px for gap between buttons
-    : Math.max(inputAreaWidth, minButtonWidth)
+    // Move focus to next input if we have a value and there's a next input
+    if (val && index < codeLength - 1) {
+      inputRefs.current[index + 1]?.focus()
+    }
+  }
 
-  // For manual changes (typing digits), also handle auto-focus next field
-  const handleChange = (
-    event: ChangeEvent<HTMLInputElement>,
+  // Handle key down events for navigation
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>,
     index: number
   ) => {
-    const inputValue = event.target.value.replace(/\D/g, '') // Only keep digits
+    const target = e.target as HTMLInputElement
+
+    switch (e.key) {
+      case 'Backspace': {
+        if (target.value === '') {
+          // If current field is empty and not the first field, move to previous field
+          if (index > 0) {
+            e.preventDefault()
+            inputRefs.current[index - 1]?.focus()
 
-    // Handle case when user types multiple digits at once
-    if (inputValue.length > 1) {
-      // Take only the last character typed
-      const lastChar = inputValue.charAt(inputValue.length - 1)
-      event.target.value = lastChar
-    }
+            // Also clear the previous field if needed
+            const newValueArr = internalValue.split('')
+            newValueArr[index - 1] = ''
+            const newValue = newValueArr.join('').trimEnd()
+            setInternalValue(newValue)
+            onChange?.(newValue)
+          }
+        } else {
+          // Clear current field but don't move
+          const newValueArr = internalValue.split('')
+          newValueArr[index] = ''
+          const newValue = newValueArr.join('').trimEnd()
+          setInternalValue(newValue)
+          onChange?.(newValue)
+        }
+        break
+      }
 
-    // Apply the change to state
-    handleCodeChange(event, index)
+      case 'Delete': {
+        // Clear current field
+        const newValueArr = internalValue.split('')
+        newValueArr[index] = ''
+        const newValue = newValueArr.join('').trimEnd()
+        setInternalValue(newValue)
+        onChange?.(newValue)
+        break
+      }
 
-    // Only move focus if there's a non-empty value and not the last input
-    if (inputValue && inputValue.length > 0 && index < codeLength - 1) {
-      // Focus next input
-      setTimeout(() => {
-        if (inputRefs.current && inputRefs.current[index + 1]) {
+      case 'ArrowLeft':
+        // Move to previous input if exists
+        if (index > 0) {
+          e.preventDefault()
+          inputRefs.current[index - 1]?.focus()
+        }
+        break
+
+      case 'ArrowRight':
+        // Move to next input if exists
+        if (index < codeLength - 1) {
+          e.preventDefault()
           inputRefs.current[index + 1]?.focus()
         }
-      }, 0)
-    } else if (inputValue === '' && index > 0) {
-      // If input is cleared and not the first input, try to focus the previous input
-      setTimeout(() => {
-        if (inputRefs.current && inputRefs.current[index - 1]) {
-          inputRefs.current[index - 1]?.focus()
+        break
+
+      default: {
+        // For number keys, handle them directly
+        if (/^\d$/.test(e.key)) {
+          e.preventDefault()
+
+          // Update the value at this index
+          const newValueArr = internalValue.padEnd(codeLength, '').split('')
+          newValueArr[index] = e.key
+          const newValue = newValueArr.join('').trimEnd()
+
+          setInternalValue(newValue)
+          onChange?.(newValue)
+
+          // Move to next input if there's one
+          if (index < codeLength - 1) {
+            inputRefs.current[index + 1]?.focus()
+          }
         }
-      }, 0)
+        break
+      }
     }
   }
 
-  const handleKeyDownWrapper = (
-    event: KeyboardEvent<HTMLInputElement>,
+  // Handle paste event to distribute digits across inputs
+  const handlePaste = (
+    e: React.ClipboardEvent<HTMLInputElement>,
     index: number
   ) => {
-    // Direct focus handling for left arrow
-    if (event.key === 'ArrowLeft' && index > 0) {
-      event.preventDefault()
-      if (inputRefs.current && inputRefs.current[index - 1]) {
-        inputRefs.current[index - 1]?.focus()
+    e.preventDefault()
+    const pastedData = e.clipboardData.getData('text')
+    const digits = pastedData.replace(/\D/g, '').slice(0, codeLength - index)
+
+    if (digits) {
+      // Update the value from the current index onwards
+      const newValueArr = internalValue.padEnd(codeLength, '').split('')
+
+      for (let i = 0; i < digits.length; i++) {
+        if (index + i < codeLength) {
+          newValueArr[index + i] = digits[i]
+        }
       }
-      return
-    }
 
-    // For other keys, use the normal handler
-    handleKeyDown(event, index)
+      const newValue = newValueArr.join('').trimEnd()
+      setInternalValue(newValue)
+      onChange?.(newValue)
+
+      // Focus the input after the last pasted digit or the last input
+      const focusIndex = Math.min(index + digits.length, codeLength - 1)
+      inputRefs.current[focusIndex]?.focus()
+    }
   }
 
-  // Safely create an array of string digits from internal state
-  const digits: string[] = internalValue
-    ? internalValue.split('')
-    : Array.from({ length: codeLength }, () => '')
+  // Calculate container width based on number of inputs and spacing
+  const inputAreaWidth = codeLength * 40 + (codeLength - 1) * 8 + 44
+
+  // Calculate button container width
+  const minButtonWidth = 120
+  const buttonContainerWidth = showSendResendButton
+    ? Math.max(inputAreaWidth, minButtonWidth * 2 + 16)
+    : Math.max(inputAreaWidth, minButtonWidth)
+
+  // Split the value into individual digits
+  const digits = internalValue.padEnd(codeLength, '').split('')
 
   // Check if all code fields are filled
-  const allFieldsFilled =
-    digits.filter(digit => digit !== '' && digit !== undefined).length >=
-    codeLength
+  const allFieldsFilled = internalValue.length >= codeLength
+
+  // If showing success state, render the success UI
+  if (showSuccessState) {
+    return (
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        gap={2}
+        padding={3}
+        width="100%"
+      >
+        <CheckCircleOutline sx={{ fontSize: 60, color: 'green' }} />
+        <Typography variant="h5" align="center">
+          {successMessage}
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 2, width: '100%' }}>
+          <CustomButton
+            text="Disable Verification"
+            fontcolor="white"
+            backgroundcolor="black"
+            width="100%"
+            height="40px"
+            variant="outlined"
+            {...disableVerificationButtonProps}
+            onClick={() => {
+              void onDisableVerification()
+            }}
+          />
+        </Box>
+      </Box>
+    )
+  }
+
+  const statusIndicator = (
+    <Box
+      width={20}
+      height={20}
+      borderRadius="50%"
+      bgcolor={isValid ? 'green' : 'red'}
+      role="status"
+      aria-label={isValid ? 'Code is valid' : 'Code is invalid'}
+    />
+  )
 
   return (
     <Box
@@ -347,61 +349,33 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
         position="relative"
         marginBottom={2}
       >
-        <Box display="flex" gap={1}>
-          {Array.from({ length: codeLength }, (_, index) => (
-            <Input
-              key={`code-input-${index}-${digits[index] || ''}`}
-              name={`code${index + 1}`}
-              value={digits[index] || ''}
-              inputRef={(el: HTMLInputElement | null) => {
-                inputRefs.current[index] = el
-              }}
-              inputProps={{
-                maxLength: 1,
-                pattern: '[0-9]*',
-                inputMode: 'numeric',
-                'aria-label': `Code Digit ${index + 1}`,
-                'aria-required': ariaRequired,
-                'aria-invalid': ariaInvalid,
-                'data-testid': `code-input-${index + 1}`,
-                'data-index': index,
-              }}
-              sx={{
-                border: '1px solid',
-                borderColor: 'black',
-                borderRadius: 1,
-                width: 40,
-                height: 50,
-                input: {
-                  textAlign: 'center',
-                  color: 'black',
-                },
-              }}
-              onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                handleChange(event, index)
-              }
-              onKeyDown={(event: KeyboardEvent<HTMLInputElement>) =>
-                handleKeyDownWrapper(event, index)
-              }
-              onFocus={() => {
-                inputRefs.current[index]?.focus()
-              }}
-              {...props}
-            />
-          ))}
+        <Box display="flex" alignItems="center" width="100%">
+          <Box display="flex" gap={1} width="100%">
+            {Array.from({ length: codeLength }).map((_, index) => (
+              <CodeInput
+                key={index}
+                ref={el => {
+                  inputRefs.current[index] = el
+                }}
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                maxLength={1}
+                value={digits[index] || ''}
+                onChange={e => handleInputChange(e, index)}
+                onKeyDown={e => handleKeyDown(e, index)}
+                onPaste={e => handlePaste(e, index)}
+                aria-label={`${ariaLabel || 'Confirmation Code'} digit ${index + 1}`}
+                aria-required={ariaRequired}
+                aria-invalid={ariaInvalid}
+                style={{
+                  ...inputStyle,
+                }}
+              />
+            ))}
+          </Box>
+          <Box ml={2}>{statusIndicator}</Box>
         </Box>
-
-        <Box
-          width={20}
-          height={20}
-          borderRadius="50%"
-          bgcolor={isValid ? green.main : red.main}
-          position="static"
-          role="status"
-          aria-label={isValid ? 'Code is valid' : 'Code is invalid'}
-          alignSelf="center"
-          marginRight={2}
-        />
       </Box>
 
       {showActionButtons && (
@@ -411,7 +385,6 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
           width={`${buttonContainerWidth}px`}
           marginTop={1}
           sx={{
-            // Center the button container if it's wider than input area
             marginLeft:
               buttonContainerWidth > inputAreaWidth
                 ? `${-(buttonContainerWidth - inputAreaWidth) / 2}px`
@@ -433,12 +406,11 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
               onClick={() => {
                 if (onSendResend) void onSendResend()
               }}
-              // Send/Resend button is always enabled, preserve any custom disableButton setting
               disableButton={sendResendButtonProps?.disableButton || 'false'}
             />
           )}
           <CustomButton
-            text="Verify Phone"
+            text="Verify"
             fontcolor="white"
             backgroundcolor="black"
             width={

package/src/components/QRCode/index.tsx

@@ -8,8 +8,8 @@ import Typography from '../Typography'
 /**
  * Props for the QRCodeComponent
  * @typedef {Object} QRCodeProps
- * @property {string} username - The username for the MFA setup
- * @property {string} appName - The name of the application for MFA
+ * @property {string} username - The username/email for the MFA setup
+ * @property {string} [appName] - The name of the application for MFA (defaults to "ThothOS")
  * @property {number} [size] - The size of the QR code in pixels
  * @property {string} [title] - An optional title to display above the QR code
  * @property {SxProps} [sx] - Custom styles to apply to the component
@@ -17,7 +17,7 @@ import Typography from '../Typography'
  */
 export interface QRCodeProps {
   username: string
-  appName: string
+  appName?: string
   size?: number
   title?: string
   sx?: SxProps
@@ -30,13 +30,22 @@ export interface QRCodeProps {
  * @returns {React.ReactElement} The rendered QR code component
  */
 const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
-  ({ username, appName, size = 256, title, sx, onSecretGenerated }) => {
+  ({
+    username,
+    appName = 'ThothOS',
+    size = 256,
+    title,
+    sx,
+    onSecretGenerated,
+  }) => {
     // Generate the secret and OTP auth URL
     const { secret, otpAuth } = useMemo(() => {
       const generatedSecret = authenticator.generateSecret()
+
+      // We're using the raw username (likely email) directly instead of "your%20account"
       const otpAuthUrl = authenticator.keyuri(
-        encodeURIComponent(username),
-        encodeURIComponent(appName),
+        username, // Use the raw username/email without encoding
+        appName, // Now defaulting to "ThothOS"
         generatedSecret
       )
       return { secret: generatedSecret, otpAuth: otpAuthUrl }
@@ -100,6 +109,14 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
             size={responsiveSize}
             style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
             aria-label={`QR Code for ${title || 'MFA Setup'}`}
+            data-testid="mfa-qrcode"
+          />
+        </Box>
+        <Box sx={{ mt: 2, textAlign: 'center' }}>
+          <Typography
+            text={`${appName}: ${username}`}
+            fontvariant="merriparagraph"
+            align="center"
           />
         </Box>
       </Paper>
@@ -127,5 +144,17 @@ export function verifyMFAToken(token: string, secret: string): boolean {
     throw new Error('Invalid secret')
   }
 
-  return authenticator.verify({ token, secret })
+  try {
+    // Configure authenticator options to match Microsoft Authenticator
+    authenticator.options = {
+      window: 1, // Allow codes from 1 step before and after
+      digits: 6, // Microsoft Authenticator uses 6-digit codes
+      step: 30, // 30-second interval for code generation
+    }
+
+    return authenticator.verify({ token, secret })
+  } catch (error) {
+    console.error('MFA verification error:', error)
+    return false
+  }
 }

package/src/index.ts

@@ -45,6 +45,7 @@ import { RawSeverityLevel } from './components/ProjectBoard/types'
 // Here is the new horizontal `Tabs` import
 import Tabs, { TabsProps } from './components/Tabs'
 import { Task } from './components/ProjectBoard/types'
+import Checkbox, { CheckboxProps } from './components/Checkbox'
 
 // New imports
 import DateField, { DateFieldProps } from './components/Field/Date'
@@ -172,7 +173,7 @@ export { CompanyAddTaskCustomerDropdown }
 export { CompanyAddTaskCustomerProvided }
 export { CustomerAddTask }
 export { NoUserAddTask }
-
+export { Checkbox }
 // New named exports
 export { DateField }
 export { Dropdown }
@@ -195,6 +196,7 @@ export type { SearchableDropdownProps }
 export { ShowTask }
 export type { Task }
 export type { RawCustomer }
+export type { CheckboxProps }
 /* -------------------------------------------------------------------------- */
 /*                           Named Type Exports                               */
 /* -------------------------------------------------------------------------- */