diff --git a/packages/account/src/Sections/Security/TwoFactorAuthentication/digit-form.jsx b/packages/account/src/Sections/Security/TwoFactorAuthentication/digit-form.jsx index 765e44d53231..0aa3357c688d 100644 --- a/packages/account/src/Sections/Security/TwoFactorAuthentication/digit-form.jsx +++ b/packages/account/src/Sections/Security/TwoFactorAuthentication/digit-form.jsx @@ -2,50 +2,57 @@ import React from 'react'; import classNames from 'classnames'; import { Formik, Form, Field } from 'formik'; import { Input, Button } from '@deriv/components'; -import { localize } from '@deriv/translations'; import { getPropertyValue, WS } from '@deriv/shared'; +import { localize } from '@deriv/translations'; -const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => { +const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus, is_language_changing }) => { const [is_success, setSuccess] = React.useState(false); + const [is_ready_for_verification, setReadyForVerification] = React.useState(false); const button_text = is_enabled ? localize('Disable') : localize('Enable'); + const formik_ref = React.useRef(); + let enable_response; const initial_form = { digit_code: '', }; - const validateFields = values => { - const errors = {}; + React.useEffect(() => { + if (is_language_changing) { + formik_ref.current.setFieldTouched('digit_code'); + } + }, [is_language_changing]); + const validateFields = async values => { const digit_code = values.digit_code; - if (!digit_code) { - errors.digit_code = localize('Digit code is required.'); + return { digit_code: localize('Digit code is required.') }; } else if (!(digit_code.length === 6)) { - errors.digit_code = localize('Length of digit code must be 6 characters.'); + return { digit_code: localize('Length of digit code must be 6 characters.') }; } else if (!/^[0-9]{6}$/g.test(digit_code)) { - errors.digit_code = localize('Digit code must only contain numbers.'); + return { digit_code: localize('Digit code must only contain numbers.') }; + } else if (is_ready_for_verification) { + if (formik_ref.current.isValid) { + const totp_action = is_enabled ? 'disable' : 'enable'; + enable_response = await WS.authorized.accountSecurity({ + account_security: 1, + totp_action, + otp: values.digit_code, + }); + if (enable_response.error) { + const { code, message } = enable_response.error; + if (code === 'InvalidOTP') + return { digit_code: localize("That's not the right code. Please try again.") }; + return { digit_code: message }; + } + } else { + return { digit_code: localize("That's not the right code. Please try again.") }; + } } - - return errors; + return {}; }; - const handleSubmit = async (values, { setSubmitting, setFieldError, resetForm }) => { - const totp_action = is_enabled ? 'disable' : 'enable'; - const enable_response = await WS.authorized.accountSecurity({ - account_security: 1, - totp_action, - otp: values.digit_code, - }); - setSubmitting(false); - - if (enable_response.error) { - const { code, message } = enable_response.error; - if (code === 'InvalidOTP') { - setFieldError('digit_code', localize("That's not the right code. Please try again.")); - } else { - setFieldError('digit_code', message); - } - } else { + const handleSubmit = async (values, { resetForm }) => { + if (!enable_response.error) { const is_enabled_response = !!getPropertyValue(enable_response, ['account_security', 'totp', 'is_enabled']); setSuccess(true); resetForm(); @@ -55,7 +62,7 @@ const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => { }; return ( - + {({ values, errors, isValid, touched, handleChange, handleBlur, isSubmitting, dirty }) => (
@@ -68,7 +75,10 @@ const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => { className='two-factor__input' label={localize('Authentication code')} value={values.digit_code} - onChange={handleChange} + onChange={e => { + handleChange(e); + setReadyForVerification(false); + }} onBlur={handleBlur} required error={touched.digit_code && errors.digit_code} @@ -87,6 +97,7 @@ const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => { is_loading={isSubmitting} is_submit_success={is_success} text={button_text} + onClick={() => setReadyForVerification(true)} large primary /> diff --git a/packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.jsx b/packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.jsx index c18230f8aec6..d982bfdb832e 100644 --- a/packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.jsx +++ b/packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.jsx @@ -21,12 +21,13 @@ import TwoFactorAuthenticationArticle from './two-factor-authentication-article. const TwoFactorAuthentication = ({ email_address, - is_switching, - setTwoFAStatus, getTwoFAStatus, has_enabled_two_fa, + is_language_changing, + is_switching, Notifications, setTwoFAChangedStatus, + setTwoFAStatus, }) => { const [is_loading, setLoading] = React.useState(true); const [is_qr_loading, setQrLoading] = React.useState(false); @@ -93,6 +94,7 @@ const TwoFactorAuthentication = ({ is_enabled={has_enabled_two_fa} setTwoFAStatus={setTwoFAStatus} setTwoFAChangedStatus={setTwoFAChangedStatus} + is_language_changing={is_language_changing} />
@@ -182,6 +184,7 @@ const TwoFactorAuthentication = ({ is_enabled={has_enabled_two_fa} setTwoFAStatus={setTwoFAStatus} setTwoFAChangedStatus={setTwoFAChangedStatus} + is_language_changing={is_language_changing} /> @@ -209,20 +212,22 @@ const TwoFactorAuthentication = ({ TwoFactorAuthentication.propTypes = { email_address: PropTypes.string, - is_switching: PropTypes.bool, - setTwoFAStatus: PropTypes.func, getTwoFAStatus: PropTypes.func, has_enabled_two_fa: PropTypes.bool, + is_language_changing: PropTypes.bool, + is_switching: PropTypes.bool, Notifications: PropTypes.node, setTwoFAChangedStatus: PropTypes.func, + setTwoFAStatus: PropTypes.func, }; -export default connect(({ client, ui }) => ({ +export default connect(({ client, ui, common }) => ({ email_address: client.email_address, - is_switching: client.is_switching, - setTwoFAStatus: client.setTwoFAStatus, getTwoFAStatus: client.getTwoFAStatus, has_enabled_two_fa: client.has_enabled_two_fa, + is_language_changing: common.is_language_changing, + is_switching: client.is_switching, Notifications: ui.notification_messages_ui, setTwoFAChangedStatus: client.setTwoFAChangedStatus, + setTwoFAStatus: client.setTwoFAStatus, }))(TwoFactorAuthentication);