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

added expandUrlShorteners option to forms

Browse Source
This commit is contained in:
Myzel394 2022-11-12 21:31:42 +01:00
parent 0f963d0383
commit 1cb33a9624
13 changed files with 177 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/locales/de-DE/translation.json
View File

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

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

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

5
src/apis/create-alias.ts
View File

@ -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 {

4
src/apis/update-alias.ts
View File

@ -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> {

5
src/apis/update-preferences.ts
View File

@ -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(

2
src/components/SimpleForm.tsx
View File

@ -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}

8
src/constants/enum-mappings.ts
View File

@ -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,
)

28
src/route-widgets/AliasDetailRoute/AliasPreferencesForm.tsx
View File

@ -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
.mixed<ImageProxyUserAgentType>()
.oneOf([null, ...Object.values(ImageProxyUserAgentType)])
.label(t("relations.alias.settings.imageProxyUserAgent.label")),
proxyUserAgent: yup
.mixed<ProxyUserAgentType>()
.oneOf([null, ...Object.values(ProxyUserAgentType)])
.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>

18
src/route-widgets/AliasesRoute/AliasesDetails.tsx
View File

@ -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,6 +38,16 @@ export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactEle
<>
<Grid container spacing={4} direction="column">
<Grid item>
{(() => {
if (aliasesUIState.length === 0) {
if (isSearching) {
return <NoSearchResults />
} else {
return <EmptyStateScreen />
}
}
return (
<List>
{aliasesUIState.map(alias => (
<AliasesListItem
@ -52,6 +64,8 @@ export default function AliasesDetails({aliases}: AliasesDetailsProps): ReactEle
/>
))}
</List>
)
})()}
</Grid>
<Grid item>
<CreateAliasButton

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

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

106
src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx
View File

@ -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<ImageProxyUserAgentType>()
.oneOf(Object.values(ImageProxyUserAgentType))
proxyUserAgent: yup
.mixed<ProxyUserAgentType>()
.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,50 +276,78 @@ export default function AliasesPreferencesForm(): ReactElement {
</FormHelperText>
</FormGroup>
</Grid>
<Grid item md={6} xs={12}>
</Grid>
</Collapse>
</Grid>
<Grid item xs={12}>
<FormGroup>
<TextField
fullWidth
select
name="imageProxyUserAgent"
id="imageProxyUserAgent"
label="Image Proxy User Agent"
value={formik.values.imageProxyUserAgent}
name="proxyUserAgent"
id="proxyUserAgent"
label={t("relations.alias.settings.proxyUserAgent.label")}
value={formik.values.proxyUserAgent}
onChange={formik.handleChange}
disabled={formik.isSubmitting}
error={
formik.touched.imageProxyUserAgent &&
Boolean(formik.errors.imageProxyUserAgent)
formik.touched.proxyUserAgent &&
Boolean(formik.errors.proxyUserAgent)
}
helperText={
formik.touched.imageProxyUserAgent &&
formik.errors.imageProxyUserAgent
formik.touched.proxyUserAgent &&
formik.errors.proxyUserAgent
}
>
{Object.entries(
IMAGE_PROXY_USER_AGENT_TYPE_NAME_MAP,
).map(([value, translationString]) => (
{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.imageProxyUserAgent &&
formik.errors.imageProxyUserAgent,
formik.touched.proxyUserAgent &&
formik.errors.proxyUserAgent,
)}
>
{(formik.touched.imageProxyUserAgent &&
formik.errors.imageProxyUserAgent) ||
t(
"relations.alias.settings.imageProxyUserAgent.helperText",
)}
{(formik.touched.proxyUserAgent &&
formik.errors.proxyUserAgent) ||
t("relations.alias.settings.proxyUserAgent.helperText")}
</FormHelperText>
</FormGroup>
</Grid>
</Grid>
</Collapse>
<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>

19
src/routes/AliasesRoute.tsx
View File

@ -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 =>
(() => {
if (result.items.length === 0) {
if (searchValue === "") {
return <EmptyStateScreen />
} else {
return <NoSearchResults />
}
}
return <AliasesDetails aliases={result.items} />
})()
}
{result => (
<AliasesDetails aliases={result.items} isSearching={searchValue !== ""} />
)}
</QueryResult>
</SimplePage>
)

12
src/server-types.ts
View File

@ -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: []
}>
}
}
}