refactor: Fix i18n

public/locales/en-US/alias-notes.json

@@ -24,7 +24,10 @@
       "label": "Websites",
       "emptyText": "You haven't used this alias on any site yet.",
       "placeholder": "https://example.com",
-      "helperText": "Add a website to this alias. Used to autofill."
+      "helperText": "Add a website to this alias. Used to autofill.",
+      "errors": {
+        "invalid": "This URL is invalid."
+      }
     }
   }
 }

src/route-widgets/AliasDetailRoute/AddWebsiteField.tsx

@@ -18,14 +18,14 @@ interface WebsiteForm {
 	url: string
 }
 
-const WEBSITE_SCHEMA = yup.object().shape({
-	url: yup.string().matches(URL_REGEX, "This URL is invalid."),
-})
-
 export default function AddWebsiteField({onAdd, isLoading}: AddWebsiteFieldProps): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation("alias-notes")
+
+	const schema = yup.object().shape({
+		url: yup.string().matches(URL_REGEX, t("form.websites.error.invalid") as string),
+	})
 	const websiteFormik = useFormik<WebsiteForm>({
-		validationSchema: WEBSITE_SCHEMA,
+		validationSchema: schema,
 		initialValues: {
 			url: "",
 		},
@@ -58,10 +58,8 @@ export default function AddWebsiteField({onAdd, isLoading}: AddWebsiteFieldProps
 					<TextField
 						name="url"
 						id="url"
-						label={t("routes.AliasDetailRoute.sections.notes.form.websites.label")}
+						label={t("form.websites.label")}
-						placeholder={t(
+						placeholder={t("form.websites.placeholder")}
-							"routes.AliasDetailRoute.sections.notes.form.websites.placeholder",
-						)}
 						variant="outlined"
 						value={websiteFormik.values.url}
 						onChange={websiteFormik.handleChange}
@@ -93,7 +91,7 @@ export default function AddWebsiteField({onAdd, isLoading}: AddWebsiteFieldProps
 					error={websiteFormik.touched.url && Boolean(websiteFormik.errors.url)}
 				>
 					{(websiteFormik.touched.url && websiteFormik.errors.url) ||
-						t("routes.AliasDetailRoute.sections.notes.form.websites.helperText")}
+						t("form.websites.helperText")}
 				</FormHelperText>
 			</Grid>
 		</Grid>

src/route-widgets/GlobalSettingsRoute/AliasPercentageAmount.tsx

@@ -14,14 +14,14 @@ export default function AliasesPercentageAmount({
 	length,
 	percentage,
 }: AliasPercentageAmountProps): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation("admin-global-settings")
 
 	const amount = Math.floor(Math.pow(characters.length, length) * percentage)
 
 	return (
 		<Alert severity="info" variant="standard">
 			<Typography variant="subtitle1" component="h5">
-				{t("routes.AdminRoute.settings.randomAliasesIncreaseExplanation", {
+				{t("randomAliasesIncreaseExplanation", {
 					originalLength: length,
 					increasedLength: length + 1,
 					amount,

src/route-widgets/GlobalSettingsRoute/RandomAliasGenerator.tsx

@@ -18,7 +18,7 @@ export default function RandomAliasGenerator({
 	length,
 }: RandomAliasGeneratorProps): ReactElement {
 	const serverSettings = useLoaderData() as ServerSettings
-	const {t} = useTranslation()
+	const {t} = useTranslation("admin-global-settings")
 	const theme = useTheme()
 
 	const generateLocal = useCallback(
@@ -39,7 +39,7 @@ export default function RandomAliasGenerator({
 	return (
 		<Alert severity="info" variant="standard">
 			<Typography variant="subtitle1" component="h5">
-				{t("routes.AdminRoute.settings.randomAliasesPreview.title")}
+				{t("randomAliasesPreview.title")}
 			</Typography>
 			<Grid container spacing={2} direction="row" alignItems="center">
 				<Grid item>
@@ -51,9 +51,7 @@ export default function RandomAliasGenerator({
 					</IconButton>
 				</Grid>
 			</Grid>
-			<FormHelperText>
+			<FormHelperText>{t("randomAliasesPreview.helperText")}</FormHelperText>
-				{t("routes.AdminRoute.settings.randomAliasesPreview.helperText")}
-			</FormHelperText>
 		</Alert>
 	)
 }

src/route-widgets/ReservedAliasDetailRoute/AdminUserPicker.tsx

@@ -17,7 +17,7 @@ export default function AdminUserPicker({
 	onPick,
 	alreadyPicked,
 }: AdminUserPickerProps): ReactElement {
-	const {t} = useTranslation()
+	const {t} = useTranslation("admin-reserved-aliases")
 	const meUser = useUser()
 	const {data: {users: availableUsers} = {}} = useQuery<GetAdminUsersResponse, AxiosError>(
 		["getAdminUsers"],
@@ -54,7 +54,7 @@ export default function AdminUserPicker({
 			{users.map(user => (
 				<MenuItem key={user.id} value={user.id}>
 					{user.id === meUser?.id
-						? t("routes.AdminRoute.forms.reservedAliases.fields.users.me", {
+						? t("fields.users.me", {
 								email: user.email.address,
 						  })
 						: user.email.address}

src/route-widgets/Settings2FARoute/Delete2FA.tsx

@@ -21,7 +21,7 @@ export default function Delete2FA({onSuccess}: Delete2FAProps): ReactElement {
 	const {showSuccess, showError} = useErrorSuccessSnacks()
 	const {mutate} = useMutation<SimpleDetailResponse, AxiosError, Delete2FAData>(delete2FA, {
 		onSuccess: () => {
-			showSuccess(t("routes.SettingsRoute.2fa.delete.success"))
+			showSuccess(t("delete.success"))
 			onSuccess()
 		},
 		onError: showError,