Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-19 07:55:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Improve i18n for aliases

Browse Source
This commit is contained in:
Myzel394 2023-03-05 09:03:37 +01:00
parent 648a222aef
commit c3c2453013
No known key found for this signature in database
GPG Key ID: 79CC92F37B3E1A2B
9 changed files with 80 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/locales/en-US/aliases.json Normal file
View File

@ -0,0 +1,31 @@
{
"title": "Aliases",
"isInCopyMode": "You are in copy mode. Click on an alias to copy it to your clipboard.",
"emptyState": {
"title": "Welcome to your Aliases!",
"description": "Create your first Alias to get started."
},
"pageActions": {
"search": {
"placeholder": "Search for names"
},
"searchFilter": {
"active": "Active",
"inactive": "Inactive"
},
"typeFilter": {
"custom": "Custom made",
"random": "Randomly generated"
}
},
"actions": {
"createRandomAlias": {
"title": "Create Random Alias"
},
"createCustomAlias": {
"title": "Create Custom Alias",
"description": "You can define your own custom alias. Note that a random suffix will be added at the end to avoid duplicates.",
"continueActionLabel": "Create Alias"
}
}
}

18
public/locales/en-US/common.json
View File

@ -24,11 +24,23 @@
"errors": {
"mismatch": "Passwords do not match."
}
},
"customAliasLocal": {
"label": "Address",
"placeholder": "awesome-fish"
},
"search": {
"label": "Search"
}
},
"messages": {
"errors": {
"unknown": "An unknown error occurred."
"unknown": "An unknown error occurred.",
"copyFailed": "Copying to clipboard did not work. Please copy the text manually."
},
"alias": {
"addressCopied": "Address has been copied to your clipboard!",
"created": "Alias has been created successfully!"
}
},
"general": {
@ -36,5 +48,9 @@
"yesLabel": "Yes",
"noLabel": "No",
"continueLabel": "Continue"
},
"noSearchResults": {
"title": "Nothing found",
"description": "We couldn't find anything for your search query. Try again with a different query."
}
}

54
public/locales/en-US/translation.json
View File

