[FEATURE] Live Modifications, Host Safety, Minor Tweaks (#19)

Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/19

src/components/server-options/ExtraPortsOption.jsx

@@ -3,7 +3,8 @@ import TextField from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
 import Chip from "@mui/material/Chip";
 
-const validatePort = (p) => p !== "25565" && p !== "25575" && p.length < 6;
+const validatePort = (p) =>
+  p !== "25565" && p !== "25575" && p.length < 6 && parseInt(p) < 60_000;
 
 export default function ExtraPortsOption(props) {
   const { extraPorts: initExtraPorts } = props;
@@ -30,7 +31,14 @@ export default function ExtraPortsOption(props) {
       value={extraPorts}
       onChange={portChange}
       freeSolo
-      renderInput={(p) => <TextField {...p} label="Extra Ports" />}
+      renderInput={(p) => (
+        <TextField
+          {...p}
+          label="Extra Ports"
+          helperText="Remember to press enter to add the port!"
+          FormHelperTextProps={{ sx: { ml: 0 } }}
+        />
+      )}
       renderTags={(value, getTagProps) =>
         value.map((option, index) => {
           const defaultChipProps = getTagProps({ index });

src/components/server-options/HostOption.jsx

@@ -1,15 +1,21 @@
 import TextField from "@mui/material/TextField";
 export default function HostOption(props) {
-  const { value, onChange } = props;
+  const { value, onChange, disabled } = props;
+
+  function onTextChange(e) {
+    e.target.value = e.target.value.toLowerCase();
+    onChange(e);
+  }
 
   return (
     <TextField
       label="Host"
       value={value ?? ""}
-      onChange={onChange}
+      onChange={onTextChange}
       helperText="Example: host.mydomain.com"
       FormHelperTextProps={{ sx: { ml: 0 } }}
       required
+      disabled={disabled}
     />
   );
 }

src/pages/EditCoreOptions.jsx

@@ -73,7 +73,11 @@ export default function EditCoreOptions(props) {
     >
       <FormControl fullWidth sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}>
         <NameOption value={spec.name} onChange={coreUpdate("name")} />
-        <HostOption value={spec.host} onChange={coreUpdate("host")} />
+        <HostOption
+          value={spec.host}
+          onChange={coreUpdate("host")}
+          disabled={true}
+        />
         <VersionOption value={spec.version} onChange={coreUpdate("version")} />
         <ServerTypeOption
           value={spec.serverType}