feat: update webhook settings with secret management

- Bump version to 1.1.5 in package.json
- Add API endpoint to retrieve webhook secrets based on target (inbound/outbound)
- Implement AppToaster component for consistent toast notifications across admin pages
- Update AdminLayout to include AppToaster
- Enhance webhook settings UI with reveal/hide functionality for secrets
- Add new translations for webhook secret management in English and Turkish
- Refactor settings page hooks to manage secret visibility and dirty state
- Update OpenAPI documentation to reflect new webhook secret retrieval endpoint
- Modify WebhookService to include method for fetching stored secrets

Author: sametcn99

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "booking-calendar",
-	"version": "1.1.4",
+	"version": "1.1.5",
 	"private": true,
 	"scripts": {
 		"dev:server": "bun run --watch src/server/index.ts",

src/client/src/api.ts

@@ -504,6 +504,11 @@ export const api = {
 			"/admin/settings/webhook",
 		).then((r) => r.data),
 
+	getWebhookSecret: (target: "outbound" | "inbound") =>
+		request<{ success: boolean; data: { secret: string } }>(
+			`/admin/settings/webhook/secret?target=${target}`,
+		).then((r) => r.data.secret),
+
 	setWebhookSettings: (input: {
 		outbound?: {
 			enabled?: boolean;

src/client/src/components/AdminLayout.tsx

@@ -16,6 +16,7 @@ import { useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import { useI18n } from "../context/I18nContext";
+import AppToaster from "./AppToaster";
 
 export default function AdminLayout() {
 	const [css] = useStyletron();
@@ -53,6 +54,8 @@ export default function AdminLayout() {
 				backgroundColor: "var(--color-bg-primary)",
 			})}
 		>
+			<AppToaster />
+
 			{/* Sidebar */}
 			<nav
 				className={css({

src/client/src/components/AppToaster.tsx

@@ -0,0 +1,12 @@
+import { PLACEMENT, ToasterContainer } from "baseui/toast";
+
+const TOAST_AUTO_HIDE_DURATION = 5000;
+
+export default function AppToaster() {
+	return (
+		<ToasterContainer
+			placement={PLACEMENT.bottomRight}
+			autoHideDuration={TOAST_AUTO_HIDE_DURATION}
+		/>
+	);
+}

src/client/src/i18n/en.json

@@ -261,7 +261,10 @@
 		"webhookSecretHint": "Signature header format: sha256=<hmac>. Minimum 16 characters.",
 		"webhookSecretPlaceholder": "Paste a long random secret",
 		"webhookGenerateSecret": "Generate Random Secret",
+		"webhookRevealSecret": "Reveal",
+		"webhookHideSecret": "Hide",
 		"webhookSecretConfigured": "A secret is already configured. Leave empty to keep it unchanged.",
+		"webhookSecretHiddenHint": "Stored secrets are hidden after refresh for security. Enter a new value only if you want to replace it.",
 		"webhookSave": "Save Webhook Settings",
 		"webhookSaved": "Webhook settings saved",
 		"webhookSendTest": "Send Test Event",
@@ -276,6 +279,7 @@
 		"webhookInboundSecretHint": "Use the same sha256=<hmac> header format based on timestamp.body. Minimum 16 characters.",
 		"webhookInboundSecretPlaceholder": "Paste the secret used by the external command sender",
 		"webhookInboundSecretConfigured": "An inbound secret is already configured. Leave empty to keep it unchanged.",
+		"webhookInboundSecretHiddenHint": "Stored inbound secrets are hidden after refresh for security. Enter a new value only if you want to replace it.",
 		"webhookInboundScopes": "Allowed Scopes",
 		"webhookInboundScopesHint": "Only the checked action groups can be executed by inbound webhook commands.",
 		"version": "Version",

src/client/src/i18n/schema.json

@@ -993,9 +993,18 @@
 				"webhookGenerateSecret": {
 					"type": "string"
 				},
+				"webhookRevealSecret": {
+					"type": "string"
+				},
+				"webhookHideSecret": {
+					"type": "string"
+				},
 				"webhookSecretConfigured": {
 					"type": "string"
 				},
+				"webhookSecretHiddenHint": {
+					"type": "string"
+				},
 				"webhookSave": {
 					"type": "string"
 				},
@@ -1038,6 +1047,9 @@
 				"webhookInboundSecretConfigured": {
 					"type": "string"
 				},
+				"webhookInboundSecretHiddenHint": {
+					"type": "string"
+				},
 				"webhookInboundScopes": {
 					"type": "string"
 				},
@@ -1211,7 +1223,10 @@
 				"webhookSecretHint",
 				"webhookSecretPlaceholder",
 				"webhookGenerateSecret",
+				"webhookRevealSecret",
+				"webhookHideSecret",
 				"webhookSecretConfigured",
+				"webhookSecretHiddenHint",
 				"webhookSave",
 				"webhookSaved",
 				"webhookSendTest",
@@ -1226,6 +1241,7 @@
 				"webhookInboundSecretHint",
 				"webhookInboundSecretPlaceholder",
 				"webhookInboundSecretConfigured",
+				"webhookInboundSecretHiddenHint",
 				"webhookInboundScopes",
 				"webhookInboundScopesHint",
 				"version",

src/client/src/i18n/tr.json

@@ -261,7 +261,10 @@
 		"webhookSecretHint": "Imza basligi formati: sha256=<hmac>. Minimum 16 karakter.",
 		"webhookSecretPlaceholder": "Uzun ve rastgele bir gizli anahtar girin",
 		"webhookGenerateSecret": "Rastgele Gizli Anahtar Uret",
+		"webhookRevealSecret": "Goster",
+		"webhookHideSecret": "Gizle",
 		"webhookSecretConfigured": "Bir gizli anahtar zaten kayıtlı. Aynı kalması için boş bırakın.",
+		"webhookSecretHiddenHint": "Kayitli secret guvenlik nedeniyle sayfa yenilendikten sonra gosterilmez. Yalnizca degistirmek istiyorsaniz yeni bir deger girin.",
 		"webhookSave": "Webhook Ayarlarını Kaydet",
 		"webhookSaved": "Webhook ayarları kaydedildi",
 		"webhookSendTest": "Test Olayı Gönder",
@@ -276,6 +279,7 @@
 		"webhookInboundSecretHint": "timestamp.body tabanlı sha256=<hmac> başlık formatını kullanın. Minimum 16 karakter.",
 		"webhookInboundSecretPlaceholder": "Harici komut göndericisinin kullanacağı gizli anahtarı girin",
 		"webhookInboundSecretConfigured": "Bir inbound secret zaten kayıtlı. Aynı kalması için boş bırakın.",
+		"webhookInboundSecretHiddenHint": "Kayitli inbound secret guvenlik nedeniyle sayfa yenilendikten sonra gosterilmez. Yalnizca degistirmek istiyorsaniz yeni bir deger girin.",
 		"webhookInboundScopes": "İzinli Scope'lar",
 		"webhookInboundScopesHint": "Yalnızca işaretlenen aksiyon grupları inbound webhook komutları tarafından çalıştırılabilir.",
 		"version": "Sürüm",

src/client/src/pages/AppointmentDetailPage/index.tsx

@@ -1,10 +1,11 @@
 import { useStyletron } from "baseui";
 import { Button, KIND, SIZE } from "baseui/button";
-import { PLACEMENT, ToasterContainer, toaster } from "baseui/toast";
+import { toaster } from "baseui/toast";
 import { Copy } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { type ApiAppointment, api } from "../../api";
+import AppToaster from "../../components/AppToaster";
 import ConfirmationDialog from "../../components/ConfirmationDialog";
 import { useI18n } from "../../context/I18nContext";
 
@@ -119,7 +120,7 @@ export default function AppointmentDetailPage() {
 				justifyContent: "center",
 			})}
 		>
-			<ToasterContainer placement={PLACEMENT.bottomRight} />
+			<AppToaster />
 
 			<div
 				className={css({

src/client/src/pages/AppointmentsPage/index.tsx

@@ -1,5 +1,4 @@
 import { useStyletron } from "baseui";
-import { PLACEMENT, ToasterContainer } from "baseui/toast";
 import ListFiltersBar from "../../components/ListFilters/ListFiltersBar";
 import ListFiltersFeedback from "../../components/ListFilters/ListFiltersFeedback";
 import PageLoadingSpinner from "../../components/PageLoadingSpinner";
@@ -47,8 +46,6 @@ export default function AppointmentsPage() {
 
 	return (
 		<div>
-			<ToasterContainer placement={PLACEMENT.bottomRight} />
-
 			<AppointmentsHeader
 				title={t("appointments.title")}
 				description={t("appointments.description")}

src/client/src/pages/BookingPage/index.tsx

@@ -1,7 +1,7 @@
 import { useStyletron } from "baseui";
-import { PLACEMENT, ToasterContainer } from "baseui/toast";
 import { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import AppToaster from "../../components/AppToaster";
 import { useI18n } from "../../context/I18nContext";
 import BookingFormSection from "./components/BookingFormSection";
 import BookingHeader from "./components/BookingHeader";
@@ -79,7 +79,7 @@ export default function BookingPage() {
 				justifyContent: "center",
 			})}
 		>
-			<ToasterContainer placement={PLACEMENT.bottomRight} />
+			<AppToaster />
 
 			<div
 				className={css({