0.2.3

.github/workflows/auto-build.yml

@@ -13,6 +13,8 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
+    environment: env-for-buildci
+
     strategy:
       matrix:
         node-version: [16.x]

README.md

@@ -4,15 +4,18 @@ This is yet another unofficial sync plugin for Obsidian.
 
 ## Disclaimer
 
-- **This is NOT the [official sync service](https://github.com/fyears/obsidian-remotely-save.git) provided by Obsidian.**
+- **This is NOT the [official sync service](https://obsidian.md/sync) provided by Obsidian.**
 
 ## !!!Caution!!!
 
-As of November 2021, the plugin is considered in BETA stage. **DO NOT USE IT for any serious vaults.** **Backup your vault before using this plugin.** Don't be surprise to data loss!
+As of Dec 2021, the plugin is considered in BETA stage. **DO NOT USE IT for any serious vaults.** **ALWAYS, ALWAYS, backup your vault before using this plugin.**
 
 ## Features
 
-- **Amazon S3 or S3-compatible, and Dropbox services are supported.** Webdav supports on the half way.
+- Supports:
+  - Amazon S3 or S3-compatible
+  - Dropbox
+  - Webdav
 - **Obsidiain Mobile supported.** Vaults can be synced across mobile and desktop devices with the cloud service as the "broker".
 - **[End-to-end encryption](./docs/encryption.md) supported.** Files would be encrypted using openssl format before being sent to the cloud **if** user specify a password.
 - **[Minimal Intrusive](./docs/minimal_intrusive_design.md).**
@@ -27,15 +30,25 @@ As of November 2021, the plugin is considered in BETA stage. **DO NOT USE IT for
 - **Cloud services cost you money.** Always be aware of the costs and pricing.
 - **All files or folder starting with `.` (dot) or `_` (underscore) are treated as hidden files, and would NOT be synced.** It's useful if you have some files just staying locally. But this strategy also means that themes / other plugins / settings of this plugin would neither be synced.
 
+## Questions, Suggestions, Or Bugs
+
+You are greatly welcome to ask questions, post any suggestions, or report any bugs! The project is mainly maintained on GitHub:
+
+- Questions: [GitHub repo Discussions](https://github.com/fyears/remotely-save/discussions)
+- Suggestions: also in [GitHub repo Discussions](https://github.com/fyears/remotely-save/discussions)
+- Bugs: [GitHub repo Issues](https://github.com/fyears/remotely-save/issues) (NOT Discussion)
+
+Additionally, the plugin author may occasionally visit Obsidian official forum and official Discord server, and pay attention to this-plugin-related information there.
+
 ## Download and Install
 
-- Option #1: [![BuildCI](https://github.com/fyears/obsidian-remotely-save/actions/workflows/auto-build.yml/badge.svg)](https://github.com/fyears/obsidian-remotely-save/actions/workflows/auto-build.yml) Every artifacts are placed in the "Summary" under every successful builds.
+- Option #1: You can search, download, and install the plugin in official "community plugin list".
-- Option #2: Besides manually downloading the files, you can also use [Obsidian42 - BRAT](https://github.com/TfTHacker/obsidian42-brat) to install this plugin.
+- Option #2: [![BuildCI](https://github.com/fyears/remotely-save/actions/workflows/auto-build.yml/badge.svg)](https://github.com/fyears/remotely-save/actions/workflows/auto-build.yml) Every artifacts are placed in the "Summary" under every successful builds.
-- Option #3: The pluin would be submitted to the official "community plugin list" in near future.
+- Option #3: Besides manually downloading the files, you can also use [Obsidian42 - BRAT](https://github.com/TfTHacker/obsidian42-brat) to install this plugin.
 
 ## Usage
 
-### s3
+### S3
 
 - Prepare your S3 (-compatible) service information: [endpoint, region](https://docs.aws.amazon.com/general/latest/gr/s3.html), [access key id, secret access key](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-your-credentials.html), bucket name. The bucket should be empty and solely for syncing a vault.
 - Configure (enable) [CORS](https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html) for requests from `app://obsidian.md` and `capacitor://localhost` and `http://localhost`. It's unfortunately required, because the plugin sends requests from a browser-like envirement. And those addresses are tested and found on desktop and ios and android.
@@ -49,12 +62,15 @@ As of November 2021, the plugin is considered in BETA stage. **DO NOT USE IT for
 
 - **This plugin's function for Dropbox is not as mature as functions for S3.**
 - **This plugin is NOT an official Dropbox product.** The plugin just uses Dropbox's public API.
-- After the authorization, the plugin can read your name and email (which cannot be unselected on Dropbox api), and read and write files in your Dropbox's `/App/obsidian-remotely-save` folder.
+- After the authorization, the plugin can read your name and email (which cannot be unselected on Dropbox api), and read and write files in your Dropbox's `/Apps/remotely-save` folder.
 - If you decide to authorize this plugin to connect to Dropbox, please go to plugin's settings, and choose Dropbox then follow the instructions.
 - Password-based end-to-end encryption is also supported.
 
 ### webdav
 
-- **webdav support is buggy (as of now, 20211122) and considered experimental, so it's hidden by default.** Highly recommend to use the more stable s3.
+- **webdav support is considered experimental.**
-- If you decide to give it a try, open settings, and click "Choose service" area five times, then a Notice should show up. Close and open settings again then you will be able to select webdav.
+- Currently only supports BASIC authorization method.
-- Currently webdav server should enable CORS for requests, because of technical limitations of mobile.
+- Currently webdav server has to be enabled CORS for requests from `app://obsidian.md` and `capacitor://localhost` and `http://localhost`, **AND** all webdav HTTP methods, **AND** all webdav headers. These are required, because Obsidian mobile works like a browser and mobile plugins are limited by CORS policies.
+  - Popular software NextCloud and OwnCloud do **NOT** enable CORS by default. If you are using any of them, you should evaluate the risk, and find a way to enable CORS, before using this plugin.
+  - The plugin is tested successfully under python package [`wsgidav` (version 4.0)](https://github.com/mar10/wsgidav). See [this issue](https://github.com/mar10/wsgidav/issues/239) for some details.
+- Password-based end-to-end encryption is also supported.

esbuild.config.mjs

@@ -24,6 +24,7 @@ esbuild
       "obsidian",
       "electron",
       "fs",
+      "crypto",
       // ...builtins
     ],
     format: "cjs",

manifest.json

@@ -1,9 +1,9 @@
 {
-  "id": "obsidian-remotely-save",
+  "id": "remotely-save",
   "name": "Remotely Save",
-  "version": "0.1.7",
+  "version": "0.2.3",
   "minAppVersion": "0.12.15",
-  "description": "Yet another unofficial plugin allowing users to sync notes between local device and the cloud service.",
+  "description": "Yet another unofficial plugin allowing users to synchronize notes between local device and the cloud service.",
   "author": "fyears",
   "authorUrl": "https://github.com/fyears",
   "isDesktopOnly": false

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "obsidian-remotely-save",
+  "name": "remotely-save",
-  "version": "0.1.7",
+  "version": "0.2.3",
   "description": "This is yet another sync plugin for Obsidian app.",
   "scripts": {
     "dev": "node esbuild.config.mjs",
-    "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
+    "build2": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
+    "build": "webpack --mode production",
     "format": "npx prettier --write .",
     "clean": "npx rimraf main.js",
     "test": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} mocha -r ts-node/register 'tests/**/*.ts'"
@@ -12,10 +13,7 @@
   "browser": {
     "path": "path-browserify",
     "process": "process/browser",
-    "stream": "stream-browserify",
+    "stream": "stream-browserify"
-    "crypto": "crypto-browserify",
-    "util": "util/",
-    "assert": "assert/"
   },
   "source": "main.ts",
   "keywords": [],
@@ -27,6 +25,7 @@
     "@types/mime-types": "^2.1.1",
     "@types/mocha": "^9.0.0",
     "@types/node": "^14.14.37",
+    "@types/qrcode": "^1.4.1",
     "builtin-modules": "^3.2.0",
     "chai": "^4.3.4",
     "chai-as-promised": "^7.1.1",
@@ -39,7 +38,9 @@
     "ts-node": "^10.4.0",
     "tslib": "^2.2.0",
     "typescript": "^4.4.4",
-    "webdav-server": "^2.6.2"
+    "webdav-server": "^2.6.2",
+    "webpack": "^5.64.4",
+    "webpack-cli": "^4.9.1"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.37.0",
@@ -57,6 +58,7 @@
     "obsidian": "^0.12.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
+    "qrcode": "^1.5.0",
     "rfc4648": "^1.5.0",
     "rimraf": "^3.0.2",
     "stream-browserify": "^3.0.0",

src/baseTypes.ts

@@ -1,9 +1,45 @@
 /**
  * Only type defs here.
+ * To avoid circular dependency.
  */
 
 export type SUPPORTED_SERVICES_TYPE = "s3" | "webdav" | "dropbox";
 
+export interface S3Config {
+  s3Endpoint: string;
+  s3Region: string;
+  s3AccessKeyID: string;
+  s3SecretAccessKey: string;
+  s3BucketName: string;
+}
+
+export interface DropboxConfig {
+  accessToken: string;
+  clientID: string;
+  refreshToken: string;
+  accessTokenExpiresInSeconds: number;
+  accessTokenExpiresAtTime: number;
+  accountID: string;
+  username: string;
+}
+
+export type WebdavAuthType = "digest" | "basic";
+
+export interface WebdavConfig {
+  address: string;
+  username: string;
+  password: string;
+  authType: WebdavAuthType;
+}
+
+export interface RemotelySavePluginSettings {
+  s3: S3Config;
+  webdav: WebdavConfig;
+  dropbox: DropboxConfig;
+  password: string;
+  serviceType: SUPPORTED_SERVICES_TYPE;
+}
+
 export interface RemoteItem {
   key: string;
   lastModified: number;
@@ -11,3 +47,13 @@ export interface RemoteItem {
   remoteType: SUPPORTED_SERVICES_TYPE;
   etag?: string;
 }
+
+export const COMMAND_URI = "remotely-save";
+export const COMMAND_CALLBACK = "remotely-save-cb";
+
+export interface UriParams {
+  func?: string;
+  vault?: string;
+  ver?: string;
+  data?: string;
+}

src/importExport.ts

@@ -0,0 +1,76 @@
+import QRCode from "qrcode";
+
+import {
+  COMMAND_URI,
+  UriParams,
+  RemotelySavePluginSettings,
+} from "./baseTypes";
+
+export const exportQrCodeUri = async (
+  settings: RemotelySavePluginSettings,
+  currentVaultName: string,
+  pluginVersion: string
+) => {
+  const data = encodeURIComponent(JSON.stringify(settings));
+  const vault = encodeURIComponent(currentVaultName);
+  const version = encodeURIComponent(pluginVersion);
+  const rawUri = `obsidian://${COMMAND_URI}?func=settings&version=${version}&vault=${vault}&data=${data}`;
+  // console.log(uri)
+  const imgUri = await QRCode.toDataURL(rawUri);
+  return {
+    rawUri,
+    imgUri,
+  };
+};
+
+export interface ProcessQrCodeResultType {
+  status: "error" | "ok";
+  message: string;
+  result?: RemotelySavePluginSettings;
+}
+
+export const importQrCodeUri = (
+  inputParams: any,
+  currentVaultName: string
+): ProcessQrCodeResultType => {
+  let params = inputParams as UriParams;
+  if (
+    params.func === undefined ||
+    params.func !== "settings" ||
+    params.vault === undefined ||
+    params.data === undefined
+  ) {
+    return {
+      status: "error",
+      message: `the uri is not for exporting/importing settings: ${JSON.stringify(
+        inputParams
+      )}`,
+    };
+  }
+
+  if (params.vault !== currentVaultName) {
+    return {
+      status: "error",
+      message: `the target vault is ${
+        params.vault
+      } but you are currently in ${currentVaultName}: ${JSON.stringify(
+        inputParams
+      )}`,
+    };
+  }
+
+  let settings = {} as RemotelySavePluginSettings;
+  try {
+    settings = JSON.parse(params.data);
+  } catch (e) {
+    return {
+      status: "error",
+      message: `errors while parsing settings: ${JSON.stringify(inputParams)}`,
+    };
+  }
+  return {
+    status: "ok",
+    message: "ok",
+    result: settings,
+  };
+};

src/main.ts

@@ -27,29 +27,28 @@ import type { InternalDBs } from "./localdb";
 import type { SyncStatusType, PasswordCheckType } from "./sync";
 import { isPasswordOk, getSyncPlan, doActualSync } from "./sync";
 
-import { S3Config, DEFAULT_S3_CONFIG } from "./s3";
+import { DEFAULT_S3_CONFIG } from "./remoteForS3";
-import { WebdavConfig, DEFAULT_WEBDAV_CONFIG, WebdavAuthType } from "./webdav";
+import { DEFAULT_WEBDAV_CONFIG } from "./remoteForWebdav";
 import {
-  DropboxConfig,
   DEFAULT_DROPBOX_CONFIG,
-  getCodeVerifierAndChallenge,
+  getAuthUrlAndVerifier,
-  getAuthUrl,
   sendAuthReq,
   setConfigBySuccessfullAuthInplace,
 } from "./remoteForDropbox";
 
 import { RemoteClient } from "./remote";
 import { exportSyncPlansToFiles } from "./debugMode";
-import { SUPPORTED_SERVICES_TYPE } from "./baseTypes";
+import { COMMAND_URI, COMMAND_CALLBACK } from "./baseTypes";
-
+import type {
-interface RemotelySavePluginSettings {
+  SUPPORTED_SERVICES_TYPE,
-  s3: S3Config;
+  S3Config,
-  webdav: WebdavConfig;
+  DropboxConfig,
-  dropbox: DropboxConfig;
+  WebdavAuthType,
-  password: string;
+  WebdavConfig,
-  serviceType: SUPPORTED_SERVICES_TYPE;
+  RemotelySavePluginSettings,
-  enableExperimentService: boolean;
+} from "./baseTypes";
-}
+import type { ProcessQrCodeResultType } from "./importExport";
+import { exportQrCodeUri, importQrCodeUri } from "./importExport";
 
 const DEFAULT_SETTINGS: RemotelySavePluginSettings = {
   s3: DEFAULT_S3_CONFIG,
@@ -57,7 +56,6 @@ const DEFAULT_SETTINGS: RemotelySavePluginSettings = {
   dropbox: DEFAULT_DROPBOX_CONFIG,
   password: "",
   serviceType: "s3",
-  enableExperimentService: false,
 };
 
 export default class RemotelySavePlugin extends Plugin {
@@ -67,7 +65,7 @@ export default class RemotelySavePlugin extends Plugin {
   syncStatus: SyncStatusType;
 
   async onload() {
-    console.log("loading plugin obsidian-remotely-save");
+    console.log("loading plugin remotely-save");
 
     await this.loadSettings();
 
@@ -87,6 +85,32 @@ export default class RemotelySavePlugin extends Plugin {
       })
     );
 
+    this.registerObsidianProtocolHandler(COMMAND_URI, async (inputParams) => {
+      const parsed = importQrCodeUri(inputParams, this.app.vault.getName());
+      if (parsed.status === "error") {
+        new Notice(parsed.message);
+      } else {
+        const copied = JSON.parse(JSON.stringify(parsed.result));
+        // new Notice(JSON.stringify(copied))
+        this.settings = copied;
+        this.saveSettings();
+        new Notice(
+          `New settings for ${this.manifest.name} saved. Reopen the plugin Settings to the effect.`
+        );
+      }
+    });
+
+    this.registerObsidianProtocolHandler(
+      COMMAND_CALLBACK,
+      async (inputParams) => {
+        new Notice(
+          `Your uri call a callback that's not supported yet: ${JSON.stringify(
+            inputParams
+          )}`
+        );
+      }
+    );
+
     this.addRibbonIcon("switch", "Remotely Save", async () => {
       if (this.syncStatus !== "idle") {
         new Notice(
@@ -110,6 +134,7 @@ export default class RemotelySavePlugin extends Plugin {
           this.settings.s3,
           this.settings.webdav,
           this.settings.dropbox,
+          this.app.vault.getName(),
           () => self.saveSettings()
         );
         const remoteRsp = await client.listFromRemote();
@@ -190,7 +215,7 @@ export default class RemotelySavePlugin extends Plugin {
   }
 
   onunload() {
-    console.log("unloading plugin obsidian-remotely-save");
+    console.log("unloading plugin remotely-save");
     this.destroyDBs();
   }
 
@@ -295,13 +320,11 @@ export class DropboxAuthModal extends Modal {
     this.revokeAuthSetting = revokeAuthSetting;
   }
 
-  onOpen() {
+  async onOpen() {
     let { contentEl } = this;
 
-    const k = getCodeVerifierAndChallenge();
+    const { authUrl, verifier } = await getAuthUrlAndVerifier(
-    const authUrl = getAuthUrl(
+      this.plugin.settings.dropbox.clientID
-      this.plugin.settings.dropbox.clientID,
-      k.challenge
     );
 
     contentEl.createEl("p", {
@@ -335,7 +358,7 @@ export class DropboxAuthModal extends Modal {
           try {
             const authRes = await sendAuthReq(
               this.plugin.settings.dropbox.clientID,
-              k.verifier,
+              verifier,
               authCode
             );
             const self = this;
@@ -349,6 +372,7 @@ export class DropboxAuthModal extends Modal {
               undefined,
               undefined,
               this.plugin.settings.dropbox,
+              this.app.vault.getName(),
               () => self.plugin.saveSettings()
             );
             const username = await client.getUser();
@@ -381,6 +405,60 @@ export class DropboxAuthModal extends Modal {
   }
 }
 
+export class ExportSettingsQrCodeModal extends Modal {
+  plugin: RemotelySavePlugin;
+  constructor(app: App, plugin: RemotelySavePlugin) {
+    super(app);
+    this.plugin = plugin;
+  }
+
+  async onOpen() {
+    let { contentEl } = this;
+
+    const { rawUri, imgUri } = await exportQrCodeUri(
+      this.plugin.settings,
+      this.app.vault.getName(),
+      this.plugin.manifest.version
+    );
+
+    contentEl.createEl("p", {
+      text: "You can use another device to scan this qrcode.",
+    });
+
+    contentEl.createEl("p", {
+      text: "Or, you can click the button to copy the special url.",
+    });
+
+    contentEl.createEl(
+      "button",
+      {
+        text: "Click to copy the special URI",
+      },
+      (el) => {
+        el.onclick = async () => {
+          await navigator.clipboard.writeText(rawUri);
+          new Notice("special uri copied to clipboard!");
+        };
+      }
+    );
+
+    contentEl.createEl(
+      "img",
+      {
+        cls: "qrcode-img",
+      },
+      async (el) => {
+        el.src = imgUri;
+      }
+    );
+  }
+
+  onClose() {
+    let { contentEl } = this;
+    contentEl.empty();
+  }
+}
+
 class RemotelySaveSettingTab extends PluginSettingTab {
   plugin: RemotelySavePlugin;
 
@@ -424,42 +502,9 @@ class RemotelySaveSettingTab extends PluginSettingTab {
     // we need to create the div in advance of any other service divs
     const serviceChooserDiv = generalDiv.createEl("div");
 
-    let clickChooserTimes = 0;
-    serviceChooserDiv.onClickEvent(async (x) => {
-      if (Platform.isIosApp) {
-        // downgrade the experiment
-        // because iOS doesn't support x.detail
-        clickChooserTimes += 1;
-        setTimeout(function () {
-          clickChooserTimes = 0;
-        }, 2000);
-      }
-
-      if ((Platform.isIosApp && clickChooserTimes === 5) || x.detail === 5) {
-        if (this.plugin.settings.serviceType === "webdav") {
-          new Notice(
-            "You've enabled hidden unstable experimental webdav support before. Nothing changes."
-          );
-        } else if (!this.plugin.settings.enableExperimentService) {
-          this.plugin.settings.enableExperimentService = true;
-          await this.plugin.saveSettings();
-          new Notice(
-            "You've enabled hidden unstable experimental webdav support. Reopen settings again and try webdav with caution."
-          );
-        } else if (this.plugin.settings.enableExperimentService) {
-          this.plugin.settings.enableExperimentService = false;
-          await this.plugin.saveSettings();
-          new Notice(
-            "You've disabled hidden unstable experimental webdav support. Reopen settings again."
-          );
-        }
-      }
-      x.preventDefault();
-    });
-
     const s3Div = containerEl.createEl("div", { cls: "s3-hide" });
     s3Div.toggleClass("s3-hide", this.plugin.settings.serviceType !== "s3");
-    s3Div.createEl("h2", { text: "S3 (-compatible) Service" });
+    s3Div.createEl("h2", { text: "Remote For S3 (-compatible)" });
 
     s3Div.createEl("p", {
       text: "You can use Amazon S3 or another S3-compatible service to sync your vault. Enter your bucket information below.",
@@ -586,7 +631,7 @@ class RemotelySaveSettingTab extends PluginSettingTab {
       "dropbox-hide",
       this.plugin.settings.serviceType !== "dropbox"
     );
-    dropboxDiv.createEl("h2", { text: "for Dropbox" });
+    dropboxDiv.createEl("h2", { text: "Remote For Dropbox" });
     dropboxDiv.createEl("p", {
       text: "Disclaimer: Sync support for Dropbox are more experimental, and s3 functions are more stable now.",
       cls: "dropbox-disclaimer",
@@ -600,7 +645,7 @@ class RemotelySaveSettingTab extends PluginSettingTab {
       cls: "dropbox-disclaimer",
     });
     dropboxDiv.createEl("p", {
-      text: "We will create a folder App/obsidian-remotely-save on your Dropbox. All files/folders sync would happen inside this folder.",
+      text: "We will create a folder Apps/remotely-save on your Dropbox. All files/folders sync would happen inside this folder.",
     });
 
     const dropboxSelectAuthDiv = dropboxDiv.createDiv();
@@ -626,6 +671,7 @@ class RemotelySaveSettingTab extends PluginSettingTab {
               undefined,
               undefined,
               this.plugin.settings.dropbox,
+              this.app.vault.getName(),
               () => self.plugin.saveSettings()
             );
             await client.revokeAuth();
@@ -687,6 +733,7 @@ class RemotelySaveSettingTab extends PluginSettingTab {
             undefined,
             undefined,
             this.plugin.settings.dropbox,
+            this.app.vault.getName(),
             () => self.plugin.saveSettings()
           );
 
@@ -705,7 +752,7 @@ class RemotelySaveSettingTab extends PluginSettingTab {
       this.plugin.settings.serviceType !== "webdav"
     );
 
-    webdavDiv.createEl("h2", { text: "Webdav Service" });
+    webdavDiv.createEl("h2", { text: "Remote For Webdav" });
 
     webdavDiv.createEl("p", {
       text: "Disclaimer: Webdav functions are more experimental, and s3 functions are more stable now.",
@@ -767,7 +814,7 @@ class RemotelySaveSettingTab extends PluginSettingTab {
       )
       .addDropdown((dropdown) => {
         dropdown.addOption("basic", "basic");
-        dropdown.addOption("digest", "digest");
+        // dropdown.addOption("digest", "digest");
 
         dropdown
           .setValue(this.plugin.settings.webdav.authType)
@@ -805,18 +852,10 @@ class RemotelySaveSettingTab extends PluginSettingTab {
       .setDesc("Choose a service, by default s3")
       .addDropdown(async (dropdown) => {
         const currService = this.plugin.settings.serviceType;
-        const enableExperimentService =
-          this.plugin.settings.enableExperimentService;
 
         dropdown.addOption("s3", "s3 (-compatible)");
         dropdown.addOption("dropbox", "Dropbox");
-        if (currService === "webdav" || enableExperimentService) {
         dropdown.addOption("webdav", "webdav (experimental)");
-          if (!enableExperimentService) {
-            this.plugin.settings.enableExperimentService = true;
-            await this.plugin.saveSettings();
-          }
-        }
         dropdown
           .setValue(this.plugin.settings.serviceType)
           .onChange(async (val: SUPPORTED_SERVICES_TYPE) => {
@@ -837,6 +876,24 @@ class RemotelySaveSettingTab extends PluginSettingTab {
           });
       });
 
+    // import and export
+    const importExportDiv = containerEl.createEl("div");
+    importExportDiv.createEl("h2", { text: "Import and Export Settings" });
+
+    new Setting(importExportDiv)
+      .setName("export")
+      .setDesc("export all settings by generating qrcode")
+      .addButton(async (button) => {
+        button.setButtonText("Get QR Code");
+        button.onClick(async () => {
+          new ExportSettingsQrCodeModal(this.app, this.plugin).open();
+        });
+      });
+
+    new Setting(importExportDiv)
+      .setName("import")
+      .setDesc("You should manually open a camera app to scan the QR code");
+
     const debugDiv = containerEl.createEl("div");
     debugDiv.createEl("h2", { text: "Debug" });
     const syncPlanDiv = debugDiv.createEl("div");

src/remote.ts

@@ -1,24 +1,30 @@
 import { Vault } from "obsidian";
 
-import type { SUPPORTED_SERVICES_TYPE } from "./baseTypes";
+import type {
-import * as s3 from "./s3";
+  SUPPORTED_SERVICES_TYPE,
-import * as webdav from "./webdav";
+  S3Config,
+  DropboxConfig,
+  WebdavConfig,
+} from "./baseTypes";
+import * as s3 from "./remoteForS3";
+import * as webdav from "./remoteForWebdav";
 import * as dropbox from "./remoteForDropbox";
 
 export class RemoteClient {
   readonly serviceType: SUPPORTED_SERVICES_TYPE;
   readonly s3Client?: s3.S3Client;
-  readonly s3Config?: s3.S3Config;
+  readonly s3Config?: S3Config;
   readonly webdavClient?: webdav.WebDAVClient;
-  readonly webdavConfig?: webdav.WebdavConfig;
+  readonly webdavConfig?: WebdavConfig;
   readonly dropboxClient?: dropbox.WrappedDropboxClient;
-  readonly dropboxConfig?: dropbox.DropboxConfig;
+  readonly dropboxConfig?: DropboxConfig;
 
   constructor(
     serviceType: SUPPORTED_SERVICES_TYPE,
-    s3Config?: s3.S3Config,
+    s3Config?: S3Config,
-    webdavConfig?: webdav.WebdavConfig,
+    webdavConfig?: WebdavConfig,
-    dropboxConfig?: dropbox.DropboxConfig,
+    dropboxConfig?: DropboxConfig,
+    vaultName?: string,
     saveUpdatedConfigFunc?: () => Promise<any>
   ) {
     this.serviceType = serviceType;
@@ -31,12 +37,15 @@ export class RemoteClient {
       this.webdavConfig = webdavConfig;
       this.webdavClient = webdav.getWebdavClient(this.webdavConfig);
     } else if (serviceType === "dropbox") {
-      if (saveUpdatedConfigFunc === undefined) {
+      if (vaultName === undefined || saveUpdatedConfigFunc === undefined) {
-        throw Error("remember to provide callback while init dropbox client");
+        throw Error(
+          "remember to provide vault name and callback while init dropbox client"
+        );
       }
       this.dropboxConfig = dropboxConfig;
       this.dropboxClient = dropbox.getDropboxClient(
         this.dropboxConfig,
+        vaultName,
         saveUpdatedConfigFunc
       );
     } else {

src/remoteForDropbox.ts

@@ -1,11 +1,9 @@
 import * as path from "path";
 import { FileStats, Vault } from "obsidian";
-import { Buffer } from "buffer";
-import * as crypto from "crypto";
 
-import { Dropbox, DropboxResponse, files } from "dropbox";
+import { Dropbox, DropboxAuth, DropboxResponse, files } from "dropbox";
 export { Dropbox } from "dropbox";
-import { RemoteItem } from "./baseTypes";
+import { RemoteItem, DropboxConfig } from "./baseTypes";
 import {
   arrayBufferToBuffer,
   bufferToArrayBuffer,
@@ -15,17 +13,6 @@ import {
   setToString,
 } from "./misc";
 import { decryptArrayBuffer, encryptArrayBuffer } from "./encrypt";
-import { strict as assert } from "assert";
-
-export interface DropboxConfig {
-  accessToken: string;
-  clientID: string;
-  refreshToken: string;
-  accessTokenExpiresInSeconds: number;
-  accessTokenExpiresAtTime: number;
-  accountID: string;
-  username: string;
-}
 
 export const DEFAULT_DROPBOX_CONFIG = {
   accessToken: "",
@@ -37,10 +24,11 @@ export const DEFAULT_DROPBOX_CONFIG = {
   username: "",
 };
 
-export const getDropboxPath = (fileOrFolderPath: string) => {
+export const getDropboxPath = (fileOrFolderPath: string, vaultName: string) => {
   let key = fileOrFolderPath;
   if (!fileOrFolderPath.startsWith("/")) {
-    key = `/${fileOrFolderPath}`;
+    // then this is original path in Obsidian
+    key = `/${vaultName}/${fileOrFolderPath}`;
   }
   if (key.endsWith("/")) {
     key = key.slice(0, key.length - 1);
@@ -48,20 +36,26 @@ export const getDropboxPath = (fileOrFolderPath: string) => {
   return key;
 };
 
-const getNormPath = (fileOrFolderPath: string) => {
+const getNormPath = (fileOrFolderPath: string, vaultName: string) => {
-  if (fileOrFolderPath.startsWith("/")) {
+  if (
-    return fileOrFolderPath.slice(1);
+    !(
+      fileOrFolderPath === `/${vaultName}` ||
+      fileOrFolderPath.startsWith(`/${vaultName}/`)
+    )
+  ) {
+    throw Error(`"${fileOrFolderPath}" doesn't starts with "/${vaultName}/"`);
   }
-  return fileOrFolderPath;
+  return fileOrFolderPath.slice(`/${vaultName}/`.length);
 };
 
 const fromDropboxItemToRemoteItem = (
   x:
     | files.FileMetadataReference
     | files.FolderMetadataReference
-    | files.DeletedMetadataReference
+    | files.DeletedMetadataReference,
+  vaultName: string
 ): RemoteItem => {
-  let key = getNormPath(x.path_display);
+  let key = getNormPath(x.path_display, vaultName);
   if (x[".tag"] === "folder" && !key.endsWith("/")) {
     key = `${key}/`;
   }
@@ -139,7 +133,6 @@ const fixLastModifiedTimeInplace = (allFilesFolders: RemoteItem[]) => {
     if (item.lastModified !== undefined) {
       continue; // don't need to deal with it
     }
-    assert(!(item.key in potentialMTime));
     const parent = `${path.posix.dirname(item.key)}/`;
     if (parent in potentialMTime) {
       item.lastModified = potentialMTime[parent];
@@ -157,32 +150,28 @@ const fixLastModifiedTimeInplace = (allFilesFolders: RemoteItem[]) => {
 // see https://dropbox.tech/developers/pkce--what-and-why-
 ////////////////////////////////////////////////////////////////////////////////
 
-const specialBase64Encode = (str: Buffer) => {
+export const getAuthUrlAndVerifier = async (appKey: string) => {
-  return str
+  const auth = new DropboxAuth({
-    .toString("base64")
+    clientId: appKey,
-    .replace(/\+/g, "-")
+  });
-    .replace(/\//g, "_")
+  const authUrl = (
-    .replace(/=/g, "");
+    await auth.getAuthenticationUrl(
-};
+      undefined,
-const sha256 = (buffer: string) => {
+      undefined,
-  return crypto.createHash("sha256").update(buffer).digest();
+      "code",
-};
+      "offline",
-
+      undefined,
-export const getCodeVerifierAndChallenge = () => {
+      "none",
-  const codeVerifier = specialBase64Encode(crypto.randomBytes(32));
+      true
-  // console.log(`Client generated code_verifier: ${codeVerifier}`);
+    )
-  const codeChallenge = specialBase64Encode(sha256(codeVerifier));
+  ).toString();
-  // console.log(`Client generated code_challenge: ${codeChallenge}`);
+  const verifier = auth.getCodeVerifier();
   return {
-    verifier: codeVerifier,
+    authUrl: authUrl,
-    challenge: codeChallenge,
+    verifier: verifier,
   };
 };
 
-export const getAuthUrl = (appKey: string, challenge: string) => {
-  return `https://www.dropbox.com/oauth2/authorize?client_id=${appKey}&response_type=code&code_challenge=${challenge}&code_challenge_method=S256&token_access_type=offline`;
-};
-
 export interface DropboxSuccessAuthRes {
   access_token: string;
   token_type: "bearer";
@@ -261,17 +250,23 @@ export const setConfigBySuccessfullAuthInplace = async (
 
 export class WrappedDropboxClient {
   dropboxConfig: DropboxConfig;
+  vaultName: string;
   saveUpdatedConfigFunc: () => Promise<any>;
   dropbox: Dropbox;
+  vaultFolderExists: boolean;
   constructor(
     dropboxConfig: DropboxConfig,
+    vaultName: string,
     saveUpdatedConfigFunc: () => Promise<any>
   ) {
     this.dropboxConfig = dropboxConfig;
+    this.vaultName = vaultName;
     this.saveUpdatedConfigFunc = saveUpdatedConfigFunc;
+    this.vaultFolderExists = false;
   }
 
   init = async () => {
+    // check token
     if (
       this.dropboxConfig.accessToken === "" ||
       this.dropboxConfig.refreshToken === ""
@@ -303,6 +298,33 @@ export class WrappedDropboxClient {
         accessToken: this.dropboxConfig.accessToken,
       });
     }
+
+    // check vault folder
+    // console.log(`checking remote has folder /${this.vaultName}`);
+    if (this.vaultFolderExists) {
+      // console.log(`already checked, /${this.vaultName} exist before`)
+    } else {
+      const res = await this.dropbox.filesListFolder({
+        path: "",
+        recursive: false,
+      });
+      for (const item of res.result.entries) {
+        if (item.path_display === `/${this.vaultName}`) {
+          this.vaultFolderExists = true;
+          break;
+        }
+      }
+      if (!this.vaultFolderExists) {
+        console.log(`remote does not have folder /${this.vaultName}`);
+        await this.dropbox.filesCreateFolderV2({
+          path: `/${this.vaultName}`,
+        });
+        console.log(`remote folder /${this.vaultName} created`);
+      } else {
+        // console.log(`remote folder /${this.vaultName} exists`);
+      }
+    }
+
     return this.dropbox;
   };
 }
@@ -313,9 +335,14 @@ export class WrappedDropboxClient {
  */
 export const getDropboxClient = (
   dropboxConfig: DropboxConfig,
+  vaultName: string,
   saveUpdatedConfigFunc: () => Promise<any>
 ) => {
-  return new WrappedDropboxClient(dropboxConfig, saveUpdatedConfigFunc);
+  return new WrappedDropboxClient(
+    dropboxConfig,
+    vaultName,
+    saveUpdatedConfigFunc
+  );
 };
 
 export const getRemoteMeta = async (
@@ -328,7 +355,7 @@ export const getRemoteMeta = async (
     // we instead try to list files
     // if no error occurs, we ensemble a fake result.
     const rsp = await client.dropbox.filesListFolder({
-      path: "",
+      path: `/${client.vaultName}`,
       recursive: false, // don't need to recursive here
     });
     if (rsp.status !== 200) {
@@ -343,7 +370,7 @@ export const getRemoteMeta = async (
     } as RemoteItem;
   }
 
-  const key = getDropboxPath(fileOrFolderPath);
+  const key = getDropboxPath(fileOrFolderPath, client.vaultName);
 
   const rsp = await client.dropbox.filesGetMetadata({
     path: key,
@@ -351,7 +378,7 @@ export const getRemoteMeta = async (
   if (rsp.status !== 200) {
     throw Error(JSON.stringify(rsp));
   }
-  return fromDropboxItemToRemoteItem(rsp.result);
+  return fromDropboxItemToRemoteItem(rsp.result, client.vaultName);
 };
 
 export const uploadToRemote = async (
@@ -369,7 +396,7 @@ export const uploadToRemote = async (
   if (password !== "") {
     uploadFile = remoteEncryptedKey;
   }
-  uploadFile = getDropboxPath(uploadFile);
+  uploadFile = getDropboxPath(uploadFile, client.vaultName);
 
   const isFolder = fileOrFolderPath.endsWith("/");
 
@@ -425,7 +452,9 @@ export const uploadToRemote = async (
     });
     // we want to mark that parent folders are created
     if (foldersCreatedBefore !== undefined) {
-      const dirs = getFolderLevels(uploadFile).map(getDropboxPath);
+      const dirs = getFolderLevels(uploadFile).map((x) =>
+        getDropboxPath(x, client.vaultName)
+      );
       for (const dir of dirs) {
         foldersCreatedBefore?.add(dir);
       }
@@ -442,19 +471,41 @@ export const listFromRemote = async (
     throw Error("prefix not supported (yet)");
   }
   await client.init();
-  const res = await client.dropbox.filesListFolder({
+  let res = await client.dropbox.filesListFolder({
-    path: "",
+    path: `/${client.vaultName}`,
     recursive: true,
+    include_deleted: false,
+    limit: 1000,
   });
   if (res.status !== 200) {
     throw Error(JSON.stringify(res));
   }
   // console.log(res);
+
   const contents = res.result.entries;
   const unifiedContents = contents
     .filter((x) => x[".tag"] !== "deleted")
-    .map(fromDropboxItemToRemoteItem);
+    .filter((x) => x.path_display !== `/${client.vaultName}`)
+    .map((x) => fromDropboxItemToRemoteItem(x, client.vaultName));
+
+  while (res.result.has_more) {
+    res = await client.dropbox.filesListFolderContinue({
+      cursor: res.result.cursor,
+    });
+    if (res.status !== 200) {
+      throw Error(JSON.stringify(res));
+    }
+
+    const contents2 = res.result.entries;
+    const unifiedContents2 = contents2
+      .filter((x) => x[".tag"] !== "deleted")
+      .filter((x) => x.path_display !== `/${client.vaultName}`)
+      .map((x) => fromDropboxItemToRemoteItem(x, client.vaultName));
+    unifiedContents.push(...unifiedContents2);
+  }
+
   fixLastModifiedTimeInplace(unifiedContents);
+
   return {
     Contents: unifiedContents,
   };
@@ -465,7 +516,7 @@ const downloadFromRemoteRaw = async (
   fileOrFolderPath: string
 ) => {
   await client.init();
-  const key = getDropboxPath(fileOrFolderPath);
+  const key = getDropboxPath(fileOrFolderPath, client.vaultName);
   const rsp = await client.dropbox.filesDownload({
     path: key,
   });
@@ -505,7 +556,7 @@ export const downloadFromRemote = async (
     if (password !== "") {
       downloadFile = remoteEncryptedKey;
     }
-    downloadFile = getDropboxPath(downloadFile);
+    downloadFile = getDropboxPath(downloadFile, client.vaultName);
     const remoteContent = await downloadFromRemoteRaw(client, downloadFile);
     let localContent = remoteContent;
     if (password !== "") {
@@ -530,7 +581,7 @@ export const deleteFromRemote = async (
   if (password !== "") {
     remoteFileName = remoteEncryptedKey;
   }
-  remoteFileName = getDropboxPath(remoteFileName);
+  remoteFileName = getDropboxPath(remoteFileName, client.vaultName);
 
   await client.init();
   try {

src/remoteForS3.ts

@@ -27,17 +27,9 @@ import {
 } from "./misc";
 import * as mime from "mime-types";
 
-import { RemoteItem } from "./baseTypes";
+import { RemoteItem, S3Config } from "./baseTypes";
 import { decryptArrayBuffer, encryptArrayBuffer } from "./encrypt";
 
-export interface S3Config {
-  s3Endpoint: string;
-  s3Region: string;
-  s3AccessKeyID: string;
-  s3SecretAccessKey: string;
-  s3BucketName: string;
-}
-
 export const DEFAULT_S3_CONFIG = {
   s3Endpoint: "",
   s3Region: "",

src/remoteForWebdav.ts

@@ -4,7 +4,7 @@ import { AuthType, BufferLike, createClient } from "webdav/web";
 import type { WebDAVClient, ResponseDataDetailed, FileStat } from "webdav/web";
 export type { WebDAVClient } from "webdav/web";
 
-import type { RemoteItem } from "./baseTypes";
+import type { RemoteItem, WebdavAuthType, WebdavConfig } from "./baseTypes";
 
 import {
   arrayBufferToBuffer,
@@ -14,15 +14,6 @@ import {
 } from "./misc";
 import { decryptArrayBuffer, encryptArrayBuffer } from "./encrypt";
 
-export type WebdavAuthType = "digest" | "basic";
-
-export interface WebdavConfig {
-  address: string;
-  username: string;
-  password: string;
-  authType: WebdavAuthType;
-}
-
 export const DEFAULT_WEBDAV_CONFIG = {
   address: "",
   username: "",
@@ -226,7 +217,7 @@ export const deleteFromRemote = async (
   remoteFileName = getWebdavPath(remoteFileName);
   try {
     await client.deleteFile(remoteFileName);
-    console.log(`delete ${remoteFileName} succeeded`);
+    // console.log(`delete ${remoteFileName} succeeded`);
   } catch (err) {
     console.error("some error while deleting");
     console.log(err);

styles.css

@@ -32,3 +32,8 @@
 .webdav-hide {
   display: none;
 }
+
+.qrcode-img {
+  width: 350px;
+  height: 350px;
+}

versions.json

@@ -1,3 +1,3 @@
 {
-  "0.1.7": "0.12.15"
+  "0.2.3": "0.12.15"
 }

webpack.config.js

@@ -0,0 +1,75 @@
+require("dotenv").config();
+const path = require("path");
+const webpack = require("webpack");
+const TerserPlugin = require("terser-webpack-plugin");
+
+const DEFAULT_DROPBOX_APP_KEY = process.env.DROPBOX_APP_KEY || "";
+
+module.exports = {
+  entry: "./src/main.ts",
+  target: "web",
+  output: {
+    filename: "main.js",
+    path: __dirname,
+    libraryTarget: "commonjs",
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.env.DEFAULT_DROPBOX_APP_KEY": `"${DEFAULT_DROPBOX_APP_KEY}"`,
+    }),
+    // Work around for Buffer is undefined:
+    // https://github.com/webpack/changelog-v5/issues/10
+    new webpack.ProvidePlugin({
+      Buffer: ["buffer", "Buffer"],
+    }),
+    new webpack.ProvidePlugin({
+      process: "process/browser",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".js"],
+    mainFields: ["browser", "module", "main"],
+    fallback: {
+      // assert: require.resolve("assert"),
+      // buffer: require.resolve("buffer/"),
+      // console: require.resolve("console-browserify"),
+      // constants: require.resolve("constants-browserify"),
+      // crypto: require.resolve("crypto-browserify"),
+      crypto: false,
+      // domain: require.resolve("domain-browser"),
+      // events: require.resolve("events"),
+      // http: require.resolve("stream-http"),
+      // https: require.resolve("https-browserify"),
+      // os: require.resolve("os-browserify/browser"),
+      path: require.resolve("path-browserify"),
+      // punycode: require.resolve("punycode"),
+      process: require.resolve("process/browser"),
+      // querystring: require.resolve("querystring-es3"),
+      stream: require.resolve("stream-browserify"),
+      // string_decoder: require.resolve("string_decoder"),
+      // sys: require.resolve("util"),
+      // timers: require.resolve("timers-browserify"),
+      // tty: require.resolve("tty-browserify"),
+      // url: require.resolve("url"),
+      // util: require.resolve("util"),
+      // vm: require.resolve("vm-browserify"),
+      // zlib: require.resolve("browserify-zlib"),
+    },
+  },
+  externals: {
+    obsidian: "commonjs2 obsidian",
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin({ extractComments: false })],
+  },
+};