Skip to content

Commit

Permalink
Shaheer/92065/error message translation (binary-com#8397)
Browse files Browse the repository at this point in the history 
* refactor: 🎨 moves verification error checking to the common handler

* fix: 🐛 translates formik error message on language switch

* refactor: 🎨 sorts 2fa props asc

* refactor: 🎨 access hooks via React namespace

---------

Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>
Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@deriv.com>
  • Loading branch information
@shaheer-deriv @jim-deriv
@ali-hosseini-deriv @farrah-deriv
3 people authored and farrah-deriv committed Jul 13, 2023
1 parent e48dc6c commit f1c8266
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 36 deletions.
69 changes: 40 additions & 29 deletions packages/account/src/Sections/Security/TwoFactorAuthentication/digit-form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -55,7 +62,7 @@ const DigitForm = ({ is_enabled, setTwoFAStatus, setTwoFAChangedStatus }) => {
};

return (
<Formik initialValues={initial_form} onSubmit={handleSubmit} validate={validateFields}>
<Formik initialValues={initial_form} onSubmit={handleSubmit} validate={validateFields} innerRef={formik_ref}>
{({ values, errors, isValid, touched, handleChange, handleBlur, isSubmitting, dirty }) => (
<Form noValidate>
<div className='two-factor__input-group'>
Expand All @@ -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}
Expand All @@ -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
/>
Expand Down
19 changes: 12 additions & 7 deletions packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -93,6 +94,7 @@ const TwoFactorAuthentication = ({
is_enabled={has_enabled_two_fa}
setTwoFAStatus={setTwoFAStatus}
setTwoFAChangedStatus={setTwoFAChangedStatus}
is_language_changing={is_language_changing}
/>
</div>
</ThemedScrollbars>
Expand Down Expand Up @@ -182,6 +184,7 @@ const TwoFactorAuthentication = ({
is_enabled={has_enabled_two_fa}
setTwoFAStatus={setTwoFAStatus}
setTwoFAChangedStatus={setTwoFAChangedStatus}
is_language_changing={is_language_changing}
/>
</Timeline.Item>
</Timeline>
Expand Down Expand Up @@ -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);

0 comments on commit f1c8266

Please sign in to comment.