goobs-frontend 0.9.13 → 0.9.14

package/package.json

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

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,8 @@
 '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, { ChangeEvent, useState, useEffect, FC } from 'react'
+import { Box, Typography } from '@mui/material'
+import { CheckCircleOutline } from '@mui/icons-material'
+import { red, grey } from '../../styles/palette'
 import CustomButton, { CustomButtonProps } from '../Button'
 
 export interface ConfirmationCodeInputsProps {
@@ -30,144 +24,29 @@ 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]
-  )
-
-  return {
-    handleCodeChange,
-    handleKeyDown,
-  }
+  /** Whether to show the success state UI */
+  showSuccessState?: boolean
 }
 
 const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
@@ -181,155 +60,95 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
   codeSent = false,
   onVerify,
   onSendResend,
+  onDisableVerification,
   verifyButtonProps = {},
   sendResendButtonProps = {},
+  disableVerificationButtonProps = {},
   showActionButtons = false,
   showSendResendButton = true,
+  successMessage = 'Verification Successful',
+  showSuccessState = false,
   ...props
 }) => {
   // Initialize internal state with the value prop
   const [internalValue, setInternalValue] = useState(value)
-
-  // Create refs for each input
-  const inputRefs = React.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)
-    }
-  }, [codeLength])
+  const [isFocused, setIsFocused] = useState(false)
+  const [cursorPosition, setCursorPosition] = useState(value.length)
+  const inputRef = React.useRef<HTMLInputElement>(null)
 
   // Update internal state when value prop changes
   useEffect(() => {
-    // Only update if the value actually changed to avoid infinite loops
     if (internalValue !== value) {
       setInternalValue(value)
+      setCursorPosition(value.length)
     }
   }, [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
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    // Only allow digits and limit to codeLength
+    const newValue = event.target.value.replace(/\D/g, '').slice(0, codeLength)
+
     if (internalValue !== newValue) {
       setInternalValue(newValue)
-    }
-
-    // Call external onChange if provided
-    if (onChange && newValue !== value) {
-      onChange(newValue)
+      setCursorPosition(event.target.selectionStart || newValue.length)
+      onChange?.(newValue)
     }
   }
 
-  const { handleCodeChange, handleKeyDown } = useCodeConfirmation({
-    codeLength,
-    onChange: handleChangeWithState,
-    inputRefs,
-    setInternalValue, // Pass setInternalValue to ensure direct updates
-  })
-
-  // 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()
-        }
-      }
-    }
-
-    document.addEventListener(
-      'keydown',
-      handleGlobalKeyDown as unknown as EventListener
-    )
-    return () => {
-      document.removeEventListener(
-        'keydown',
-        handleGlobalKeyDown as unknown as EventListener
-      )
+  const handleSelect = () => {
+    if (inputRef.current) {
+      setCursorPosition(inputRef.current.selectionStart || internalValue.length)
     }
-  }, [])
+  }
 
   // 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
+  const inputAreaWidth = codeLength * 40 + (codeLength - 1) * 8 + 44
 
-  // Calculate button container width - ensure minimum width for buttons
-  // Each button should be at least 120px for good UX
+  // Calculate button container width
   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 * 2 + 16)
     : Math.max(inputAreaWidth, minButtonWidth)
 
-  // For manual changes (typing digits), also handle auto-focus next field
-  const handleChange = (
-    event: ChangeEvent<HTMLInputElement>,
-    index: number
-  ) => {
-    const inputValue = event.target.value.replace(/\D/g, '') // Only keep digits
-
-    // 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
-    }
-
-    // Apply the change to state
-    handleCodeChange(event, index)
+  // Split the value into individual digits for display
+  const digits = internalValue.padEnd(codeLength, ' ').split('')
 
-    // 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]) {
-          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()
-        }
-      }, 0)
-    }
-  }
-
-  const handleKeyDownWrapper = (
-    event: KeyboardEvent<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()
-      }
-      return
-    }
+  // Check if all code fields are filled
+  const allFieldsFilled = internalValue.length >= codeLength
 
-    // For other keys, use the normal handler
-    handleKeyDown(event, index)
+  // 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>
+    )
   }
 
-  // Safely create an array of string digits from internal state
-  const digits: string[] = internalValue
-    ? internalValue.split('')
-    : Array.from({ length: codeLength }, () => '')
-
-  // Check if all code fields are filled
-  const allFieldsFilled =
-    digits.filter(digit => digit !== '' && digit !== undefined).length >=
-    codeLength
-
   return (
     <Box
       display="flex"
@@ -347,47 +166,97 @@ 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,
-              }}
+        <Box
+          display="flex"
+          gap={1}
+          sx={{
+            position: 'relative',
+            width: '100%',
+          }}
+        >
+          {/* Hidden input for actual value */}
+          <input
+            ref={inputRef}
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]*"
+            value={internalValue}
+            onChange={handleChange}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onSelect={handleSelect}
+            onKeyUp={handleSelect}
+            onMouseUp={handleSelect}
+            aria-label={ariaLabel || 'Confirmation Code'}
+            aria-required={ariaRequired}
+            aria-invalid={ariaInvalid}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '50px',
+              opacity: 0,
+              cursor: 'text',
+              fontSize: '16px',
+              letterSpacing: '39px',
+              paddingLeft: '15px',
+              zIndex: 1,
+            }}
+            {...props}
+          />
+
+          {/* Visual segments */}
+          {digits.map((digit, index) => (
+            <Box
+              key={index}
               sx={{
-                border: '1px solid',
-                borderColor: 'black',
+                border: '1px solid black',
                 borderRadius: 1,
                 width: 40,
                 height: 50,
-                input: {
-                  textAlign: 'center',
-                  color: 'black',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'black',
+                backgroundColor: 'white',
+                fontSize: '16px',
+                userSelect: 'none',
+                pointerEvents: 'none',
+                position: 'relative',
+                '&::after':
+                  isFocused && index === cursorPosition
+                    ? {
+                        content: '""',
+                        position: 'absolute',
+                        right:
+                          index === cursorPosition && cursorPosition > 0
+                            ? '0'
+                            : 'auto',
+                        left:
+                          index === cursorPosition && cursorPosition === 0
+                            ? '0'
+                            : 'auto',
+                        transform: 'none',
+                        top: '15%',
+                        height: '70%',
+                        width: '1px',
+                        backgroundColor: 'black',
+                        animation: 'blink 1s step-end infinite',
+                      }
+                    : {},
+                '@keyframes blink': {
+                  'from, to': {
+                    opacity: 1,
+                  },
+                  '50%': {
+                    opacity: 0,
+                  },
                 },
               }}
-              onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                handleChange(event, index)
-              }
-              onKeyDown={(event: KeyboardEvent<HTMLInputElement>) =>
-                handleKeyDownWrapper(event, index)
-              }
-              onFocus={() => {
-                inputRefs.current[index]?.focus()
-              }}
-              {...props}
-            />
+            >
+              {digit.trim()}
+            </Box>
           ))}
         </Box>
 
@@ -395,7 +264,7 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
           width={20}
           height={20}
           borderRadius="50%"
-          bgcolor={isValid ? green.main : red.main}
+          bgcolor={isValid ? grey.main : red.main}
           position="static"
           role="status"
           aria-label={isValid ? 'Code is valid' : 'Code is invalid'}
@@ -411,7 +280,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 +301,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
+  }
 }