Add autocomplete attribute to credential fields

Prevent browsers from automatically autofilling the password entry box
for the Factorio credentials by setting the autocomplete property to
new-password on the password input.

packages/lib/src/config/classes.ts

@@ -77,6 +77,12 @@ export interface FieldDefinition {
 	 * Text used to describe the config field in user interfaces.
 	 */
 	description?: string;
+	/**
+	 * Value to use for the autocomplete attribute in the Web UI's input element.
+	 * Useful for making browsers behave properly with credential inputs.
+	 * Only used for string and number fields.
+	 */
+	autoComplete?: string;
 	/**
 	 * Web UI component to use for rending this input. Can be extended by
 	 * @{link "@clusterio/web_ui".BaseWebPlugin.inputComponents}

packages/lib/src/config/definitions.ts

@@ -153,12 +153,14 @@ export class ControllerConfig extends classes.Config<ControllerConfigFields> {
 		"controller.factorio_username": {
 			title: "Factorio Username",
 			description: "Username to authenticate with Factorio API with.",
+			autoComplete: "section-factorio username",
 			type: "string",
 			optional: true,
 		},
 		"controller.factorio_token": {
 			title: "Factorio Token",
 			description: "Token to authenticate with Factorio API with.",
+			autoComplete: "section-factorio new-password",
 			type: "string",
 			credential: ["controller"],
 			optional: true,
@@ -276,6 +278,7 @@ export class HostConfig extends classes.Config<HostConfigFields> {
 			description:
 				"Username to authenticate with Factorio API with. If set this will be used in the server settings " +
 				"of all instances on this host.",
+			autoComplete: "section-factorio username",
 			type: "string",
 			optional: true,
 		},
@@ -284,6 +287,7 @@ export class HostConfig extends classes.Config<HostConfigFields> {
 			description:
 				"Token to authenticate with Factorio API with. If set this will be used in the server settings " +
 				"of all instances on this host.",
+			autoComplete: "section-factorio new-password",
 			type: "string",
 			credential: ["host"],
 			optional: true,

packages/web_ui/src/components/BaseConfigTree.tsx

@@ -44,12 +44,12 @@ function renderInput(inputComponents: Record<string, InputComponent>, def: lib.F
 	}
 	if (def.type === "string") {
 		if (def.credential) {
-			return <Input.Password/>;
+			return <Input.Password autoComplete={def.autoComplete} />;
 		}
-		return <Input/>;
+		return <Input autoComplete={def.autoComplete} />;
 	}
 	if (def.type === "number") {
-		return <InputNumber/>;
+		return <InputNumber autoComplete={def.autoComplete} />;
 	}
 
 	return `Unknown type ${def.type}`;