From 47053cdb50701e80735e848fc464bb1ccdee72c8 Mon Sep 17 00:00:00 2001 From: Myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sun, 5 Mar 2023 10:04:39 +0100 Subject: [PATCH] refactor: Improve i18n for settings 2fa --- public/locales/en-US/common.json | 5 ++- public/locales/en-US/settings-2fa.json | 33 +++++++++++++++++++ public/locales/en-US/translation.json | 4 --- .../Settings2FARoute/Setup2FA.tsx | 8 ++--- .../Settings2FARoute/VerifyOTPForm.tsx | 25 +++++++------- src/routes/Settings2FARoute.tsx | 8 ++--- 6 files changed, 56 insertions(+), 27 deletions(-) create mode 100644 public/locales/en-US/settings-2fa.json diff --git a/public/locales/en-US/common.json b/public/locales/en-US/common.json index c80c4b9..2aa8ffc 100644 --- a/public/locales/en-US/common.json +++ b/public/locales/en-US/common.json @@ -9,7 +9,10 @@ }, "2faCode": { "label": "Code", - "placeholder": "123456" + "placeholder": "123456", + "errors": { + "shouldOnlyBeDigits": "The code should only contain digits." + } }, "recoveryCode": { "label": "Recovery Code" diff --git a/public/locales/en-US/settings-2fa.json b/public/locales/en-US/settings-2fa.json new file mode 100644 index 0000000..1c2333e --- /dev/null +++ b/public/locales/en-US/settings-2fa.json @@ -0,0 +1,33 @@ +{ + "title": "Two-Factor-Authentication", + "alreadyEnabled": "You have successfully enabled 2FA!", + "setup": { + "description": "Enable 2FA to add an extra layer of security to your account. Each time you log in, you will need to enter a code generated from your authenticator app. This makes it harder for an attacker to hack into your account as they would need to have access to your phone.", + "setupLabel": "Enable 2FA", + "continueActionLabel": "Enable 2FA", + "codeExpired": "The verification time for your current Two-Factor-Authentication code has expired. A new code has been generated.", + "recoveryCodes": { + "title": "Note down your recovery codes", + "description": "These codes are used to recover your account if you lose access to your authenticator app. Note them down and store them in a safe place. You will not be able to view them again. Do not store them in your password manager. IF YOU LOSE YOUR RECOVERY CODES, YOU WILL LOSE ACCESS TO YOUR ACCOUNT. WE WILL NOT BE ABLE TO HELP YOU.", + "continueActionLabel": "I have noted down my recovery codes" + }, + "success": "You have successfully enabled 2FA!" + }, + "delete": { + "label": "Disable 2FA", + "steps": { + "askType": { + "code": "I have my 2FA code", + "recoveryCode": "I have a recovery code" + }, + "askCode": { + "label": "Code" + }, + "askRecoveryCode": { + "label": "Recovery Code" + } + }, + "submit": "Disable 2FA", + "success": "You have successfully disabled 2FA!" + } +} diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json index d148f42..2b285be 100644 --- a/public/locales/en-US/translation.json +++ b/public/locales/en-US/translation.json @@ -90,10 +90,6 @@ } }, "SettingsRoute": { - "forms": { - "aliasPreferences": { - } - }, "2fa": { "title": "Two-Factor-Authentication", "alreadyEnabled": "You have successfully enabled 2FA!", diff --git a/src/route-widgets/Settings2FARoute/Setup2FA.tsx b/src/route-widgets/Settings2FARoute/Setup2FA.tsx index 327e772..2b9a311 100644 --- a/src/route-widgets/Settings2FARoute/Setup2FA.tsx +++ b/src/route-widgets/Settings2FARoute/Setup2FA.tsx @@ -18,7 +18,7 @@ export interface Setup2FAProps { } export default function Setup2FA({onSuccess}: Setup2FAProps): ReactElement { - const {t} = useTranslation() + const {t} = useTranslation("settings-2fa") const {showError} = useErrorSuccessSnacks() const { @@ -33,9 +33,7 @@ export default function Setup2FA({onSuccess}: Setup2FAProps): ReactElement { return ( - - {t("routes.SettingsRoute.2fa.setup.description")} - + {t("setup.description")} {secret ? ( @@ -55,7 +53,7 @@ export default function Setup2FA({onSuccess}: Setup2FAProps): ReactElement { variant="contained" startIcon={} > - {t("routes.SettingsRoute.2fa.setup.setupLabel")} + {t("setup.setupLabel")} )} diff --git a/src/route-widgets/Settings2FARoute/VerifyOTPForm.tsx b/src/route-widgets/Settings2FARoute/VerifyOTPForm.tsx index 87082e1..9b395dd 100644 --- a/src/route-widgets/Settings2FARoute/VerifyOTPForm.tsx +++ b/src/route-widgets/Settings2FARoute/VerifyOTPForm.tsx @@ -41,7 +41,7 @@ export default function Settings2FARoute({ onRecreateRequired, secret, }: VerifyOTPFormProps): ReactElement { - const {t} = useTranslation() + const {t} = useTranslation(["settings-2fa", "common"]) const {showSuccess, showError} = useErrorSuccessSnacks() const user = useUser() const theme = useTheme() @@ -52,16 +52,19 @@ export default function Settings2FARoute({ code: yup .string() .required() + .matches( + /^[0-9]+$/, + t("fields.2faCode.errors.shouldOnlyBeDigits", {ns: "common"}) as string, + ) .length(6) - .matches(/^[0-9]+$/, t("routes.SettingsRoute.2fa.setup.code.onlyDigits").toString()) - .label(t("routes.SettingsRoute.2fa.setup.code.label")), + .label(t("fields.2faCode.label", {ns: "common"})), }) const {mutateAsync} = useMutation(verify2FASetup, { onSuccess: () => setShowRecoveryCodes(true), onError: error => { if (error.response?.status === 409 || error.response?.status === 410) { - showError(t("routes.SettingsRoute.2fa.setup.expired").toString()) + showError(t("setup.codeExpired").toString()) onRecreateRequired() } else { showError(error) @@ -107,7 +110,7 @@ export default function Settings2FARoute({ error={!!formik.errors.code} helperText={formik.errors.code} name="code" - label={t("routes.SettingsRoute.2fa.setup.code.label")} + label={t("fields.2faCode.label", {ns: "common"})} disabled={formik.isSubmitting} InputProps={{ startAdornment: ( @@ -125,7 +128,7 @@ export default function Settings2FARoute({ variant="contained" loading={formik.isSubmitting} > - {t("routes.SettingsRoute.2fa.setup.submit")} + {t("setup.continueActionLabel")} @@ -133,7 +136,7 @@ export default function Settings2FARoute({ - {t("routes.SettingsRoute.2fa.setup.recoveryCodes.title")} + {t("setup.recoveryCodes.title")} {code}

))} - - {t("routes.SettingsRoute.2fa.setup.recoveryCodes.description")} - + {t("setup.recoveryCodes.description")} diff --git a/src/routes/Settings2FARoute.tsx b/src/routes/Settings2FARoute.tsx index 068dc3c..4c71a7b 100644 --- a/src/routes/Settings2FARoute.tsx +++ b/src/routes/Settings2FARoute.tsx @@ -11,20 +11,18 @@ import Setup2FA from "~/route-widgets/Settings2FARoute/Setup2FA" import getHas2FAEnabled from "~/apis/get-has-2fa-enabled" export default function Settings2FARoute(): ReactElement { - const {t} = useTranslation() + const {t} = useTranslation("settings-2fa") const queryKey = ["get_2fa_enabled"] const query = useQuery(queryKey, getHas2FAEnabled) return ( - + query={query}> {has2FAEnabled => has2FAEnabled ? ( - - {t("routes.SettingsRoute.2fa.alreadyEnabled")} - + {t("alreadyEnabled")}