diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx index 1871b3a89..f9ba8de33 100644 --- a/app/soapbox/features/notifications/components/notification.tsx +++ b/app/soapbox/features/notifications/components/notification.tsx @@ -1,6 +1,6 @@ import React, { useCallback } from 'react'; import { HotKeys } from 'react-hotkeys'; -import { defineMessages, useIntl, FormattedMessage, IntlShape, MessageDescriptor } from 'react-intl'; +import { defineMessages, useIntl, FormattedMessage, IntlShape, MessageDescriptor, defineMessage } from 'react-intl'; import { useHistory } from 'react-router-dom'; import { mentionCompose } from 'soapbox/actions/compose'; @@ -55,6 +55,11 @@ const icons: Record = { update: require('@tabler/icons/pencil.svg'), }; +const nameMessage = defineMessage({ + id: 'notification.name', + defaultMessage: '{link}{others}', +}); + const messages: Record = defineMessages({ follow: { id: 'notification.follow', @@ -115,10 +120,7 @@ const buildMessage = ( instanceTitle: string, ): React.ReactNode => { const link = buildLink(account); - const name = intl.formatMessage({ - id: 'notification.name', - defaultMessage: '{link}{others}', - }, { + const name = intl.formatMessage(nameMessage, { link, others: totalCount && totalCount > 0 ? ( void, } @@ -47,10 +78,7 @@ const VerifySmsModal: React.FC = ({ onClose }) => { setStatus(Statuses.IDLE); dispatch( snackbar.error( - intl.formatMessage({ - id: 'sms_verification.invalid', - defaultMessage: 'Please enter a valid phone number.', - }), + intl.formatMessage(messages.verificationInvalid), ), ); return; @@ -59,10 +87,7 @@ const VerifySmsModal: React.FC = ({ onClose }) => { dispatch(reRequestPhoneVerification(phone!)).then(() => { dispatch( snackbar.success( - intl.formatMessage({ - id: 'sms_verification.success', - defaultMessage: 'A verification code has been sent to your phone number.', - }), + intl.formatMessage(messages.verificationSuccess), ), ); }) @@ -70,10 +95,7 @@ const VerifySmsModal: React.FC = ({ onClose }) => { .catch(() => { dispatch( snackbar.error( - intl.formatMessage({ - id: 'sms_verification.fail', - defaultMessage: 'Failed to send SMS message to your phone number.', - }), + intl.formatMessage(messages.verificationFail), ), ); }); @@ -102,20 +124,11 @@ const VerifySmsModal: React.FC = ({ onClose }) => { const confirmationText = useMemo(() => { switch (status) { case Statuses.IDLE: - return intl.formatMessage({ - id: 'sms_verification.modal.verify_sms', - defaultMessage: 'Verify SMS', - }); + return intl.formatMessage(messages.verifySms); case Statuses.READY: - return intl.formatMessage({ - id: 'sms_verification.modal.verify_number', - defaultMessage: 'Verify phone number', - }); + return intl.formatMessage(messages.verifyNumber); case Statuses.REQUESTED: - return intl.formatMessage({ - id: 'sms_verification.modal.verify_code', - defaultMessage: 'Verify code', - }); + return intl.formatMessage(messages.verifyCode); default: return null; } @@ -126,12 +139,13 @@ const VerifySmsModal: React.FC = ({ onClose }) => { case Statuses.IDLE: return ( - {intl.formatMessage({ - id: 'sms_verification.modal.verify_help_text', - defaultMessage: 'Verify your phone number to start using {instance}.', - }, { - instance: title, - })} + ); case Statuses.READY: @@ -149,10 +163,10 @@ const VerifySmsModal: React.FC = ({ onClose }) => { return ( <> - {intl.formatMessage({ - id: 'sms_verification.modal.enter_code', - defaultMessage: 'We sent you a 6-digit code via SMS. Enter it below.', - })} + = ({ onClose }) => { }) .catch(() => dispatch( snackbar.error( - intl.formatMessage({ - id: 'sms_verification.invalid', - defaultMessage: 'Your SMS token has expired.', - }), + intl.formatMessage(messages.verificationExpired), ), )); }; @@ -201,10 +212,10 @@ const VerifySmsModal: React.FC = ({ onClose }) => { return ( } onClose={() => onClose('VERIFY_SMS')} cancelAction={status === Statuses.IDLE ? () => onClose('VERIFY_SMS') : undefined} @@ -212,10 +223,12 @@ const VerifySmsModal: React.FC = ({ onClose }) => { confirmationAction={onConfirmationClick} confirmationText={confirmationText} secondaryAction={status === Statuses.REQUESTED ? resendVerificationCode : undefined} - secondaryText={status === Statuses.REQUESTED ? intl.formatMessage({ - id: 'sms_verification.modal.resend_code', - defaultMessage: 'Resend verification code?', - }) : undefined} + secondaryText={status === Statuses.REQUESTED ? ( + + ) : undefined} secondaryDisabled={requestedAnother} > diff --git a/app/soapbox/features/verification/email_passthru.tsx b/app/soapbox/features/verification/email_passthru.tsx index 43432c586..e51f3220f 100644 --- a/app/soapbox/features/verification/email_passthru.tsx +++ b/app/soapbox/features/verification/email_passthru.tsx @@ -28,6 +28,11 @@ const messages = defineMessages({ tokenNotFoundBody: { id: 'email_passthru.token_not_found.body', defaultMessage: 'Your email token was not found. Please request a new email confirmation from the {bold} from which you sent this email confirmation.' }, tokenExpiredHeading: { id: 'email_passthru.token_expired.heading', defaultMessage: 'Token Expired' }, tokenExpiredBody: { id: 'email_passthru.token_expired.body', defaultMessage: 'Your email token has expired. Please request a new email confirmation from the {bold} from which you sent this email confirmation.' }, + emailConfirmed: { id: 'email_passthru.success', defaultMessage: 'Your email has been verified!' }, + genericFail: { id: 'email_passthru.fail.generic', defaultMessage: 'Unable to confirm your email' }, + tokenExpired: { id: 'email_passthru.fail.expired', defaultMessage: 'Your email token has expired' }, + tokenNotFound: { id: 'email_passthru.fail.not_found', defaultMessage: 'Your email token is invalid.' }, + invalidToken: { id: 'email_passthru.fail.invalid_token', defaultMessage: 'Your token is invalid' }, }); const Success = () => { @@ -116,30 +121,21 @@ const EmailPassThru = () => { dispatch(confirmEmailVerification(token)) .then(() => { setStatus(Statuses.SUCCESS); - dispatch(snackbar.success(intl.formatMessage({ id: 'email_passthru.success', defaultMessage: 'Your email has been verified!' }))); + dispatch(snackbar.success(intl.formatMessage(messages.emailConfirmed))); }) .catch((error: AxiosError) => { const errorKey = error?.response?.data?.error; - let message = intl.formatMessage({ - id: 'email_passthru.fail.generic', - defaultMessage: 'Unable to confirm your email', - }); + let message = intl.formatMessage(messages.genericFail); if (errorKey) { switch (errorKey) { case 'token_expired': - message = intl.formatMessage({ - id: 'email_passthru.fail.expired', - defaultMessage: 'Your email token has expired.', - }); + message = intl.formatMessage(messages.tokenExpired); setStatus(Statuses.TOKEN_EXPIRED); break; case 'token_not_found': - message = intl.formatMessage({ - id: 'email_passthru.fail.not_found', - defaultMessage: 'Your email token is invalid.', - }); - message = 'Your token is invalid'; + message = intl.formatMessage(messages.tokenNotFound); + message = intl.formatMessage(messages.invalidToken); setStatus(Statuses.TOKEN_NOT_FOUND); break; default: diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx index bec6c2868..95b888aef 100644 --- a/app/soapbox/features/verification/steps/email-verification.tsx +++ b/app/soapbox/features/verification/steps/email-verification.tsx @@ -1,6 +1,6 @@ import { AxiosError } from 'axios'; import React from 'react'; -import { useIntl } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import snackbar from 'soapbox/actions/snackbar'; import { checkEmailVerification, postEmailVerification, requestEmailVerification } from 'soapbox/actions/verification'; @@ -8,6 +8,13 @@ import Icon from 'soapbox/components/icon'; import { Button, Form, FormGroup, Input, Text } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; +const messages = defineMessages({ + verificationSuccess: { id: 'email_verification.success', defaultMessage: 'Verification email sent successfully.' }, + verificationFail: { id: 'email_verification.fail', defaultMessage: 'Failed to request email verification.' }, + verificationFailTakenAlert: { id: 'emai_verifilcation.exists', defaultMessage: 'This email has already been taken.' }, + verificationFailTaken: { id: 'email_verification.taken', defaultMessage: 'is taken' }, +}); + const Statuses = { IDLE: 'IDLE', REQUESTED: 'REQUESTED', @@ -77,26 +84,23 @@ const EmailVerification = () => { dispatch( snackbar.success( - intl.formatMessage({ - id: 'email_verification.exists', - defaultMessage: 'Verification email sent successfully.', - }), + intl.formatMessage(messages.verificationSuccess), ), ); }) .catch((error: AxiosError) => { const errorMessage = (error.response?.data as any)?.error; const isEmailTaken = errorMessage === 'email_taken'; - let message = intl.formatMessage({ id: 'email_verification.fail', defaultMessage: 'Failed to request email verification.' }); + let message = intl.formatMessage(messages.verificationFail); if (isEmailTaken) { - message = intl.formatMessage({ id: 'email_verification.exists', defaultMessage: 'This email has already been taken.' }); + message = intl.formatMessage(messages.verificationFailTakenAlert); } else if (errorMessage) { message = errorMessage; } if (isEmailTaken) { - setErrors([intl.formatMessage({ id: 'email_verification.taken', defaultMessage: 'is taken' })]); + setErrors([intl.formatMessage(messages.verificationFailTaken)]); } dispatch(snackbar.error(message)); @@ -111,7 +115,9 @@ const EmailVerification = () => { return (
-

{intl.formatMessage({ id: 'email_verification.header', defaultMessage: 'Enter your email address' })}

+

+ +

diff --git a/app/soapbox/features/verification/steps/sms-verification.tsx b/app/soapbox/features/verification/steps/sms-verification.tsx index 8f545e1ad..7337c706d 100644 --- a/app/soapbox/features/verification/steps/sms-verification.tsx +++ b/app/soapbox/features/verification/steps/sms-verification.tsx @@ -1,6 +1,6 @@ import { AxiosError } from 'axios'; import React from 'react'; -import { useIntl } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import OtpInput from 'react-otp-input'; import snackbar from 'soapbox/actions/snackbar'; @@ -8,6 +8,13 @@ import { confirmPhoneVerification, requestPhoneVerification } from 'soapbox/acti import { Button, Form, FormGroup, PhoneInput, Text } from 'soapbox/components/ui'; import { useAppDispatch, useAppSelector } from 'soapbox/hooks'; +const messages = defineMessages({ + verificationInvalid: { id: 'sms_verification.invalid', defaultMessage: 'Please enter a valid phone number.' }, + verificationSuccess: { id: 'sms_verification.success', defaultMessage: 'A verification code has been sent to your phone number.' }, + verificationFail: { id: 'sms_verification.fail', defaultMessage: 'Failed to send SMS message to your phone number.' }, + verificationExpired: { id: 'sms_verification.expired', defaultMessage: 'Your SMS token has expired.' }, +}); + const Statuses = { IDLE: 'IDLE', REQUESTED: 'REQUESTED', @@ -38,10 +45,7 @@ const SmsVerification = () => { setStatus(Statuses.IDLE); dispatch( snackbar.error( - intl.formatMessage({ - id: 'sms_verification.invalid', - defaultMessage: 'Please enter a valid phone number.', - }), + intl.formatMessage(messages.verificationInvalid), ), ); return; @@ -50,18 +54,12 @@ const SmsVerification = () => { dispatch(requestPhoneVerification(phone!)).then(() => { dispatch( snackbar.success( - intl.formatMessage({ - id: 'sms_verification.success', - defaultMessage: 'A verification code has been sent to your phone number.', - }), + intl.formatMessage(messages.verificationSuccess), ), ); setStatus(Statuses.REQUESTED); }).catch((error: AxiosError) => { - const message = (error.response?.data as any)?.message || intl.formatMessage({ - id: 'sms_verification.fail', - defaultMessage: 'Failed to send SMS message to your phone number.', - }); + const message = (error.response?.data as any)?.message || intl.formatMessage(messages.verificationFail); dispatch(snackbar.error(message)); setStatus(Statuses.FAIL); @@ -78,10 +76,7 @@ const SmsVerification = () => { dispatch(confirmPhoneVerification(verificationCode)) .catch(() => dispatch( snackbar.error( - intl.formatMessage({ - id: 'sms_verification.invalid', - defaultMessage: 'Your SMS token has expired.', - }), + intl.formatMessage(messages.verificationExpired), ), )); }; @@ -97,7 +92,7 @@ const SmsVerification = () => {

- {intl.formatMessage({ id: 'sms_verification.sent.header', defaultMessage: 'Verification code' })} +

@@ -136,7 +131,9 @@ const SmsVerification = () => { return (
-

{intl.formatMessage({ id: 'sms_verification.header', defaultMessage: 'Enter your phone number' })}

+

+ +