@ -26,52 +26,6 @@
"title": "Overview",
"description": "Not much to see here, yet."
},
"CompleteAccountRoute": {
"forms": {
"available": {
"title": "Encryption already enabled",
"description": "You already have encryption enabled. Changing passwords is currently not supported."
}
}
},
"AliasesRoute": {
"title": "Aliases",
"isInCopyMode": "You are in copy mode. Click on an alias to copy it to your clipboard.",
"emptyState": {
"title": "Welcome to your Aliases!",
"description": "Create your first Alias to get started."
},
"pageActions": {
"search": {
"label": "Search",
"placeholder": "Search for names"
},
"searchFilter": {
"active": "Active",
"inactive": "Inactive"
},
"typeFilter": {
"custom": "Custom made",
"random": "Randomly generated"
}
},
"actions": {
"createRandomAlias": {
"label": "Create Random Alias"
},
"createCustomAlias": {
"label": "Create Custom Alias",
"description": "You can define your own custom alias. Note that a random suffix will be added at the end to avoid duplicates.",
"continueAction": "Create Alias",
"form": {
"address": {
"label": "Address",
"placeholder": "awesome-fish"
}
}
}
}
},
"AliasDetailRoute": {
"title": "Alias Details",
"sections": {
@ -236,10 +190,6 @@
}
}
},
"LogoutRoute": {
"title": "Log out",
"description": "We are logging you out..."
},
"ReservedAliasesRoute": {
"title": "Reserved Aliases",
"pageActions": {
@ -448,10 +398,6 @@
"random": "This is a randomly generated alias",
"custom": "This is a custom-made alias"
},
"NoSearchResults": {
"title": "Nothing found",
"description": "We couldn't find anything for your search query. Try again with a different query."
},
"LockNavigationContextProvider": {
"title": "Are you sure you want to leave?",
"description": "You have unsaved changes. If you leave, your changes will be lost.",

8
src/components/widgets/NoSearchResults.tsx
View File

@ -5,20 +5,18 @@ import {FaQuestion} from "react-icons/fa"
import {Grid, Typography} from "@mui/material"
export default function NoSearchResults(): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation("common")
return (
<Grid container spacing={4} direction="column" alignItems="center">
<Grid item>
<Typography variant="h6">{t("components.NoSearchResults.title")}</Typography>
<Typography variant="h6">{t("noSearchResults.title")}</Typography>
</Grid>
<Grid item>
<FaQuestion size={40} />
</Grid>
<Grid item>
<Typography variant="body1">
{t("components.NoSearchResults.description")}
</Typography>
<Typography variant="body1">{t("noSearchResults.description")}</Typography>
</Grid>
</Grid>
)

1
src/init-i18n.ts
View File

@ -15,6 +15,7 @@ i18n.use(HttpApi)
.init({
debug: isDev,
fallbackLng: "en-US",
load: "all",
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json",
},

10
src/route-widgets/AliasesRoute/CreateAliasButton.tsx
View File

@ -26,7 +26,7 @@ import {AuthContext, EncryptionStatus} from "~/components"
import CustomAliasDialog from "~/route-widgets/AliasesRoute/CustomAliasDialog"
export function CreateAliasButton(): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation(["aliases", "common"])
const {showSuccess, showError} = useErrorSuccessSnacks()
const {_encryptUsingMasterPassword, encryptionStatus} = useContext(AuthContext)
@ -54,7 +54,7 @@ export function CreateAliasButton(): ReactElement {
{
onError: showError,
onSuccess: async alias => {
showSuccess(t("relations.alias.mutations.success.aliasCreation"))
showSuccess(t("messages.alias.created", {ns: "common"}))
await queryClient.invalidateQueries({
queryKey: ["get_aliases"],
@ -82,7 +82,7 @@ export function CreateAliasButton(): ReactElement {
})
}
>
{t("routes.AliasesRoute.actions.createRandomAlias.label")}
{t("actions.createRandomAlias.title")}
</Button>
<Button size="small" onClick={event => setAnchorElement(event.currentTarget)}>
<MdArrowDropDown />
@ -100,9 +100,7 @@ export function CreateAliasButton(): ReactElement {
<ListItemIcon>
<FaPen />
</ListItemIcon>
<ListItemText
primary={t("routes.AliasesRoute.actions.createCustomAlias.label")}
/>
<ListItemText primary={t("actions.createCustomAlias.title")} />
</MenuItem>
</MenuList>
</Menu>

22
src/route-widgets/AliasesRoute/CustomAliasDialog.tsx
View File

@ -45,7 +45,7 @@ export default function CustomAliasDialog({
onClose,
}: CustomAliasDialogProps): ReactElement {
const serverSettings = useLoaderData() as ServerSettings
const {t} = useTranslation()
const {t} = useTranslation(["aliases", "common"])
const schema = yup.object().shape({
local: yup
@ -54,7 +54,7 @@ export default function CustomAliasDialog({
.required()
.min(1)
.max(64 - serverSettings.customAliasSuffixLength - 1)
.label(t("routes.AliasesRoute.actions.createCustomAlias.form.address.label")),
.label(t("fields.customAliasLocal.label", {ns: "common"})),
})
const formik = useFormik<Form>({
@ -78,12 +78,10 @@ export default function CustomAliasDialog({
return (
<Dialog onClose={onClose} open={visible} keepMounted={false}>
<form onSubmit={formik.handleSubmit}>
<DialogTitle>
{t("routes.AliasesRoute.actions.createCustomAlias.label")}
</DialogTitle>
<DialogTitle>{t("actions.createCustomAlias.title")}</DialogTitle>
<DialogContent>
<DialogContentText>
{t("routes.AliasesRoute.actions.createCustomAlias.description")}
{t("actions.createCustomAlias.description")}
</DialogContentText>
<Box paddingY={4}>
<TextField
@ -92,12 +90,8 @@ export default function CustomAliasDialog({
autoFocus
name="local"
id="local"
label={t(
"routes.AliasesRoute.actions.createCustomAlias.form.address.label",
)}
placeholder={t(
"routes.AliasesRoute.actions.createCustomAlias.form.address.placeholder",
)}
label={t("fields.customAliasLocal.label", {ns: "common"})}
placeholder={t("fields.customAliasLocal.placeholder", {ns: "common"})}
value={formik.values.local}
onChange={formik.handleChange}
disabled={formik.isSubmitting}
@ -122,7 +116,7 @@ export default function CustomAliasDialog({
</DialogContent>
<DialogActions>
<Button onClick={onClose} startIcon={<TiCancel />}>
{t("general.cancelLabel")}
{t("general.cancelLabel", {ns: "common"})}
</Button>
<Button
onClick={() => {}}
@ -131,7 +125,7 @@ export default function CustomAliasDialog({
variant="contained"
type="submit"
>
{t("routes.AliasesRoute.actions.createCustomAlias.continueAction")}
{t("actions.createCustomAlias.continueActionLabel")}
</Button>
</DialogActions>
</form>

8
src/route-widgets/AliasesRoute/EmptyStateScreen.tsx
View File

@ -5,7 +5,7 @@ import {FaMask} from "react-icons/fa"
import {Container, Grid, Typography} from "@mui/material"
export default function EmptyStateScreen(): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation("aliases")
return (
<Container maxWidth="xs">
@ -20,16 +20,14 @@ export default function EmptyStateScreen(): ReactElement {
>
<Grid item>
<Typography variant="h6" component="h2">
{t("routes.AliasesRoute.emptyState.title")}
{t("emptyState.title")}
</Typography>
</Grid>
<Grid item>
<FaMask size={40} />
</Grid>
<Grid item>
<Typography variant="body1">
{t("routes.AliasesRoute.emptyState.description")}
</Typography>
<Typography variant="body1">{t("emptyState.description")}</Typography>
</Grid>
</Grid>
</Container>

37
src/routes/AliasesRoute.tsx
View File

@ -36,7 +36,7 @@ enum TypeFilter {
}
export default function AliasesRoute(): ReactElement {
const {t} = useTranslation()
const {t} = useTranslation(["aliases", "common"])
const [searchValue, setSearchValue] = useState<string>("")
const [queryValue, setQueryValue] = useState<string>("")
@ -131,7 +131,7 @@ export default function AliasesRoute(): ReactElement {
return (
<SimplePage
title={t("routes.AliasesRoute.title")}
title={t("title")}
pageOptionsActions={
showSearch && (
<Grid container spacing={2} direction="column">
@ -146,10 +146,8 @@ export default function AliasesRoute(): ReactElement {
setQueryValue(event.target.value)
})
}}
label={t("routes.AliasesRoute.pageActions.search.label")}
placeholder={t(
"routes.AliasesRoute.pageActions.search.placeholder",
)}
label={t("fields.search.label", {ns: "common"})}
placeholder={t("pageActions.search.placeholder")}
id="search"
InputProps={{
startAdornment: (
@ -166,9 +164,7 @@ export default function AliasesRoute(): ReactElement {
<Grid container spacing={1}>
<Grid item>
<Chip
label={t(
"routes.AliasesRoute.pageActions.searchFilter.active",
)}
label={t("pageActions.searchFilter.active")}
variant={
searchFilter === SearchFilter.Active
? "filled"
@ -187,9 +183,7 @@ export default function AliasesRoute(): ReactElement {
</Grid>
<Grid item>
<Chip
label={t(
"routes.AliasesRoute.pageActions.searchFilter.inactive",
)}
label={t("pageActions.searchFilter.inactive")}
variant={
searchFilter === SearchFilter.Inactive
? "filled"
@ -213,9 +207,7 @@ export default function AliasesRoute(): ReactElement {
<Grid item>
<Chip
icon={ALIAS_TYPE_ICON_MAP[AliasType.CUSTOM]}
label={t(
"routes.AliasesRoute.pageActions.typeFilter.custom",
)}
label={t("pageActions.typeFilter.custom")}
variant={
typeFilter === TypeFilter.Custom
? "filled"
@ -235,9 +227,7 @@ export default function AliasesRoute(): ReactElement {
<Grid item>
<Chip
icon={ALIAS_TYPE_ICON_MAP[AliasType.RANDOM]}
label={t(
"routes.AliasesRoute.pageActions.typeFilter.random",
)}
label={t("pageActions.typeFilter.random")}
variant={
typeFilter === TypeFilter.Random
? "filled"
@ -307,15 +297,14 @@ export default function AliasesRoute(): ReactElement {
</Grid>
<SuccessSnack
key={value}
message={
value &&
t("relations.alias.mutations.success.addressCopiedToClipboard")
}
message={value && t("messages.alias.addressCopied", {ns: "common"})}
/>
<ErrorSnack
message={error && t("messages.errors.unknown", {ns: "common"})}
/>
<ErrorSnack message={error && t("general.copyError")} />
<Snackbar open={isInCopyAddressMode} autoHideDuration={null}>
<Alert variant="standard" severity="info">
{t("routes.AliasesRoute.isInCopyMode")}
{t("isInCopyMode")}
</Alert>
</Snackbar>
</>