fix: admin/config: port fields didn't remember custom port number

Massimo Melina committed Feb 12, 2022 at 19:31 UTC 5cfe7e7293cc4749fa0c096b47c806ef9f311cbe
2 files changed +28 -24
admin/src/ConfigPage.ts
+28 -7
@@ -1,11 +1,11 @@
1 -import { Button } from '@mui/material';
2 -import { createElement as h, isValidElement } from 'react';
1 +import { Box, Button } from '@mui/material';
2 +import { createElement as h, isValidElement, useRef } from 'react';
3 import { apiCall, useApiComp } from './api'
4 import { state, useSnapState } from './state'
5 import { Refresh } from '@mui/icons-material'
6 import { Dict } from './misc'
7 import { subscribeKey } from 'valtio/utils'
8 -import { Form, ServerPort, BoolField, NumberField, StringField, SelectField } from './Form';
8 +import { Form, BoolField, NumberField, StringField, SelectField, FieldProps, Field } from './Form';
9 import StringStringField from './StringStringField'
10 import { alertDialog } from './dialog'
11
@@ -43,6 +43,10 @@ export default function ConfigPage() {
43 return { md: shortField ? 3 : 6 }
44 },
45 fields: [
46 + { k: 'port', comp: ServerPort, label:'HTTP port' },
47 + { k: 'https_port', comp: ServerPort, label: 'HTTPS port' },
48 + config.https_port >= 0 && { k: 'cert', comp: StringField, label: 'HTTPS certificate file' },
49 + config.https_port >= 0 && { k: 'private_key', comp: StringField, label: 'HTTPS private key file' },
50 { k: 'admin_port', comp: ServerPort, label: 'Admin port' },
51 { k: 'admin_network', comp: SelectField, label: 'Admin access',
52 options:[
@@ -50,10 +54,6 @@ export default function ConfigPage() {
54 { value: '0.0.0.0', label: 'any network' }
55 ]
56 },
53 - { k: 'port', comp: ServerPort, label:'HTTP port' },
54 - { k: 'https_port', comp: ServerPort, label: 'HTTPS port' },
55 - config.https_port >= 0 && { k: 'cert', comp: StringField, label: 'HTTPS certificate file' },
56 - config.https_port >= 0 && { k: 'private_key', comp: StringField, label: 'HTTPS private key file' },
57 { k: 'max_kbps', comp: NumberField, label: 'Max KB/s' },
58 { k: 'max_kbps_per_ip', comp: NumberField, label: 'Max KB/s per-ip' },
59 { k: 'log', comp: StringField, label: 'Main log file' },
@@ -86,3 +86,24 @@ function recalculateChanges() {
86 state.changes = changes
87 console.debug('changes', Object.keys(changes))
88 }
89 +
90 +function ServerPort({ label, value, onChange }: FieldProps<number | null>) {
91 + const lastCustom = useRef(1)
92 + if (value! > 0)
93 + lastCustom.current = value!
94 + const selectValue = Number(value! > 0 ? lastCustom.current : value) || 0
95 + return h(Box, { display:'flex' },
96 + h(SelectField as Field<number>, {
97 + sx: { flexGrow: 1 },
98 + label,
99 + value: selectValue,
100 + options: [
101 + { label: 'off', value: -1 },
102 + { label: 'automatic port', value: 0 },
103 + { label: 'choose port number', value: lastCustom.current },
104 + ],
105 + onChange,
106 + }),
107 + value! > 0 && h(NumberField, { label: 'Number', fullWidth: false, value, onChange }),
108 + )
109 +}
admin/src/Form.ts
-17
@@ -199,20 +199,3 @@ export function RadioField<T>({ label, options, value, onChange }: FieldProps<T>
199 )
200 )
201 }
202 -
203 -export function ServerPort({ label, value, onChange }: FieldProps<number | null>) {
204 - return h(Box, { display:'flex' },
205 - h(SelectField as Field<number>, {
206 - sx: { flexGrow: 1 },
207 - label,
208 - value: Math.min(1, value || 0),
209 - options: [
210 - { label: 'off', value: -1 },
211 - { label: 'automatic port', value: 0 },
212 - { label: 'choose port', value: 1 },
213 - ],
214 - onChange,
215 - }),
216 - value! > 0 && h(NumberField, { fullWidth: false, value, onChange }),
217 - )
218 -}