Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-21 00:30:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Improve SettingsForm UI

Browse Source
This commit is contained in:
Myzel394 2023-02-10 20:35:53 +01:00
parent 6eac166304
commit c1edcd290d
1 changed files with 352 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/route-widgets/GlobalSettingsRoute/SettingsForm.tsx
View File

@ -2,20 +2,23 @@ import * as yup from "yup"
import {useFormik} from "formik"
import {TbCursorText} from "react-icons/tb"
import {useTranslation} from "react-i18next"
import {MdCheck, MdOutlineChangeCircle, MdTextFormat} from "react-icons/md"
import {BsImage} from "react-icons/bs"
import {
Checkbox,
FormControlLabel,
FormGroup,
FormHelperText,
Grid,
InputAdornment,
TextField,
Typography,
} from "@mui/material"
import {LoadingButton} from "@mui/lab"
import {AdminSettings} from "~/server-types"
import {SimpleForm, StringPoolField, createPool} from "~/components"
import {MdOutlineChangeCircle, MdTextFormat} from "react-icons/md"
import {BsImage} from "react-icons/bs"
import {StringPoolField, createPool} from "~/components"
export interface SettingsFormProps {
settings: AdminSettings
@ -79,17 +82,38 @@ export default function SettingsForm({settings}: SettingsFormProps) {
return (
<form onSubmit={formik.handleSubmit}>
<SimpleForm
isSubmitting={formik.isSubmitting}
title={t("routes.AdminRoute.settings.title")}
description={t("routes.AdminRoute.settings.description")}
continueActionLabel={t("general.saveLabel")}
<Grid
container
spacing={4}
paddingX={2}
paddingY={4}
direction="column"
alignItems="center"
justifyContent="center"
>
{[
<Grid item>
<Grid container spacing={2} direction="column">
<Grid item>
<Typography variant="h4" component="h1" align="center">
{t("routes.AdminRoute.settings.title")}
</Typography>
</Grid>
<Grid item>
<Typography variant="subtitle1" component="p">
{t("routes.AdminRoute.settings.description")}
</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container spacing={3} direction="row" alignItems="start">
<Grid item md={6}>
<TextField
key="random_email_id_min_length"
fullWidth
label={t("routes.AdminRoute.forms.settings.randomEmailIdMinLength.label")}
label={t(
"routes.AdminRoute.forms.settings.randomEmailIdMinLength.label",
)}
name="randomEmailIdMinLength"
value={formik.values.randomEmailIdMinLength}
onChange={formik.handleChange}
@ -100,7 +124,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
helperText={
(formik.touched.randomEmailIdMinLength &&
formik.errors.randomEmailIdMinLength) ||
t("routes.AdminRoute.forms.settings.randomEmailIdMinLength.description")
t(
"routes.AdminRoute.forms.settings.randomEmailIdMinLength.description",
)
}
type="number"
disabled={formik.isSubmitting}
@ -112,14 +138,18 @@ export default function SettingsForm({settings}: SettingsFormProps) {
</InputAdornment>
),
}}
/>,
/>
</Grid>
<Grid item md={6}>
<StringPoolField
fullWidth
allowCustom
key="random_email_id_chars"
pools={DEFAULT_POOLS}
id="random_email_id_chars"
label={t("routes.AdminRoute.forms.settings.randomEmailIdChars.label")}
label={t(
"routes.AdminRoute.forms.settings.randomEmailIdChars.label",
)}
name="randomEmailIdChars"
value={formik.values.randomEmailIdChars}
onChange={formik.handleChange}
@ -140,7 +170,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
<MdTextFormat />
</InputAdornment>
}
/>,
/>
</Grid>
<Grid item>
<TextField
key="random_email_length_increase_on_percentage"
fullWidth
@ -171,11 +203,15 @@ export default function SettingsForm({settings}: SettingsFormProps) {
</InputAdornment>
),
}}
/>,
/>
</Grid>
<Grid item md={6}>
<TextField
key="custom_email_suffix_length"
fullWidth
label={t("routes.AdminRoute.forms.settings.customEmailSuffixLength.label")}
label={t(
"routes.AdminRoute.forms.settings.customEmailSuffixLength.label",
)}
name="customEmailSuffixLength"
value={formik.values.customEmailSuffixLength}
onChange={formik.handleChange}
@ -200,14 +236,18 @@ export default function SettingsForm({settings}: SettingsFormProps) {
</InputAdornment>
),
}}
/>,
/>
</Grid>
<Grid item md={6}>
<StringPoolField
key="custom_email_suffix_chars"
allowCustom
fullWidth
pools={DEFAULT_POOLS}
id="custom_email_suffix_chars"
label={t("routes.AdminRoute.forms.settings.customEmailSuffixChars.label")}
label={t(
"routes.AdminRoute.forms.settings.customEmailSuffixChars.label",
)}
name="customEmailSuffixChars"
value={formik.values.customEmailSuffixChars}
onChange={formik.handleChange}
@ -223,14 +263,14 @@ export default function SettingsForm({settings}: SettingsFormProps) {
) as string)
}
disabled={formik.isSubmitting}
InputProps={{
startAdornment: (
startAdornment={
<InputAdornment position="start">
<MdTextFormat />
</InputAdornment>
),
}}
/>,
}
/>
</Grid>
<Grid item>
<TextField
key="image_proxy_storage_life_time_in_hours"
fullWidth
@ -261,28 +301,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
</InputAdornment>
),
}}
/>,
<FormGroup key="enable_image_proxy">
<FormControlLabel
control={
<Checkbox
checked={formik.values.enableImageProxy}
onChange={formik.handleChange}
name="enableImageProxy"
/>
}
label={t("routes.AdminRoute.forms.settings.enableImageProxy.label")}
/>
<FormHelperText
error={
formik.touched.enableImageProxy &&
Boolean(formik.errors.enableImageProxy)
}
>
{(formik.touched.enableImageProxy && formik.errors.enableImageProxy) ||
t("routes.AdminRoute.forms.settings.enableImageProxy.description")}
</FormHelperText>
</FormGroup>,
</Grid>
<Grid item>
<FormGroup key="user_email_enable_disposable_emails">
<FormControlLabel
control={
@ -308,7 +329,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
"routes.AdminRoute.forms.settings.userEmailEnableDisposableEmails.description",
)}
</FormHelperText>
</FormGroup>,
</FormGroup>
</Grid>
<Grid item>
<FormGroup key="user_email_enable_other_relays">
<FormControlLabel
control={
@ -334,7 +357,37 @@ export default function SettingsForm({settings}: SettingsFormProps) {
"routes.AdminRoute.forms.settings.userEmailEnableOtherRelays.description",
)}
</FormHelperText>
</FormGroup>,
</FormGroup>
</Grid>
<Grid item>
<FormGroup key="enable_image_proxy">
<FormControlLabel
control={
<Checkbox
checked={formik.values.enableImageProxy}
onChange={formik.handleChange}
name="enableImageProxy"
/>
}
label={t(
"routes.AdminRoute.forms.settings.enableImageProxy.label",
)}
/>
<FormHelperText
error={
formik.touched.enableImageProxy &&
Boolean(formik.errors.enableImageProxy)
}
>
{(formik.touched.enableImageProxy &&
formik.errors.enableImageProxy) ||
t(
"routes.AdminRoute.forms.settings.enableImageProxy.description",
)}
</FormHelperText>
</FormGroup>
</Grid>
<Grid item>
<FormGroup key="allow_statistics">
<FormControlLabel
control={
@ -344,7 +397,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
name="allowStatistics"
/>
}
label={t("routes.AdminRoute.forms.settings.allowStatistics.label")}
label={t(
"routes.AdminRoute.forms.settings.allowStatistics.label",
)}
/>
<FormHelperText
error={
@ -352,12 +407,31 @@ export default function SettingsForm({settings}: SettingsFormProps) {
Boolean(formik.errors.allowStatistics)
}
>
{(formik.touched.allowStatistics && formik.errors.allowStatistics) ||
t("routes.AdminRoute.forms.settings.allowStatistics.description")}
{(formik.touched.allowStatistics &&
formik.errors.allowStatistics) ||
t(
"routes.AdminRoute.forms.settings.allowStatistics.description",
)}
</FormHelperText>
</FormGroup>,
]}
</SimpleForm>
</FormGroup>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid container justifyContent="center">
<Grid item>
<LoadingButton
loading={formik.isSubmitting}
variant="contained"
type="submit"
startIcon={<MdCheck />}
>
{t("general.saveLabel")}
</LoadingButton>
</Grid>
</Grid>
</Grid>
</Grid>
</form>
)
}