feat(react/settings): port sync test

apps/client/src/widgets/type_widgets/options/sync.tsx

@@ -7,8 +7,21 @@ import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import RawHtml from "../../react/RawHtml";
 import OptionsSection from "./components/OptionsSection";
 import { useTriliumOptions } from "../../react/hooks";
+import FormText from "../../react/FormText";
+import server from "../../../services/server";
+import toast from "../../../services/toast";
+import { SyncTestResponse } from "@triliumnext/commons";
 
 export default function SyncOptions() {
+    return (
+        <>
+            <SyncConfiguration />
+            <SyncTest />
+        </>
+    )
+}
+
+export function SyncConfiguration() {
     const [ options, setOptions ] = useTriliumOptions("syncServerHost", "syncServerTimeout", "syncProxy");
     const syncServerHost = useRef(options.syncServerHost);
     const syncServerTimeout = useRef(options.syncServerTimeout);
@@ -60,3 +73,23 @@ export default function SyncOptions() {
         </OptionsSection>
     )
 }
+
+export function SyncTest() {
+    return (
+        <OptionsSection title={t("sync_2.test_title")}>
+            <FormText>{t("sync_2.test_description")}</FormText>
+            <Button
+                text={t("sync_2.test_button")}
+                onClick={async () => {
+                    const result = await server.post<SyncTestResponse>("sync/test");
+
+                    if (result.success) {
+                        toast.showMessage(result.message);
+                    } else {
+                        toast.showError(t("sync_2.handshake_failed", { message: result.error }));
+                    }
+                }}
+            />
+        </OptionsSection>
+    )
+}

apps/server/src/routes/api/sync.ts

@@ -16,8 +16,9 @@ import type { EntityChange } from "../../services/entity_changes_interface.js";
 import ValidationError from "../../errors/validation_error.js";
 import consistencyChecksService from "../../services/consistency_checks.js";
 import { t } from "i18next";
+import { SyncTestResponse } from "@triliumnext/commons";
 
-async function testSync() {
+async function testSync(): Promise<SyncTestResponse> {
     try {
         if (!syncOptions.isSyncSetup()) {
             return { success: false, message: t("test_sync.not-configured") };

packages/commons/src/lib/server_api.ts

@@ -77,3 +77,11 @@ export interface AnonymizedDbResponse {
     filePath: string;
     fileName: string;
 }
+
+export type SyncTestResponse = {
+    success: true;
+    message: string;
+} | {
+    success: false;
+    error: string;
+};