remaining fields

client/src/Pages/Notifications/create/index.tsx

@@ -3,7 +3,7 @@ import { TextField, Select } from "@/Components/v2/inputs";
 import MenuItem from "@mui/material/MenuItem";
 import Typography from "@mui/material/Typography";
 
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -19,8 +19,9 @@ const NotificationsCreatePage = () => {
 	const { notificationId } = useParams<{ notificationId: string }>();
 	const isEditMode = Boolean(notificationId);
 
-	const { data: existingNotification, isLoading: notificationIsLoading } =
-		useGet<Notification>(isEditMode ? `/notifications/${notificationId}` : null);
+	const { data: existingNotification } = useGet<Notification>(
+		isEditMode ? `/notifications/${notificationId}` : null
+	);
 
 	const { schema, defaults } = useNotificationForm({ data: existingNotification });
 
@@ -34,7 +35,7 @@ const NotificationsCreatePage = () => {
 		control,
 		watch,
 		reset,
-		formState: { errors },
+		formState: {},
 	} = form;
 
 	// Reset form when defaults change (i.e., when data is fetched)
@@ -44,6 +45,32 @@ const NotificationsCreatePage = () => {
 
 	const watchedType = watch("type");
 
+	const addressConfig = useMemo(() => {
+		if (watchedType === "pager_duty") {
+			return {
+				title: t("pages.notifications.form.pagerDuty.title"),
+				description: t("pages.notifications.form.pagerDuty.description"),
+				fieldLabel: t("pages.notifications.form.pagerDuty.optionIntegrationKey"),
+				placeholder: t("pages.notifications.form.pagerDuty.placeholder"),
+			};
+		}
+		if (watchedType === "email") {
+			return {
+				title: t("pages.notifications.form.address.title"),
+				description: t("pages.notifications.form.address.description"),
+				fieldLabel: t("pages.notifications.form.address.optionAddress"),
+				placeholder: t("pages.notifications.form.address.placeholderEmail"),
+			};
+		}
+		return {
+			title: t("pages.notifications.form.address.title"),
+			description: t("pages.notifications.form.address.description"),
+			fieldLabel: t("pages.notifications.form.address.optionAddress"),
+			placeholder: t("pages.notifications.form.address.placeholderWebhook"),
+		};
+	}, [watchedType, t]);
+
+
 	// Suppress unused variable warnings - these will be used when UI is built
 	void register;
 	void control;
@@ -58,17 +85,15 @@ const NotificationsCreatePage = () => {
 						name="notificationName"
 						control={control}
 						defaultValue={defaults.notificationName}
-						render={({ field }) => (
+						render={({ field, fieldState }) => (
 							<TextField
 								{...field}
 								type="text"
 								fieldLabel={t("pages.notifications.form.notificationName.optionName")}
 								placeholder={t("pages.notifications.form.notificationName.placeholder")}
 								fullWidth
-								error={!!errors.notificationName}
-								helperText={
-									errors.notificationName ? errors.notificationName.message : ""
-								}
+								error={!!fieldState.error}
+								helperText={fieldState.error?.message ?? ""}
 							/>
 						)}
 					/>
@@ -82,12 +107,12 @@ const NotificationsCreatePage = () => {
 						name="type"
 						control={control}
 						defaultValue={defaults.type}
-						render={({ field }) => {
+						render={({ field, fieldState }) => {
 							return (
 								<Select
 									value={field.value}
 									fieldLabel={t("pages.notifications.form.type.optionType")}
-									error={!!errors.type}
+									error={!!fieldState.error}
 									onChange={field.onChange}
 								>
 									{NotificationChannels.map((type: string) => {
@@ -106,6 +131,102 @@ const NotificationsCreatePage = () => {
 					/>
 				}
 			/>
+			{watchedType !== "matrix" && (
+				<ConfigBox
+					title={addressConfig.title}
+					subtitle={addressConfig.description}
+					rightContent={
+						<Controller
+							name="address"
+							control={control}
+							defaultValue={defaults.address}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									type="text"
+									fieldLabel={addressConfig.fieldLabel}
+									placeholder={addressConfig.placeholder}
+									fullWidth
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
+						/>
+					}
+				/>
+			)}
+			{watchedType === "matrix" && (
+				<ConfigBox
+					title={t("pages.notifications.form.homeServer.title")}
+					subtitle={t("pages.notifications.form.homeServer.description")}
+					rightContent={
+						<Controller
+							name="homeserverUrl"
+							control={control}
+							defaultValue={defaults.homeserverUrl}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									type="text"
+									fieldLabel={t("pages.notifications.form.homeServer.optionHomeServer")}
+									placeholder={t("pages.notifications.form.homeServer.placeholder")}
+									fullWidth
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
+						/>
+					}
+				/>
+			)}
+			{watchedType === "matrix" && (
+				<ConfigBox
+					title={t("pages.notifications.form.roomId.title")}
+					subtitle={t("pages.notifications.form.roomId.description")}
+					rightContent={
+						<Controller
+							name="roomId"
+							control={control}
+							defaultValue={defaults.roomId}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									type="text"
+									fieldLabel={t("pages.notifications.form.roomId.optionRoomId")}
+									placeholder={t("pages.notifications.form.roomId.placeholder")}
+									fullWidth
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
+						/>
+					}
+				/>
+			)}
+			{watchedType === "matrix" && (
+				<ConfigBox
+					title={t("pages.notifications.form.accessToken.title")}
+					subtitle={t("pages.notifications.form.accessToken.description")}
+					rightContent={
+						<Controller
+							name="accessToken"
+							control={control}
+							defaultValue={defaults.accessToken}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									type="text"
+									fieldLabel={t("pages.notifications.form.accessToken.optionAccessToken")}
+									placeholder={t("pages.notifications.form.accessToken.placeholder")}
+									fullWidth
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message ?? ""}
+								/>
+							)}
+						/>
+					}
+				/>
+			)}
 		</BasePage>
 	);
 };

client/src/locales/en.json

@@ -354,6 +354,37 @@
 					"description": "Select the type of notification channel to create.",
 					"optionType": "Type",
 					"title": "Channel type"
+				},
+				"homeServer": {
+					"description": "Select the home server for this notification channel.",
+					"optionHomeServer": "Home server",
+					"placeholder": "example.com",
+					"title": "Home server"
+				},
+				"roomId": {
+					"description": "The ID of the room where notifications will be sent.",
+					"optionRoomId": "Room ID",
+					"placeholder": "!abcdefg:matrix.org",
+					"title": "Room ID"
+				},
+				"accessToken": {
+					"description": "The access token used to authenticate with the Matrix server.",
+					"optionAccessToken": "Access token",
+					"placeholder": "syt_YWxleF9ob2xsaWRheQ_VmtScmV0U2VjcmV0S2V5_abc123",
+					"title": "Access token"
+				},
+				"address": {
+					"description": "The address where notifications will be sent.",
+					"optionAddress": "Address",
+					"placeholderEmail": "example@example.com",
+					"placeholderWebhook": "https://your-server.com/webhook",
+					"title": "Address"
+				},
+				"pagerDuty": {
+					"description": "Your PagerDuty integration key for receiving alerts.",
+					"optionIntegrationKey": "Integration key",
+					"placeholder": "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6",
+					"title": "Integration key"
 				}
 			}
 		}