react-icons/fi#FiCornerUpLeft JavaScript Examples

StepOne = ({ activeStep, setNextStep, updateUserData }) => {
	const [isSubmitting, setIsSubmitting] = useState(false);
	const [error, setError] = useState('');
	const form = useForm();
	const router = useRouter();
	const { requestPasswordReset } = useAuth();

	const handleSubmit = async ({ email }) => {
		setIsSubmitting(true);
		setError('');

		const response = await requestPasswordReset({ email });

		if (response.error) {
			setError(response.error.message?.[0]?.message || response.error.message);
			setIsSubmitting(false);
			return;
		}

		updateUserData({ email });
		setNextStep();
	};

	return (
		<S.Wrapper>
			<S.Form onSubmit={form.handleSubmit(handleSubmit)}>
				<S.StepTitle>{activeStep.title}</S.StepTitle>
				<S.StepSubtitle>{activeStep.subtitle}</S.StepSubtitle>

				{!!error && <Error message={error} />}

				<S.InputsWrapper>
					<InputField
						form={form}
						validation={{ required: true }}
						name="email"
						label="E-mail"
						placeholder="Digite o seu e-mail"
						variant="lightRounded"
					/>
				</S.InputsWrapper>

				<S.Actions>
					<RectangularButton
						colorVariant="green"
						variant="round"
						type="submit"
						disabled={isSubmitting}
						fullWidth
					>
						{isSubmitting ? (
							'Aguarde...'
						) : (
							<>
								Enviar e-mail
								<FiArrowRight fontSize="2rem" />
							</>
						)}
					</RectangularButton>
					<RectangularButton
						colorVariant="blue"
						onClick={() => router.push(internalPages.signIn)}
						fullWidth
					>
						<FiCornerUpLeft fontSize="2rem" />
						<span>Voltar para a tela de login</span>
					</RectangularButton>
				</S.Actions>
			</S.Form>
		</S.Wrapper>
	);
}

StepTwo = ({ activeStep, setNextStep, setPrevStep, userData, updateUserData }) => {
	const [isSubmitting, setIsSubmitting] = useState(false);
	const [error, setError] = useState('');
	const verificationCodeRef = useRef();
	const form = useForm({
		defaultValues: { verificationCode: Array(6).fill('') },
		reValidateMode: 'onSubmit',
	});
	const verificationCode = useWatch({
		control: form.control,
		name: 'verificationCode',
	});
	const { requestPasswordReset } = useAuth();
	const { t } = useTranslation();

	useEffect(() => {
		if (verificationCodeRef.current) {
			verificationCodeRef.current.focus();
		}

		// We only want this to run when component is mounted
		// react-hook-form funcs is already memoized
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	const handleSubmit = async () => {
		setIsSubmitting(true);
		setError('');
		const token = verificationCode.join('');

		const response = await checkVerificationCode({
			email: userData.email,
			token,
			tokenType: 'reset-password',
		});

		if (response.error) {
			setError(response.error.message?.[0]?.message || response.error.message);
			setIsSubmitting(false);
			form.reset();
			verificationCodeRef.current.focus();
			return;
		}

		updateUserData({ token });
		setNextStep();
	};

	useEffect(() => {
		const isAllFilled = verificationCode.every((code) => code.length > 0);

		if (isAllFilled) {
			form.handleSubmit(handleSubmit)();
		}
		// react-hook-form funcs is already memoized
		// Everytime `verificationCode` changes, `shouldShowEmailField` also change, so we don't need it here
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [verificationCode]);

	const handleResendCodeValidation = async () => {
		form.clearErrors();
		setIsSubmitting(true);
		const response = await requestPasswordReset({ email: userData.email });

		if (response?.error) {
			toast.error(
				response.error.message[0].message ||
					'Ocorreu um erro para efetuar seu registro. Recarregue a página e tente novamente...',
			);
			setIsSubmitting(false);
			return;
		}

		if (response.success) {
			toast.success('Enviamos um novo código para o seu e-mail!');
			verificationCodeRef.current.focus();
		}

		setIsSubmitting(false);
	};

	return (
		<S.Wrapper>
			<S.Form onSubmit={form.handleSubmit(handleSubmit)}>
				<S.StepTitle>{activeStep.title}</S.StepTitle>
				<S.StepSubtitle smallFontSize>{activeStep.subtitle}</S.StepSubtitle>

				{!!error && <Error message={error} />}

				<S.InputsWrapper>
					<S.VerificationCodeWrapper>
						<Controller
							name="verificationCode"
							control={form.control}
							rules={{
								validate: {
									allFieldsFilled: (value) => {
										return (
											value.every((_val) => _val.length) ||
											t('error:requiredField')
										);
									},
								},
							}}
							render={({ field, fieldState }) => (
								<VerificationCodeField
									ref={verificationCodeRef}
									value={field.value}
									onChange={field.onChange}
									error={fieldState.error}
									required
								/>
							)}
						/>
						<S.ResendEmailLink>
							<RectangularButton
								disabled={isSubmitting}
								colorVariant="blue"
								onClick={handleResendCodeValidation}
							>
								Enviar novamente
							</RectangularButton>
						</S.ResendEmailLink>
					</S.VerificationCodeWrapper>
				</S.InputsWrapper>

				<S.Actions>
					<RectangularButton colorVariant="blue" onClick={setPrevStep} fullWidth>
						<FiCornerUpLeft fontSize="2rem" />
						<span>Voltar para a tela anterior</span>
					</RectangularButton>
				</S.Actions>
			</S.Form>
		</S.Wrapper>
	);
}