wp-optimize / vendor / team-updraft / lib-onboarding-wizard / Wizard / Onboarding / src / components / Fields / TwoFaValidation.tsx

TwoFaValidation.tsx in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance trunk, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/TwoFaValidation.tsx

112 lines 3.2 KB

Raw Download Zip

1	import TextInput from "./TextInput";
2	import FieldWrapper from "./FieldWrapper";
3	import Icon from "../../utils/Icon";
4	import useOnboardingStore from "../../store/useOnboardingStore";
5	import {useEffect, useState} from "@wordpress/element";
6	import {handleRequest} from '../../utils/api.js';
7
8	type ValueProps = {
9	key: string,
10	validated: boolean
11	};
12
13	type TwoFaValidationProps = {
14	field: {
15	id: string;
16	label: string;
17	placeholder: string;
18	};
19	onChange: (newValue: ValueProps) => void,
20	fieldStatus: (success: boolean) => void,
21	value: ValueProps;
22	};
23
24	const TwoFaValidation = ({
25	field,
26	onChange,
27	fieldStatus,
28	value,
29	}: TwoFaValidationProps) => {
30	const {
31	getValue,
32	onboardingData,
33	} = useOnboardingStore();
34	const key = value?.key \|\| '';
35	const [keyValid, setKeyValid] = useState(getValue(field.id)?.validated \|\| false);
36	const [isDisabled, setIsDisabled] = useState(keyValid);
37
38	const handleChange = (newKey: string) => {
39	newKey = newKey.replace(/[^0-9]/g, "");
40	onChange({key: newKey, validated: false});
41	}
42
43	/**
44	* Check if the provided key is valid by making an API request.
45	* @param {string} key
46	*/
47	const keyIsValid = async (key: string) => {
48	const path = onboardingData.prefix + '/v1/onboarding/tfa_key_is_valid';
49	const method = 'POST';
50
51	const args = {
52	path,
53	method,
54	data: { key: key, nonce: onboardingData.nonce },
55	};
56	const response = await handleRequest(args);
57	return response.success;
58	};
59
60	useEffect(() => {
61	if (keyValid) {
62	return;
63	}
64
65	fieldStatus(false);
66
67	// Disable input after 6 digits have been entered.
68	if (key.length === 6) {
69	setIsDisabled(true);
70	} else {
71	return;
72	}
73
74	const delay = setTimeout(async () => {
75	const isValid = await keyIsValid(key);
76	onChange({key: key, validated: isValid});
77	setKeyValid(isValid);
78	fieldStatus(isValid);
79	setIsDisabled(isValid);
80	}, 300);
81
82	return () => clearTimeout(delay);
83	}, [key]);
84
85	return (
86	<div className={" w-full"} >
87	<FieldWrapper inputId={field.id} label={field.label}>
88	<div className={"relative w-full"}>
89	<TextInput
90	placeholder={field.placeholder}
91	id={field.id}
92	type="text"
93	onChange={(e) => handleChange(e.target.value)}
94	value={key}
95	disabled={isDisabled}
96	/>
97	<div className="absolute right-4 top-1/2 -translate-y-1/2">
98	{
99	keyValid ? (
100	<Icon name="check" color="green"/>
101	) : (
102	<Icon name="times" color="red"/>
103	)
104	}
105	</div>
106	</div>
107	</FieldWrapper>
108	</div>
109	)
110	};
111
112	export default TwoFaValidation;