refactor: Improve i18n for decryption

public/locales/en-US/common.json

@@ -19,7 +19,10 @@
     },
     "password": {
       "label": "Password",
-      "placeholder": "********"
+      "placeholder": "********",
+      "errors": {
+        "invalid": "Password is invalid."
+      }
     },
     "passwordConfirmation": {
       "label": "Confirm Password",
@@ -70,5 +73,17 @@
   "noSearchResults": {
     "title": "Nothing found",
     "description": "We couldn't find anything for your search query. Try again with a different query."
+  },
+  "navigation": {
+    "overview": "Overview",
+    "aliases": "Aliases",
+    "reports": "Reports",
+    "settings": "Settings",
+    "admin": "Admin"
+  },
+  "routes": {
+    "signup": "Sign up",
+    "login": "Log in",
+    "logout": "Log out"
   }
 }

public/locales/en-US/decryption.json

@@ -0,0 +1,21 @@
+{
+  "actions": {
+    "enterDecryptionPassword": {
+      "title": "Decrypt Reports",
+      "description": "Please enter your password so that your reports can de decrypted.",
+      "cancelActionLabel": "Decrypt later"
+    },
+    "passwordMissing": {
+      "unavailable": {
+        "title": "Encryption required",
+        "description": "You need to set up encryption to use this feature.",
+        "continueActionLabel": "Set up encryption"
+      },
+      "passwordRequired": {
+        "title": "Password required",
+        "description": "Your decryption password is required to view this section.",
+        "continueActionLabel": "Enter password"
+      }
+    }
+  }
+}

public/locales/en-US/translation.json

@@ -21,61 +21,13 @@
         "appError": "We are sorry but there was an error. Please try again later."
     },
 
-    "routes": {
-        "OverviewRoute": {
-            "title": "Overview",
-            "description": "Not much to see here, yet."
-        }
-    },
-
     "components": {
-        "NavigationButton": {
-            "overview": "Overview",
-            "aliases": "Aliases",
-            "reports": "Reports",
-            "settings": "Settings",
-            "admin": "Admin"
-        },
-        "AuthenticateRoute": {
-            "signup": "Sign up",
-            "login": "Log in"
-        },
-        "AuthenticatedRoute": {
-            "logout": "Logout"
-        },
-        "EnterDecryptionPassword": {
-            "title": "Decrypt Reports",
-            "description": "Please enter your password so that your reports can de decrypted.",
-            "cancelAction": "Decrypt later",
-            "continueAction": "Continue",
-            "form": {
-                "password": {
-                    "label": "Password",
-                    "placeholder": "********",
-                    "errors": {
-                        "invalidPassword": "Password is invalid"
-                    }
-                }
-            }
-        },
         "ResendMailButton": {
             "label": "Resend Mail"
         },
         "OpenMailButton": {
             "label": "Open Mail"
         },
-        "DecryptionPasswordMissingAlert": {
-            "unavailable": {
-                "title": "Encryption required",
-                "description": "You need to set up encryption to use this feature.",
-                "continueAction": "Set up encryption"
-            },
-            "passwordRequired": {
-                "title": "Password required",
-                "description": "Your decryption password is required to view this section.",
-                "continueAction": "Enter password"
-            }
-        },
         "TimedButton": {
             "remainingTime_one": "({{count}})",
             "remainingTime_other": "({{count}})"
@@ -111,20 +63,4 @@
             }
         }
     },
-
-    "relations": {
-        "alias": {
-            "mutations": {
-                "success": {
-                    "aliasCreation": "Created Alias successfully!",
-                    "aliasUpdated": "Updated Alias successfully!",
-                    "notesUpdated": "Updated & encrypted notes successfully!",
-                    "aliasChangedToEnabled": "Alias has been enabled",
-                    "aliasChangedToDisabled": "Alias has been disabled",
-                    "addressCopiedToClipboard": "Address has been copied to your clipboard!",
-                    "aliasDeleted": "Alias has been deleted!"
-                }
-            }
-        },
-    }
 }

