[Feature]: 2216 add reset button in code enterence on auth pages (#2218)

* feat(Auth): added the reset button and fix the padding of inputs * feat(Auth): added the reset button and fix the padding of inputs * feat(Auth): added the reset button and fix the padding of inputs * feat(Auth): added the reset button and fix the padding of inputs * feat(Auth): added the reset button and fix the padding of inputs * feat(Auth): added the reset button and fix the padding of inputs
ever-co · Feb 19, 2024 · f7ef6f8 · f7ef6f8
1 parent 12bf3d5
commit f7ef6f8
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/apps/web/app/[locale]/auth/passcode/page.tsx b/apps/web/app/[locale]/auth/passcode/page.tsx
@@ -10,7 +10,7 @@ import { AuthLayout } from 'lib/layout';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { FormEvent, useCallback, useEffect, useState } from 'react';
+import { FormEvent, useCallback, useEffect, useRef, useState } from 'react';
 
 import stc from 'string-to-color';
 
@@ -122,7 +122,15 @@ function EmailScreen({ form, className }: { form: TAuthenticationPasscode } & IC
 
 function PasscodeScreen({ form, className }: { form: TAuthenticationPasscode } & IClassName) {
 	const t = useTranslations();
-
+	const inputsRef = useRef<Array<HTMLInputElement>>([]);
+	const resetForm = () => {
+		if (inputsRef.current) {
+			for (let i = 0; i < inputsRef.current.length; i++) {
+				inputsRef.current[i].value = '';
+			}
+			inputsRef.current[0].focus();
+		}
+	};
 	return (
 		<form className={className} onSubmit={form.handleCodeSubmit} autoComplete="off">
 			<Card className="w-full dark:bg-[#25272D]" shadow="custom">
@@ -133,15 +141,26 @@ function PasscodeScreen({ form, className }: { form: TAuthenticationPasscode } &
 
 					{/* Auth code input */}
 					<div className="w-full mt-5">
-						<Text className="text-xs font-normal text-gray-400">{t('pages.auth.INPUT_INVITE_CODE')}</Text>
+						<div className="flex justify-between">
+							<Text className="text-xs font-normal text-gray-400">
+								{t('pages.auth.INPUT_INVITE_CODE')}
+							</Text>
+							<Text
+								onClick={() => resetForm()}
+								className="text-xs font-normal cursor-pointer hover:underline text-gray-400"
+							>
+								{t('common.RESET')}
+							</Text>
+						</div>
 
 						<AuthCodeInputField
+							inputReference={inputsRef}
 							key={form.authScreen.screen}
 							allowedCharacters="alphanumeric"
 							length={6}
 							ref={form.inputCodeRef}
 							containerClassName="mt-[21px] w-full flex justify-between dark:bg-[#25272D]"
-							inputClassName="w-[40px] xs:w-[50px] dark:bg-[#25272D]"
+							inputClassName="w-[40px] xs:w-[50px] pl-[21px] dark:bg-[#25272D]"
 							defaultValue={form.formValues.code}
 							onChange={(code) => {
 								form.setFormValues((v) => ({ ...v, code }));

diff --git a/apps/web/lib/components/inputs/auth-code-input.tsx b/apps/web/lib/components/inputs/auth-code-input.tsx
@@ -1,13 +1,14 @@
 'use client';
 
 import { clsxm } from '@app/utils';
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } 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 = {
+	inputReference?: MutableRefObject<HTMLInputElement[]>;
 	allowedCharacters?: (typeof allowedCharactersValues)[number];
 	ariaLabel?: string;
 	autoFocus?: boolean;
@@ -64,6 +65,7 @@ const propsMap: { [key: string]: InputProps } = {
 export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 	(
 		{
+			inputReference = null,
 			allowedCharacters = 'alphanumeric',
 			ariaLabel,
 			autoFocus = true,
@@ -87,8 +89,8 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 		if (!allowedCharactersValues.some((value) => value === allowedCharacters)) {
 			throw new Error(t('errors.INVALID_ALLOWED_CHARACTER'));
 		}
-
-		const inputsRef = useRef<Array<HTMLInputElement>>([]);
+		const reference = useRef<HTMLInputElement[]>([]);
+		const inputsRef = inputReference || reference;
 		const inputProps = propsMap[allowedCharacters];
 		const validDefaultValue =
 			defaultValue && defaultValue.length === length && defaultValue.match(inputProps.pattern) ? true : false;
@@ -122,7 +124,6 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 			const res = inputsRef.current.map((input) => input.value).join('');
 			onChange && onChange(res);
 		};
-
 		const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 			const {
 				target: { value, nextElementSibling }
@@ -132,6 +133,7 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 
 			if (value.length > 1) {
 				e.target.value = value.charAt(0);
+
 				if (nextElementSibling !== null) {
 					(nextElementSibling as HTMLInputElement).focus();
 				}