mirror of https://github.com/jetkvm/kvm.git
Be explicit about minimum and maximum delay
Use range correctly in the UI element and error messaging.
This commit is contained in:
parent
05057cb6fa
commit
49b9a35951
|
|
@ -19,6 +19,8 @@ import { TextAreaWithLabel } from "@components/TextArea";
|
||||||
// uint32 max value / 4
|
// uint32 max value / 4
|
||||||
const pasteMaxLength = 1073741824;
|
const pasteMaxLength = 1073741824;
|
||||||
const defaultDelay = 20;
|
const defaultDelay = 20;
|
||||||
|
const minimumDelay = 10;
|
||||||
|
const maximumDelay = 65534;
|
||||||
|
|
||||||
export default function PasteModal() {
|
export default function PasteModal() {
|
||||||
const TextAreaRef = useRef<HTMLTextAreaElement>(null);
|
const TextAreaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
@ -31,7 +33,7 @@ export default function PasteModal() {
|
||||||
const [invalidChars, setInvalidChars] = useState<string[]>([]);
|
const [invalidChars, setInvalidChars] = useState<string[]>([]);
|
||||||
const [delayValue, setDelayValue] = useState(defaultDelay);
|
const [delayValue, setDelayValue] = useState(defaultDelay);
|
||||||
const delay = useMemo(() => {
|
const delay = useMemo(() => {
|
||||||
if (delayValue < 0 || delayValue > 65534) {
|
if (delayValue < minimumDelay || delayValue > maximumDelay) {
|
||||||
return defaultDelay;
|
return defaultDelay;
|
||||||
}
|
}
|
||||||
return delayValue;
|
return delayValue;
|
||||||
|
|
@ -189,18 +191,18 @@ export default function PasteModal() {
|
||||||
type="number"
|
type="number"
|
||||||
label={m.paste_modal_delay_between_keys()}
|
label={m.paste_modal_delay_between_keys()}
|
||||||
placeholder={m.paste_modal_delay_between_keys()}
|
placeholder={m.paste_modal_delay_between_keys()}
|
||||||
min={50}
|
min={minimumDelay}
|
||||||
max={65534}
|
max={maximumDelay}
|
||||||
value={delayValue}
|
value={delayValue}
|
||||||
onChange={e => {
|
onChange={e => {
|
||||||
setDelayValue(parseInt(e.target.value, 10));
|
setDelayValue(parseInt(e.target.value, 10));
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{(delayValue < defaultDelay || delayValue > 65534) && (
|
{(delayValue < minimumDelay || delayValue > maximumDelay) && (
|
||||||
<div className="mt-2 flex items-center gap-x-2">
|
<div className="mt-2 flex items-center gap-x-2">
|
||||||
<ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" />
|
<ExclamationCircleIcon className="h-4 w-4 text-red-500 dark:text-red-400" />
|
||||||
<span className="text-xs text-red-500 dark:text-red-400">
|
<span className="text-xs text-red-500 dark:text-red-400">
|
||||||
{m.paste_modal_delay_out_of_range({ min: 50, max: 65534 })}
|
{m.paste_modal_delay_out_of_range({ min: minimumDelay, max: maximumDelay })}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue