From 1cb33a9624e1914ddd7ddbad89e4b69cdd467102 Mon Sep 17 00:00:00 2001 From: Myzel394 <50424412+Myzel394@users.noreply.github.com> Date: Sat, 12 Nov 2022 21:31:42 +0100 Subject: [PATCH] added expandUrlShorteners option to forms --- public/locales/de-DE/translation.json | 6 +- public/locales/en-US/translation.json | 8 +- src/apis/create-alias.ts | 5 +- src/apis/update-alias.ts | 4 +- src/apis/update-preferences.ts | 5 +- src/components/SimpleForm.tsx | 2 +- src/constants/enum-mappings.ts | 8 +- .../AliasDetailRoute/AliasPreferencesForm.tsx | 28 ++-- .../AliasesRoute/AliasesDetails.tsx | 50 +++--- .../AliasesRoute/EmptyStateScreen.tsx | 2 +- .../SettingsRoute/AliasesPreferencesForm.tsx | 146 +++++++++++------- src/routes/AliasesRoute.tsx | 19 +-- src/server-types.ts | 12 +- 13 files changed, 177 insertions(+), 118 deletions(-) diff --git a/public/locales/de-DE/translation.json b/public/locales/de-DE/translation.json index 8757632..219de9f 100644 --- a/public/locales/de-DE/translation.json +++ b/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" } }, diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json index fd24e92..d6fcc4b 100644 --- a/public/locales/en-US/translation.json +++ b/public/locales/en-US/translation.json @@ -354,8 +354,8 @@ "webp": "WEBP" } }, - "imageProxyUserAgent": { - "label": "Image Proxy User Agent", + "proxyUserAgent": { + "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" } }, diff --git a/src/apis/create-alias.ts b/src/apis/create-alias.ts index 72f82f5..fbca09a 100644 --- a/src/apis/create-alias.ts +++ b/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 { diff --git a/src/apis/update-alias.ts b/src/apis/update-alias.ts index 03c35b3..691be68 100644 --- a/src/apis/update-alias.ts +++ b/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 { diff --git a/src/apis/update-preferences.ts b/src/apis/update-preferences.ts index 995582d..360c9b5 100644 --- a/src/apis/update-preferences.ts +++ b/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( diff --git a/src/components/SimpleForm.tsx b/src/components/SimpleForm.tsx index abef448..d8524d4 100644 --- a/src/components/SimpleForm.tsx +++ b/src/components/SimpleForm.tsx @@ -71,7 +71,7 @@ export default function SimpleForm({ {children && ( - + {children.map(input => ( {input} diff --git a/src/constants/enum-mappings.ts b/src/constants/enum-mappings.ts index 93abba5..ecf2070 100644 --- a/src/constants/enum-mappings.ts +++ b/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( - "relations.alias.settings.imageProxyUserAgent.enumTexts", - ImageProxyUserAgentType, +export const PROXY_USER_AGENT_TYPE_NAME_MAP = createEnumMapFromTranslation( + "relations.alias.settings.proxyUserAgent.enumTexts", + ProxyUserAgentType, ) diff --git a/src/route-widgets/AliasDetailRoute/AliasPreferencesForm.tsx b/src/route-widgets/AliasDetailRoute/AliasPreferencesForm.tsx index 698bed3..a1606d0 100644 --- a/src/route-widgets/AliasDetailRoute/AliasPreferencesForm.tsx +++ b/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() .oneOf([null, ...Object.values(ImageProxyFormatType)]) .label(t("relations.alias.settings.imageProxyFormat.label")), - imageProxyUserAgent: yup - .mixed() - .oneOf([null, ...Object.values(ImageProxyUserAgentType)]) - .label(t("relations.alias.settings.imageProxyUserAgent.label")), + proxyUserAgent: yup + .mixed() + .oneOf([null, ...Object.values(ProxyUserAgentType)]) + .label(t("relations.alias.settings.proxyUserAgent.label")), + expandUrlShorteners: yup + .mixed() + .oneOf([true, false, null]) + .label(t("relations.alias.settings.expandUrlShorteners.label")), }) const {mutateAsync} = useMutation( @@ -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({ diff --git a/src/route-widgets/AliasesRoute/AliasesDetails.tsx b/src/route-widgets/AliasesRoute/AliasesDetails.tsx index 604faa8..ff19b7d 100644 --- a/src/route-widgets/AliasesRoute/AliasesDetails.tsx +++ b/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 <> - - {aliasesUIState.map(alias => ( - { - copyToClipboard(alias) - setLockDisabledCopyMode(true) - } - : undefined - } - /> - ))} - + {(() => { + if (aliasesUIState.length === 0) { + if (isSearching) { + return + } else { + return + } + } + + return ( + + {aliasesUIState.map(alias => ( + { + copyToClipboard(alias) + setLockDisabledCopyMode(true) + } + : undefined + } + /> + ))} + + ) + })()} diff --git a/src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx b/src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx index a9690b5..e725aae 100644 --- a/src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx +++ b/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 - .mixed() - .oneOf(Object.values(ImageProxyUserAgentType)) + proxyUserAgent: yup + .mixed() + .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( @@ -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")} /> } labelPlacement="start" - label="Create Reports" + label={t("relations.alias.settings.createMailReport.label")} /> } labelPlacement="start" - label="Proxy Images" + label={t("relations.alias.settings.proxyImages.label")} /> - - - - {Object.entries( - IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP, - ).map(([value, translationString]) => ( - - {t(translationString)} - - ))} - - - {(formik.touched.imageProxyUserAgent && - formik.errors.imageProxyUserAgent) || - t( - "relations.alias.settings.imageProxyUserAgent.helperText", - )} - - - + + + + {Object.entries(PROXY_USER_AGENT_TYPE_NAME_MAP).map( + ([value, translationString]) => ( + + {t(translationString)} + + ), + )} + + + {(formik.touched.proxyUserAgent && + formik.errors.proxyUserAgent) || + t("relations.alias.settings.proxyUserAgent.helperText")} + + + + + + + } + labelPlacement="start" + label={t("relations.alias.settings.expandUrlShorteners.label")} + /> + + {(formik.touched.expandUrlShorteners && + formik.errors.expandUrlShorteners) || + t( + "relations.alias.settings.expandUrlShorteners.helperText", + )} + + + diff --git a/src/routes/AliasesRoute.tsx b/src/routes/AliasesRoute.tsx index 860a6de..603302c 100644 --- a/src/routes/AliasesRoute.tsx +++ b/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 { } > , AxiosError> query={query}> - {result => - (() => { - if (result.items.length === 0) { - if (searchValue === "") { - return - } else { - return - } - } - - return - })() - } + {result => ( + + )} ) diff --git a/src/server-types.ts b/src/server-types.ts index 8e08d3d..0f1663d 100644 --- a/src/server-types.ts +++ b/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: [] + }> } } }