From 2cf10ef0e86cda02afa277bba46ab4aa14212cd3 Mon Sep 17 00:00:00 2001
From: anishali2 <ansihali1221@gmail.com>
Date: Sat, 17 Feb 2024 01:30:09 +0500
Subject: [PATCH] feat(Auth): added the reset button and fix the padding of
 inputs

---
 apps/web/app/[locale]/auth/passcode/page.tsx       | 2 +-
 apps/web/lib/components/inputs/auth-code-input.tsx | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/[locale]/auth/passcode/page.tsx b/apps/web/app/[locale]/auth/passcode/page.tsx
index c7ecf4cb0..43b673bc2 100644
--- a/apps/web/app/[locale]/auth/passcode/page.tsx
+++ b/apps/web/app/[locale]/auth/passcode/page.tsx
@@ -154,7 +154,7 @@ function PasscodeScreen({ form, className }: { form: TAuthenticationPasscode } &
 						</div>
 
 						<AuthCodeInputField
-							inputsRef={inputsRef}
+							inputReference={inputsRef}
 							key={form.authScreen.screen}
 							allowedCharacters="alphanumeric"
 							length={6}
diff --git a/apps/web/lib/components/inputs/auth-code-input.tsx b/apps/web/lib/components/inputs/auth-code-input.tsx
index 8cd41eee4..14265ec99 100644
--- a/apps/web/lib/components/inputs/auth-code-input.tsx
+++ b/apps/web/lib/components/inputs/auth-code-input.tsx
@@ -1,14 +1,14 @@
 'use client';
 
 import { clsxm } from '@app/utils';
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import React, { MutableRefObject, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { InputField } from './input';
 import { useTranslations } from 'next-intl';
 
 const allowedCharactersValues = ['alpha', 'numeric', 'alphanumeric'] as const;
 
 export type AuthCodeProps = {
-	inputsRef: MutableRefObject<HTMLInputElement[]>;
+	inputReference?: MutableRefObject<HTMLInputElement[]>;
 	allowedCharacters?: (typeof allowedCharactersValues)[number];
 	ariaLabel?: string;
 	autoFocus?: boolean;
@@ -65,7 +65,7 @@ const propsMap: { [key: string]: InputProps } = {
 export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 	(
 		{
-			inputsRef,
+			inputReference = null,
 			allowedCharacters = 'alphanumeric',
 			ariaLabel,
 			autoFocus = true,
@@ -89,7 +89,8 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 		if (!allowedCharactersValues.some((value) => value === allowedCharacters)) {
 			throw new Error(t('errors.INVALID_ALLOWED_CHARACTER'));
 		}
-
+		const reference = useRef<HTMLInputElement[]>([]);
+		const inputsRef = inputReference || reference;
 		const inputProps = propsMap[allowedCharacters];
 		const validDefaultValue =
 			defaultValue && defaultValue.length === length && defaultValue.match(inputProps.pattern) ? true : false;