added expandUrlShorteners option to forms

public/locales/de-DE/translation.json

@@ -354,7 +354,7 @@
                         "webp": "WEBP"
                     }
                 },
-                "imageProxyUserAgent": {
+                "proxyUserAgent": {
                     "label": "Bild-Weiterleitungs-User-Agent",
                     "helperText": "Ein User-Agent ist eine Kennzeichnung, die jeden Browser und E-Mail-Client identifiziert, wenn Dateien runtergeladen werden, so wie beispielsweise Bilder. Du kannst hier einstellen, welchen User-Agent du beim Weiterleiten verwenden möchtest. User-Agents werden aktuell gehalten.",
                     "enumTexts": {
@@ -366,6 +366,10 @@
                         "chrome": "Chrome Browser"
                     }
                 },
+                "expandUrlShorteners": {
+                    "label": "URL-Kürzer entkürzen",
+                    "helperText": "Entkürzt URl-Kürzerer (wie zum Beispiel bit.ly) zu der Original-URL. Dadurch können dich diese Services nicht mehr tracken."
+                },
                 "saveAction": "Einstellungen speichern"
             }
         },

public/locales/en-US/translation.json

@@ -354,8 +354,8 @@
                         "webp": "WEBP"
                     }
                 },
-                "imageProxyUserAgent": {
+                "proxyUserAgent": {
-                    "label": "Image Proxy User Agent",
+                    "label": "Proxy User Agent",
                     "helperText": "An User Agent is a identifier each browser and email client sends when retrieving files, such as images. You can specify here what user agent you would like to be used when we forward it. User Agents are kept up-to-date.",
                     "enumTexts": {
                         "apple-mail": "Apple Mail",
@@ -366,6 +366,10 @@
                         "chrome": "Chrome Browser"
                     }
                 },
+                "expandUrlShorteners": {
+                    "label": "Expand URL Shorteners",
+                    "helperText": "Expand shortened URLs (for example bit.ly) to their original URL. This way those services can't track you."
+                },
                 "saveAction": "Save Settings"
             }
         },

src/apis/create-alias.ts

