mobile: server configuration settings

apps/mobile/app/common/database/index.js

@@ -28,29 +28,7 @@ import filesystem from "../filesystem";
 import Storage from "./storage";
 import { RNSqliteDriver } from "./sqlite.kysely";
 import { getDatabaseKey } from "./encryption";
-
-database.host(
-  __DEV__
-    ? {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-        // API_HOST: "http://192.168.43.5:5264",
-        // AUTH_HOST: "http://192.168.43.5:8264",
-        // SSE_HOST: "http://192.168.43.5:7264",
-        // SUBSCRIPTIONS_HOST: "http://192.168.43.5:9264",
-        // ISSUES_HOST: "http://192.168.43.5:2624"
-      }
-    : {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-      }
-);
+import SettingsService from "../../services/settings";
 
 export async function setupDatabase(password) {
   const key = await getDatabaseKey(password);
@@ -59,6 +37,15 @@ export async function setupDatabase(password) {
 
   console.log("Opening database with key:", !!key);
 
+  database.host({
+    API_HOST: "https://api.notesnook.com",
+    AUTH_HOST: "https://auth.streetwriters.co",
+    SSE_HOST: "https://events.streetwriters.co",
+    SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
+    ISSUES_HOST: "https://issues.streetwriters.co",
+    ...(SettingsService.getProperty("serverUrls") || {})
+  });
+
   database.setup({
     storage: Storage,
     eventsource: Platform.OS === "ios" ? EventSource : AndroidEventSource,

apps/mobile/app/components/ui/button/index.tsx

@@ -112,7 +112,7 @@ export const Button = ({
           NativeTooltip.show(event, tooltipText, NativeTooltip.POSITIONS.TOP);
         }
       }}
-      disabled={loading}
+      disabled={loading || restProps.disabled}
       type={type}
       accentColor={accentColor}
       accentText={accentText}
@@ -132,6 +132,7 @@ export const Button = ({
         justifyContent: "center",
         alignItems: "center",
         flexDirection: "row",
+        opacity: restProps?.disabled ? 0.5 : 1,
         ...(style as ViewStyle)
       }}
     >

apps/mobile/app/components/ui/input/index.tsx

@@ -41,6 +41,7 @@ import { SIZE } from "../../../utils/size";
 import { IconButton } from "../icon-button";
 import Paragraph from "../typography/paragraph";
 import phone from "phone";
+import isURL from "validator/lib/isURL";
 
 interface InputProps extends TextInputProps {
   fwdRef?: RefObject<TextInput>;
@@ -49,7 +50,8 @@ interface InputProps extends TextInputProps {
     | "email"
     | "confirmPassword"
     | "username"
-    | "phonenumber";
+    | "phonenumber"
+    | "url";
   loading?: boolean;
   onSubmit?: (
     event: NativeSyntheticEvent<TextInputSubmitEditingEventData>
@@ -151,6 +153,9 @@ const Input = ({
       case "confirmPassword":
         isError = customValidator && value === customValidator();
         break;
+      case "url":
+        isError = isURL(value);
+        break;
       case "phonenumber": {
         const result = phone(value, {
           strictDetection: true,

apps/mobile/app/screens/settings/components.tsx

@@ -37,6 +37,7 @@ import {
 } from "./picker/pickers";
 import ThemeSelector from "./theme-selector";
 import { RestoreBackup } from "./restore-backup";
+import { ServersConfiguration } from "./server-config";
 
 export const components: { [name: string]: ReactElement } = {
   colorpicker: <AccentColorPicker />,
@@ -55,5 +56,6 @@ export const components: { [name: string]: ReactElement } = {
   "theme-selector": <ThemeSelector />,
   "applock-timer": <ApplockTimerPicker />,
   autobackupsattachments: <BackupWithAttachmentsReminderPicker />,
-  backuprestore: <RestoreBackup />
+  backuprestore: <RestoreBackup />,
+  "server-config": <ServersConfiguration />
 };

apps/mobile/app/screens/settings/server-config.tsx

@@ -0,0 +1,201 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useThemeColors } from "@notesnook/theme";
+import React, { useState } from "react";
+import { View } from "react-native";
+import { presentDialog } from "../../components/dialog/functions";
+import { Button } from "../../components/ui/button";
+import Input from "../../components/ui/input";
+import { Notice } from "../../components/ui/notice";
+import Paragraph from "../../components/ui/typography/paragraph";
+import SettingsService from "../../services/settings";
+import { HostId, HostIds } from "../../stores/use-setting-store";
+import { useUserStore } from "../../stores/use-user-store";
+
+export const ServerIds = ["notesnook-sync", "auth", "sse"] as const;
+export type ServerId = (typeof ServerIds)[number];
+type Server = {
+  id: ServerId;
+  host: HostId;
+  title: string;
+  example: string;
+  description: string;
+};
+type VersionResponse = {
+  version: string;
+  id: string;
+  instance: string;
+};
+const SERVERS: Server[] = [
+  {
+    id: "notesnook-sync",
+    host: "API_HOST",
+    title: "Sync server",
+    example: "http://localhost:4326",
+    description: "Server used to sync your notes & other data between devices."
+  },
+  {
+    id: "auth",
+    host: "AUTH_HOST",
+    title: "Auth server",
+    example: "http://localhost:5326",
+    description: "Server used for login/sign up and authentication."
+  },
+  {
+    id: "sse",
+    host: "SSE_HOST",
+    title: "Events server",
+    example: "http://localhost:7326",
+    description: "Server used to receive important notifications & events."
+  }
+];
+export function ServersConfiguration() {
+  const { colors } = useThemeColors();
+  const [error, setError] = useState<string>();
+  const [success, setSuccess] = useState<boolean>();
+  const [urls, setUrls] = useState<Partial<Record<HostId, string>>>(
+    SettingsService.getProperty("serverUrls") || {}
+  );
+  const isLoggedIn = useUserStore((state) => !!state.user);
+
+  return (
+    <View
+      style={{
+        paddingHorizontal: 12,
+        gap: 12,
+        marginTop: 12
+      }}
+    >
+      {isLoggedIn ? (
+        <Notice
+          text="You must log out in order to change/reset server URLs."
+          type="alert"
+        />
+      ) : null}
+      <View style={{ flexDirection: "column" }}>
+        {SERVERS.map((server) => (
+          <Input
+            key={server.id}
+            editable={!isLoggedIn}
+            placeholder={`${server.id} e.g. ${server.example}`}
+            validationType="url"
+            defaultValue={urls[server.host]}
+            errorMessage="Please enter a valid URL."
+            onChangeText={(value) =>
+              setUrls((s) => {
+                s[server.host] = value;
+                return s;
+              })
+            }
+          />
+        ))}
+
+        {error ? (
+          <Paragraph
+            style={{
+              paddingVertical: 12
+            }}
+            color={colors.error.paragraph}
+          >
+            {error}
+          </Paragraph>
+        ) : null}
+
+        {success === true ? (
+          <Paragraph
+            style={{
+              paddingVertical: 12
+            }}
+            color={colors.success.paragraph}
+          >
+            Connected to all servers sucessfully.
+          </Paragraph>
+        ) : null}
+        <View style={{ marginTop: 1, justifyContent: "flex-end", gap: 12 }}>
+          <Button
+            type="accent"
+            disabled={!success}
+            width="100%"
+            onPress={async () => {
+              if (!success || isLoggedIn) return;
+              SettingsService.setProperty(
+                "serverUrls",
+                urls as Record<HostId, string>
+              );
+
+              presentDialog({
+                title: "Server url changed",
+                paragraph: "Restart the app for changes to take effect.",
+                negativeText: "Done"
+              });
+            }}
+            title="Save"
+          />
+
+          <Button
+            disabled={isLoggedIn}
+            type="secondary"
+            width="100%"
+            onPress={async () => {
+              setError(undefined);
+              try {
+                for (const host of HostIds) {
+                  const url = urls[host];
+                  const server = SERVERS.find((s) => s.host === host)!;
+                  if (!url) throw new Error("All server urls are required.");
+                  const version = await fetch(`${url}/version`)
+                    .then((r) => r.json() as Promise<VersionResponse>)
+                    .catch(() => undefined);
+                  console.log(version, "fetch...");
+                  if (!version)
+                    throw new Error(`Could not connect to ${server.title}.`);
+                  if (version.id !== server.id)
+                    throw new Error(
+                      `The URL you have given (${url}) does not point to the ${server.title}.`
+                    );
+                }
+                setSuccess(true);
+              } catch (e) {
+                setError((e as Error).message);
+              }
+            }}
+            title="Test connection"
+          />
+
+          <Button
+            disabled={isLoggedIn}
+            type="error"
+            width="100%"
+            title="Reset"
+            onPress={async () => {
+              if (isLoggedIn) return;
+              SettingsService.setProperty("serverUrls", undefined);
+              presentDialog({
+                title: "Server urls reset",
+                paragraph: "Restart the app for changes to take effect.",
+                negativeText: "Done"
+              });
+            }}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

apps/mobile/app/screens/settings/settings-data.tsx

@@ -748,6 +748,14 @@ export const settingsGroups: SettingSection[] = [
             type: "switch"
           }
         ]
+      },
+      {
+        id: "servers",
+        type: "screen",
+        name: "Servers",
+        description: "Configure server URLs for Notesnook",
+        icon: "server",
+        component: "server-config"
       }
     ]
   },

apps/mobile/app/services/settings.ts

@@ -30,6 +30,7 @@ import { scale, updateSize } from "../utils/size";
 import { DatabaseLogger } from "../common/database";
 import { useUserStore } from "../stores/use-user-store";
 import ScreenGuardModule from "react-native-screenguard";
+
 function reset() {
   const settings = get();
   if (settings.reminder !== "off" && settings.reminder !== "useroff") {

apps/mobile/app/stores/use-setting-store.ts

@@ -25,6 +25,8 @@ import { FileType } from "react-native-scoped-storage";
 import create, { State } from "zustand";
 import { ThemeDark, ThemeLight, ThemeDefinition } from "@notesnook/theme";
 import { Reminder } from "@notesnook/core/dist/types";
+export const HostIds = ["API_HOST", "AUTH_HOST", "SSE_HOST"] as const;
+export type HostId = (typeof HostIds)[number];
 
 export type Settings = {
   showToolbarOnTop?: boolean;
@@ -86,6 +88,7 @@ export type Settings = {
   backupType: "full" | "partial";
   offlineMode?: boolean;
   lastFullBackupDate?: number;
+  serverUrls?: Record<HostId, string>;
 };
 
 type DimensionsType = {

apps/mobile/package-lock.json

@@ -30071,6 +30071,7 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.7.tgz",
       "integrity": "sha512-9z76mxwnwFxMyxZWEgdgECQglF2Q7cFLm0kMf8pGwt+GSJsY0cONKj/UuO4bOH0w/uAel3ekS4ra5CEAyJRmDA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.24.7",
         "@babel/helper-create-class-features-plugin": "^7.24.7",

apps/mobile/scripts/optimize-fonts.mjs

@@ -45,6 +45,7 @@ const EXTRA_ICON_NAMES = [
   "view-list-outline",
   "view-list",
   "tab-plus",
+  "server",
   "play",
   "pause",
   "notebook-outline",