Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-21 08:40:32 +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 {useFormik} from "formik"
import {TbCursorText} from "react-icons/tb" import {TbCursorText} from "react-icons/tb"
import {useTranslation} from "react-i18next" import {useTranslation} from "react-i18next"
import {MdCheck, MdOutlineChangeCircle, MdTextFormat} from "react-icons/md"
import {BsImage} from "react-icons/bs"
import { import {
Checkbox, Checkbox,
FormControlLabel, FormControlLabel,
FormGroup, FormGroup,
FormHelperText, FormHelperText,
Grid,
InputAdornment, InputAdornment,
TextField, TextField,
Typography,
} from "@mui/material" } from "@mui/material"
import {LoadingButton} from "@mui/lab"
import {AdminSettings} from "~/server-types" import {AdminSettings} from "~/server-types"
import {SimpleForm, StringPoolField, createPool} from "~/components" import {StringPoolField, createPool} from "~/components"
import {MdOutlineChangeCircle, MdTextFormat} from "react-icons/md"
import {BsImage} from "react-icons/bs"
export interface SettingsFormProps { export interface SettingsFormProps {
settings: AdminSettings settings: AdminSettings
@ -79,17 +82,38 @@ export default function SettingsForm({settings}: SettingsFormProps) {
return ( return (
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
<SimpleForm <Grid
isSubmitting={formik.isSubmitting} container
title={t("routes.AdminRoute.settings.title")} spacing={4}
description={t("routes.AdminRoute.settings.description")} paddingX={2}
continueActionLabel={t("general.saveLabel")} 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 <TextField
key="random_email_id_min_length" key="random_email_id_min_length"
fullWidth fullWidth
label={t("routes.AdminRoute.forms.settings.randomEmailIdMinLength.label")} label={t(
"routes.AdminRoute.forms.settings.randomEmailIdMinLength.label",
)}
name="randomEmailIdMinLength" name="randomEmailIdMinLength"
value={formik.values.randomEmailIdMinLength} value={formik.values.randomEmailIdMinLength}
onChange={formik.handleChange} onChange={formik.handleChange}
@ -100,7 +124,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
helperText={ helperText={
(formik.touched.randomEmailIdMinLength && (formik.touched.randomEmailIdMinLength &&
formik.errors.randomEmailIdMinLength) || formik.errors.randomEmailIdMinLength) ||
t("routes.AdminRoute.forms.settings.randomEmailIdMinLength.description") t(
"routes.AdminRoute.forms.settings.randomEmailIdMinLength.description",
)
} }
type="number" type="number"
disabled={formik.isSubmitting} disabled={formik.isSubmitting}
@ -112,14 +138,18 @@ export default function SettingsForm({settings}: SettingsFormProps) {
</InputAdornment> </InputAdornment>
), ),
}} }}
/>, />
</Grid>
<Grid item md={6}>
<StringPoolField <StringPoolField
fullWidth fullWidth
allowCustom allowCustom
key="random_email_id_chars" key="random_email_id_chars"
pools={DEFAULT_POOLS} pools={DEFAULT_POOLS}
id="random_email_id_chars" id="random_email_id_chars"
label={t("routes.AdminRoute.forms.settings.randomEmailIdChars.label")} label={t(
"routes.AdminRoute.forms.settings.randomEmailIdChars.label",
)}
name="randomEmailIdChars" name="randomEmailIdChars"
value={formik.values.randomEmailIdChars} value={formik.values.randomEmailIdChars}
onChange={formik.handleChange} onChange={formik.handleChange}
@ -140,7 +170,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
<MdTextFormat /> <MdTextFormat />
</InputAdornment> </InputAdornment>
} }
/>, />
</Grid>
<Grid item>
<TextField <TextField
key="random_email_length_increase_on_percentage" key="random_email_length_increase_on_percentage"
fullWidth fullWidth
@ -171,11 +203,15 @@ export default function SettingsForm({settings}: SettingsFormProps) {
</InputAdornment> </InputAdornment>
), ),
}} }}
/>, />
</Grid>
<Grid item md={6}>
<TextField <TextField
key="custom_email_suffix_length" key="custom_email_suffix_length"
fullWidth fullWidth
label={t("routes.AdminRoute.forms.settings.customEmailSuffixLength.label")} label={t(
"routes.AdminRoute.forms.settings.customEmailSuffixLength.label",
)}
name="customEmailSuffixLength" name="customEmailSuffixLength"
value={formik.values.customEmailSuffixLength} value={formik.values.customEmailSuffixLength}
onChange={formik.handleChange} onChange={formik.handleChange}
@ -200,14 +236,18 @@ export default function SettingsForm({settings}: SettingsFormProps) {
</InputAdornment> </InputAdornment>
), ),
}} }}
/>, />
</Grid>
<Grid item md={6}>
<StringPoolField <StringPoolField
key="custom_email_suffix_chars" key="custom_email_suffix_chars"
allowCustom allowCustom
fullWidth fullWidth
pools={DEFAULT_POOLS} pools={DEFAULT_POOLS}
id="custom_email_suffix_chars" id="custom_email_suffix_chars"
label={t("routes.AdminRoute.forms.settings.customEmailSuffixChars.label")} label={t(
"routes.AdminRoute.forms.settings.customEmailSuffixChars.label",
)}
name="customEmailSuffixChars" name="customEmailSuffixChars"
value={formik.values.customEmailSuffixChars} value={formik.values.customEmailSuffixChars}
onChange={formik.handleChange} onChange={formik.handleChange}
@ -223,14 +263,14 @@ export default function SettingsForm({settings}: SettingsFormProps) {
) as string) ) as string)
} }
disabled={formik.isSubmitting} disabled={formik.isSubmitting}
InputProps={{ startAdornment={
startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<MdTextFormat /> <MdTextFormat />
</InputAdornment> </InputAdornment>
), }
}} />
/>, </Grid>
<Grid item>
<TextField <TextField
key="image_proxy_storage_life_time_in_hours" key="image_proxy_storage_life_time_in_hours"
fullWidth fullWidth
@ -261,28 +301,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
</InputAdornment> </InputAdornment>
), ),
}} }}
/>,
<FormGroup key="enable_image_proxy">
<FormControlLabel
control={
<Checkbox
checked={formik.values.enableImageProxy}
onChange={formik.handleChange}
name="enableImageProxy"
/> />
} </Grid>
label={t("routes.AdminRoute.forms.settings.enableImageProxy.label")} <Grid item>
/>
<FormHelperText
error={
formik.touched.enableImageProxy &&
Boolean(formik.errors.enableImageProxy)
}
>
{(formik.touched.enableImageProxy && formik.errors.enableImageProxy) ||
t("routes.AdminRoute.forms.settings.enableImageProxy.description")}
</FormHelperText>
</FormGroup>,
<FormGroup key="user_email_enable_disposable_emails"> <FormGroup key="user_email_enable_disposable_emails">
<FormControlLabel <FormControlLabel
control={ control={
@ -308,7 +329,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
"routes.AdminRoute.forms.settings.userEmailEnableDisposableEmails.description", "routes.AdminRoute.forms.settings.userEmailEnableDisposableEmails.description",
)} )}
</FormHelperText> </FormHelperText>
</FormGroup>, </FormGroup>
</Grid>
<Grid item>
<FormGroup key="user_email_enable_other_relays"> <FormGroup key="user_email_enable_other_relays">
<FormControlLabel <FormControlLabel
control={ control={
@ -334,7 +357,37 @@ export default function SettingsForm({settings}: SettingsFormProps) {
"routes.AdminRoute.forms.settings.userEmailEnableOtherRelays.description", "routes.AdminRoute.forms.settings.userEmailEnableOtherRelays.description",
)} )}
</FormHelperText> </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"> <FormGroup key="allow_statistics">
<FormControlLabel <FormControlLabel
control={ control={
@ -344,7 +397,9 @@ export default function SettingsForm({settings}: SettingsFormProps) {
name="allowStatistics" name="allowStatistics"
/> />
} }
label={t("routes.AdminRoute.forms.settings.allowStatistics.label")} label={t(
"routes.AdminRoute.forms.settings.allowStatistics.label",
)}
/> />
<FormHelperText <FormHelperText
error={ error={
@ -352,12 +407,31 @@ export default function SettingsForm({settings}: SettingsFormProps) {
Boolean(formik.errors.allowStatistics) Boolean(formik.errors.allowStatistics)
} }
> >
{(formik.touched.allowStatistics && formik.errors.allowStatistics) || {(formik.touched.allowStatistics &&
t("routes.AdminRoute.forms.settings.allowStatistics.description")} formik.errors.allowStatistics) ||
t(
"routes.AdminRoute.forms.settings.allowStatistics.description",
)}
</FormHelperText> </FormHelperText>
</FormGroup>, </FormGroup>
]} </Grid>
</SimpleForm> </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> </form>
) )
} }