@@ -1,4 +1,4 @@
-import {Alias, AliasType, ImageProxyFormatType, ImageProxyUserAgentType} from "~/server-types"
+import {Alias, AliasType, ImageProxyFormatType, ProxyUserAgentType} from "~/server-types"
 import {client} from "~/constants/axios-client"
 
 interface CreateAliasDataOther {
@@ -9,7 +9,8 @@ interface CreateAliasDataOther {
 	prefCreateMailReport?: boolean
 	prefProxyImages?: boolean
 	prefImageProxyFormat?: ImageProxyFormatType
-	prefImageProxyUserAgent?: ImageProxyUserAgentType
+	prefProxyUserAgent?: ProxyUserAgentType
+	prefExpandUrlShorteners?: boolean
 }
 
 interface CreateAliasDataBase extends CreateAliasDataOther {

src/apis/update-alias.ts

@@ -1,4 +1,4 @@
-import {Alias, ImageProxyFormatType, ImageProxyUserAgentType} from "~/server-types"
+import {Alias, ImageProxyFormatType, ProxyUserAgentType} from "~/server-types"
 import {client} from "~/constants/axios-client"
 
 export interface UpdateAliasData {
@@ -8,7 +8,7 @@ export interface UpdateAliasData {
 	prefCreateMailReport?: boolean | null
 	prefProxyImages?: boolean | null
 	prefImagProxyFormat?: ImageProxyFormatType | null
-	prefImageProxyUserAgent?: ImageProxyUserAgentType | null
+	prefProxyUserAgent?: ProxyUserAgentType | null
 }
 
 export default async function updateAlias(id: string, updateData: UpdateAliasData): Promise<Alias> {

src/apis/update-preferences.ts

@@ -1,4 +1,4 @@
-import {ImageProxyFormatType, ImageProxyUserAgentType, SimpleDetailResponse} from "~/server-types"
+import {ImageProxyFormatType, ProxyUserAgentType, SimpleDetailResponse} from "~/server-types"
 import {client} from "~/constants/axios-client"
 
 export interface UpdatePreferencesData {
@@ -6,7 +6,8 @@ export interface UpdatePreferencesData {
 	aliasCreateMailReport?: boolean
 	aliasProxyImages?: boolean
 	aliasImageProxyFormat?: ImageProxyFormatType
-	aliasImageProxyUserAgent?: ImageProxyUserAgentType
+	aliasProxyUserAgent?: ProxyUserAgentType
+	aliasExpandUrlShorteners?: boolean
 }
 
 export default async function updatePreferences(

src/components/SimpleForm.tsx

@@ -71,7 +71,7 @@ export default function SimpleForm({
 				</Grid>
 				{children && (
 					<Grid item>
-						<Grid container spacing={3}>
+						<Grid container spacing={3} direction="column" alignItems="center">
 							{children.map(input => (
 								<Grid item key={input.key}>
 									{input}

src/constants/enum-mappings.ts

@@ -1,11 +1,11 @@
-import {ImageProxyFormatType, ImageProxyUserAgentType} from "~/server-types"
+import {ImageProxyFormatType, ProxyUserAgentType} from "~/server-types"
 import {createEnumMapFromTranslation} from "~/utils"
 
 export const IMAGE_PROXY_FORMAT_TYPE_NAME_MAP = createEnumMapFromTranslation(
 	"relations.alias.settings.imageProxyFormat.enumTexts",
 	ImageProxyFormatType,
 )
-export const IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP = createEnumMapFromTranslation(
+export const PROXY_USER_AGENT_TYPE_NAME_MAP = createEnumMapFromTranslation(
-	"relations.alias.settings.imageProxyUserAgent.enumTexts",
+	"relations.alias.settings.proxyUserAgent.enumTexts",
-	ImageProxyUserAgentType,
+	ProxyUserAgentType,
 )

src/route-widgets/AliasDetailRoute/AliasPreferencesForm.tsx

@@ -13,12 +13,12 @@ import {mdiTextBoxMultiple} from "@mdi/js/commonjs/mdi"
 import {useMutation} from "@tanstack/react-query"
 import Icon from "@mdi/react"
 
-import {Alias, DecryptedAlias, ImageProxyFormatType, ImageProxyUserAgentType} from "~/server-types"
+import {Alias, DecryptedAlias, ImageProxyFormatType, ProxyUserAgentType} from "~/server-types"
 import {UpdateAliasData, updateAlias} from "~/apis"
 import {parseFastAPIError} from "~/utils"
 import {
 	IMAGE_PROXY_FORMAT_TYPE_NAME_MAP,
-	IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP,
+	PROXY_USER_AGENT_TYPE_NAME_MAP,
 } from "~/constants/enum-mappings"
 import {useErrorSuccessSnacks} from "~/hooks"
 import AuthContext from "~/AuthContext/AuthContext"
@@ -37,7 +37,7 @@ interface Form {
 	createMailReport: boolean | null
 	proxyImages: boolean | null
 	imageProxyFormat: ImageProxyFormatType | null
-	imageProxyUserAgent: ImageProxyUserAgentType | null
+	proxyUserAgent: ProxyUserAgentType | null
 
 	detail?: string
 }
@@ -64,10 +64,14 @@ export default function AliasPreferencesForm({
 			.mixed<ImageProxyFormatType>()
 			.oneOf([null, ...Object.values(ImageProxyFormatType)])
 			.label(t("relations.alias.settings.imageProxyFormat.label")),
-		imageProxyUserAgent: yup
+		proxyUserAgent: yup
-			.mixed<ImageProxyUserAgentType>()
+			.mixed<ProxyUserAgentType>()
-			.oneOf([null, ...Object.values(ImageProxyUserAgentType)])
+			.oneOf([null, ...Object.values(ProxyUserAgentType)])
-			.label(t("relations.alias.settings.imageProxyUserAgent.label")),
+			.label(t("relations.alias.settings.proxyUserAgent.label")),
+		expandUrlShorteners: yup
+			.mixed<boolean | null>()
+			.oneOf([true, false, null])
+			.label(t("relations.alias.settings.expandUrlShorteners.label")),
 	})
 
 	const {mutateAsync} = useMutation<Alias, AxiosError, UpdateAliasData>(
@@ -92,7 +96,7 @@ export default function AliasPreferencesForm({
 			createMailReport: alias.prefCreateMailReport,
 			proxyImages: alias.prefProxyImages,
 			imageProxyFormat: alias.prefImageProxyFormat,
-			imageProxyUserAgent: alias.prefImageProxyUserAgent,
+			proxyUserAgent: alias.prefProxyUserAgent,
 		},
 		validationSchema: schema,
 		onSubmit: async (values, {setErrors}) => {
@@ -102,7 +106,7 @@ export default function AliasPreferencesForm({
 					prefRemoveTrackers: values.removeTrackers,
 					prefProxyImages: values.proxyImages,
 					prefImagProxyFormat: values.imageProxyFormat,
-					prefImageProxyUserAgent: values.imageProxyUserAgent,
+					prefProxyUserAgent: values.proxyUserAgent,
 				})
 			} catch (error) {
 				setErrors(parseFastAPIError(error as AxiosError))
@@ -166,12 +170,12 @@ export default function AliasPreferencesForm({
 													<Grid item xs={12} sm={6}>
 														<SelectField
 															label={t(
-																"relations.alias.settings.imageProxyUserAgent.label",
+																"relations.alias.settings.proxyUserAgent.label",
 															)}
 															formik={formik}
-															name="imageProxyUserAgent"
+															name="proxyUserAgent"
 															valueTextMap={
-																IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP
+																PROXY_USER_AGENT_TYPE_NAME_MAP
 															}
 														/>
 													</Grid>

src/route-widgets/AliasesRoute/AliasesDetails.tsx

@@ -6,15 +6,17 @@ import {Alert, Grid, List, Snackbar} from "@mui/material"
 
 import {AliasList} from "~/server-types"
 import {useIsAnyInputFocused, useUIState} from "~/hooks"
-import {ErrorSnack, SuccessSnack} from "~/components"
+import {ErrorSnack, NoSearchResults, SuccessSnack} from "~/components"
 import AliasesListItem from "~/route-widgets/AliasesRoute/AliasesListItem"
 import CreateAliasButton from "~/route-widgets/AliasesRoute/CreateAliasButton"
+import EmptyStateScreen from "~/route-widgets/AliasesRoute/EmptyStateScreen"
 
 export interface AliasesDetailsProps {
 	aliases: AliasList[]
+	isSearching: boolean
 }
 
-export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactElement {
+export default function AliasesDetails({aliases, isSearching}: AliasesDetailsProps): ReactElement {
 	const {t} = useTranslation()
 	const [{value, error}, copyToClipboard] = useCopyToClipboard()
 	const [isPressingControl] = useKeyPress("Control")
@@ -36,22 +38,34 @@ export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactEle
 		<>
 			<Grid container spacing={4} direction="column">
 				<Grid item>
-					<List>
+					{(() => {
-						{aliasesUIState.map(alias => (
+						if (aliasesUIState.length === 0) {
-							<AliasesListItem
+							if (isSearching) {
-								alias={alias}
+								return <NoSearchResults />
-								key={alias.id}
+							} else {
-								onCopy={
+								return <EmptyStateScreen />
-									isInCopyAddressMode
+							}
-										? alias => {
+						}
-												copyToClipboard(alias)
+
-												setLockDisabledCopyMode(true)
+						return (
-										  }
+							<List>
-										: undefined
+								{aliasesUIState.map(alias => (
-								}
+									<AliasesListItem
-							/>
+										alias={alias}
-						))}
+										key={alias.id}
-					</List>
+										onCopy={
+											isInCopyAddressMode
+												? alias => {
+														copyToClipboard(alias)
+														setLockDisabledCopyMode(true)
+												  }
+												: undefined
+										}
+									/>
+								))}
+							</List>
+						)
+					})()}
 				</Grid>
 				<Grid item>
 					<CreateAliasButton

src/route-widgets/AliasesRoute/EmptyStateScreen.tsx

@@ -14,7 +14,7 @@ export default function EmptyStateScreen(): ReactElement {
 				spacing={4}
 				direction="column"
 				alignItems="center"
-				maxWidth="60%"
+				maxWidth="80%"
 				alignSelf="center"
 				marginX="auto"
 			>

src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx

@@ -22,13 +22,13 @@ import {
 } from "@mui/material"
 import {LoadingButton} from "@mui/lab"
 
-import {ImageProxyFormatType, ImageProxyUserAgentType, SimpleDetailResponse} from "~/server-types"
+import {ImageProxyFormatType, ProxyUserAgentType, SimpleDetailResponse} from "~/server-types"
 import {UpdatePreferencesData, updatePreferences} from "~/apis"
 import {useErrorSuccessSnacks, useUser} from "~/hooks"
 import {parseFastAPIError} from "~/utils"
 import {
 	IMAGE_PROXY_FORMAT_TYPE_NAME_MAP,
-	IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP,
+	PROXY_USER_AGENT_TYPE_NAME_MAP,
 } from "~/constants/enum-mappings"
 import AuthContext from "~/AuthContext/AuthContext"
 
@@ -37,7 +37,8 @@ interface Form {
 	createMailReport: boolean
 	proxyImages: boolean
 	imageProxyFormat: ImageProxyFormatType
-	imageProxyUserAgent: ImageProxyUserAgentType
+	proxyUserAgent: ProxyUserAgentType
+	expandUrlShorteners: boolean
 
 	detail?: string
 }
@@ -57,11 +58,14 @@ export default function AliasesPreferencesForm(): ReactElement {
 			.oneOf(Object.values(ImageProxyFormatType))
 			.required()
 			.label(t("relations.alias.settings.imageProxyFormat.label")),
-		imageProxyUserAgent: yup
+		proxyUserAgent: yup
-			.mixed<ImageProxyUserAgentType>()
+			.mixed<ProxyUserAgentType>()
-			.oneOf(Object.values(ImageProxyUserAgentType))
+			.oneOf(Object.values(ProxyUserAgentType))
 			.required()
-			.label(t("relations.alias.settings.imageProxyUserAgent.label")),
+			.label(t("relations.alias.settings.proxyUserAgent.label")),
+		expandUrlShorteners: yup
+			.boolean()
+			.label(t("relations.alias.settings.expandUrlShorteners.label")),
 	})
 
 	const {mutateAsync} = useMutation<SimpleDetailResponse, AxiosError, UpdatePreferencesData>(
@@ -92,7 +96,8 @@ export default function AliasesPreferencesForm(): ReactElement {
 			createMailReport: user.preferences.aliasCreateMailReport,
 			proxyImages: user.preferences.aliasProxyImages,
 			imageProxyFormat: user.preferences.aliasImageProxyFormat,
-			imageProxyUserAgent: user.preferences.aliasImageProxyUserAgent,
+			proxyUserAgent: user.preferences.aliasProxyUserAgent,
+			expandUrlShorteners: user.preferences.aliasExpandUrlShorteners || true,
 		},
 		onSubmit: async (values, {setErrors}) => {
 			try {
@@ -101,7 +106,8 @@ export default function AliasesPreferencesForm(): ReactElement {
 					aliasCreateMailReport: values.createMailReport,
 					aliasProxyImages: values.proxyImages,
 					aliasImageProxyFormat: values.imageProxyFormat,
-					aliasImageProxyUserAgent: values.imageProxyUserAgent,
+					aliasProxyUserAgent: values.proxyUserAgent,
+					aliasExpandUrlShorteners: values.expandUrlShorteners,
 				})
 			} catch (error) {
 				setErrors(parseFastAPIError(error as AxiosError))
@@ -146,7 +152,7 @@ export default function AliasesPreferencesForm(): ReactElement {
 										/>
 									}
 									labelPlacement="start"
-									label="Remove Trackers"
+									label={t("relations.alias.settings.removeTrackers.label")}
 								/>
 								<FormHelperText
 									error={Boolean(
@@ -174,7 +180,7 @@ export default function AliasesPreferencesForm(): ReactElement {
 										/>
 									}
 									labelPlacement="start"
-									label="Create Reports"
+									label={t("relations.alias.settings.createMailReport.label")}
 								/>
 								<FormHelperText
 									error={Boolean(
@@ -202,7 +208,7 @@ export default function AliasesPreferencesForm(): ReactElement {
 										/>
 									}
 									labelPlacement="start"
-									label="Proxy Images"
+									label={t("relations.alias.settings.proxyImages.label")}
 								/>
 								<FormHelperText
 									error={Boolean(
@@ -236,7 +242,9 @@ export default function AliasesPreferencesForm(): ReactElement {
 												}}
 												name="imageProxyFormat"
 												id="imageProxyFormat"
-												label="Image File Type"
+												label={t(
+													"relations.alias.settings.imageProxyFormat.label",
+												)}
 												value={formik.values.imageProxyFormat}
 												onChange={formik.handleChange}
 												disabled={formik.isSubmitting}
@@ -268,51 +276,79 @@ export default function AliasesPreferencesForm(): ReactElement {
 											</FormHelperText>
 										</FormGroup>
 									</Grid>
-									<Grid item md={6} xs={12}>
-										<FormGroup>
-											<TextField
-												fullWidth
-												select
-												name="imageProxyUserAgent"
-												id="imageProxyUserAgent"
-												label="Image Proxy User Agent"
-												value={formik.values.imageProxyUserAgent}
-												onChange={formik.handleChange}
-												disabled={formik.isSubmitting}
-												error={
-													formik.touched.imageProxyUserAgent &&
-													Boolean(formik.errors.imageProxyUserAgent)
-												}
-												helperText={
-													formik.touched.imageProxyUserAgent &&
-													formik.errors.imageProxyUserAgent
-												}
-											>
-												{Object.entries(
-													IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP,
-												).map(([value, translationString]) => (
-													<MenuItem key={value} value={value}>
-														{t(translationString)}
-													</MenuItem>
-												))}
-											</TextField>
-											<FormHelperText
-												error={Boolean(
-													formik.touched.imageProxyUserAgent &&
-														formik.errors.imageProxyUserAgent,
-												)}
-											>
-												{(formik.touched.imageProxyUserAgent &&
-													formik.errors.imageProxyUserAgent) ||
-													t(
-														"relations.alias.settings.imageProxyUserAgent.helperText",
-													)}
-											</FormHelperText>
-										</FormGroup>
-									</Grid>
 								</Grid>
 							</Collapse>
 						</Grid>
+						<Grid item xs={12}>
+							<FormGroup>
+								<TextField
+									fullWidth
+									select
+									name="proxyUserAgent"
+									id="proxyUserAgent"
+									label={t("relations.alias.settings.proxyUserAgent.label")}
+									value={formik.values.proxyUserAgent}
+									onChange={formik.handleChange}
+									disabled={formik.isSubmitting}
+									error={
+										formik.touched.proxyUserAgent &&
+										Boolean(formik.errors.proxyUserAgent)
+									}
+									helperText={
+										formik.touched.proxyUserAgent &&
+										formik.errors.proxyUserAgent
+									}
+								>
+									{Object.entries(PROXY_USER_AGENT_TYPE_NAME_MAP).map(
+										([value, translationString]) => (
+											<MenuItem key={value} value={value}>
+												{t(translationString)}
+											</MenuItem>
+										),
+									)}
+								</TextField>
+								<FormHelperText
+									error={Boolean(
+										formik.touched.proxyUserAgent &&
+											formik.errors.proxyUserAgent,
+									)}
+								>
+									{(formik.touched.proxyUserAgent &&
+										formik.errors.proxyUserAgent) ||
+										t("relations.alias.settings.proxyUserAgent.helperText")}
+								</FormHelperText>
+							</FormGroup>
+						</Grid>
+						<Grid item xs={12}>
+							<FormGroup>
+								<FormControlLabel
+									disabled={formik.isSubmitting}
+									control={
+										<Checkbox
+											name="expandUrlShorteners"
+											id="expandUrlShorteners"
+											checked={formik.values.expandUrlShorteners}
+											onChange={formik.handleChange}
+											onBlur={formik.handleBlur}
+										/>
+									}
+									labelPlacement="start"
+									label={t("relations.alias.settings.expandUrlShorteners.label")}
+								/>
+								<FormHelperText
+									error={Boolean(
+										formik.touched.expandUrlShorteners &&
+											formik.errors.expandUrlShorteners,
+									)}
+								>
+									{(formik.touched.expandUrlShorteners &&
+										formik.errors.expandUrlShorteners) ||
+										t(
+											"relations.alias.settings.expandUrlShorteners.helperText",
+										)}
+								</FormHelperText>
+							</FormGroup>
+						</Grid>
 					</Grid>
 				</Grid>
 				<Grid item>

src/routes/AliasesRoute.tsx

@@ -7,9 +7,8 @@ import {useQuery} from "@tanstack/react-query"
 import {InputAdornment, TextField} from "@mui/material"
 
 import {AliasList, PaginationResult} from "~/server-types"
-import {NoSearchResults, QueryResult, SimplePage} from "~/components"
+import {QueryResult, SimplePage} from "~/components"
 import AliasesDetails from "~/route-widgets/AliasesRoute/AliasesDetails"
-import EmptyStateScreen from "~/route-widgets/AliasesRoute/EmptyStateScreen"
 import getAliases from "~/apis/get-aliases"
 
 export default function AliasesRoute(): ReactElement {
@@ -64,19 +63,9 @@ export default function AliasesRoute(): ReactElement {
 			}
 		>
 			<QueryResult<PaginationResult<AliasList>, AxiosError> query={query}>
-				{result =>
+				{result => (
-					(() => {
+					<AliasesDetails aliases={result.items} isSearching={searchValue !== ""} />
-						if (result.items.length === 0) {
+				)}
-							if (searchValue === "") {
-								return <EmptyStateScreen />
-							} else {
-								return <NoSearchResults />
-							}
-						}
-
-						return <AliasesDetails aliases={result.items} />
-					})()
-				}
 			</QueryResult>
 		</SimplePage>
 	)

src/server-types.ts

@@ -4,7 +4,7 @@ export enum ImageProxyFormatType {
 	JPEG = "jpeg",
 }
 
-export enum ImageProxyUserAgentType {
+export enum ProxyUserAgentType {
 	APPLE_MAIL = "apple-mail",
 	GOOGLE_MAIL = "google-mail",
 	OUTLOOK_WINDOWS = "outlook-windows",
@@ -49,7 +49,8 @@ export interface ServerUser {
 		aliasCreateMailReport: boolean
 		aliasProxyImages: boolean
 		aliasImageProxyFormat: ImageProxyFormatType
-		aliasImageProxyUserAgent: ImageProxyUserAgentType
+		aliasProxyUserAgent: ProxyUserAgentType
+		aliasExpandUrlShorteners: boolean
 	}
 }
 
@@ -90,7 +91,8 @@ export interface Alias {
 	prefCreateMailReport: boolean | null
 	prefProxyImages: boolean | null
 	prefImageProxyFormat: ImageProxyFormatType | null
-	prefImageProxyUserAgent: ImageProxyUserAgentType | null
+	prefProxyUserAgent: ProxyUserAgentType | null
+	prefExpandUrlShorteners: boolean | null
 }
 
 export interface AliasNote {
@@ -144,6 +146,10 @@ export interface DecryptedReportContent {
 				trackerName: string
 				trackerUrl: string
 			}>
+			expandedUrls: Array<{
+				url: string
+				queryTrackers: []
+			}>
 		}
 	}
 }