From a11d1cb8f03c1441050d0ed66e88e8af84f137aa Mon Sep 17 00:00:00 2001 From: Joseph John Aas Cooper Date: Fri, 24 Feb 2023 13:08:57 +0100 Subject: [PATCH 1/2] fix: twofactor design changes --- i18n/en.pot | 112 ++++++++++-------- src/account/twoFactor/TwoFactor.js | 8 +- src/account/twoFactor/TwoFactor.module.css | 5 +- .../twoFactor/TwoFactorDisableInstructions.js | 19 ++- .../TwoFactorDisableInstructions.module.css | 15 +++ .../twoFactor/TwoFactorDisableNoticeBox.js | 6 +- .../twoFactor/TwoFactorEnableInstructions.js | 41 +++---- .../TwoFactorEnableInstructions.module.css | 17 ++- .../twoFactor/TwoFactorEnableNotice.js | 20 ++++ .../TwoFactorEnableNotice.module.css | 21 ++++ .../twoFactor/TwoFactorEnableNoticeBox.js | 16 --- .../twoFactor/TwoFactorIntroduction.js | 13 ++ .../TwoFactorIntroduction.module.css | 7 ++ src/account/twoFactor/TwoFactorStatus.js | 13 +- .../twoFactor/TwoFactorStatus.module.css | 9 +- src/account/twoFactor/TwoFactorToggler.js | 14 ++- .../twoFactor/TwoFactorToggler.module.css | 11 +- 17 files changed, 217 insertions(+), 130 deletions(-) create mode 100644 src/account/twoFactor/TwoFactorDisableInstructions.module.css create mode 100644 src/account/twoFactor/TwoFactorEnableNotice.js create mode 100644 src/account/twoFactor/TwoFactorEnableNotice.module.css delete mode 100644 src/account/twoFactor/TwoFactorEnableNoticeBox.js create mode 100644 src/account/twoFactor/TwoFactorIntroduction.js create mode 100644 src/account/twoFactor/TwoFactorIntroduction.module.css diff --git a/i18n/en.pot b/i18n/en.pot index 8603da1f..2a3f7a24 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2023-02-23T14:26:05.271Z\n" -"PO-Revision-Date: 2023-02-23T14:26:05.271Z\n" +"POT-Creation-Date: 2023-02-24T10:07:13.705Z\n" +"PO-Revision-Date: 2023-02-24T10:07:13.705Z\n" msgid "Never" msgstr "Never" @@ -190,8 +190,8 @@ msgstr "Login" msgid "Failed to update password" msgstr "Failed to update password" -msgid "2 Factor Authentication" -msgstr "2 Factor Authentication" +msgid "Two-factor Authentication" +msgstr "Two-factor Authentication" msgid "" "To disable 2 Factor Authentication for your account, first enter the " @@ -200,17 +200,11 @@ msgstr "" "To disable 2 Factor Authentication for your account, first enter the " "confirmation code from the Authenticator App and then click \"Disable\"." -msgid "Instructions after disabling 2FA" -msgstr "Instructions after disabling 2FA" +msgid "Remove two-factor account" +msgstr "Remove two-factor account" -msgid "" -"After disabling 2-factor authentication on your account we recommend to " -"also remove the account from the Authenticator App on your phone/tablet, so " -"you don't run into problems if you want to re-enable it in the future." -msgstr "" -"After disabling 2-factor authentication on your account we recommend to " -"also remove the account from the Authenticator App on your phone/tablet, so " -"you don't run into problems if you want to re-enable it in the future." +msgid ""Two-factor authentication is now turned off. It is recommended to remove the account from your authenticator app now to prevent any future issues re-enabling two-factor authentication." +msgstr "Two-factor authentication is now turned off. It is recommended to remove the account from your authenticator app now to prevent any future issues re-enabling two-factor authentication." msgid "Play store" msgstr "Play store" @@ -218,58 +212,76 @@ msgstr "Play store" msgid "App store" msgstr "App store" -msgid "In the Authenticator App, click the ➕ sign to add a new entry." -msgstr "In the Authenticator App, click the ➕ sign to add a new entry." +msgid "Turn on two-factor authentication" +msgstr "Turn on two-factor authentication" -msgid "Choose \"Scan a barcode\"" -msgstr "Choose \"Scan a barcode\"" +msgid "" +"Make sure you have an authenticator app installed on your device. We " +"recommend Google Authenticator" +msgstr "" +"Make sure you have an authenticator app installed on your device. We " +"recommend Google Authenticator" -msgid "Scan the barcode below" -msgstr "Scan the barcode below" +msgid "" +"Now, enter the code from your authenticator app below and click the \"Turn " +"on\" button." +msgstr "" +"Now, enter the code from your authenticator app below and click the \"Turn " +"on\" button." -msgid "Now enter the code from the Authenticator app below and click \"enable\"" -msgstr "Now enter the code from the Authenticator app below and click \"enable\"" +msgid "" +"Now, enter the authentication code below and click the \"Turn " +"off\" button." +msgstr "" +"Now, enter the authentication code below and click the \"Turn " +"off\" button." -msgid "Instructions for re-enabling 2-Factor Authentication" -msgstr "Instructions for re-enabling 2-Factor Authentication" +msgid "Already set up two-factor authentication before?" +msgstr "Already set up two-factor authentication before?" msgid "" -"When enabling 2 Factor Authentication, you have to add a new entry to the " -"Authenticator App. If you previously had configured the Authenticator App " -"for this user account you need to remove this entry and create a new one, " -"otherwise two Factor Authentication can not be enabled." +"If you have set up two-factor authentication for this account before, you " +"need to remove that entry from your authenticator app before setting it up " +"again." msgstr "" -"When enabling 2 Factor Authentication, you have to add a new entry to the " -"Authenticator App. If you previously had configured the Authenticator App " -"for this user account you need to remove this entry and create a new one, " -"otherwise two Factor Authentication can not be enabled." +"If you have set up two-factor authentication for this account before, you " +"need to remove that entry from your authenticator app before setting it up " +"again." -msgid "2 Factor Authentication is currently" -msgstr "2 Factor Authentication is currently" +msgid "" +"Two-factor authentication protects your account with an extra layer of " +"security. With two-factor authentication turned on, you will need to enter " +"an authentication code from your device every time you log in." +msgstr "" +"Two-factor authentication protects your account with an extra layer of " +"security. With two-factor authentication turned on, you will need to enter " +"an authentication code from your device every time you log in." -msgid "enabled" -msgstr "enabled" +msgid "Two-factor authentication is on." +msgstr "Two-factor authentication is on." -msgid "disabled" -msgstr "disabled" +msgid "Two-factor authentication is off." +msgstr "Two-factor authentication is off." -msgid "Could not update 2 Factor authentication status" -msgstr "Could not update 2 Factor authentication status" +msgid "Open your authenticator app." +msgstr "Open your authenticator app." -msgid "Please enter a 6 digit code" -msgstr "Please enter a 6 digit code" -msgid "2 Factor Authentication code" -msgstr "2 Factor Authentication code" +msgid "Could not update two-factor authentication" +msgstr "Could not update two-factor authentication" -msgid "XXXXXX" -msgstr "XXXXXX" +msgid "" +"This code does not look right. Enter the six digit code from your " +"authentication app." +msgstr "" +"This code does not look right. Enter the six digit code from your " +"authentication app." -msgid "Disable" -msgstr "Disable" +msgid "Six digit authentication code" +msgstr "Six digit authentication code" -msgid "Enable" -msgstr "Enable" +msgid "Turn off two-factor authentication" +msgstr "Turn off two-factor authentication" msgid "Could not enable 2 Factor Authentication" msgstr "Could not enable 2 Factor Authentication" diff --git a/src/account/twoFactor/TwoFactor.js b/src/account/twoFactor/TwoFactor.js index 8a023723..dfec9e54 100644 --- a/src/account/twoFactor/TwoFactor.js +++ b/src/account/twoFactor/TwoFactor.js @@ -6,7 +6,8 @@ import styles from './TwoFactor.module.css' import TwoFactorDisableInstructions from './TwoFactorDisableInstructions.js' import TwoFactorDisableNoticeBox from './TwoFactorDisableNoticeBox.js' import TwoFactorEnableInstructions from './TwoFactorEnableInstructions.js' -import TwoFactorEnableNoticeBox from './TwoFactorEnableNoticeBox.js' +import TwoFactorEnableNotice from './TwoFactorEnableNotice.js' +import TwoFactorIntroduction from './TwoFactorIntroduction.js' import TwoFactorStatus from './TwoFactorStatus.js' import TwoFactorToggler from './TwoFactorToggler.js' import useTwoFaToggleMutation from './useTwoFaToggleMutation.js' @@ -23,9 +24,10 @@ const TwoFactor = () => { return (
- {i18n.t('2 Factor Authentication')} + {i18n.t('Two-factor Authentication')}
+ {lastActionWasTwoFaDisableSuccess && ( @@ -42,7 +44,7 @@ const TwoFactor = () => { loading={loading} /> {!isTwoFaEnabled && !lastActionWasTwoFaDisableSuccess && ( - + )}
diff --git a/src/account/twoFactor/TwoFactor.module.css b/src/account/twoFactor/TwoFactor.module.css index 2951a2f0..745d42e3 100644 --- a/src/account/twoFactor/TwoFactor.module.css +++ b/src/account/twoFactor/TwoFactor.module.css @@ -7,6 +7,7 @@ display: block; width: auto; margin-right: 16px; - padding: 16px; + padding: var(--spacers-dp24); max-width: 960px; -} \ No newline at end of file + height: auto; +} diff --git a/src/account/twoFactor/TwoFactorDisableInstructions.js b/src/account/twoFactor/TwoFactorDisableInstructions.js index 7a08c150..4c953247 100644 --- a/src/account/twoFactor/TwoFactorDisableInstructions.js +++ b/src/account/twoFactor/TwoFactorDisableInstructions.js @@ -1,12 +1,21 @@ import i18n from '@dhis2/d2-i18n' import React from 'react' +import styles from './TwoFactorDisableInstructions.module.css' const TwoFactorDisableInstructions = () => ( -

- {i18n.t( - 'To disable 2 Factor Authentication for your account, first enter the confirmation code from the Authenticator App and then click "Disable".' - )} -

+ <> +

+ {i18n.t('Turn off two-factor authentication')} +

+
    +
  1. {i18n.t('Open your authenticator app.')}
    2. +
  2. + {i18n.t( + 'Now, enter the authentication code below and click the "Turn off" button.' + )} +
    3. +
+ ) export default TwoFactorDisableInstructions diff --git a/src/account/twoFactor/TwoFactorDisableInstructions.module.css b/src/account/twoFactor/TwoFactorDisableInstructions.module.css new file mode 100644 index 00000000..472bd5e3 --- /dev/null +++ b/src/account/twoFactor/TwoFactorDisableInstructions.module.css @@ -0,0 +1,15 @@ +.instructionsHeader { + font-size: 18px; + font-weight: 500; + color: var(--colors-grey900); +} + +.orderedList { + padding-inline-start: 24px; + font-size: 14px; + line-height: 19px; +} + +.orderedList li + li { + margin-top: var(--spacers-dp8); +} diff --git a/src/account/twoFactor/TwoFactorDisableNoticeBox.js b/src/account/twoFactor/TwoFactorDisableNoticeBox.js index db37c0e3..b4776508 100644 --- a/src/account/twoFactor/TwoFactorDisableNoticeBox.js +++ b/src/account/twoFactor/TwoFactorDisableNoticeBox.js @@ -6,11 +6,11 @@ import styles from './TwoFactorDisableNoticeBox.module.css' const TwoFactorDisableNoticeBox = () => ( {i18n.t( - "After disabling 2-factor authentication on your account we recommend to also remove the account from the Authenticator App on your phone/tablet, so you don't run into problems if you want to re-enable it in the future." + 'Two-factor authentication is now turned off. It is recommended to remove the account from your authenticator app now to prevent any future issues re-enabling two-factor authentication.' )} ) diff --git a/src/account/twoFactor/TwoFactorEnableInstructions.js b/src/account/twoFactor/TwoFactorEnableInstructions.js index 414994eb..b7810171 100644 --- a/src/account/twoFactor/TwoFactorEnableInstructions.js +++ b/src/account/twoFactor/TwoFactorEnableInstructions.js @@ -35,40 +35,35 @@ const QRCode = () => { const TwoFactorEnableInstructions = () => ( <> -

- {i18n.t( - 'To enable 2 Factor Authentication for your account, follow the following steps:' - )} +

+ {i18n.t('Turn on two-factor authentication')}

    -
  1. - - {i18n.t( - 'Ensure you have the Authenticator App installed on you phone or tablet. It is available for download here:' - )} - -
      -
    • - -
      • -
    • - -
      • -
    -
  2. {i18n.t( - 'In the Authenticator App, click the ➕ sign to add a new entry.' + 'Make sure you have an authenticator app installed on your device. We recommend Google Authenticator' )} + {' ('} + + + + {', '} + + + + {').'}
    3. -
  3. {i18n.t('Choose "Scan a barcode"')}
  4. - {i18n.t('Scan the barcode below')} + + {i18n.t( + 'Use the authenticator app to scan the QR code below:' + )} +
  5. {i18n.t( - 'Now enter the code from the Authenticator app below and click "enable"' + 'Now, enter the code from your authenticator app below and click the "Turn on" button.' )}
diff --git a/src/account/twoFactor/TwoFactorEnableInstructions.module.css b/src/account/twoFactor/TwoFactorEnableInstructions.module.css index 8f095ae0..3d1385c2 100644 --- a/src/account/twoFactor/TwoFactorEnableInstructions.module.css +++ b/src/account/twoFactor/TwoFactorEnableInstructions.module.css @@ -4,13 +4,22 @@ display: block; } +.instructionsHeader { + font-size: 18px; + font-weight: 500; + color: var(--colors-grey900); +} + .orderedList { padding-inline-start: 24px; - line-height: 24px; + font-size: 14px; + line-height: 19px; } -.unOrderedList { - padding-inline-start: 16px; - line-height: 20px; +.orderedList li + li { + margin-top: var(--spacers-dp8); } +.downloadLink a { + color: var(--colors-grey900); +} diff --git a/src/account/twoFactor/TwoFactorEnableNotice.js b/src/account/twoFactor/TwoFactorEnableNotice.js new file mode 100644 index 00000000..c167cd67 --- /dev/null +++ b/src/account/twoFactor/TwoFactorEnableNotice.js @@ -0,0 +1,20 @@ +import i18n from '@dhis2/d2-i18n' +import { IconQuestion16 } from '@dhis2/ui' +import React from 'react' +import styles from './TwoFactorEnableNotice.module.css' + +const TwoFactorEnableNotice = () => ( +
+

+ + {i18n.t('Already set up two-factor authentication before?')} +

+

+ {i18n.t( + 'If you have set up two-factor authentication for this account before, you need to remove that entry from your authenticator app before setting it up again.' + )} +

+
+) + +export default TwoFactorEnableNotice diff --git a/src/account/twoFactor/TwoFactorEnableNotice.module.css b/src/account/twoFactor/TwoFactorEnableNotice.module.css new file mode 100644 index 00000000..1031e165 --- /dev/null +++ b/src/account/twoFactor/TwoFactorEnableNotice.module.css @@ -0,0 +1,21 @@ +.enableNoticeContainer { + max-width: 640px; + margin-top: var(--spacers-dp32); +} + +.enableNoticeTitle { + display: flex; + align-items: center; + gap: var(--spacers-dp8); + font-size: 14px; + line-height: 19px; + color: var(--colors-grey900); + margin: 0 0 var(--spacers-dp8); +} + +.enableNoticeBody { + color: var(--colors-grey800); + font-size: 14px; + line-height: 19px; + margin: 0 0 0 var(--spacers-dp24); +} diff --git a/src/account/twoFactor/TwoFactorEnableNoticeBox.js b/src/account/twoFactor/TwoFactorEnableNoticeBox.js deleted file mode 100644 index 58c14021..00000000 --- a/src/account/twoFactor/TwoFactorEnableNoticeBox.js +++ /dev/null @@ -1,16 +0,0 @@ -import i18n from '@dhis2/d2-i18n' -import { NoticeBox } from '@dhis2/ui' -import React from 'react' - -const TwoFactorEnableNoticeBox = () => ( - - {i18n.t( - 'When enabling 2 Factor Authentication, you have to add a new entry to the Authenticator App. If you previously had configured the Authenticator App for this user account you need to remove this entry and create a new one, otherwise two Factor Authentication can not be enabled.' - )} - -) - -export default TwoFactorEnableNoticeBox diff --git a/src/account/twoFactor/TwoFactorIntroduction.js b/src/account/twoFactor/TwoFactorIntroduction.js new file mode 100644 index 00000000..70cc0bee --- /dev/null +++ b/src/account/twoFactor/TwoFactorIntroduction.js @@ -0,0 +1,13 @@ +import i18n from '@dhis2/d2-i18n' +import React from 'react' +import styles from './TwoFactorIntroduction.module.css' + +const TwoFactorIntroduction = () => ( +

+ {i18n.t( + 'Two-factor authentication protects your account with an extra layer of security. With two-factor authentication turned on, you will need to enter an authentication code from your device every time you log in.' + )} +

+) + +export default TwoFactorIntroduction diff --git a/src/account/twoFactor/TwoFactorIntroduction.module.css b/src/account/twoFactor/TwoFactorIntroduction.module.css new file mode 100644 index 00000000..f41ff47b --- /dev/null +++ b/src/account/twoFactor/TwoFactorIntroduction.module.css @@ -0,0 +1,7 @@ +.introductionText { + font-size: 14px; + line-height: 19px; + max-width: 720px; + margin: 0 0 var(--spacers-dp24); + color: var(--colors-grey700); +} diff --git a/src/account/twoFactor/TwoFactorStatus.js b/src/account/twoFactor/TwoFactorStatus.js index 5b5d09ae..041fc25f 100644 --- a/src/account/twoFactor/TwoFactorStatus.js +++ b/src/account/twoFactor/TwoFactorStatus.js @@ -1,15 +1,18 @@ import i18n from '@dhis2/d2-i18n' -import { Tag } from '@dhis2/ui' +import { NoticeBox } from '@dhis2/ui' import PropTypes from 'prop-types' import React from 'react' import styles from './TwoFactorStatus.module.css' const TwoFactorStatus = ({ isTwoFaEnabled }) => (
- {i18n.t('2 Factor Authentication is currently')}{' '} - - {isTwoFaEnabled ? i18n.t('enabled') : i18n.t('disabled')} - + {isTwoFaEnabled ? ( + + {i18n.t('Two-factor authentication is on.')} + + ) : ( + {i18n.t('Two-factor authentication is off.')} + )}
) diff --git a/src/account/twoFactor/TwoFactorStatus.module.css b/src/account/twoFactor/TwoFactorStatus.module.css index 4a57d6ad..904d47e8 100644 --- a/src/account/twoFactor/TwoFactorStatus.module.css +++ b/src/account/twoFactor/TwoFactorStatus.module.css @@ -1,7 +1,4 @@ .statusHeader { - font-weight: 500; - font-size: 1.2rem; - margin: 0; - display: inline-flex; - gap: 8px; -} \ No newline at end of file + width: 100%; + margin: var(--spacers-dp16) 0 var(--spacers-dp32); +} diff --git a/src/account/twoFactor/TwoFactorToggler.js b/src/account/twoFactor/TwoFactorToggler.js index 56d621f7..2eca6260 100644 --- a/src/account/twoFactor/TwoFactorToggler.js +++ b/src/account/twoFactor/TwoFactorToggler.js @@ -10,10 +10,12 @@ const getValidationText = (hasErrorState, error) => { if (error) { return ( error?.message ?? - i18n.t('Could not update 2 Factor authentication status') + i18n.t('Could not update two-factor authentication') ) } else if (hasErrorState) { - return i18n.t('Please enter a 6 digit code') + return i18n.t( + 'This code does not look right. Enter the six digit code from your authentication app.' + ) } else { return undefined } @@ -31,8 +33,7 @@ const TwoFactorToggler = ({ error, isTwoFaEnabled, loading, toggleTwoFa }) => { return (
setTwoFaConfirmationCode(value)} onBlur={() => setTouched(true)} @@ -50,11 +51,12 @@ const TwoFactorToggler = ({ error, isTwoFaEnabled, loading, toggleTwoFa }) => { setTwoFaConfirmationCode('') }} primary - large className={styles.button} type="submit" > - {isTwoFaEnabled ? i18n.t('Disable') : i18n.t('Enable')} + {isTwoFaEnabled + ? i18n.t('Turn off two-factor authentication') + : i18n.t('Turn on two-factor authentication')} ) diff --git a/src/account/twoFactor/TwoFactorToggler.module.css b/src/account/twoFactor/TwoFactorToggler.module.css index 53d4dee0..1509c726 100644 --- a/src/account/twoFactor/TwoFactorToggler.module.css +++ b/src/account/twoFactor/TwoFactorToggler.module.css @@ -1,11 +1,8 @@ .container { display: flex; + flex-direction: column; align-items: flex-start; - gap: 16px; - /* prevent content shift when showing error */ - min-height: 80px; - margin-bottom: 16px; + gap: var(--spacers-dp8); + margin-bottom: var(--spacers-dp24); + padding-left: var(--spacers-dp24); } -.button { - margin-top: 18px; -} \ No newline at end of file From eed47fb31490434948070333e4b3269258825468 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Mon, 27 Feb 2023 16:00:44 +0100 Subject: [PATCH 2/2] chore: fix i18n --- i18n/en.pot | 42 ++++++++----------- src/account/twoFactor/TwoFactor.js | 2 +- .../twoFactor/TwoFactorDisableInstructions.js | 10 ++++- .../twoFactor/TwoFactorDisableNoticeBox.js | 5 ++- .../twoFactor/TwoFactorEnableInstructions.js | 4 +- .../twoFactor/TwoFactorEnableNotice.js | 7 +++- .../twoFactor/TwoFactorIntroduction.js | 3 +- src/account/twoFactor/TwoFactorStatus.js | 10 ++++- src/account/twoFactor/TwoFactorToggler.js | 12 ++++-- 9 files changed, 57 insertions(+), 38 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index 2a3f7a24..15c29834 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,8 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2023-02-24T10:07:13.705Z\n" -"PO-Revision-Date: 2023-02-24T10:07:13.705Z\n" +"POT-Creation-Date: 2023-02-27T14:55:39.217Z\n" +"PO-Revision-Date: 2023-02-27T14:55:39.217Z\n" msgid "Never" msgstr "Never" @@ -193,18 +193,26 @@ msgstr "Failed to update password" msgid "Two-factor Authentication" msgstr "Two-factor Authentication" -msgid "" -"To disable 2 Factor Authentication for your account, first enter the " -"confirmation code from the Authenticator App and then click \"Disable\"." -msgstr "" -"To disable 2 Factor Authentication for your account, first enter the " -"confirmation code from the Authenticator App and then click \"Disable\"." +msgid "Turn off two-factor authentication" +msgstr "Turn off two-factor authentication" + +msgid "Open your authenticator app." +msgstr "Open your authenticator app." + +msgid "Now, enter the authentication code below and click the \"Turn off\" button." +msgstr "Now, enter the authentication code below and click the \"Turn off\" button." msgid "Remove two-factor account" msgstr "Remove two-factor account" -msgid ""Two-factor authentication is now turned off. It is recommended to remove the account from your authenticator app now to prevent any future issues re-enabling two-factor authentication." -msgstr "Two-factor authentication is now turned off. It is recommended to remove the account from your authenticator app now to prevent any future issues re-enabling two-factor authentication." +msgid "" +"Two-factor authentication is now turned off. It is recommended to remove " +"the account from your authenticator app now to prevent any future issues " +"re-enabling two-factor authentication." +msgstr "" +"Two-factor authentication is now turned off. It is recommended to remove " +"the account from your authenticator app now to prevent any future issues " +"re-enabling two-factor authentication." msgid "Play store" msgstr "Play store" @@ -229,13 +237,6 @@ msgstr "" "Now, enter the code from your authenticator app below and click the \"Turn " "on\" button." -msgid "" -"Now, enter the authentication code below and click the \"Turn " -"off\" button." -msgstr "" -"Now, enter the authentication code below and click the \"Turn " -"off\" button." - msgid "Already set up two-factor authentication before?" msgstr "Already set up two-factor authentication before?" @@ -263,10 +264,6 @@ msgstr "Two-factor authentication is on." msgid "Two-factor authentication is off." msgstr "Two-factor authentication is off." -msgid "Open your authenticator app." -msgstr "Open your authenticator app." - - msgid "Could not update two-factor authentication" msgstr "Could not update two-factor authentication" @@ -280,9 +277,6 @@ msgstr "" msgid "Six digit authentication code" msgstr "Six digit authentication code" -msgid "Turn off two-factor authentication" -msgstr "Turn off two-factor authentication" - msgid "Could not enable 2 Factor Authentication" msgstr "Could not enable 2 Factor Authentication" diff --git a/src/account/twoFactor/TwoFactor.js b/src/account/twoFactor/TwoFactor.js index dfec9e54..caf93d80 100644 --- a/src/account/twoFactor/TwoFactor.js +++ b/src/account/twoFactor/TwoFactor.js @@ -24,7 +24,7 @@ const TwoFactor = () => { return (
- {i18n.t('Two-factor Authentication')} + {i18n.t('Two-factor Authentication', { keySeparator: '<|>' })}
diff --git a/src/account/twoFactor/TwoFactorDisableInstructions.js b/src/account/twoFactor/TwoFactorDisableInstructions.js index 4c953247..b1383253 100644 --- a/src/account/twoFactor/TwoFactorDisableInstructions.js +++ b/src/account/twoFactor/TwoFactorDisableInstructions.js @@ -5,10 +5,16 @@ import styles from './TwoFactorDisableInstructions.module.css' const TwoFactorDisableInstructions = () => ( <>

- {i18n.t('Turn off two-factor authentication')} + {i18n.t('Turn off two-factor authentication', { + keySeparator: '<|>', + })}

    -
  1. {i18n.t('Open your authenticator app.')}
    2. +
  2. + {i18n.t('Open your authenticator app.', { + keySeparator: '<|>', + })} +
  3. {i18n.t( 'Now, enter the authentication code below and click the "Turn off" button.' diff --git a/src/account/twoFactor/TwoFactorDisableNoticeBox.js b/src/account/twoFactor/TwoFactorDisableNoticeBox.js index b4776508..03ac965b 100644 --- a/src/account/twoFactor/TwoFactorDisableNoticeBox.js +++ b/src/account/twoFactor/TwoFactorDisableNoticeBox.js @@ -7,10 +7,11 @@ const TwoFactorDisableNoticeBox = () => ( ' })} > {i18n.t( - 'Two-factor authentication is now turned off. It is recommended to remove the account from your authenticator app now to prevent any future issues re-enabling two-factor authentication.' + 'Two-factor authentication is now turned off. It is recommended to remove the account from your authenticator app now to prevent any future issues re-enabling two-factor authentication.', + { keySeparator: '<|>' } )} ) diff --git a/src/account/twoFactor/TwoFactorEnableInstructions.js b/src/account/twoFactor/TwoFactorEnableInstructions.js index b7810171..62eea1a7 100644 --- a/src/account/twoFactor/TwoFactorEnableInstructions.js +++ b/src/account/twoFactor/TwoFactorEnableInstructions.js @@ -36,7 +36,9 @@ const QRCode = () => { const TwoFactorEnableInstructions = () => ( <>

    - {i18n.t('Turn on two-factor authentication')} + {i18n.t('Turn on two-factor authentication', { + keySeparator: '<|>', + })}

    1. diff --git a/src/account/twoFactor/TwoFactorEnableNotice.js b/src/account/twoFactor/TwoFactorEnableNotice.js index c167cd67..1f310abc 100644 --- a/src/account/twoFactor/TwoFactorEnableNotice.js +++ b/src/account/twoFactor/TwoFactorEnableNotice.js @@ -7,11 +7,14 @@ const TwoFactorEnableNotice = () => (

      - {i18n.t('Already set up two-factor authentication before?')} + {i18n.t('Already set up two-factor authentication before?', { + keySeparator: '<|>', + })}

      {i18n.t( - 'If you have set up two-factor authentication for this account before, you need to remove that entry from your authenticator app before setting it up again.' + 'If you have set up two-factor authentication for this account before, you need to remove that entry from your authenticator app before setting it up again.', + { keySeparator: '<|>' } )}

      diff --git a/src/account/twoFactor/TwoFactorIntroduction.js b/src/account/twoFactor/TwoFactorIntroduction.js index 70cc0bee..3efd2242 100644 --- a/src/account/twoFactor/TwoFactorIntroduction.js +++ b/src/account/twoFactor/TwoFactorIntroduction.js @@ -5,7 +5,8 @@ import styles from './TwoFactorIntroduction.module.css' const TwoFactorIntroduction = () => (

      {i18n.t( - 'Two-factor authentication protects your account with an extra layer of security. With two-factor authentication turned on, you will need to enter an authentication code from your device every time you log in.' + 'Two-factor authentication protects your account with an extra layer of security. With two-factor authentication turned on, you will need to enter an authentication code from your device every time you log in.', + { keySeparator: '<|>' } )}

      ) diff --git a/src/account/twoFactor/TwoFactorStatus.js b/src/account/twoFactor/TwoFactorStatus.js index 041fc25f..48262fe1 100644 --- a/src/account/twoFactor/TwoFactorStatus.js +++ b/src/account/twoFactor/TwoFactorStatus.js @@ -8,10 +8,16 @@ const TwoFactorStatus = ({ isTwoFaEnabled }) => (
      {isTwoFaEnabled ? ( - {i18n.t('Two-factor authentication is on.')} + {i18n.t('Two-factor authentication is on.', { + keySeparator: '<|>', + })} ) : ( - {i18n.t('Two-factor authentication is off.')} + + {i18n.t('Two-factor authentication is off.', { + keySeparator: '<|>', + })} + )}
      ) diff --git a/src/account/twoFactor/TwoFactorToggler.js b/src/account/twoFactor/TwoFactorToggler.js index 2eca6260..4a759e9c 100644 --- a/src/account/twoFactor/TwoFactorToggler.js +++ b/src/account/twoFactor/TwoFactorToggler.js @@ -10,7 +10,9 @@ const getValidationText = (hasErrorState, error) => { if (error) { return ( error?.message ?? - i18n.t('Could not update two-factor authentication') + i18n.t('Could not update two-factor authentication', { + keySeparator: '<|>', + }) ) } else if (hasErrorState) { return i18n.t( @@ -55,8 +57,12 @@ const TwoFactorToggler = ({ error, isTwoFaEnabled, loading, toggleTwoFa }) => { type="submit" > {isTwoFaEnabled - ? i18n.t('Turn off two-factor authentication') - : i18n.t('Turn on two-factor authentication')} + ? i18n.t('Turn off two-factor authentication', { + keySeparator: '<|>', + }) + : i18n.t('Turn on two-factor authentication', { + keySeparator: '<|>', + })} )