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 4.6.0, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Fields/TwoFaValidation.tsx

83 lines 2.3 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	const TwoFaValidation = ({
9	field,
10	onChange,
11	fieldStatus,
12	value
13	}) => {
14	const {
15	onboardingData,
16	} = useOnboardingStore();
17	const [key, setKey] = useState(value \|\| "");
18	const [keyValid, setKeyValid] = useState(false);
19
20	const handleChange = (newValue) => {
21	setKey(newValue);
22	onChange(newValue);
23	}
24
25	/**
26	* Check if the provided key is valid by making an API request.
27	* @param key
28	*/
29	const keyIsValid = async (key) => {
30	if (key.length != 6) {
31	return false;
32	}
33
34	const path = onboardingData.prefix + '/v1/onboarding/tfa_key_is_valid';
35	const method = 'GET';
36
37	const args = {
38	path,
39	method,
40	data: { key: key, nonce: onboardingData.nonce },
41	};
42	const response = await handleRequest(args);
43	return response.success;
44	};
45
46	useEffect(() => {
47	if (!key) {
48	setKeyValid(false);
49	fieldStatus(false);
50	return;
51	}
52
53	const delay = setTimeout(async () => {
54	const isValid = await keyIsValid(key);
55	setKeyValid(isValid);
56	fieldStatus(isValid);
57	}, 300);
58
59	return () => clearTimeout(delay);
60	}, [key]);
61
62	return (
63	<div className={" w-full"} >
64	<FieldWrapper inputId={field.id} label={field.label}>
65	<div className={"relative w-full"}>
66	<TextInput placeholder={field.placeholder} type="text"
67	onChange={(e) => handleChange(e.target.value)} value={value}/>
68	<div className="absolute right-4 top-1/2 -translate-y-1/2">
69	{
70	keyValid ? (
71	<Icon name="check" color="green"/>
72	) : (
73	<Icon name="times" color="red"/>
74	)
75	}
76	</div>
77	</div>
78	</FieldWrapper>
79	</div>
80	)
81	};
82
83	export default TwoFaValidation;