Rcon Setting (for 0.4.1)

src/components/Atoms/Config/InputBox.tsx

@@ -1,4 +1,9 @@
-import { faFloppyDisk, faRotateRight } from '@fortawesome/free-solid-svg-icons';
+import {
+  faFloppyDisk,
+  faRotateRight,
+  faEye,
+  faEyeSlash,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import BeatLoader from 'react-spinners/BeatLoader';
@@ -10,7 +15,7 @@ import {
 
 const onChangeValidateTimeout = 100;
 
-export type InputBoxType = 'text' | 'number';
+export type InputBoxType = 'text' | 'number' | 'password';
 
 /**
  * A self controlled input box meant to represent a single value of a config
@@ -68,6 +73,7 @@ export default function InputBox({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string>('');
   const [touched, setTouched] = useState<boolean>(false);
+  const [typeModified, setTypeModified] = useState<string>(type); //in case we have password field which can switch between "text" and "password"
   const formRef = useRef<HTMLFormElement>(null);
 
   const validate = useCallback(
@@ -178,6 +184,20 @@ export default function InputBox({
       />
     );
   }
+  if (type === 'password') {
+    icons.push(
+      <FontAwesomeIcon
+        icon={typeModified === 'password' ? faEye : faEyeSlash}
+        className="w-4 text-gray-faded/30 hover:cursor-pointer hover:text-gray-500"
+        onClick={() =>
+          typeModified === 'password'
+            ? setTypeModified('text')
+            : setTypeModified('password')
+        }
+        key="reveal password"
+      />
+    );
+  }
   if (isLoading || isLoadingProp) {
     icons = [
       <BeatLoader
@@ -241,7 +261,7 @@ export default function InputBox({
             setValue(value.trim());
           }}
           disabled={disabled}
-          type={type}
+          type={typeModified}
           autoComplete={DISABLE_AUTOFILL}
         />
       </form>

src/components/Minecraft/MinecraftSettingCard.tsx

@@ -27,7 +27,7 @@ export default function MinecraftSettingCard() {
   const commonSettings: {
     [key: string]: {
       name: string;
-      type: 'toggle' | 'number' | 'text' | 'dropdown';
+      type: 'toggle' | 'number' | 'text' | 'dropdown' | 'password';
       options?: string[];
       description?: React.ReactNode;
       descriptionFunc?: (value: any) => React.ReactNode;
@@ -101,7 +101,7 @@ export default function MinecraftSettingCard() {
   const advancedSettings: {
     [key: string]: {
       name: string;
-      type: 'toggle' | 'number' | 'text' | 'dropdown';
+      type: 'toggle' | 'number' | 'text' | 'dropdown' | 'password';
       options?: string[];
       description?: string;
       descriptionFunc?: (value: any) => string;
@@ -165,6 +165,19 @@ export default function MinecraftSettingCard() {
           ? 'Players without a Mojang-signed public key will not be able to connect to the server'
           : "Players don't need a Mojang-signed public key to connect to the server",
     },
+    'enable-rcon': {
+      name: 'Enable RCON',
+      type: 'toggle',
+      descriptionFunc: (value: boolean) =>
+        value
+          ? 'Server admins can remotely access the server console'
+          : 'Server admins cannot remote access to the server console',
+    },
+    'rcon.password': {
+      name: 'RCON Password',
+      type: 'password',
+      descriptionFunc: () => 'Set a password for RCON',
+    },
   };
 
   // filter out unsupported settings

src/components/SettingField.tsx

@@ -23,7 +23,7 @@ export default function SettingField({
   instance: InstanceInfo;
   setting: string;
   label?: string;
-  type?: 'text' | 'number' | 'dropdown' | 'toggle';
+  type?: 'text' | 'number' | 'dropdown' | 'toggle' | 'password';
   min?: number;
   max?: number;
   options?: string[];
@@ -43,7 +43,6 @@ export default function SettingField({
   label = label ?? setting;
   const [value, setValue] = useState(initialSetting ?? '');
 
-
   useIsomorphicLayoutEffect(() => {
     setValue(initialSetting ?? '');
   }, [initialSetting]);
@@ -72,6 +71,26 @@ export default function SettingField({
           descriptionFunc={descriptionFunc}
         />
       );
+    case 'password':
+      return (
+        <InputBox
+          label={label}
+          value={value}
+          type="password"
+          isLoading={isLoading}
+          error={errorString}
+          canRead={can_access_instance_setting}
+          onSubmit={async (value) => {
+            await axiosPutSingleValue<void>(
+              `/instance/${uuid}/game/${setting}`,
+              value
+            );
+            setValue(value);
+          }}
+          description={description}
+          descriptionFunc={descriptionFunc}
+        />
+      );
     case 'number':
       return (
         <InputBox