feat: add HTTP basic authentication support for monitors (#3033)

## Changes
- Add basicAuthUser and basicAuthPassword fields to Monitor model, types, and validation (server + client)
- Update networkService to send Authorization: Basic header when credentials are provided
- Add basic auth form fields (username/password) to the create/edit monitor page for HTTP monitors
- Add i18n strings for the new basic authentication section

## Benefits
- Users can monitor endpoints protected by HTTP basic authentication
- Credentials are sent as standard Authorization: Basic base64-encoded header
- Basic auth is only used when bearer token (secret) is not configured

client/src/Hooks/useMonitorForm.ts

@@ -40,6 +40,8 @@ export const useMonitorForm = ({
 					matchMethod: data?.matchMethod || "",
 					expectedValue: data?.expectedValue || "",
 					jsonPath: data?.jsonPath || "",
+					basicAuthUser: data?.basicAuthUser || "",
+					basicAuthPassword: data?.basicAuthPassword || "",
 				};
 				break;
 			case "ping":
@@ -113,6 +115,8 @@ export const useMonitorForm = ({
 					matchMethod: "",
 					expectedValue: "",
 					jsonPath: "",
+					basicAuthUser: "",
+					basicAuthPassword: "",
 				};
 		}
 

client/src/Pages/CreateMonitor/index.tsx

@@ -770,6 +770,50 @@ const CreateMonitorPage = () => {
 				/>
 			)}
 
+			{watchedType === "http" && (
+				<ConfigBox
+					title={t("pages.createMonitor.form.basicAuth.title")}
+					subtitle={t("pages.createMonitor.form.basicAuth.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<Controller
+								name="basicAuthUser"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value ?? ""}
+										fieldLabel={t(
+											"pages.createMonitor.form.basicAuth.option.username.label"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="basicAuthPassword"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value ?? ""}
+										type="password"
+										fieldLabel={t(
+											"pages.createMonitor.form.basicAuth.option.password.label"
+										)}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+
 			{watchedType === "http" && (
 				<ConfigBox
 					title={t("pages.createMonitor.form.advanced.title")}

client/src/Types/Monitor.ts

@@ -44,6 +44,8 @@ export interface Monitor {
 	jsonPath?: string;
 	expectedValue?: string;
 	matchMethod?: MonitorMatchMethod;
+	basicAuthUser?: string;
+	basicAuthPassword?: string;
 	url: string;
 	port?: number;
 	isActive: boolean;

client/src/Validation/monitor.ts

@@ -38,6 +38,8 @@ const httpSchema = baseSchema.extend({
 	matchMethod: z.enum(["equal", "include", "regex", ""]).optional(),
 	expectedValue: z.string().optional(),
 	jsonPath: z.string().optional(),
+	basicAuthUser: z.string().optional(),
+	basicAuthPassword: z.string().optional(),
 });
 
 // Ping monitor schema

client/src/locales/en.json

@@ -501,6 +501,18 @@
 						"hardware": "Monitor CPU, memory, disk usage, and temperature for your infrastructure."
 					}
 				},
+				"basicAuth": {
+					"description": "Configure HTTP basic authentication credentials for this monitor.",
+					"option": {
+						"username": {
+							"label": "Username"
+						},
+						"password": {
+							"label": "Password"
+						}
+					},
+					"title": "Basic authentication"
+				},
 				"ignoreTls": {
 					"description": "Configure TLS/SSL certificate validation for HTTPS connections.",
 					"option": {