feat: Add Preview for admin SettingsForm.tsx

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."
             }
         }
     },

src/App.tsx

@@ -122,6 +122,7 @@ const router = createBrowserRouter([
 					},
 					{
 						path: "/admin/settings",
+						loader: getServerSettings,
 						element: <GlobalSettingsRoute />,
 					},
 				],

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 (
+		<Alert severity="info" variant="standard">
+			<Typography variant="subtitle1" component="h5">
+				{t("routes.AdminRoute.settings.randomAliasesIncreaseExplanation", {
+					originalLength: length,
+					increasedLength: length + 1,
+					amount,
+				})}
+			</Typography>
+		</Alert>
+	)
+}

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<string>(generateLocal)
+
+	const email = `${local}@${serverSettings.mailDomain}`
+
+	useUpdateEffect(() => {
+		setLocal(generateLocal())
+	}, [generateLocal])
+
+	return (
+		<Alert severity="info" variant="standard">
+			<Typography variant="subtitle1" component="h5">
+				{t("routes.AdminRoute.settings.randomAliasesPreview.title")}
+			</Typography>
+			<Grid container spacing={2} direction="row" alignItems="center">
+				<Grid item>
+					<Typography variant="body2">{email}</Typography>
+				</Grid>
+				<Grid item>
+					<IconButton size="small" onClick={() => setLocal(generateLocal())}>
+						<BiRefresh />
+					</IconButton>
+				</Grid>
+			</Grid>
+			<FormHelperText>
+				{t("routes.AdminRoute.settings.randomAliasesPreview.helperText")}
+			</FormHelperText>
+		</Alert>
+	)
+}

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) {
 								}
 							/>
 						</Grid>
+						<Grid item marginX="auto">
+							<RandomAliasGenerator
+								characters={formik.values.randomEmailIdChars}
+								length={formik.values.randomEmailIdMinLength}
+							/>
+						</Grid>
 						<Grid item>
 							<TextField
 								key="random_email_length_increase_on_percentage"
@@ -245,6 +253,13 @@ export default function SettingsForm({settings, queryKey}: SettingsFormProps) {
 								}}
 							/>
 						</Grid>
+						<Grid item>
+							<AliasesPercentageAmount
+								percentage={formik.values.randomEmailLengthIncreaseOnPercentage}
+								length={formik.values.randomEmailIdMinLength}
+								characters={formik.values.randomEmailIdChars}
+							/>
+						</Grid>
 						<Grid item md={6}>
 							<TextField
 								key="custom_email_suffix_length"