src/components/widgets/DecryptionPasswordMissingAlert.tsx

@@ -15,7 +15,7 @@ export interface WithEncryptionRequiredProps {
 export default function DecryptionPasswordMissingAlert({
 	children = <></>,
 }: WithEncryptionRequiredProps): JSX.Element {
-	const {t} = useTranslation()
+	const {t} = useTranslation("decryption")
 	const {handleAnchorClick} = useContext(LockNavigationContext)
 	const {encryptionStatus} = useContext(AuthContext)
 	const theme = useTheme()
@@ -33,12 +33,12 @@ export default function DecryptionPasswordMissingAlert({
 				>
 					<Grid item>
 						<Typography variant="h6" component="h2">
-							{t("components.DecryptionPasswordMissingAlert.unavailable.title")}
+							{t("actions.passwordMissing.unavailable.title")}
 						</Typography>
 					</Grid>
 					<Grid item>
 						<Typography>
-							{t("components.DecryptionPasswordMissingAlert.unavailable.description")}
+							{t("actions.passwordMissing.unavailable.description")}
 						</Typography>
 					</Grid>
 					<Grid item>
@@ -49,9 +49,7 @@ export default function DecryptionPasswordMissingAlert({
 							startIcon={<MdLock />}
 							onClick={handleAnchorClick}
 						>
-							{t(
+							{t("actions.passwordMissing.unavailable.continueActionLabel")}
-								"components.DecryptionPasswordMissingAlert.unavailable.continueAction",
-							)}
 						</Button>
 					</Grid>
 				</Grid>
@@ -70,14 +68,12 @@ export default function DecryptionPasswordMissingAlert({
 				>
 					<Grid item>
 						<Typography variant="h6" component="h2">
-							{t("components.DecryptionPasswordMissingAlert.passwordRequired.title")}
+							{t("actions.passwordMissing.passwordRequired.title")}
 						</Typography>
 					</Grid>
 					<Grid item>
 						<Typography>
-							{t(
+							{t("actions.passwordMissing.passwordRequired.description")}
-								"components.DecryptionPasswordMissingAlert.passwordRequired.description",
-							)}
 						</Typography>
 					</Grid>
 					<Grid item>
@@ -87,9 +83,7 @@ export default function DecryptionPasswordMissingAlert({
 							startIcon={<MdLock />}
 							onClick={handleAnchorClick}
 						>
-							{t(
+							{t("actions.passwordMissing.passwordRequired.continueActionLabel")}
-								"components.DecryptionPasswordMissingAlert.passwordRequired.continueAction",
-							)}
 						</Button>
 					</Grid>
 				</Grid>

src/route-widgets/AuthenticateRoute/NavigationButton.tsx

@@ -30,11 +30,11 @@ const SECTION_ICON_MAP: Record<NavigationSection, ReactElement> = {
 }
 
 const SECTION_TEXT_MAP: Record<NavigationSection, string> = {
-	[NavigationSection.Overview]: "components.NavigationButton.overview",
+	[NavigationSection.Overview]: "navigation.overview",
-	[NavigationSection.Aliases]: "components.NavigationButton.aliases",
+	[NavigationSection.Aliases]: "navigation.aliases",
-	[NavigationSection.Reports]: "components.NavigationButton.reports",
+	[NavigationSection.Reports]: "navigation.reports",
-	[NavigationSection.Settings]: "components.NavigationButton.settings",
+	[NavigationSection.Settings]: "navigation.settings",
-	[NavigationSection.Admin]: "components.NavigationButton.admin",
+	[NavigationSection.Admin]: "navigation.admin",
 }
 
 const PATH_SECTION_MAP: Record<string, NavigationSection> = {
@@ -46,7 +46,7 @@ const PATH_SECTION_MAP: Record<string, NavigationSection> = {
 }
 
 export default function NavigationButton({section}: NavigationButtonProps): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation("common")
 	const {handleAnchorClick} = useContext(LockNavigationContext)
 	const location = useLocation()
 

src/routes/AuthenticateRoute.tsx

@@ -8,7 +8,7 @@ import {Box, Button, Grid} from "@mui/material"
 import {LanguageButton} from "~/components"
 
 export default function AuthenticateRoute(): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation("common")
 
 	return (
 		<Box
@@ -35,7 +35,7 @@ export default function AuthenticateRoute(): ReactElement {
 						size="small"
 						startIcon={<MdAdd />}
 					>
-						{t("components.AuthenticateRoute.signup")}
+						{t("routes.signup")}
 					</Button>
 				</Grid>
 				<Grid item>
@@ -46,7 +46,7 @@ export default function AuthenticateRoute(): ReactElement {
 						size="small"
 						startIcon={<MdLogin />}
 					>
-						{t("components.AuthenticateRoute.login")}
+						{t("routes.login")}
 					</Button>
 				</Grid>
 				<Grid item>

src/routes/AuthenticatedRoute.tsx

@@ -12,7 +12,7 @@ import NavigationButton, {
 } from "~/route-widgets/AuthenticateRoute/NavigationButton"
 
 export default function AuthenticatedRoute(): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation("common")
 	const theme = useTheme()
 	const user = useUser()
 
@@ -90,7 +90,7 @@ export default function AuthenticatedRoute(): ReactElement {
 												to="/auth/logout"
 												startIcon={<MdLogout />}
 											>
-												{t("components.AuthenticatedRoute.logout")}
+												{t("routes.logout")}
 											</Button>
 										</Grid>
 										<Grid item>

src/routes/EnterDecryptionPassword.tsx

@@ -17,7 +17,7 @@ interface Form {
 }
 
 export default function EnterDecryptionPassword(): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation(["decryption", "common"])
 	const navigate = useNavigate()
 	const navigateToNext = useNavigateToNext()
 	const user = useUser()
@@ -29,7 +29,7 @@ export default function EnterDecryptionPassword(): ReactElement {
 		password: yup
 			.string()
 			.required()
-			.label(t("components.EnterDecryptionPassword.form.password.label")),
+			.label(t("fields.password.label", {ns: "common"})),
 	})
 
 	const formik = useFormik<Form>({
@@ -46,9 +46,7 @@ export default function EnterDecryptionPassword(): ReactElement {
 			} catch (error) {
 				// Password is incorrect
 				setErrors({
-					password: t(
+					password: t("fields.password.errors,invalid", {ns: "common"}),
-						"components.EnterDecryptionPassword.form.password.errors.invalidPassword",
-					),
 				})
 			}
 		},
@@ -67,10 +65,9 @@ export default function EnterDecryptionPassword(): ReactElement {
 	return (
 		<form onSubmit={formik.handleSubmit}>
 			<SimpleForm
-				title={t("components.EnterDecryptionPassword.title")}
+				title={t("actions.enterDecryptionPassword.title")}
-				description={t("components.EnterDecryptionPassword.description")}
+				description={t("actions.enterDecryptionPassword.description")}
-				cancelActionLabel={t("components.EnterDecryptionPassword.cancelAction")}
+				cancelActionLabel={t("actions.enterDecryptionPassword.cancelActionLabel")}
-				continueActionLabel={t("components.EnterDecryptionPassword.continueAction")}
 				isSubmitting={formik.isSubmitting}
 				onCancel={navigateToNext}
 			>
@@ -81,10 +78,8 @@ export default function EnterDecryptionPassword(): ReactElement {
 						autoFocus
 						name="password"
 						id="password"
-						label={t("components.EnterDecryptionPassword.form.password.label")}
+						label={t("fields.password.label", {ns: "common"})}
-						placeholder={t(
+						placeholder={t("fields.password.placeholder", {ns: "common"})}
-							"components.EnterDecryptionPassword.form.password.placeholder",
-						)}
 						value={formik.values.password}
 						onChange={formik.handleChange}
 						disabled={formik.isSubmitting}