feat: Add fields to AliasPreferencesForm.tsx

This commit is contained in:
Myzel394 2023-03-26 12:26:07 +02:00
parent 4f3ff28e34
commit 343500e55a
No known key found for this signature in database
GPG Key ID: 79CC92F37B3E1A2B
7 changed files with 72 additions and 2 deletions

View File

@ -78,6 +78,10 @@
"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."
},
"rejectOnPrivacyLeak": {
"label": "Reject on Privacy Leak",
"helperText": "Reject emails that contain your email address. This happens especially often when you reply to emails. We recommend you to enable this feature."
}
}
}

View File

@ -9,6 +9,8 @@ export interface UpdateAliasData {
prefProxyImages?: boolean | null
prefImagProxyFormat?: ImageProxyFormatType | null
prefProxyUserAgent?: ProxyUserAgentType | null
prefExpandUrlShorteners?: boolean | null
prefRejectOnPrivacyLeak?: boolean | null
}
export default async function updateAlias(id: string, updateData: UpdateAliasData): Promise<Alias> {

View File

@ -8,6 +8,7 @@ export interface UpdatePreferencesData {
aliasImageProxyFormat?: ImageProxyFormatType
aliasProxyUserAgent?: ProxyUserAgentType
aliasExpandUrlShorteners?: boolean
aliasRejectOnPrivacyLeak?: boolean
}
export default async function updatePreferences(

View File

@ -1,8 +1,8 @@
import * as yup from "yup"
import {ReactElement, useContext} from "react"
import {BsImage, BsShieldShaded} from "react-icons/bs"
import {BsArrowsAngleExpand, BsImage, BsShieldShaded} from "react-icons/bs"
import {useFormik} from "formik"
import {FaFile} from "react-icons/fa"
import {FaFile, FaHandPaper} from "react-icons/fa"
import {MdCheckCircle, MdTextSnippet} from "react-icons/md"
import {AxiosError} from "axios"
import {useTranslation} from "react-i18next"
@ -32,6 +32,8 @@ interface Form {
proxyImages: boolean | null
imageProxyFormat: ImageProxyFormatType | null
proxyUserAgent: ProxyUserAgentType | null
expandUrlShorteners: boolean | null
rejectOnPrivacyLeak: boolean | null
detail?: string
}
@ -78,6 +80,10 @@ export default function AliasPreferencesForm({
.mixed<boolean | null>()
.oneOf([true, false, null])
.label(t("settings.fields.expandUrlShorteners.label")),
rejectOnPrivacyLeak: yup
.mixed<boolean | null>()
.oneOf([true, false, null])
.label(t("settings.fields.rejectOnPrivacyLeak.label")),
})
const {mutateAsync} = useMutation<Alias, AxiosError, UpdateAliasData>(
@ -108,6 +114,8 @@ export default function AliasPreferencesForm({
proxyImages: alias.prefProxyImages,
imageProxyFormat: alias.prefImageProxyFormat,
proxyUserAgent: alias.prefProxyUserAgent,
expandUrlShorteners: alias.prefExpandUrlShorteners,
rejectOnPrivacyLeak: alias.prefRejectOnPrivacyLeak,
},
validationSchema: schema,
onSubmit: async (values, {setErrors}) => {
@ -118,6 +126,8 @@ export default function AliasPreferencesForm({
prefProxyImages: values.proxyImages,
prefImagProxyFormat: values.imageProxyFormat,
prefProxyUserAgent: values.proxyUserAgent,
prefExpandUrlShorteners: values.expandUrlShorteners,
prefRejectOnPrivacyLeak: values.rejectOnPrivacyLeak,
})
} catch (error) {
setErrors(parseFastAPIError(error as AxiosError))
@ -187,6 +197,22 @@ export default function AliasPreferencesForm({
</Grid>
</Grid>
</Grid>
<Grid item xs={12} sm={6}>
<SelectField
label={t("settings.fields.expandUrlShorteners.label")}
formik={formik}
icon={<BsArrowsAngleExpand />}
name="expandUrlShorteners"
/>
</Grid>
<Grid item xs={12} sm={6}>
<SelectField
label={t("settings.fields.rejectOnPrivacyLeak.label")}
formik={formik}
icon={<FaHandPaper />}
name="rejectOnPrivacyLeak"
/>
</Grid>
</Grid>
</Grid>
<Grid item>

View File

@ -40,6 +40,9 @@ export default function SelectField({
const labelId = `${name}-label`
const preferenceName = `alias${name.charAt(0).toUpperCase() + name.slice(1)}`
const value = user.preferences[preferenceName as keyof User["preferences"]]
console.log(user.preferences)
console.log(preferenceName)
console.log(value)
const defaultValueText = valueTextMap[value.toString()]
return (

View File

@ -35,6 +35,7 @@ interface Form {
imageProxyFormat: ImageProxyFormatType
proxyUserAgent: ProxyUserAgentType
expandUrlShorteners: boolean
rejectOnPrivacyLeak: boolean
detail?: string
}
@ -69,6 +70,7 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
.required()
.label(t("settings.fields.proxyUserAgent.label")),
expandUrlShorteners: yup.boolean().label(t("settings.fields.expandUrlShorteners.label")),
rejectOnPrivacyLeak: yup.boolean().label(t("settings.fields.rejectOnPrivacyLeak.label")),
})
const {mutateAsync} = useMutation<SimpleDetailResponse, AxiosError, UpdatePreferencesData>(
@ -101,6 +103,7 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
imageProxyFormat: user.preferences.aliasImageProxyFormat,
proxyUserAgent: user.preferences.aliasProxyUserAgent,
expandUrlShorteners: user.preferences.aliasExpandUrlShorteners,
rejectOnPrivacyLeak: user.preferences.aliasRejectOnPrivacyLeak,
},
onSubmit: async (values, {setErrors}) => {
try {
@ -111,6 +114,7 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
aliasImageProxyFormat: values.imageProxyFormat,
aliasProxyUserAgent: values.proxyUserAgent,
aliasExpandUrlShorteners: values.expandUrlShorteners,
aliasRejectOnPrivacyLeak: values.rejectOnPrivacyLeak,
})
} catch (error) {
setErrors(parseFastAPIError(error as AxiosError))
@ -349,6 +353,34 @@ export default function SettingsAliasPreferencesRoute(): ReactElement {
</Alert>
</FormGroup>
</Grid>
<Grid item xs={12}>
<FormGroup>
<FormControlLabel
disabled={formik.isSubmitting}
control={
<Checkbox
name="rejectOnPrivacyLeak"
id="rejectOnPrivacyLeak"
checked={formik.values.rejectOnPrivacyLeak}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
}
labelPlacement="start"
label={t("settings.fields.rejectOnPrivacyLeak.label")}
/>
<FormHelperText
error={Boolean(
formik.touched.rejectOnPrivacyLeak &&
formik.errors.rejectOnPrivacyLeak,
)}
>
{(formik.touched.rejectOnPrivacyLeak &&
formik.errors.rejectOnPrivacyLeak) ||
t("settings.fields.rejectOnPrivacyLeak.helperText")}
</FormHelperText>
</FormGroup>
</Grid>
</Grid>
<LoadingButton
loading={formik.isSubmitting}

View File

@ -53,6 +53,7 @@ export interface ServerUser {
aliasImageProxyFormat: ImageProxyFormatType
aliasProxyUserAgent: ProxyUserAgentType
aliasExpandUrlShorteners: boolean
aliasRejectOnPrivacyLeak: boolean
}
}
@ -102,6 +103,7 @@ export interface Alias {
prefImageProxyFormat: ImageProxyFormatType | null
prefProxyUserAgent: ProxyUserAgentType | null
prefExpandUrlShorteners: boolean | null
prefRejectOnPrivacyLeak: boolean | null
}
export interface ReservedAlias {