games/factorio-server-manager
games/factorio-server-manager
1
0
Fork 0
mirror of https://github.com/OpenFactorioServerManager/factorio-server-manager.git synced 2024-12-25 02:29:45 +02:00
Code Issues Releases Activity

fix breaking change from react form hooks

Browse Source
This commit is contained in:
jannaahs 2022-01-01 12:28:07 +01:00
parent 6de3872b2b
commit ca68e96cb1
17 changed files with 64 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/App/components/Checkbox.jsx
View File

@ -1,17 +1,15 @@
import React from "react";
const Checkbox = ({name, text, inputRef, checked}) => {
const Checkbox = ({text, register, checked}) => {
return (
<label className="block text-gray-500 font-bold">
<input
className="mr-2 leading-tight"
ref={inputRef}
name={name}
id={name}
{...register}
type="checkbox" defaultChecked={checked}/>
<span className="text-sm">{text}</span>
</label>
)
}
export default Checkbox;
export default Checkbox;

9
ui/App/components/Input.jsx
View File

@ -1,8 +1,7 @@
import React from "react";
const Input = ({
name,
inputRef,
register,
placeholder = null,
type = "text",
defaultValue = null,
@ -16,9 +15,7 @@ const Input = ({
<input
className="shadow appearance-none border w-full py-2 px-3 text-black"
placeholder={placeholder}
ref={inputRef}
name={name}
id={name}
{...register}
type={type}
onKeyDown={onKeyDown}
autoComplete={hasAutoComplete ? "on" : "off"}
@ -30,4 +27,4 @@ const Input = ({
)
}
export default Input;
export default Input;

6
ui/App/components/InputPassword.jsx
View File

@ -3,7 +3,7 @@ import React, {useState} from "react";
import {faEye, faEyeSlash} from "@fortawesome/free-solid-svg-icons";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
const InputPassword = ({name, inputRef, defaultValue}) => {
const InputPassword = ({register, defaultValue}) => {
const [type, setType] = useState("password");
@ -16,7 +16,7 @@ const InputPassword = ({name, inputRef, defaultValue}) => {
return (
<div className="flex">
<Input type={type} name={name} defaultValue={defaultValue} inputRef={inputRef} placeholder="*************"/>
<Input type={type} defaultValue={defaultValue} {...register} placeholder="*************"/>
<div
className="accentuated cursor-pointer bg-gray-light flex items-center px-2 text-black"
onClick={() => setType(type === "password" ? "text" : "password")}
@ -26,4 +26,4 @@ const InputPassword = ({name, inputRef, defaultValue}) => {
</div>
)
}
export default InputPassword;
export default InputPassword;

7
ui/App/components/Select.jsx
View File

@ -1,6 +1,6 @@
import React, {useState} from "react";
const Select = ({name, inputRef, options, className = "", defaultValue = ""}) => {
const Select = ({register, options, className = "", defaultValue = ""}) => {
const [value, setValue] = useState(defaultValue);
@ -9,8 +9,7 @@ const Select = ({name, inputRef, options, className = "", defaultValue = ""}) =>
<select
className="shadow appearance-none border w-full py-2 px-3 text-black"
name={name}
ref={inputRef}
id={name}
{...register}
value={value}
onChange={optionElement => setValue(optionElement.target.value)}
>
@ -28,4 +27,4 @@ const Select = ({name, inputRef, options, className = "", defaultValue = ""}) =>
)
}
export default Select;
export default Select;

6
ui/App/views/Console.jsx
View File

@ -1,7 +1,6 @@
import Panel from "../components/Panel";
import React, {useEffect, useRef, useState} from "react";
import socket from "../../api/socket";
import Input from "../components/Input";
const Console = ({serverStatus}) => {
@ -33,8 +32,9 @@ const Console = ({serverStatus}) => {
<ul>
{logs?.map((log, i) => (<li key={i}>{log}</li>))}
</ul>
<Input type="text"
inputRef={consoleInput}
<input type="text"
className="shadow appearance-none border w-full py-2 px-3 text-black"
ref={consoleInput}
onKeyDown={e => {
if (e.key === "Enter" && socket) {
socket.emit("command send", consoleInput.current.value);

13
ui/App/views/Controls.jsx
View File

@ -16,7 +16,7 @@ const Controls = ({serverStatus}) => {
const [isStarting, setIsStarting] = useState(false);
const [isKilling, setIsKilling] = useState(false);
const { handleSubmit, register, errors } = useForm();
const { handleSubmit, register, formState: {errors} } = useForm();
const startServer = async (data) => {
if(saves.length === 1 && saves[0].name === "Load Latest") {
@ -79,20 +79,18 @@ const Controls = ({serverStatus}) => {
<div className="lg:w-1/5 mb-2 mr-0 lg:mr-4">
<div className="font-bold">IP</div>
<Input
name="ip"
defaultValue={"0.0.0.0"}
inputRef={register({required: true, pattern: '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$'})}
register={register('ip',{required: true, pattern: '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$'})}
/>
<Error error={errors.ip} message="IP is required and must be valid."/>
</div>
<div className="lg:w-1/5 mb-2 mr-0 lg:mr-4">
<div className="font-bold">Port</div>
<Input
name="port"
type="number"
min={1}
defaultValue={"34197"}
inputRef={register({required: true})}
register={register('port',{required: true})}
/>
<Error error={errors.port} message="Port is required"/>
</div>
@ -104,8 +102,7 @@ const Controls = ({serverStatus}) => {
<div className="font-bold">Save</div>
<div className="relative">
<Select
name="save"
inputRef={register({required: true})}
register={register('save',{required: true})}
defaultValue="Load Latest"
options={saves.map(save => new Object({
value: save.name,
@ -134,4 +131,4 @@ const Controls = ({serverStatus}) => {
)
};
export default Controls;
export default Controls;

9
ui/App/views/Login.jsx
View File

@ -10,7 +10,7 @@ import {Flash} from "../components/Flash";
import Error from "../components/Error";
const Login = ({handleLogin}) => {
const {register, handleSubmit, errors} = useForm();
const {register, handleSubmit, formState: { errors }} = useForm();
const history = useHistory();
const location = useLocation();
@ -47,14 +47,13 @@ const Login = ({handleLogin}) => {
<form onSubmit={handleSubmit(onSubmit)}>
<div className="mb-4">
<Label text="Username" htmlFor="username"/>
<Input inputRef={register({required: true})} name="username" placeholder="Username"/>
<Input register={register('username', {required: true})} placeholder="Username"/>
<Error error={errors.username} message="Username is required"/>
</div>
<div className="mb-6">
<Label text="Password" htmlFor="password"/>
<Input
inputRef={register({required: true})}
name="password"
register={register('password',{required: true})}
type="password"
placeholder="******************"
/>
@ -71,4 +70,4 @@ const Login = ({handleLogin}) => {
);
};
export default Login;
export default Login;

4
ui/App/views/Mods/components/AddMod/components/AddModForm.jsx
View File

@ -103,7 +103,7 @@ const AddModForm = ({setIsFactorioAuthenticated, fuse, refetchInstalledMods}) =>
<div className="mb-4 relative" >
<Label text="Mod" htmlFor="mod"/>
{ typeof fuse !== "undefined"
? <Input inputRef={register({required: true})} hasAutoComplete={false} name="mod" onKeyDown={handleKeyDown}/>
? <Input register={register('mod',{required: true})} hasAutoComplete={false} onKeyDown={handleKeyDown}/>
: <div className="border border-gray-medium w-full py-2 px-3 text-white">
<FontAwesomeIcon icon={faSpinner} spin={true}/> Loading List of Mods from <LinkModPortal/>
</div>
@ -121,4 +121,4 @@ const AddModForm = ({setIsFactorioAuthenticated, fuse, refetchInstalledMods}) =>
)
}
export default AddModForm;
export default AddModForm;

6
ui/App/views/Mods/components/AddMod/components/FactorioLogin.jsx
View File

@ -22,11 +22,11 @@ const FactorioLogin = ({setIsFactorioAuthenticated}) => {
<div className="flex mb-4">
<div className="w-1/2 mr-2">
<Label text="Username" htmlFor="username"/>
<Input name="username" inputRef={register({required: true})}/>
<Input register={register('username',{required: true})}/>
</div>
<div className="w-1/2 ml-2">
<Label text="Password" htmlFor="password"/>
<Input name="password" type="password" inputRef={register({required: true})}/>
<Input type="password" register={register('password',{required: true})}/>
</div>
</div>
<Button isSubmit={true}>Login</Button>
@ -34,4 +34,4 @@ const FactorioLogin = ({setIsFactorioAuthenticated}) => {
)
}
export default FactorioLogin;
export default FactorioLogin;

4
ui/App/views/Mods/components/CreateModPack.jsx
View File

@ -31,7 +31,7 @@ const CreateModPack = ({onSuccess}) => {
<form onSubmit={handleSubmit(createModPack)}>
<div className="mb-4">
<Label text="Name" htmlFor="name"/>
<Input name="name" inputRef={register({required: true})}/>
<Input register={register('name',{required: true})}/>
</div>
<Button size="sm" isLoading={isCreating} isSubmit={true}>Create</Button>
</form>
@ -43,4 +43,4 @@ const CreateModPack = ({onSuccess}) => {
</>
}
export default CreateModPack;
export default CreateModPack;

5
ui/App/views/Mods/components/LoadMods.jsx
View File

@ -36,8 +36,7 @@ const LoadMods = ({refreshMods}) => {
<form onSubmit={handleSubmit(loadMods)}>
<Label text="Save" htmlFor="save"/>
<Select
name="save"
inputRef={register}
register={register('save')}
className="mb-4"
options={saves?.map(save => new Object({
name: save.name,
@ -49,4 +48,4 @@ const LoadMods = ({refreshMods}) => {
)
}
export default LoadMods;
export default LoadMods;

5
ui/App/views/Mods/components/UploadMod.jsx
View File

@ -29,8 +29,7 @@ const UploadMod = ({refetchInstalledMods}) => {
<input
className="absolute left-0 top-0 opacity-0 cursor-pointer w-full h-full"
onChange={e => setFileName(e.currentTarget.files[0].name)}
name="mod_file"
ref={register}
ref={register('mod_file')}
id="mod_file"
type="file"
/>
@ -41,4 +40,4 @@ const UploadMod = ({refetchInstalledMods}) => {
)
}
export default UploadMod;
export default UploadMod;

8
ui/App/views/Saves/components/CreateSaveForm.jsx
View File

@ -4,12 +4,10 @@ import React, {useState} from "react";
import saves from "../../../../api/resources/saves";
import Label from "../../../components/Label";
import Input from "../../../components/Input";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faSpinner} from "@fortawesome/free-solid-svg-icons";
import Error from "../../../components/Error";
const CreateSaveForm = ({onSuccess}) => {
const {register, handleSubmit, errors} = useForm();
const {register, handleSubmit, formState: {errors}} = useForm();
const [isLoading, setIsLoading] = useState(false);
const onSubmit = async (data, e) => {
@ -26,7 +24,7 @@ const CreateSaveForm = ({onSuccess}) => {
<form onSubmit={handleSubmit(onSubmit)}>
<div className="mb-6">
<Label text="Savefile Name" htmlFor="savefile"/>
<Input inputRef={register({required: true})} name="savefile"/>
<Input register={register('savefile', {required: true})}/>
<Error error={errors.savefile} message="Savefile Name is required"/>
</div>
<Button type="success" isLoading={isLoading} isSubmit={true}>Create Save</Button>
@ -34,4 +32,4 @@ const CreateSaveForm = ({onSuccess}) => {
)
}
export default CreateSaveForm;
export default CreateSaveForm;

9
ui/App/views/Saves/components/UploadSaveForm.jsx
View File

@ -6,7 +6,7 @@ import Error from "../../../components/Error";
const UploadSaveForm = ({onSuccess}) => {
const {register, handleSubmit, errors} = useForm();
const {register, handleSubmit, formState: {errors}} = useForm();
const [fileName, setFileName] = useState('Select File ...');
const onSubmit = (data, e) => {
@ -25,10 +25,9 @@ const UploadSaveForm = ({onSuccess}) => {
<div className="relative bg-white shadow text-black w-full">
<input
className="absolute left-0 top-0 opacity-0 cursor-pointer w-full h-full"
ref={register({required: true})}
register={register('savefile', {required: true})}
onChange={e => setFileName(e.currentTarget.files[0].name)}
name="savefile"
id="savefile" type="file"/>
type="file"/>
<div className="px-2 py-3">{fileName}</div>
</div>
<Error error={errors.savefile} message="Savefile is required"/>
@ -38,4 +37,4 @@ const UploadSaveForm = ({onSuccess}) => {
)
}
export default UploadSaveForm;
export default UploadSaveForm;

18
ui/App/views/ServerSettings.jsx
View File

@ -13,7 +13,7 @@ const ServerSettings = () => {
const [settings, setSettings] = useState();
const [numberInputs, setNumberInputs] = useState([]);
const {register, handleSubmit, errors, control} = useForm();
const {register, handleSubmit, formState: {errors}, control} = useForm();
const fetchSettings = async () => {
const res = await settingsResource.server.list();
@ -67,7 +67,7 @@ const ServerSettings = () => {
return (
<>
<Label htmlFor={name} text={label}/>
<Input type="number" name={name} inputRef={register} valueAsNumber="double" defaultValue={value} />
<Input type="number" register={register} valueAsNumber="double" defaultValue={value} />
</>
)
case "string":
@ -75,27 +75,27 @@ const ServerSettings = () => {
return (
<>
<Label htmlFor={name} text={label}/>
<InputPassword name={name} inputRef={register} defaultValue={value}/>
<InputPassword name={name} register={register} defaultValue={value}/>
</>
)
} else {
return (
<>
<Label htmlFor={name} text={label}/>
<Input name={name} inputRef={register} defaultValue={value}/>
<Input name={name} register={register} defaultValue={value}/>
</>
)
}
case "boolean":
return (
<Checkbox checked={value} text={label} inputRef={register} name={name}/>
<Checkbox checked={value} text={label} register={register} name={name}/>
)
case "object":
if (Array.isArray(value)) {
return (
<>
<Label htmlFor={name} text={label}/>
<Input name={name} inputRef={register} defaultValue={value}/>
<Input name={name} register={register} defaultValue={value}/>
</>
)
} else if (name.includes("visibility")) {
@ -104,7 +104,7 @@ const ServerSettings = () => {
<Label text="Visibility"/>
<div className="flex">
{Object.keys(value).map(key => <div className="mr-4" key={`visibility-${key}`}>
<Checkbox checked={value[key]} inputRef={register} text={key} name={`visibility[${key}]`}/>
<Checkbox checked={value[key]} register={register} text={key} name={`visibility[${key}]`}/>
</div>)}
</div>
</>
@ -115,7 +115,7 @@ const ServerSettings = () => {
return (
<>
<Label htmlFor={name} text={label}/>
<Input name={name} inputRef={register} defaultValue={value}/>
<Input name={name} register={register} defaultValue={value}/>
</>
)
}
@ -157,4 +157,4 @@ const ServerSettings = () => {
)
}
export default ServerSettings;
export default ServerSettings;

14
ui/App/views/UserManagement/components/ChangePasswordForm.jsx
View File

@ -7,8 +7,7 @@ import Input from "../../../components/Input";
import Error from "../../../components/Error";
const ChangePasswordForm = () => {
const {register, handleSubmit, errors, watch} = useForm();
const password = watch('new_password');
const {register, handleSubmit, formState: {errors}, watch} = useForm();
const onSubmit = async (data) => {
const res = await user.changePassword(data);
@ -22,8 +21,7 @@ const ChangePasswordForm = () => {
<form onSubmit={handleSubmit(onSubmit)}>
<div className="mb-4">
<Label htmlFor="old_password" text="Old Password"/>
<Input inputRef={register({required: true})}
name="old_password"
<Input register={register('old_password',{required: true})}
type="password"
placeholder="Old Password"
/>
@ -31,8 +29,7 @@ const ChangePasswordForm = () => {
</div>
<div className="mb-4">
<Label htmlFor="new_password" text="New Password"/>
<Input inputRef={register({required: true})}
name="new_password"
<Input register={register('new_password',{required: true})}
type="password"
placeholder="New Password"
/>
@ -40,8 +37,7 @@ const ChangePasswordForm = () => {
</div>
<div className="mb-4">
<Label htmlFor="new_password_confirmation" text="New Password Confirmation"/>
<Input inputRef={register({required: true})}
name="new_password_confirmation"
<Input register={register('new_password_confirmation',{required: true})}
type="password"
placeholder="New Password"
/>
@ -52,4 +48,4 @@ const ChangePasswordForm = () => {
)
}
export default ChangePasswordForm
export default ChangePasswordForm

21
ui/App/views/UserManagement/components/CreateUserForm.jsx
View File

@ -8,7 +8,7 @@ import Error from "../../../components/Error";
const CreateUserForm = ({updateUserList}) => {
const {register, handleSubmit, errors, watch} = useForm();
const {register, handleSubmit, formState: {errors}, watch} = useForm();
const password = watch('password');
const onSubmit = async (data) => {
@ -22,8 +22,7 @@ const CreateUserForm = ({updateUserList}) => {
<form onSubmit={handleSubmit(onSubmit)}>
<div className="mb-4">
<Label htmlFor="username" text="Username"/>
<Input inputRef={register({required: true})}
name="username"
<Input register={register('username',{required: true})}
type="text"
placeholder="Username"
/>
@ -32,9 +31,7 @@ const CreateUserForm = ({updateUserList}) => {
<div className="mb-4">
<Label htmlFor="role" text="Role" />
<input className="shadow appearance-none border w-full py-2 px-3 text-black"
ref={register({required: true})}
id="role"
name="role"
{...register('role',{required: true})}
value="admin"
disabled={true}
type="text"
@ -44,8 +41,7 @@ const CreateUserForm = ({updateUserList}) => {
</div>
<div className="mb-4">
<Label htmlFor="email" text="Email"/>
<Input inputRef={register({required: true})}
name="email"
<Input register={register('email',{required: true})}
type="email"
placeholder="Email"
/>
@ -53,8 +49,7 @@ const CreateUserForm = ({updateUserList}) => {
</div>
<div className="mb-4">
<Label htmlFor="password" text="Password"/>
<Input inputRef={register({required: true})}
name="password"
<Input register={register('password',{required: true})}
type="password"
placeholder="Password"
/>
@ -62,8 +57,8 @@ const CreateUserForm = ({updateUserList}) => {
</div>
<div className="mb-4">
<Label htmlFor="password_confirmation" text="Password Confirmation"/>
<Input inputRef={register({required: true, validate: conformation => conformation === password})}
name="password_confirmation"
<Input register={register('password_confirmation',{required: true, validate: conformation => conformation === password})}
type="password"
placeholder="Password Confirmation"
/>
@ -74,4 +69,4 @@ const CreateUserForm = ({updateUserList}) => {
)
}
export default CreateUserForm;
export default CreateUserForm;