[Fix] Login pre-fill 'Code' inputs issue (#2629)

* [Fix] passCode autofill bug * Update auth_code input to autofill * Add autosubmit function * Fix refresh on automatic login * Fix autosubmit error * Fix type error
ever-co · Jun 14, 2024 · 6285c19 · 6285c19
1 parent 01c6af2
commit 6285c19
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 6 deletions.
diff --git a/apps/web/app/[locale]/auth/passcode/component.tsx b/apps/web/app/[locale]/auth/passcode/component.tsx
@@ -131,6 +131,9 @@ function EmailScreen({ form, className }: { form: TAuthenticationPasscode } & IC
 function PasscodeScreen({ form, className }: { form: TAuthenticationPasscode } & IClassName) {
 	const t = useTranslations();
 	const inputsRef = useRef<Array<HTMLInputElement>>([]);
+	const formRef = useRef<HTMLFormElement>(null);
+	const urlSearchParams = new URLSearchParams(window.location.search);
+	const code = urlSearchParams.get('code');
 
 	const formatTime = (seconds: number) => {
 		const minutes = Math.floor(seconds / 60);
@@ -168,8 +171,15 @@ function PasscodeScreen({ form, className }: { form: TAuthenticationPasscode } &
 			inputsRef.current[0].focus();
 		}
 	};
+
+	const autoSubmitForm = () => {
+		if (formRef.current) {
+			formRef.current.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+		}
+	}
+
 	return (
-		<form className={className} onSubmit={form.handleCodeSubmit} autoComplete="off">
+		<form className={className} ref={formRef} onSubmit={form.handleCodeSubmit} autoComplete="off">
 			<Card className="w-full dark:bg-[#25272D]" shadow="custom">
 				<div className="flex flex-col items-center justify-between">
 					<Text.Heading as="h3" className="mb-10 text-center">
@@ -199,6 +209,8 @@ function PasscodeScreen({ form, className }: { form: TAuthenticationPasscode } &
 							containerClassName="mt-[21px] w-full flex justify-between dark:bg-[#25272D]"
 							inputClassName="w-[40px] xs:w-[50px] pl-[21px] dark:bg-[#25272D]"
 							defaultValue={form.formValues.code}
+							autoComplete={code ? code : ''}
+							submitCode={autoSubmitForm}
 							onChange={(code) => {
 								form.setFormValues((v) => ({ ...v, code }));
 							}}
@@ -365,9 +377,8 @@ export function WorkSpaceComponent(props: IWorkSpace) {
 							{props.workspaces?.map((worksace, index) => (
 								<div
 									key={index}
-									className={`w-full flex flex-col border border-[#0000001A] dark:border-[#34353D] ${
-										props.selectedWorkspace === index ? 'bg-[#FCFCFC] dark:bg-[#1F2024]' : ''
-									} hover:bg-[#FCFCFC] dark:hover:bg-[#1F2024] rounded-xl`}
+									className={`w-full flex flex-col border border-[#0000001A] dark:border-[#34353D] ${props.selectedWorkspace === index ? 'bg-[#FCFCFC] dark:bg-[#1F2024]' : ''
+										} hover:bg-[#FCFCFC] dark:hover:bg-[#1F2024] rounded-xl`}
 								>
 									<div className="text-base font-medium py-[1.25rem] px-4 flex flex-col gap-[1.0625rem]">
 										<div className="flex justify-between">

diff --git a/apps/web/lib/components/inputs/auth-code-input.tsx b/apps/web/lib/components/inputs/auth-code-input.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { clsxm } from '@app/utils';
-import React, { MutableRefObject, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { MutableRefObject, forwardRef, useState, useEffect, useImperativeHandle, useRef } from 'react';
 import { InputField } from './input';
 import { useTranslations } from 'next-intl';
 
@@ -19,8 +19,10 @@ export type AuthCodeProps = {
 	length?: number;
 	placeholder?: string;
 	onChange: (res: string) => void;
+	submitCode?: () => void;
 	defaultValue?: string;
 	hintType?: 'success' | 'error' | 'warning' | undefined;
+	autoComplete?: string;
 };
 
 type InputMode = 'text' | 'numeric';
@@ -77,7 +79,9 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 			placeholder,
 			onChange,
 			defaultValue,
-			hintType
+			hintType,
+			autoComplete = '',
+			submitCode,
 		},
 		ref
 	) => {
@@ -89,6 +93,7 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 		if (!allowedCharactersValues.some((value) => value === allowedCharacters)) {
 			throw new Error(t('errors.INVALID_ALLOWED_CHARACTER'));
 		}
+		const [canSubmit, setCanSubmit] = useState<boolean>(false);
 		const reference = useRef<HTMLInputElement[]>([]);
 		const inputsRef = inputReference || reference;
 		const inputProps = propsMap[allowedCharacters];
@@ -111,6 +116,7 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 				sendResult();
 			}
 		}));
+
 		useEffect(() => {
 			if (autoFocus) {
 				setTimeout(() => {
@@ -119,6 +125,18 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 			}
 		}, [autoFocus, inputsRef]);
 
+		useEffect(() => {
+			if (autoComplete && autoComplete.length > 0) {
+				handleAutoComplete(autoComplete);
+				setCanSubmit(true);
+
+			}
+		}, [autoComplete, canSubmit]);
+
+		useEffect(() => {
+			submitCode && submitCode();
+		}, [canSubmit])
+
 		const sendResult = () => {
 			const res = inputsRef.current.map((input) => input.value).join('');
 			onChange && onChange(res);
@@ -193,6 +211,26 @@ export const AuthCodeInputField = forwardRef<AuthCodeRef, AuthCodeProps>(
 			e.preventDefault();
 		};
 
+		const handleAutoComplete = (code: string) => {
+
+			let currentInput = 0;
+
+			for (let i = 0; i < code.length; i++) {
+				const pastedCharacter = code.charAt(i);
+				const currentValue = inputsRef.current[currentInput].value;
+				if (pastedCharacter.match(inputProps.pattern)) {
+					if (!currentValue) {
+						inputsRef.current[currentInput].value = pastedCharacter;
+						if (inputsRef.current[currentInput].nextElementSibling !== null) {
+							(inputsRef.current[currentInput].nextElementSibling as HTMLInputElement).focus();
+							currentInput++;
+						}
+					}
+				}
+			}
+			sendResult();
+		};
+
 		const hintColor = {
 			success: '#4BB543',
 			error: '#FF9494',