diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json
index e069221..141d829 100644
--- a/public/locales/en-US/translation.json
+++ b/public/locales/en-US/translation.json
@@ -383,7 +383,12 @@
"settings": {
"title": "Global Settings",
"description": "Configure global settings for your instance.",
- "successMessage": "Settings have been saved successfully!"
+ "successMessage": "Settings have been saved successfully!",
+ "randomAliasesPreview": {
+ "title": "Random aliases will look like this",
+ "helperText": "This is just a preview. Those are not real aliases."
+ },
+ "randomAliasesIncreaseExplanation": "Random aliases' length will be increased from {{originalLength}} to {{increasedLength}} characters after {{amount}} aliases have been created."
}
}
},
diff --git a/src/App.tsx b/src/App.tsx
index 0e4e335..75f1d89 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -122,6 +122,7 @@ const router = createBrowserRouter([
},
{
path: "/admin/settings",
+ loader: getServerSettings,
element: ,
},
],
diff --git a/src/route-widgets/GlobalSettingsRoute/AliasPercentageAmount.tsx b/src/route-widgets/GlobalSettingsRoute/AliasPercentageAmount.tsx
new file mode 100644
index 0000000..117a1da
--- /dev/null
+++ b/src/route-widgets/GlobalSettingsRoute/AliasPercentageAmount.tsx
@@ -0,0 +1,32 @@
+import {ReactElement} from "react"
+import {useTranslation} from "react-i18next"
+
+import {Alert, Typography} from "@mui/material"
+
+export interface AliasPercentageAmountProps {
+ characters: string
+ length: number
+ percentage: number
+}
+
+export default function AliasesPercentageAmount({
+ characters,
+ length,
+ percentage,
+}: AliasPercentageAmountProps): ReactElement {
+ const {t} = useTranslation()
+
+ const amount = Math.floor(Math.pow(characters.length, length) * percentage)
+
+ return (
+
+
+ {t("routes.AdminRoute.settings.randomAliasesIncreaseExplanation", {
+ originalLength: length,
+ increasedLength: length + 1,
+ amount,
+ })}
+
+
+ )
+}
diff --git a/src/route-widgets/GlobalSettingsRoute/RandomAliasGenerator.tsx b/src/route-widgets/GlobalSettingsRoute/RandomAliasGenerator.tsx
new file mode 100644
index 0000000..37cb4b6
--- /dev/null
+++ b/src/route-widgets/GlobalSettingsRoute/RandomAliasGenerator.tsx
@@ -0,0 +1,59 @@
+import {useLoaderData} from "react-router-dom"
+import {ReactElement, useCallback, useState} from "react"
+import {useUpdateEffect} from "react-use"
+import {BiRefresh} from "react-icons/bi"
+import {useTranslation} from "react-i18next"
+
+import {Alert, FormHelperText, Grid, IconButton, Typography, useTheme} from "@mui/material"
+
+import {ServerSettings} from "~/server-types"
+
+export interface RandomAliasGeneratorProps {
+ characters: string
+ length: number
+}
+
+export default function RandomAliasGenerator({
+ characters,
+ length,
+}: RandomAliasGeneratorProps): ReactElement {
+ const serverSettings = useLoaderData() as ServerSettings
+ const {t} = useTranslation()
+ const theme = useTheme()
+
+ const generateLocal = useCallback(
+ () =>
+ Array.from({length}, () =>
+ characters.charAt(Math.floor(Math.random() * characters.length)),
+ ).join(""),
+ [characters, length],
+ )
+ const [local, setLocal] = useState(generateLocal)
+
+ const email = `${local}@${serverSettings.mailDomain}`
+
+ useUpdateEffect(() => {
+ setLocal(generateLocal())
+ }, [generateLocal])
+
+ return (
+
+
+ {t("routes.AdminRoute.settings.randomAliasesPreview.title")}
+
+
+
+ {email}
+
+
+ setLocal(generateLocal())}>
+
+
+
+
+
+ {t("routes.AdminRoute.settings.randomAliasesPreview.helperText")}
+
+
+ )
+}
diff --git a/src/route-widgets/GlobalSettingsRoute/SettingsForm.tsx b/src/route-widgets/GlobalSettingsRoute/SettingsForm.tsx
index f32288a..af5c423 100644
--- a/src/route-widgets/GlobalSettingsRoute/SettingsForm.tsx
+++ b/src/route-widgets/GlobalSettingsRoute/SettingsForm.tsx
@@ -26,6 +26,8 @@ import {useErrorSuccessSnacks} from "~/hooks"
import {queryClient} from "~/constants/react-query"
import {parseFastAPIError} from "~/utils"
import {DEFAULT_ADMIN_SETTINGS} from "~/constants/admin-settings"
+import AliasesPercentageAmount from "./AliasPercentageAmount"
+import RandomAliasGenerator from "~/route-widgets/GlobalSettingsRoute/RandomAliasGenerator"
export interface SettingsFormProps {
settings: AdminSettings
@@ -212,6 +214,12 @@ export default function SettingsForm({settings, queryKey}: SettingsFormProps) {
}
/>
+
+
+
+
+
+