ux: admin/options: warn admin about the risk of kicking yourself out
Massimo Melina committed
Jan 30, 2025 at 11:17 UTC
98e44373646eeba0633a23f42fa106b0c0b24709
2 files changed
+9
-5
admin/src/OptionsPage.ts
+5
-2
@@ -11,7 +11,9 @@ import {
11
MAX_TILE_SIZE, REPO_URL, SORT_BY_OPTIONS, THEME_OPTIONS, CFG, IMAGE_FILEMASK,
12
Dict, md, wait, with_, try_, ipForUrl,
13
} from './misc'
14
-import { iconTooltip, InLink, LinkBtn, propsForModifiedValues, wikiLink, useBreakpoint, NetmaskField, WildcardsSupported } from './mui'
14
+import {
15
+ iconTooltip, InLink, LinkBtn, propsForModifiedValues, wikiLink, useBreakpoint, NetmaskField, WildcardsSupported, Flex
16
+} from './mui'
17
import { Form, BoolField, NumberField, SelectField, FieldProps, Field, StringField } from '@hfs/mui-grid-form';
18
import { ArrayField } from './ArrayField'
19
import FileField from './FileField'
@@ -167,7 +169,8 @@ export default function OptionsPage() {
169
fields: [
170
{ k: 'ip', label: "Blocked IP", sm: 12, required: true, wrap: true, $width: 2,
171
$column: { mergeRender: { comment: {}, expire: {} } },
170
- helperText: h(WildcardsSupported) },
172
+ helperText: h(Flex, { component: 'span' }, h(WildcardsSupported), "Be careful to not kick yourself out, by blocking also your IP."),
173
+ },
174
{ k: 'expire', $type: 'dateTime', minDate: new Date(), sm: 6, $hideUnder: 'sm',
175
helperText: "Leave empty for no expiration" },
176
{
admin/src/mui.ts
+4
-3
@@ -5,7 +5,7 @@ import { PauseCircle, PlayCircle, Refresh, SvgIconComponent } from '@mui/icons-m
5
import { SxProps } from '@mui/system'
6
import {
7
createElement as h, forwardRef, Fragment, ReactElement, ReactNode, useCallback, useEffect, useRef,
8
- ForwardedRef, useState, useMemo, isValidElement
8
+ ForwardedRef, useState, useMemo, isValidElement, ElementType
9
} from 'react'
10
import { Box, BoxProps, Breakpoint, ButtonProps, CircularProgress, IconButton, IconButtonProps, Link, LinkProps,
11
Tooltip, TooltipProps, useMediaQuery } from '@mui/material'
@@ -74,8 +74,8 @@ export function IconProgress({ icon, progress, offset, title, sx }: IconProgress
74
)
75
}
76
77
-type FlexProps = SxProps & { vert?: boolean, center?: boolean, children?: ReactNode, props?: BoxProps }
78
-export function Flex({ vert=false, center=false, children=null, props={}, ...rest }: FlexProps) {
77
+type FlexProps = SxProps & { vert?: boolean, center?: boolean, children?: ReactNode, props?: BoxProps, component?: ElementType }
78
+export function Flex({ vert=false, center=false, children=null, props={}, component, ...rest }: FlexProps) {
79
return h(Box, {
80
sx: {
81
display: 'flex',
@@ -85,6 +85,7 @@ export function Flex({ vert=false, center=false, children=null, props={}, ...res
85
...center && { justifyContent: 'center' },
86
...rest,
87
},
88
+ component,
89
...props
90
}, children)
91
}