Implement big text view and preliminary i18n

.gitignore

@@ -1,4 +1,3 @@
-drafts
 node_modules
 mochawesome-report
 lib

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
   "editor.formatOnSave": true,
-  "cSpell.words": ["autolock"],
   "cSpell.ignorePaths": [
     "**/package-lock.json",
     "**/node_modules/**",
@@ -10,4 +9,4 @@
     ".vscode-insiders",
     "i18n.json"
   ]
-}
+}

README.md

@@ -1,35 +1,10 @@
 # opvault.js
 
-![License](https://img.shields.io/badge/Licence-GPL_v3-blue.svg)
-
-## Lecteur de coffres OnePassword libre
-
-Vos coffres OnePassword, sur n’importe quelle plateforme. Pour commencer, vous pouvez [télécharger une version compilée](../../../releases) pour votre système d’exploitation, ou [suivre les instructions de compilation](#build) ci-dessous.
-
-## OnePassword Vault Reader
-
-Read your OnePassword vaults on all platform. To start, you can [download a prebuilt binary](../../../releases) for your OS, or [follow the build instructions](#build) below.
-
-## Capture d’écran / Screenshot
-
-<img alt="linux screenshot" src=".github/screenshot.png" width="700" />
-
-## Build
-
-```sh
-pnpm install
-cd packages/web
-pnpm run bundle
-```
-
 ## Test
 
 ```sh
-cd packages/opvault.js/src/__tests__
 wget -qO- https://cache.agilebits.com/security-kb/freddy-2013-12-04.tar.gz | tar xvz
 mv onepassword_data freddy-2013-12-04.opvault
-
-# Run tests
 pnpm run test
 ```
 

package.json

@@ -4,49 +4,45 @@
   "main": "lib/index.js",
   "repository": "https://git.aet.ac/aet/opvault.js.git",
   "private": true,
+  "license": "UNLICENSED",
   "scripts": {
     "design": "marked -o design.html < design.md",
-    "test": "rm -rf mochawesome-report; c8 -r html node --expose-gc node_modules/mocha/bin/_mocha packages/**/*.test.ts; mv coverage mochawesome-report/coverage",
+    "test": "node --expose-gc node_modules/mocha/bin/_mocha test/**/*.test.ts",
-    "repl": "node -r ts-node/register/transpile-only src/repl.ts",
+    "repl": "node -r ts-node/register/transpile-only src/repl.ts"
-    "dev": "cd packages/web && yarn dev",
-    "bundle": "cd packages/web && yarn bundle",
-    "i18n": "node packages/web/scripts/build-i18n-yml-typedef.js"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.4",
+    "@types/chai": "^4.2.22",
-    "@types/chai-as-promised": "^7.1.5",
+    "@types/chai-as-promised": "^7.1.4",
-    "@types/fs-extra": "^11.0.1",
+    "@types/fs-extra": "^9.0.13",
     "@types/mocha": "github:whitecolor/mocha-types#da22474cf43f48a56c86f8c23a5a0ea36e295768",
-    "@types/node": "^18.16.2",
+    "@types/node": "^16.10.3",
-    "@types/sinon": "^10.0.14",
+    "@types/sinon": "^10.0.4",
-    "@types/sinon-chai": "^3.2.9",
+    "@types/sinon-chai": "^3.2.5",
-    "@types/wicg-file-system-access": "^2020.9.5",
+    "@types/wicg-file-system-access": "^2020.9.4",
-    "@typescript-eslint/eslint-plugin": "5.59.1",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "5.59.1",
+    "@typescript-eslint/parser": "4.33.0",
-    "c8": "^7.13.0",
+    "chai": "^4.3.4",
-    "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chalk": "^4.1.2",
-    "eslint": "8.39.0",
+    "eslint": "7.32.0",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "8.3.0",
-    "eslint-import-resolver-typescript": "3.5.5",
+    "eslint-import-resolver-typescript": "2.5.0",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.24.2",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.26.1",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-hooks": "4.2.0",
-    "fs-extra": "^11.1.1",
+    "fs-extra": "^10.0.0",
-    "marked": "^4.3.0",
+    "marked": "^3.0.8",
-    "mocha": "^10.2.0",
+    "mocha": "^9.1.2",
-    "mochawesome": "^7.1.3",
+    "mochawesome": "^6.3.0",
-    "prettier": "^2.8.8",
+    "prettier": "^2.4.1",
-    "react": "^18.2.0",
+    "react": "^17.0.2",
-    "react-dom": "^18.2.0",
+    "react-dom": "^17.0.2",
-    "sass": "^1.62.1",
+    "sass": "^1.43.2",
-    "sinon": "^15.0.4",
+    "sinon": "^11.1.2",
     "sinon-chai": "^3.7.0",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.2.1",
-    "tsconfig-paths": "^4.2.0",
+    "tsconfig-paths": "^3.11.0",
-    "tslib": "^2.5.0",
+    "typescript": "^4.4.3"
-    "typescript": "^5.0.4"
   },
   "prettier": {
     "arrowParens": "avoid",

packages/opvault.js/LICENSE

@@ -0,0 +1,184 @@
+GNU LESSER GENERAL PUBLIC LICENSE
+
+Version 3, 29 June 2007
+
+Copyright (C) 2007
+aet
+
+Everyone is permitted to copy and distribute verbatim copies of this license
+document, but changing it is not allowed.
+
+This version of the GNU Lesser General
+Public License incorporates the terms and conditions of version 3 of the GNU
+General Public License, supplemented by the additional permissions listed
+below.
+
+   0. Additional Definitions.
+
+      
+
+      As used herein, "this
+License" refers to version 3 of the GNU Lesser General Public License, and the
+"GNU GPL" refers to version 3 of the GNU General Public License.
+
+      
+
+     
+"The Library" refers to a covered work governed by this License, other than an
+Application or a Combined Work as defined below.
+
+      
+
+      An "Application"
+is any work that makes use of an interface provided by the Library, but which is
+not otherwise based on the Library. Defining a subclass of a class defined by the
+Library is deemed a mode of using an interface provided by the Library.
+
+      
+
+
+A "Combined Work" is a work produced by combining or linking an Application with
+the Library. The particular version of the Library with which the Combined Work
+was made is also called the "Linked Version".
+
+      
+
+      The "Minimal
+Corresponding Source" for a Combined Work means the Corresponding Source for the
+Combined Work, excluding any source code for portions of the Combined Work that,
+considered in isolation, are based on the Application, and not on the Linked
+Version.
+
+      
+
+      The "Corresponding Application Code" for a Combined Work
+means the object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+   1.
+Exception to Section 3 of the GNU GPL.
+
+   You may convey a covered work under
+sections 3 and 4 of this License without being bound by section 3 of the GNU
+GPL.
+
+   2. Conveying Modified Versions.
+
+   If you modify a copy of the Library,
+and, in your modifications, a facility refers to a function or data to be
+supplied by an Application that uses the facility (other than as an argument
+passed when the facility is invoked), then you may convey a copy of the modified
+version:
+
+      a) under this License, provided that you make a good faith effort
+to ensure that, in the event an Application does not supply the function or data,
+the facility still operates, and performs whatever part of its purpose remains
+meaningful, or
+
+      b) under the GNU GPL, with none of the additional
+permissions of this License applicable to that copy.
+
+   3. Object Code
+Incorporating Material from Library Header Files.
+
+   The object code form of an
+Application may incorporate material from a header file that is part of the
+Library. You may convey such object code under terms of your choice, provided
+that, if the incorporated material is not limited to numerical parameters, data
+structure layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+      a) Give
+prominent notice with each copy of the object code that the Library is used in it
+and that the Library and its use are covered by this License.
+
+      b) Accompany
+the object code with a copy of the GNU GPL and this license document.
+
+   4.
+Combined Works.
+
+   You may convey a Combined Work under terms of your choice
+that, taken together, effectively do not restrict modification of the portions of
+the Library contained in the Combined Work and reverse engineering for debugging
+such modifications, if you also do each of the following:
+
+      a) Give
+prominent notice with each copy of the Combined Work that the Library is used in
+it and that the Library and its use are covered by this License.
+
+      b)
+Accompany the Combined Work with a copy of the GNU GPL and this license
+document.
+
+      c) For a Combined Work that displays copyright notices during
+execution, include the copyright notice for the Library among these notices, as
+well as a reference directing the user to the copies of the GNU GPL and this
+license document.
+
+      d) Do one of the following:
+
+         0) Convey the
+Minimal Corresponding Source under the terms of this License, and the
+Corresponding Application Code in a form suitable for, and under terms that
+permit, the user to recombine or relink the Application with a modified version
+of the Linked Version to produce a modified Combined Work, in the manner
+specified by section 6 of the GNU GPL for conveying Corresponding Source.
+
+      
+1) Use a suitable shared library mechanism for linking with the Library. A
+suitable mechanism is one that (a) uses at run time a copy of the Library already
+present on the user's computer system, and (b) will operate properly with a
+modified version of the Library that is interface-compatible with the Linked
+Version.
+
+      e) Provide Installation Information, but only if you would
+otherwise be required to provide such information under section 6 of the GNU GPL,
+and only to the extent that such information is necessary to install and execute
+a modified version of the Combined Work produced by recombining or relinking the
+Application with a modified version of the Linked Version. (If you use option
+4d0, the Installation Information must accompany the Minimal Corresponding Source
+and Corresponding Application Code. If you use option 4d1, you must provide the
+Installation Information in the manner specified by section 6 of the GNU GPL for
+conveying Corresponding Source.)
+
+   5. Combined Libraries.
+
+   You may place
+library facilities that are a work based on the Library side by side in a single
+library together with other library facilities that are not Applications and are
+not covered by this License, and convey such a combined library under terms of
+your choice, if you do both of the following:
+
+      a) Accompany the combined
+library with a copy of the same work based on the Library, uncombined with any
+other library facilities, conveyed under the terms of this License.
+
+      b)
+Give prominent notice with the combined library that part of it is a work based
+on the Library, and explaining where to find the accompanying uncombined form of
+the same work.
+
+   6. Revised Versions of the GNU Lesser General Public
+License.
+
+   The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+   Each version is given a distinguishing
+version number. If the Library as you received it specifies that a certain
+numbered version of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and conditions either
+of that published version or of any later version published by the Free Software
+Foundation. If the Library as you received it does not specify a version number
+of the GNU Lesser General Public License, you may choose any version of the GNU
+Lesser General Public License ever published by the Free Software Foundation.
+
+  
+If the Library as you received it specifies that a proxy can decide whether
+future versions of the GNU Lesser General Public License shall apply, that
+proxy's public statement of acceptance of any version is permanent authorization
+for you to choose that version for the Library.

packages/opvault.js/assets/doc-theme.css

@@ -1,9 +0,0 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-code,
-pre,
-.tsd-signature {
-  font-family: D2Coding, Consolas, Menlo, Monaco, "Roboto Mono", monospace;
-}

packages/opvault.js/package.json

@@ -1,31 +1,23 @@
 {
   "name": "opvault.js",
+  "main": "src/index.ts",
   "version": "0.0.1",
   "license": "LGPL-3.0-or-later",
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs; prettier --write lib >/dev/null",
+    "build": "rollup -c; cp src/adapters/index.d.ts lib/adapters/; prettier --write lib >/dev/null",
     "build:docs": "typedoc --out docs src/index.ts --excludePrivate"
   },
-  "exports": {
-    ".": "./lib/index.js",
-    "./node": "./lib/node.js",
-    "./filePicker": "./lib/filePicker.js",
-    "./webkit": "./lib/webkit.js"
-  },
-  "files": [
-    "lib"
-  ],
   "dependencies": {
     "buffer": "^6.0.3",
-    "tiny-invariant": "1.3.1",
+    "tiny-invariant": "1.2.0",
-    "tslib": "2.5.0"
+    "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-replace": "^3.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^2.4.1",
-    "rollup": "^3.21.0",
+    "rollup": "^2.58.0",
-    "rollup-plugin-ts": "^3.2.0",
+    "rollup-plugin-ts": "^1.4.7",
-    "typedoc": "^0.24.6"
+    "typedoc": "^0.22.7"
   }
 }

packages/opvault.js/rollup.config.js

@@ -8,9 +8,7 @@ import { dependencies } from "./package.json"
 export default () => ({
   input: {
     index: "./src/index.ts",
-    node: "./src/adapter/node.ts",
+    "adapters/node": "./src/adapters/node.ts",
-    filePicker: "./src/adapter/showDirectoryPicker.ts",
-    webkit: "./src/adapter/webkitdirectory.ts",
   },
   external: builtinModules.concat(Object.keys(dependencies)),
   output: {

packages/opvault.js/src/__tests__/index.test.ts

@@ -1,99 +0,0 @@
-import { resolve } from "path"
-import { describe, it, beforeEach } from "mocha"
-import { expect } from "chai"
-
-import type { Vault } from "../index"
-import { base64FromByteArray } from "../buffer"
-import { OnePassword } from "../index"
-import { adapter } from "../adapter/node"
-
-describe("OnePassword", () => {
-  const freddy = resolve(__dirname, "freddy-2013-12-04.opvault")
-
-  describe("getProfileNames", () => {
-    it("freddy", async () => {
-      const instance = new OnePassword({ path: freddy, adapter })
-      expect(await instance.getProfileNames()).to.deep.equal(["default"])
-    })
-
-    it.skip("ignores faulty folders", async () => {})
-  })
-
-  describe("unlock", () => {
-    let vault: Vault
-
-    beforeEach(async () => {
-      vault = await new OnePassword({ path: freddy, adapter }).getProfile("default")
-    })
-
-    it("accepts correct password", async () => {
-      await expect(vault.unlock("freddy")).to.be.fulfilled
-      expect(vault.isLocked).to.be.false
-    })
-
-    it("rejects wrong password", () => {
-      ;["Freddy", "_freddy", ""].forEach(async password => {
-        await expect(vault.unlock(password)).to.be.rejectedWith("Invalid password")
-        expect(vault.isLocked).to.be.true
-      })
-    })
-  })
-
-  describe("content", () => {
-    let vault: Vault
-
-    beforeEach(async () => {
-      vault = await new OnePassword({ path: freddy, adapter }).getProfile("default")
-      await vault.unlock("freddy")
-    })
-
-    it("reads notes", async () => {
-      const item = (await vault.getItem({
-        title: "A note with some attachments",
-      }))!
-      expect(item).to.exist
-      expect(item.uuid).to.equal("F2DB5DA3FCA64372A751E0E85C67A538")
-      expect(item.attachments).to.have.lengthOf(2)
-      expect(item.details).to.deep.equal({
-        notesPlain: "This note has two attachments.",
-      })
-      expect(item.overview).to.deep.equal({
-        title: "A note with some attachments",
-        ps: 0,
-        ainfo: "This note has two attachments.",
-      })
-    })
-
-    it("decrypts items", async () => {
-      const decrypted = require("./decrypted.json")
-      expect(vault.isLocked).to.be.false
-      for (const [uuid, item] of Object.entries<any>(decrypted)) {
-        const actual = await vault.getItem(uuid)
-        expect(actual).to.exist
-        expect(actual!.overview).to.deep.equal(item.overview)
-        expect(actual!.details).to.deep.equal(item.itemDetails)
-        expect(actual!.attachments).to.have.lengthOf(item.attachments.length)
-        for (const [i, attachment] of actual!.attachments.entries()) {
-          const expected = item.attachments[i]
-          await attachment.unlock()
-          expect(attachment.metadata).to.deep.equal(expected.metadata)
-          expect(base64FromByteArray(attachment.file)).to.deep.equal(expected.file)
-          expect(base64FromByteArray(attachment.icon)).to.deep.equal(expected.icon)
-        }
-      }
-    })
-  })
-
-  describe("lock", () => {
-    it("locks", async () => {
-      const instance = new OnePassword({ path: freddy, adapter })
-      const vault = await instance.getProfile("default")
-      await vault.unlock("freddy")
-      expect(vault.isLocked).to.be.false
-
-      vault.lock()
-      expect(vault.isLocked).to.be.true
-      expect(vault.getItem("F2DB5DA3FCA64372A751E0E85C67A538")).to.eventually.throw
-    })
-  })
-})

packages/opvault.js/src/__tests__/weakMap.test.ts

@@ -1,43 +0,0 @@
-import { describe, it } from "mocha"
-import { expect } from "chai"
-
-import { WeakValueMap } from "../weakMap"
-
-declare const gc: () => void
-
-describe("WeakValueMap", () => {
-  interface Value {
-    value: number
-  }
-
-  it("covers base use cases", () => {
-    const map = new WeakValueMap<string, Value>()
-    const object = { value: 1 }
-    map.set("key", object)
-    expect(map.get("key")!.value).to.equal(1)
-    expect(map.delete("key")).to.be.true
-    expect(!map.delete("key")).to.be.true
-  })
-
-  it("overrides previous value", () => {
-    const map = new WeakValueMap<string, Value>()
-    map.set("key", { value: 2 })
-    map.set("key", { value: 3 })
-    expect(map.get("key")!.value).to.equal(3)
-  })
-
-  it("deletes garbage collected values", done => {
-    const map = new WeakValueMap<string, Value>()
-    map.set("key", { value: 1 })
-    setTimeout(() => {
-      gc()
-      expect(map.has("key")).to.be.false
-      map.set("key", { value: 2 })
-
-      setTimeout(() => {
-        gc()
-        done()
-      })
-    })
-  })
-})

packages/opvault.js/src/adapter/node.ts

@@ -1,31 +0,0 @@
-import { promises as fs, existsSync } from "fs"
-import { webcrypto } from "crypto"
-import { join } from "path"
-import type { Adapter } from "./index"
-
-/**
- * Default Node.js adapter. This can be used while using `opvault.js`
- * in a Node.js environment.
- */
-export const adapter: Adapter = {
-  fs: {
-    readTextFile: path => fs.readFile(path, "utf-8"),
-    readFile: path => fs.readFile(path),
-    writeTextFile: fs.writeFile,
-    async *readDir(path) {
-      const names = await fs.readdir(path)
-      for (const name of names) {
-        const fullPath = join(path, name)
-        const stat = await fs.stat(fullPath)
-        yield {
-          name,
-          isFile: stat.isFile(),
-          isDirectory: stat.isDirectory(),
-        }
-      }
-    },
-
-    exists: async path => existsSync(path),
-  },
-  subtle: (webcrypto as any).subtle,
-}

packages/opvault.js/src/adapters/browser.ts

@@ -1,4 +1,5 @@
-import type { Adapter, DirEntry, FileSystem } from "./index"
+import { Buffer } from "buffer"
+import type { IAdapter, IFileSystem } from "./index"
 
 function normalize(path: string) {
   return path.replace(/^\//, "")
@@ -10,7 +11,7 @@ function splitPath(path: string) {
   return [segments, filename] as const
 }
 
-class FS implements FileSystem {
+export class FileSystem implements IFileSystem {
   constructor(private handle: FileSystemDirectoryHandle) {}
 
   private async getDirectoryHandle(segments: string[]) {
@@ -32,7 +33,7 @@ class FS implements FileSystem {
     return fileHandle
   }
 
-  async readTextFile(path: string) {
+  async readFile(path: string) {
     const handle = await this.getFileHandle(path)
     const file = await handle.getFile()
     return file.text()
@@ -59,20 +60,30 @@ class FS implements FileSystem {
     )
   }
 
-  async readFile(path: string): Promise<Uint8Array> {
+  async readBuffer(path: string): Promise<Buffer> {
     const handle = await this.getFileHandle(path)
     const file = await handle.getFile()
-    return new Uint8Array(await file.arrayBuffer())
+    return Buffer.from(await file.arrayBuffer())
   }
 
-  async writeTextFile(path: string, data: string): Promise<void> {
+  async writeFile(path: string, data: string): Promise<void> {
     const handle = await this.getFileHandle(path)
     const writable = await handle.createWritable()
     await writable.write(data)
     await writable.close()
   }
 
-  private async isDirectory(path: string) {
+  async readdir(path: string): Promise<string[]> {
+    const segments = normalize(path).split("/")
+    const dirHandle = await this.getDirectoryHandle(segments)
+    const keys: string[] = []
+    for await (const key of dirHandle.keys()) {
+      keys.push(key)
+    }
+    return keys
+  }
+
+  async isDirectory(path: string) {
     const [segments, filename] = splitPath(path)
     const dirHandle = await this.getDirectoryHandle(segments)
     for await (const [key, handle] of dirHandle.entries()) {
@@ -86,19 +97,6 @@ class FS implements FileSystem {
     }
     return false
   }
-
-  async *readDir(path: string): AsyncIterable<DirEntry> {
-    const segments = normalize(path).split("/")
-    const dirHandle = await this.getDirectoryHandle(segments)
-    for await (const key of dirHandle.keys()) {
-      const isDirectory = await this.isDirectory(`${path}/${key}`)
-      yield {
-        name: key,
-        isDirectory,
-        isFile: !isDirectory,
-      }
-    }
-  }
 }
 
 async function success(fn: () => Promise<any>) {
@@ -113,7 +111,7 @@ async function success(fn: () => Promise<any>) {
 /**
  * Default Browser adapter.
  */
-export const getBrowserAdapter = (handle: FileSystemDirectoryHandle): Adapter => ({
+export const getBrowserAdapter = (handle: FileSystemDirectoryHandle): IAdapter => ({
-  fs: new FS(handle),
+  fs: new FileSystem(handle),
   subtle: crypto.subtle,
 })

packages/opvault.js/src/adapters/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * An object that implements basic file system functionalities.
  */
-export interface FileSystem {
+export interface IFileSystem {
   /**
    * Asynchronously tests whether or not the given path exists by checking with the file system.
    * @param path A path to a file or directory.
@@ -12,45 +12,39 @@ export interface FileSystem {
    * Asynchronously reads the entire contents of a file.
    * @param path A path to a file.
    */
-  readFile(path: string): Promise<Uint8Array>
+  readBuffer(path: string): Promise<Buffer>
 
   /**
    * Asynchronously reads the entire contents of a file.
    * @param path A path to a file.
    */
-  readTextFile(path: string): Promise<string>
+  readFile(path: string): Promise<string>
 
   /**
    * Asynchronously writes data to a file, replacing the file if it already exists.
    * @param path A path to a file.
    * @param data The data to write.
    */
-  writeTextFile(path: string, data: string): Promise<void>
+  writeFile(path: string, data: string): Promise<void>
 
   /**
-   * Reads the directory given by path and returns an async iterable of `DirEntry`.
+   * Asynchronous readdir(3) - read a directory.
+   * @param path A path to a directory.
    */
-  readDir(path: string): AsyncIterable<DirEntry>
+  readdir(path: string): Promise<string[]>
+
+  /**
+   * Returns true if the path points to a directory.
+   */
+  isDirectory(path: string): Promise<boolean>
 }
 
-/**
+export interface IAdapter {
- * Information about a directory entry
- */
-export interface DirEntry {
-  /** The file name of the entry. Does not include the full path. */
-  name: string
-  /** True if this is info for a regular file. */
-  isFile: boolean
-  /** True if this is info for a directory. */
-  isDirectory: boolean
-}
-
-export interface Adapter {
   /**
    * Underlying `fs` module. You can replace it with a wrapper of
    * `memfs` or any object that implements `IFileSystem`.
    */
-  fs: FileSystem
+  fs: IFileSystem
 
   /**
    * `SubtleCrypto` implementation. On Node.js this is

packages/opvault.js/src/adapters/node.ts

@@ -0,0 +1,20 @@
+import { promises as fs, existsSync } from "fs"
+import { webcrypto } from "crypto"
+
+import type { IAdapter } from "./index"
+
+/**
+ * Default Node.js adapter. This can be used while using `opvault.js`
+ * in a Node.js environment.
+ */
+export const nodeAdapter: IAdapter = {
+  fs: {
+    readFile: path => fs.readFile(path, "utf-8"),
+    readBuffer: path => fs.readFile(path),
+    writeFile: fs.writeFile,
+    readdir: fs.readdir,
+    isDirectory: async path => fs.stat(path).then(x => x.isDirectory()),
+    exists: async path => existsSync(path),
+  },
+  subtle: (webcrypto as any).subtle,
+}

packages/opvault.js/src/adapters/webkit.ts

@@ -1,7 +1,7 @@
 import { Buffer } from "buffer"
-import type { Adapter, DirEntry, FileSystem } from "./index"
+import type { IAdapter, IFileSystem } from "./index"
 
-class FS implements FileSystem {
+export class FileSystem implements IFileSystem {
   private paths = new Set<string>()
   private pathMap = new Map<string, File>()
 
@@ -12,7 +12,7 @@ class FS implements FileSystem {
     }
   }
 
-  async readTextFile(path: string) {
+  async readFile(path: string) {
     return this.pathMap.get(path)!.text()
   }
 
@@ -20,40 +20,34 @@ class FS implements FileSystem {
     return this.pathMap.has(path)
   }
 
-  async readFile(path: string): Promise<Buffer> {
+  async readBuffer(path: string): Promise<Buffer> {
     const arrayBuffer = await this.pathMap.get(path)!.arrayBuffer()
     return Buffer.from(arrayBuffer)
   }
 
   // eslint-disable-next-line class-methods-use-this
-  async writeTextFile(): Promise<void> {
+  async writeFile(path: string, data: string): Promise<void> {
     throw new Error("fs.writeFile is not supported with webkitdirectory")
   }
 
-  private isDirectory(path: string) {
+  async readdir(path: string): Promise<string[]> {
     const paths = [...this.paths]
-    return paths.some(_ => _.startsWith(`${path}/`)) && !paths.includes(path)
+    return paths
-  }
-
-  async *readDir(path: string): AsyncIterable<DirEntry> {
-    for (const name of [...this.paths]
       .filter(_ => _.startsWith(`${path}/`))
       .map(_ => _.slice(path.length + 1))
-      .map(_ => _.split("/")[0])) {
+      .map(_ => _.split("/")[0])
-      const isDirectory = this.isDirectory(path)
+  }
-      yield {
+
-        name,
+  async isDirectory(path: string) {
-        isDirectory,
+    const paths = [...this.paths]
-        isFile: !isDirectory,
+    return paths.some(_ => _.startsWith(`${path}/`)) && !paths.includes(path)
-      }
-    }
   }
 }
 
 /**
  * Default Browser adapter.
  */
-export const getBrowserAdapter = (list: FileList): Adapter => ({
+export const getBrowserAdapter = (list: FileList): IAdapter => ({
-  fs: new FS(list),
+  fs: new FileSystem(list),
   subtle: crypto.subtle,
 })

packages/opvault.js/src/buffer.ts

@@ -1,362 +0,0 @@
-/**
- * The buffer module from node.js, for the browser.
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-// The MIT License (MIT)
-// Copyright (c) 2014 Jameson Little
-
-const lookup: string[] = []
-const revLookup: number[] = []
-
-const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
-for (let i = 0, len = alphabet.length; i < len; ++i) {
-  lookup[i] = alphabet[i]
-  revLookup[alphabet.charCodeAt(i)] = i
-}
-
-// Support decoding URL-safe base64 strings, as Node.js does.
-// See: https://en.wikipedia.org/wiki/Base64#URL_applications
-revLookup[45] = 62
-revLookup[95] = 63
-
-function base64ToByteArray(b64: string): Uint8Array {
-  const { length } = b64
-
-  if (length % 4 > 0) {
-    throw new Error("Invalid string. Length must be a multiple of 4")
-  }
-
-  // Trim off extra bytes after placeholder bytes are found
-  // See: https://github.com/beatgammit/base64-js/issues/42
-  let validLen = b64.indexOf("=")
-  if (validLen === -1) validLen = length
-
-  const placeHoldersLen = validLen === length ? 0 : 4 - (validLen % 4)
-
-  const arr = new Uint8Array(((validLen + placeHoldersLen) * 3) / 4 - placeHoldersLen)
-
-  let curByte = 0
-
-  // if there are placeholders, only get up to the last complete 4 chars
-  const len = placeHoldersLen > 0 ? validLen - 4 : validLen
-
-  let i: number
-  for (i = 0; i < len; i += 4) {
-    const tmp =
-      (revLookup[b64.charCodeAt(i)] << 18) |
-      (revLookup[b64.charCodeAt(i + 1)] << 12) |
-      (revLookup[b64.charCodeAt(i + 2)] << 6) |
-      revLookup[b64.charCodeAt(i + 3)]
-    arr[curByte++] = (tmp >> 16) & 0xff
-    arr[curByte++] = (tmp >> 8) & 0xff
-    arr[curByte++] = tmp & 0xff
-  }
-
-  if (placeHoldersLen === 2) {
-    const tmp =
-      (revLookup[b64.charCodeAt(i)] << 2) | (revLookup[b64.charCodeAt(i + 1)] >> 4)
-    arr[curByte++] = tmp & 0xff
-  }
-
-  if (placeHoldersLen === 1) {
-    const tmp =
-      (revLookup[b64.charCodeAt(i)] << 10) |
-      (revLookup[b64.charCodeAt(i + 1)] << 4) |
-      (revLookup[b64.charCodeAt(i + 2)] >> 2)
-    arr[curByte++] = (tmp >> 8) & 0xff
-    arr[curByte++] = tmp & 0xff
-  }
-
-  return arr
-}
-
-const tripletToBase64 = (num: number) =>
-  lookup[(num >> 18) & 0x3f] +
-  lookup[(num >> 12) & 0x3f] +
-  lookup[(num >> 6) & 0x3f] +
-  lookup[num & 0x3f]
-
-function encodeChunk(uint8: Uint8Array, start: number, end: number) {
-  const output: string[] = []
-  for (let i = start; i < end; i += 3) {
-    const tmp =
-      ((uint8[i] << 16) & 0xff0000) +
-      ((uint8[i + 1] << 8) & 0xff00) +
-      (uint8[i + 2] & 0xff)
-    output.push(tripletToBase64(tmp))
-  }
-  return output.join("")
-}
-
-export function base64FromByteArray(uint8: Uint8Array): string {
-  let tmp: number
-  const len = uint8.length
-  const extraBytes = len % 3 // if we have 1 byte left, pad 2 bytes
-  const parts = []
-  const maxChunkLength = 16383 // must be multiple of 3
-
-  // go through the array every three bytes, we'll deal with trailing stuff later
-  for (let i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) {
-    parts.push(
-      encodeChunk(uint8, i, i + maxChunkLength > len2 ? len2 : i + maxChunkLength)
-    )
-  }
-
-  // pad the end with zeros, but make sure to not forget the extra bytes
-  if (extraBytes === 1) {
-    tmp = uint8[len - 1]
-    parts.push(lookup[tmp >> 2] + lookup[(tmp << 4) & 0x3f] + "==")
-  } else if (extraBytes === 2) {
-    tmp = (uint8[len - 2] << 8) + uint8[len - 1]
-    parts.push(
-      lookup[tmp >> 10] + lookup[(tmp >> 4) & 0x3f] + lookup[(tmp << 2) & 0x3f] + "="
-    )
-  }
-
-  return parts.join("")
-}
-
-export function fromBase64(string: string) {
-  const { length } = base64ToBytes(string)
-  let buf = new Uint8Array(length)
-
-  const actual = write(buf, string)
-
-  if (actual !== length) {
-    // Writing a hex string, for example, that contains invalid characters will
-    // cause everything after the first invalid character to be ignored. (e.g.
-    // 'abxxcd' will be treated as 'ab')
-    buf = buf.slice(0, actual)
-  }
-
-  return buf
-}
-
-function write(array: Uint8Array, string: string) {
-  const offset = 0
-  let { length } = array
-  const remaining = array.length - offset
-  if (length === undefined || length > remaining) length = remaining
-
-  if ((string.length > 0 && (length < 0 || offset < 0)) || offset > array.length) {
-    throw new RangeError("Attempt to write outside buffer bounds")
-  }
-
-  return blitBuffer(base64ToBytes(string), array, offset, length)
-}
-
-export function utf8Slice(array: Uint8Array, start = 0, end = array.length) {
-  end = Math.min(array.length, end)
-  const res: number[] = []
-
-  let i = start
-  while (i < end) {
-    const firstByte = array[i]
-    let codePoint = null
-    let bytesPerSequence =
-      firstByte > 0xef ? 4 : firstByte > 0xdf ? 3 : firstByte > 0xbf ? 2 : 1
-
-    if (i + bytesPerSequence <= end) {
-      let secondByte: number
-      let thirdByte: number
-      let fourthByte: number
-      let tempCodePoint: number
-
-      switch (bytesPerSequence) {
-        case 1:
-          if (firstByte < 0x80) {
-            codePoint = firstByte
-          }
-          break
-        case 2:
-          secondByte = array[i + 1]
-          if ((secondByte & 0xc0) === 0x80) {
-            tempCodePoint = ((firstByte & 0x1f) << 0x6) | (secondByte & 0x3f)
-            if (tempCodePoint > 0x7f) {
-              codePoint = tempCodePoint
-            }
-          }
-          break
-        case 3:
-          secondByte = array[i + 1]
-          thirdByte = array[i + 2]
-          if ((secondByte & 0xc0) === 0x80 && (thirdByte & 0xc0) === 0x80) {
-            tempCodePoint =
-              ((firstByte & 0xf) << 0xc) |
-              ((secondByte & 0x3f) << 0x6) |
-              (thirdByte & 0x3f)
-            if (
-              tempCodePoint > 0x7ff &&
-              (tempCodePoint < 0xd800 || tempCodePoint > 0xdfff)
-            ) {
-              codePoint = tempCodePoint
-            }
-          }
-          break
-        case 4:
-          secondByte = array[i + 1]
-          thirdByte = array[i + 2]
-          fourthByte = array[i + 3]
-          if (
-            (secondByte & 0xc0) === 0x80 &&
-            (thirdByte & 0xc0) === 0x80 &&
-            (fourthByte & 0xc0) === 0x80
-          ) {
-            tempCodePoint =
-              ((firstByte & 0xf) << 0x12) |
-              ((secondByte & 0x3f) << 0xc) |
-              ((thirdByte & 0x3f) << 0x6) |
-              (fourthByte & 0x3f)
-            if (tempCodePoint > 0xffff && tempCodePoint < 0x110000) {
-              codePoint = tempCodePoint
-            }
-          }
-      }
-    }
-
-    if (codePoint === null) {
-      // we did not generate a valid codePoint so insert a
-      // replacement char (U+FFFD) and advance only 1 byte
-      codePoint = 0xfffd
-      bytesPerSequence = 1
-    } else if (codePoint > 0xffff) {
-      // encode to utf16 (surrogate pair dance)
-      codePoint -= 0x10000
-      res.push(((codePoint >>> 10) & 0x3ff) | 0xd800)
-      codePoint = 0xdc00 | (codePoint & 0x3ff)
-    }
-
-    res.push(codePoint)
-    i += bytesPerSequence
-  }
-
-  return decodeCodePointsArray(res)
-}
-
-// Based on http://stackoverflow.com/a/22747272/680742, the browser with
-// the lowest limit is Chrome, with 0x10000 args.
-// We go 1 magnitude less, for safety
-const MAX_ARGUMENTS_LENGTH = 0x1000
-
-function decodeCodePointsArray(codePoints: number[]) {
-  const len = codePoints.length
-  if (len <= MAX_ARGUMENTS_LENGTH) {
-    return String.fromCharCode(...codePoints) // avoid extra slice()
-  }
-
-  // Decode in chunks to avoid "call stack size exceeded".
-  let res = ""
-  let i = 0
-  while (i < len) {
-    res += String.fromCharCode(...codePoints.slice(i, (i += MAX_ARGUMENTS_LENGTH)))
-  }
-  return res
-}
-
-/*
- * Need to make sure that buffer isn't trying to write out of bounds.
- */
-function checkOffset(offset: number, ext: number, length: number) {
-  if (offset % 1 !== 0 || offset < 0) throw new RangeError("offset is not uint")
-  if (offset + ext > length) throw new RangeError("Trying to access beyond buffer length")
-}
-
-export function readUInt32BE(array: Uint8Array, offset: number, noAssert?: boolean) {
-  offset = offset >>> 0
-  if (!noAssert) checkOffset(offset, 4, array.length)
-
-  return (
-    array[offset] * 0x1000000 +
-    ((array[offset + 1] << 16) | (array[offset + 2] << 8) | array[offset + 3])
-  )
-}
-
-export function readIntLE(
-  array: Uint8Array,
-  offset: number,
-  byteLength: number,
-  noAssert?: boolean
-) {
-  offset = offset >>> 0
-  byteLength = byteLength >>> 0
-  if (!noAssert) checkOffset(offset, byteLength, array.length)
-
-  let val = array[offset]
-  let mul = 1
-  let i = 0
-  while (++i < byteLength && (mul *= 0x100)) {
-    val += array[offset + i] * mul
-  }
-  mul *= 0x80
-
-  if (val >= mul) val -= Math.pow(2, 8 * byteLength)
-
-  return val
-}
-
-function checkInt(
-  buf: Uint8Array,
-  value: number,
-  offset: number,
-  ext: number,
-  max: number,
-  min: number
-) {
-  if (value > max || value < min) {
-    throw new RangeError('"value" argument is out of bounds')
-  }
-  if (offset + ext > buf.length) {
-    throw new RangeError("Index out of range")
-  }
-}
-
-export function writeUInt32BE(
-  array: Uint8Array,
-  value: number,
-  offset: number,
-  noAssert?: boolean
-) {
-  value = +value
-  offset = offset >>> 0
-  if (!noAssert) checkInt(array, value, offset, 4, 0xffffffff, 0)
-  array[offset] = value >>> 24
-  array[offset + 1] = value >>> 16
-  array[offset + 2] = value >>> 8
-  array[offset + 3] = value & 0xff
-  return offset + 4
-}
-
-// HELPER FUNCTIONS
-// ================
-
-const INVALID_BASE64_RE = /[^+/0-9A-Za-z-_]/g
-
-function base64ToBytes(str: string) {
-  // Node takes equal signs as end of the Base64 encoding
-  ;[str] = str.split("=")
-  // Node strips out invalid characters like \n and \t from the string, base64-js does not
-  str = str.trim().replace(INVALID_BASE64_RE, "")
-  // Node converts strings with length < 2 to ''
-  if (str.length < 2) return new Uint8Array()
-  // Node allows for non-padded base64 strings (missing trailing ===), base64-js does not
-  while (str.length % 4 !== 0) {
-    str = str + "="
-  }
-  return base64ToByteArray(str)
-}
-
-function blitBuffer(
-  src: Uint8Array | number[],
-  dst: Uint8Array,
-  offset: number,
-  length: number
-) {
-  let i: number
-  for (i = 0; i < length; ++i) {
-    if (i + offset >= dst.length || i >= src.length) break
-    dst[i + offset] = src[i]
-  }
-  return i
-}

packages/opvault.js/src/decipher.ts

@@ -7,12 +7,11 @@
  * | MIT     | Crypto-js      | (c) 2009-2013 Jeff Mott.                  |
  * | MIT     | browserify-aes | (c) 2014-2017 browserify-aes contributors  |
  */
-import invariant from "tiny-invariant"
+import { Buffer } from "buffer"
-import { readUInt32BE, writeUInt32BE } from "./buffer"
 
-function bufferXor(a: Uint8Array, b: Uint8Array) {
+function bufferXor(a: Buffer, b: Buffer) {
   const length = Math.min(a.length, b.length)
-  const buffer = new Uint8Array(length)
+  const buffer = Buffer.alloc(length)
 
   for (let i = 0; i < length; ++i) {
     buffer[i] = a[i] ^ b[i]
@@ -21,12 +20,12 @@ function bufferXor(a: Uint8Array, b: Uint8Array) {
   return buffer
 }
 
-function toUInt32Array(buf: Uint8Array) {
+function toUInt32Array(buf: Buffer) {
   const len = (buf.length / 4) | 0
   const out: number[] = new Array(len)
 
   for (let i = 0; i < len; i++) {
-    out[i] = readUInt32BE(buf, i * 4)
+    out[i] = buf.readUInt32BE(i * 4)
   }
 
   return out
@@ -178,7 +177,7 @@ class AES {
   private nRounds!: number
   private invKeySchedule!: number[]
 
-  constructor(key: Uint8Array) {
+  constructor(key: Buffer) {
     this.key = toUInt32Array(key)
     this.reset()
   }
@@ -237,7 +236,7 @@ class AES {
     this.invKeySchedule = invKeySchedule
   }
 
-  decryptBlock(buffer: Uint8Array) {
+  decryptBlock(buffer: Buffer) {
     const M = toUInt32Array(buffer)
 
     // swap
@@ -247,11 +246,11 @@ class AES {
 
     const out = cryptBlock(M, this.invKeySchedule, G.invSubMix, G.invSBox, this.nRounds)
 
-    const buf = new Uint8Array(16)
+    const buf = Buffer.allocUnsafe(16)
-    writeUInt32BE(buf, out[0], 0)
+    buf.writeUInt32BE(out[0], 0)
-    writeUInt32BE(buf, out[3], 4)
+    buf.writeUInt32BE(out[3], 4)
-    writeUInt32BE(buf, out[2], 8)
+    buf.writeUInt32BE(out[2], 8)
-    writeUInt32BE(buf, out[1], 12)
+    buf.writeUInt32BE(out[1], 12)
     return buf
   }
 
@@ -259,42 +258,44 @@ class AES {
   static keySize = 256 / 8
 }
 
-const splitter = (data: Uint8Array) => () => {
+function splitter() {
-  if (data.length >= 16) {
+  let cache = Buffer.allocUnsafe(0)
-    const out = data.slice(0, 16)
+  return {
-    data = data.slice(16)
+    add(data: Buffer) {
-    return out
+      cache = Buffer.concat([cache, data])
+      return this
+    },
+    get() {
+      if (cache.length >= 16) {
+        const out = cache.slice(0, 16)
+        cache = cache.slice(16)
+        return out
+      }
+      return null
+    },
   }
-  return null
 }
 
 // AES-256-CBC
 // == createDecipheriv("aes-256-cbc", key, iv).setAutoPadding(false).update(data)
-export function decryptData(key: Uint8Array, iv: Uint8Array, data: Uint8Array) {
+export function decryptData(key: Buffer, iv: Buffer, data: Buffer) {
-  invariant(iv.length === 16, `invalid iv length ${iv.length}`)
+  if (iv.length !== 16) {
-  invariant(key.length === 32, `invalid key length ${key.length}`)
+    throw new TypeError(`invalid iv length ${iv.length}`)
+  }
+  if (key.length !== 32) {
+    throw new TypeError(`invalid key length ${key.length}`)
+  }
 
   const cipher = new AES(key)
-  let prev = iv
+  let prev = Buffer.from(iv)
-  const readChunk = splitter(data)
+  const cache = splitter().add(data)
-  let chunk: Uint8Array | null
+  let chunk: Buffer | null
-  const res: Uint8Array[] = []
+  const res: Buffer[] = []
-  let totalLength = 0
+  while ((chunk = cache.get())) {
-
-  while ((chunk = readChunk())) {
     const pad = prev
     prev = chunk
     const out = cipher.decryptBlock(chunk)
-    const array = bufferXor(out, pad)
+    res.push(bufferXor(out, pad))
-    res.push(array)
-    totalLength += array.length
   }
-
+  return Buffer.concat(res)
-  const result = new Uint8Array(totalLength)
-  let offset = 0
-  for (const array of res) {
-    result.set(array, offset)
-    offset += array.length
-  }
-  return result
 }

packages/opvault.js/src/ee.ts

@@ -9,6 +9,9 @@ export function createEventEmitter<T = void>() {
   function emitter(value: T | EventListener) {
     if (typeof value === "function") {
       listeners.add(value as EventListener)
+      return () => {
+        listeners.delete(value as EventListener)
+      }
     } else {
       listeners.forEach(fn => fn(value))
     }

packages/opvault.js/src/errors.ts

@@ -1,10 +1,6 @@
-export class OPVaultError extends Error {
+export abstract class OPVaultError extends Error {}
-  constructor(message?: string, readonly code?: string) {
-    super(message)
-  }
-}
 
-class AssertionError extends OPVaultError {}
+export class AssertionError extends OPVaultError {}
 
 export class HMACAssertionError extends AssertionError {}
 

packages/opvault.js/src/fs.ts

@@ -1,12 +1,12 @@
 import { resolve, extname, basename } from "path"
 import invariant from "tiny-invariant"
-import type { FileSystem } from "./adapter"
+import type { IFileSystem } from "./adapters"
 import { once } from "./util"
 
 export type OnePasswordFileManager = ReturnType<typeof OnePasswordFileManager>
 
 export async function OnePasswordFileManager(
-  fs: FileSystem,
+  fs: IFileSystem,
   path: string,
   profileName: string
 ) {
@@ -18,48 +18,49 @@ export async function OnePasswordFileManager(
 
   const result = {
     getProfile() {
-      return fs.readTextFile(abs("profile.js"))
+      return fs.readFile(abs("profile.js"))
     },
 
     getFolders() {
-      return fs.readTextFile(abs("folders.js"))
+      return fs.readFile(abs("folders.js"))
     },
 
-    async *getAttachments() {
+    async getAttachments() {
-      for await (const { name } of fs.readDir(root)) {
+      const files = await fs.readdir(root)
-        if (extname(name) !== ".attachment") continue
+      return files
-
+        .filter(name => extname(name) === ".attachment")
-        const sep = name.indexOf("_")
+        .map(name => {
-        const path = resolve(root, name)
+          const sep = name.indexOf("_")
-        const [itemUUID, fileUUID] = [
+          const path = resolve(root, name)
-          name.slice(0, sep),
+          const [itemUUID, fileUUID] = [
-          basename(name.slice(sep + 1), extname(name)),
+            name.slice(0, sep),
-        ]
+            basename(name.slice(sep + 1), extname(name)),
-        yield {
+          ]
-          itemUUID,
+          return {
-          fileUUID,
+            itemUUID,
-          getFile: once(() => fs.readFile(path)),
+            fileUUID,
-        }
+            getFile: once(() => fs.readBuffer(path)),
-      }
+          }
+        })
     },
 
     async getBand(name: string) {
       const path = abs(`band_${name}.js`)
       if (await fs.exists(path)) {
-        return await fs.readTextFile(path)
+        return await fs.readFile(path)
       }
     },
 
     async setProfile(profile: string) {
-      await fs.writeTextFile("profile.js", profile)
+      await fs.writeFile("profile.js", profile)
     },
 
     async setFolders(folders: string) {
-      await fs.writeTextFile("folders.js", folders)
+      await fs.writeFile("folders.js", folders)
     },
 
     async setBand(name: string, band: string) {
-      await fs.writeTextFile(`band_${name}.js`, band)
+      await fs.writeFile(`band_${name}.js`, band)
     },
   }
   return result

packages/opvault.js/src/i18n/index.ts

@@ -0,0 +1,25 @@
+import json from "./res.json"
+
+const [locale] = Intl.DateTimeFormat().resolvedOptions().locale.split("-")
+
+const mapValue = <T, R>(
+  object: Record<string, T>,
+  fn: (value: T, key: string) => R
+): Record<string, R> => {
+  const res = Object.create(null)
+  Object.entries(object).forEach(([key, value]) => {
+    res[key] = fn(value, key)
+  })
+  return res
+}
+
+type json = typeof json
+export type i18n = {
+  [K in keyof json]: {
+    [L in keyof json[K]]: string
+  }
+}
+
+export const i18n: i18n = mapValue(json, dict =>
+  mapValue(dict, (value: any) => value[locale] ?? value.en)
+) as any

packages/opvault.js/src/i18n/res.json

@@ -0,0 +1,16 @@
+{
+  "error": {
+    "invalidPassword": {
+      "en": "Invalid password",
+      "fr": "Mot de passe invalide"
+    },
+    "vaultIsLocked": {
+      "en": "This vault is locked",
+      "fr": "Ce coffre est verrouillé."
+    },
+    "cannotDecryptOverviewItem": {
+      "en": "Failed to decrypt overview item",
+      "fr": "Impossible de déchiffrer cet aperçu"
+    }
+  }
+}

packages/opvault.js/src/index.ts

@@ -1,6 +1,7 @@
 import { resolve } from "path"
 import { Vault } from "./models/vault"
-import type { Adapter } from "./adapter"
+import type { IAdapter } from "./adapters"
+import { asyncMap } from "./util"
 
 export type { Vault } from "./models/vault"
 export type { Item } from "./models/item"
@@ -8,8 +9,6 @@ export type { Attachment, AttachmentMetadata } from "./models/attachment"
 export type { ItemField, ItemSection } from "./types"
 export { Category, FieldType } from "./models"
 
-export type { Adapter as IAdapter } from "./adapter/index"
-
 interface IOptions {
   /**
    * Path to `.opvault` directory
@@ -19,49 +18,40 @@ interface IOptions {
   /**
    * Adapter used to interact with the file system and cryptography modules
    */
-  adapter: Adapter | Promise<Adapter>
+  adapter?: IAdapter
 }
 
 /**
  * OnePassword instance
- * @example
- * ```ts
- * import { OnePassword } from "opvault.js"
- * import { adapter } from "opvault.js/src/adapter/node"
- *
- * const op = new OnePassword({
- *   path: "/path/to/1password/vault",
- *   adapter,
- * })
- *
- * const profileNames = await op.getProfileNames()
- * const vault = await op.getProfile(profileNames[0])
- * const item = await vault.getItemByTitle("My Login")
- * ```
  */
 export class OnePassword {
   readonly #path: string
-  readonly #adapter: Adapter | Promise<Adapter>
+  readonly #adapter: IAdapter
 
-  constructor(options: IOptions) {
+  constructor({
-    this.#adapter = options.adapter
+    path,
-    this.#path = options.path
+    adapter = process.browser ? null : require("./adapters/node").nodeAdapter,
+  }: IOptions) {
+    this.#adapter = adapter
+    this.#path = path
   }
 
   /**
    * @returns A list of names of profiles of the current vault.
    */
   async getProfileNames() {
-    const { fs } = await this.#adapter
+    const [fs, path] = [this.#adapter.fs, this.#path]
+    const children = await fs.readdir(path)
     const profiles: string[] = []
-
+    await asyncMap(children, async child => {
-    for await (const { name, isDirectory } of fs.readDir(this.#path)) {
+      const fullPath = resolve(path, child)
-      const fullPath = resolve(this.#path, name)
+      if (
-      if (isDirectory && (await fs.exists(resolve(fullPath, "profile.js")))) {
+        (await fs.isDirectory(fullPath)) &&
-        profiles.push(name)
+        (await fs.exists(resolve(fullPath, "profile.js")))
+      ) {
+        profiles.push(child)
       }
-    }
+    })
-
     return profiles
   }
 
@@ -69,6 +59,6 @@ export class OnePassword {
    * @returns A OnePassword Vault instance.
    */
   async getProfile(profileName: string) {
-    return await Vault.of(this.#path, profileName, await this.#adapter)
+    return await Vault.of(this.#path, profileName, this.#adapter)
   }
 }

packages/opvault.js/src/models/attachment.ts

@@ -1,6 +1,6 @@
-import type { Crypto } from "../crypto"
+import { Buffer } from "buffer"
+import type { Crypto } from "./crypto"
 import { invariant } from "../errors"
-import { fromBase64, readIntLE, utf8Slice } from "../buffer"
 
 type integer = number
 
@@ -21,22 +21,22 @@ export interface AttachmentMetadata {
 export class Attachment {
   #k: string
   #crypto: Crypto
-  #buffer: Uint8Array
+  #buffer: Buffer
 
-  #icon?: Uint8Array // png buffer
+  #icon?: Buffer // png buffer
-  #file?: Uint8Array
+  #file?: Buffer
   #metadata?: AttachmentMetadata
 
   private metadataSize: number
   private iconSize: number
 
-  constructor(crypto: Crypto, k: string, buffer: Uint8Array) {
+  constructor(crypto: Crypto, k: string, buffer: Buffer) {
     this.#buffer = buffer
     this.#validate()
     this.#crypto = crypto
     this.#k = k
-    this.metadataSize = readIntLE(buffer, 8, 2)
+    this.metadataSize = buffer.readIntLE(8, 2)
-    this.iconSize = readIntLE(buffer, 12, 3)
+    this.iconSize = buffer.readIntLE(12, 3)
 
     crypto.onLock(() => {
       this.#lock()
@@ -49,13 +49,13 @@ export class Attachment {
   #validate() {
     const file = this.#buffer
     invariant(
-      utf8Slice(file.slice(0, 6)) === "OPCLDA",
+      file.slice(0, 6).toString("utf-8") === "OPCLDA",
       "Attachment must start with OPCLDA"
     )
     // @TODO: Re-enable this
     false &&
       invariant(
-        readIntLE(file, 7, 1) === 1,
+        file.readIntLE(7, 1) === 1,
         "The version for this attachment file format is not supported."
       )
   }
@@ -86,11 +86,14 @@ export class Attachment {
       cipher
     )
 
-    const metadata = JSON.parse(utf8Slice(buffer.slice(16, 16 + metadataSize)))
+    const metadata = JSON.parse(buffer.slice(16, 16 + metadataSize).toString("utf-8"))
     metadata.overview = JSON.parse(
-      utf8Slice(
+      (
-        await crypto.decryptOPData(fromBase64(metadata.overview), crypto.overview)
+        await crypto.decryptOPData(
-      )
+          Buffer.from(metadata.overview, "base64"),
+          crypto.overview
+        )
+      ).toString()
     )
     this.#metadata = metadata
   }

packages/opvault.js/src/models/crypto.ts

@@ -1,18 +1,19 @@
-import { decryptData } from "./decipher"
+import { Buffer } from "buffer"
-import type { Adapter } from "./adapter"
+import { decryptData } from "../decipher"
-import { createEventEmitter } from "./ee"
+import type { IAdapter } from "../adapters"
-import { HMACAssertionError, OPVaultError } from "./errors"
+import { createEventEmitter } from "../ee"
-import type { ItemDetails, Overview, Profile } from "./types"
+import { HMACAssertionError } from "../errors"
-import { setIfAbsent } from "./util"
+import type { i18n } from "../i18n"
-import type { EncryptedItem } from "./models/item"
+import type { ItemDetails, Overview, Profile } from "../types"
-import { fromBase64, utf8Slice } from "./buffer"
+import { setIfAbsent } from "../util"
+import type { EncryptedItem } from "./item"
 
 /** Encryption and MAC */
 export interface Cipher {
   /** Encryption key */
-  key: Uint8Array
+  key: Buffer
   /** HMAC key */
-  hmac: Uint8Array
+  hmac: Buffer
 }
 
 export class Crypto {
@@ -26,7 +27,7 @@ export class Crypto {
 
   readonly onLock = createEventEmitter<void>()
 
-  constructor(adapter: Adapter) {
+  constructor(private readonly i18n: i18n, adapter: IAdapter) {
     this.subtle = adapter.subtle
   }
 
@@ -42,7 +43,7 @@ export class Crypto {
     const derivedKey = await this.subtle.deriveBits(
       {
         name: "PBKDF2",
-        salt: fromBase64(profile.salt),
+        salt: Buffer.from(profile.salt, "base64"),
         iterations: profile.iterations,
         hash: {
           name: "SHA-512",
@@ -52,7 +53,7 @@ export class Crypto {
       64 << 3
     )
 
-    const cipher = splitPlainText(new Uint8Array(derivedKey))
+    const cipher = splitPlainText(Buffer.from(derivedKey))
 
     // Derive master key and overview keys
     this.#master = await this.decryptKeys(profile.masterKey, cipher)
@@ -72,9 +73,13 @@ export class Crypto {
     this.onLock()
   }
 
+  dispose() {
+    this.lock()
+  }
+
   assertUnlocked() {
     if (this.#locked) {
-      throw new OPVaultError("This vault is locked", "VAULT_LOCKED")
+      throw new Error(this.i18n.error.vaultIsLocked)
     }
   }
 
@@ -97,22 +102,22 @@ export class Crypto {
 
   decryptItemDetails = this.#createWeakCache(async (item: EncryptedItem) => {
     const cipher = await this.deriveConcreteKey(item)
-    const detail = await this.decryptOPData(fromBase64(item.d), cipher)
+    const detail = await this.decryptOPData(Buffer.from(item.d, "base64"), cipher)
-    return JSON.parse(utf8Slice(detail)) as ItemDetails
+    return JSON.parse(detail.toString("utf-8")) as ItemDetails
   })
 
   decryptItemOverview = this.#createCache(
     (item: EncryptedItem) => item.o,
     async (o: string) => {
-      const overview = await this.decryptOPData(fromBase64(o), this.#overview)
+      const overview = await this.decryptOPData(Buffer.from(o, "base64"), this.#overview)
-      return JSON.parse(utf8Slice(overview)) as Overview
+      return JSON.parse(overview.toString("utf8")) as Overview
     }
   )
 
   deriveConcreteKey = this.#createCache(
     (data: { k: string }) => data.k,
     async ($k: string) => {
-      const k = fromBase64($k)
+      const k = Buffer.from($k, "base64")
       const data = k.slice(0, -32)
       await this.assertHMac(data, this.#master.hmac, k.slice(-32))
       const derivedKey = await this.decryptData(
@@ -124,7 +129,7 @@ export class Crypto {
     }
   )
 
-  async assertHMac(data: Uint8Array, key: Uint8Array, expected: Uint8Array) {
+  async assertHMac(data: Buffer, key: Buffer, expected: Buffer) {
     const cryptoKey = await this.subtle.importKey(
       "raw",
       key,
@@ -143,7 +148,7 @@ export class Crypto {
     }
   }
 
-  async decryptOPData(cipherText: Uint8Array, cipher: Cipher) {
+  async decryptOPData(cipherText: Buffer, cipher: Cipher) {
     const key = cipherText.slice(0, -32)
     await this.assertHMac(key, cipher.hmac, cipherText.slice(-32))
 
@@ -152,28 +157,17 @@ export class Crypto {
     return plaintext.slice(-size)
   }
 
-  async decryptData(key: Uint8Array, iv: Uint8Array, data: Uint8Array) {
+  async decryptData(key: Buffer, iv: Buffer, data: Buffer) {
-    // try {
+    this.subtle
-    //   const algorithm = { name: "AES-CBC", length: 256, iv }
+    // return createDecipheriv("aes-256-cbc", key, iv).setAutoPadding(false).update(data)
-    //   const keyCrypto = await this.subtle.importKey("raw", key, algorithm, false, [
-    //     "decrypt",
-    //   ])
-    //   console.log("hi", keyCrypto)
-    //   const decrypted = await this.subtle.decrypt(algorithm, keyCrypto, data)
-    //   console.log("decrypted")
-    //   return Buffer.from(decrypted)
-    //   // return createDecipheriv("aes-256-cbc", key, iv).setAutoPadding(false).update(data)
-    // } catch (e) {
-    //   console.error(e)
     return decryptData(key, iv, data)
-    // }
   }
 
   async decryptKeys(encryptedKey: string, derived: Cipher) {
-    const buffer = fromBase64(encryptedKey)
+    const buffer = Buffer.from(encryptedKey, "base64")
     const base = await this.decryptOPData(buffer, derived)
     const digest = await this.subtle.digest("SHA-512", base)
-    return splitPlainText(new Uint8Array(digest))
+    return splitPlainText(Buffer.from(digest))
   }
 
   get overview() {
@@ -181,11 +175,11 @@ export class Crypto {
   }
 }
 
-export const splitPlainText = (derivedKey: Uint8Array): Cipher => ({
+export const splitPlainText = (derivedKey: Buffer): Cipher => ({
   key: derivedKey.slice(0, 32),
   hmac: derivedKey.slice(32, 64),
 })
 
-function readUint16({ buffer, byteOffset, length }: Uint8Array) {
+function readUint16({ buffer, byteOffset, length }: Buffer) {
   return new DataView(buffer, byteOffset, length).getUint16(0, true)
 }

packages/opvault.js/src/models/item.ts

@@ -1,5 +1,5 @@
 import type { ItemDetails, Overview } from "../types"
-import type { Crypto } from "../crypto"
+import type { Crypto } from "./crypto"
 import { Attachment } from "./attachment"
 import { NotUnlockedError } from "../errors"
 import type { Category } from "../models"
@@ -8,7 +8,7 @@ export interface EncryptedItem {
   category: string // "001"
   /** Unix seconds */
   created: integer
-  d: string // details, bass64
+  d: string // "b3BkYXRhMbt"
   folder: string // 32 chars
   hmac: string // base64
   k: string // base64
@@ -16,7 +16,6 @@ export interface EncryptedItem {
   tx: integer // Unix seconds
   updated: integer // Unix seconds
   uuid: string // 32 chars
-  fave: number
   trashed?: boolean
 }
 
@@ -59,9 +58,6 @@ export class Item {
     }
     return this.#details!
   }
-  get fave() {
-    return this.#data.fave
-  }
 
   constructor(crypto: Crypto, data: EncryptedItem) {
     this.#crypto = crypto
@@ -93,7 +89,7 @@ export class Item {
   }
 
   /** @internal */
-  addAttachment(buffer: Uint8Array) {
+  addAttachment(buffer: Buffer) {
     this.attachments.push(new Attachment(this.#crypto, this.#data.k, buffer))
   }
 }

packages/opvault.js/src/models/vault.ts

@@ -1,8 +1,9 @@
-import type { Adapter } from "../adapter"
+import type { IAdapter } from "../adapters"
-import { HMACAssertionError, OPVaultError, invariant } from "../errors"
+import { HMACAssertionError, invariant } from "../errors"
 import { OnePasswordFileManager } from "../fs"
+import { i18n } from "../i18n"
 import type { EncryptedItem } from "./item"
-import { Crypto } from "../crypto"
+import { Crypto } from "./crypto"
 import { Item } from "./item"
 import type { Profile } from "../types"
 import { WeakValueMap } from "../weakMap"
@@ -20,7 +21,7 @@ export class Vault {
   #itemsMap = new WeakValueMap<string, Item>()
   #crypto: Crypto
 
-  readonly #onLock = createEventEmitter<void>()
+  readonly onLock = createEventEmitter<void>()
 
   private constructor(
     profile: Profile,
@@ -40,8 +41,8 @@ export class Vault {
    * Create a new OnePassword Vault instance and read all bands.
    * @internal
    */
-  static async of(path: string, profileName = "default", adapter: Adapter) {
+  static async of(path: string, profileName = "default", adapter: IAdapter) {
-    const crypto = new Crypto(adapter)
+    const crypto = new Crypto(i18n, adapter)
     const files = await OnePasswordFileManager(adapter.fs, path, profileName)
     const profile = JSON.parse(
       stripText(await files.getProfile(), /^var profile\s*=/, ";")
@@ -65,7 +66,8 @@ export class Vault {
       }
     }
 
-    for await (const att of files.getAttachments()) {
+    const attachments = await files.getAttachments()
+    for (const att of attachments) {
       const file = itemsMap.get(att.itemUUID)
       invariant(file, `Item ${att.itemUUID} of attachment does not exist`)
       file.addAttachment(await att.getFile())
@@ -74,9 +76,6 @@ export class Vault {
     return new Vault(profile, bands, crypto, itemsMap)
   }
 
-  /**
-   * Returns the overview of an item given the `uuid`.
-   */
   getOverview(uuid: string) {
     this.#crypto.assertUnlocked()
     return this.#items.find(x => x.uuid === uuid)?.overview
@@ -103,7 +102,7 @@ export class Vault {
       await this.#crypto.unlock(this.#profile, masterPassword)
     } catch (e) {
       if (e instanceof HMACAssertionError) {
-        throw new OPVaultError("Invalid password", "INVALID_PASSWORD")
+        throw new Error(i18n.error.invalidPassword)
       }
       throw e
     }
@@ -115,7 +114,7 @@ export class Vault {
    */
   lock() {
     this.#crypto.lock()
-    this.#onLock()
+    this.onLock()
     return this
   }
 
@@ -123,14 +122,7 @@ export class Vault {
     return this.#crypto.locked
   }
 
-  /**
-   * Returns the item with the given `uuid`
-   */
   getItem(uuid: string): Promise<Item | undefined>
-
-  /**
-   * Returns the first item with the given title
-   */
   getItem(filter: { title: string }): Promise<Item | undefined>
 
   async getItem(filter: any) {

packages/opvault.js/src/types.ts

@@ -23,39 +23,21 @@ export type TextField = {
   value: string
   designation: string
   name: string
-  id?: undefined
 }
 export type BooleanField = {
   type: FieldType.Checkbox
   name: string
   value?: "✓" | string
-  designation?: undefined
-  id?: undefined
 }
 
 export type ItemField =
   | TextField
   | BooleanField
-  | {
-      name: string
-      designation: "username"
-      value: string
-      id?: undefined
-      type?: undefined
-    }
-  | {
-      name: string
-      designation: "password"
-      value: string
-      id?: undefined
-      type?: undefined
-    }
   | {
       // @TODO: This currently catches all item fields.
       type: FieldType
       value: string
       designation?: string
-      id?: undefined
       name: string
     }
 
@@ -119,7 +101,7 @@ export namespace ItemSection {
   }
   export type Concealed = {
     k: "concealed"
-    n: "password" | `TOTP_${string}`
+    n: "password"
     v: string
     a?: {
       generate: "off"
@@ -148,9 +130,6 @@ export interface ItemDetails {
   }[]
   /** Web form fields */
   fields?: ItemField[]
-  /** Plain password items */
-  backupKeys?: string[]
-  password?: string
 }
 
 export interface Folder {

packages/web/.gitignore

@@ -1,7 +1,6 @@
-src/third-party-licenses.json
 node_modules
 .DS_Store
 dist
 bundle
 *.local
-*.yml.d.ts
+*.yml.d.ts

packages/web/LICENSE

@@ -1,692 +0,0 @@
-GNU GENERAL PUBLIC LICENSE
-
-Version 3, 29 June 2007
-
-Copyright © 2007
-aet
-
-Everyone is permitted to copy and distribute verbatim copies of this license
-document, but changing it is not allowed.
-
-Preamble
-
-The GNU General Public
-License is a free, copyleft license for software and other kinds of works.
-
-The
-licenses for most software and other practical works are designed to take away
-your freedom to share and change the works. By contrast, the GNU General Public
-License is intended to guarantee your freedom to share and change all versions of
-a program--to make sure it remains free software for all its users. We, the Free
-Software Foundation, use the GNU General Public License for most of our software;
-it applies also to any other work released this way by its authors. You can apply
-it to your programs, too.
-
-When we speak of free software, we are referring to
-freedom, not price. Our General Public Licenses are designed to make sure that
-you have the freedom to distribute copies of free software (and charge for them
-if you wish), that you receive source code or can get it if you want it, that you
-can change the software or use pieces of it in new free programs, and that you
-know you can do these things.
-
-To protect your rights, we need to prevent others
-from denying you these rights or asking you to surrender the rights. Therefore,
-you have certain responsibilities if you distribute copies of the software, or if
-you modify it: responsibilities to respect the freedom of others.
-
-For example,
-if you distribute copies of such a program, whether gratis or for a fee, you must
-pass on to the recipients the same freedoms that you received. You must make sure
-that they, too, receive or can get the source code. And you must show them these
-terms so they know their rights.
-
-Developers that use the GNU GPL protect your
-rights with two steps: (1) assert copyright on the software, and (2) offer you
-this License giving you legal permission to copy, distribute and/or modify
-it.
-
-For the developers' and authors' protection, the GPL clearly explains that
-there is no warranty for this free software. For both users' and authors' sake,
-the GPL requires that modified versions be marked as changed, so that their
-problems will not be attributed erroneously to authors of previous
-versions.
-
-Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer can do
-so. This is fundamentally incompatible with the aim of protecting users' freedom
-to change the software. The systematic pattern of such abuse occurs in the area
-of products for individuals to use, which is precisely where it is most
-unacceptable. Therefore, we have designed this version of the GPL to prohibit the
-practice for those products. If such problems arise substantially in other
-domains, we stand ready to extend this provision to those domains in future
-versions of the GPL, as needed to protect the freedom of users.
-
-Finally, every
-program is threatened constantly by software patents. States should not allow
-patents to restrict development and use of software on general-purpose computers,
-but in those that do, we wish to avoid the special danger that patents applied to
-a free program could make it effectively proprietary. To prevent this, the GPL
-assures that patents cannot be used to render the program non-free.
-
-The precise
-terms and conditions for copying, distribution and modification follow.
-
-TERMS
-AND CONDITIONS
-
-   0. Definitions.
-
-   "This License" refers to version 3 of the
-GNU General Public License.
-
-   "Copyright" also means copyright-like laws that
-apply to other kinds of works, such as semiconductor masks.
-
-   "The Program"
-refers to any copyrightable work licensed under this License. Each licensee is
-addressed as "you". "Licensees" and "recipients" may be individuals or
-organizations.
-
-   To "modify" a work means to copy from or adapt all or part of
-the work in a fashion requiring copyright permission, other than the making of an
-exact copy. The resulting work is called a "modified version" of the earlier work
-or a work "based on" the earlier work.
-
-   A "covered work" means either the
-unmodified Program or a work based on the Program.
-
-   To "propagate" a work
-means to do anything with it that, without permission, would make you directly or
-secondarily liable for infringement under applicable copyright law, except
-executing it on a computer or modifying a private copy. Propagation includes
-copying, distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-   To "convey" a work
-means any kind of propagation that enables other parties to make or receive
-copies. Mere interaction with a user through a computer network, with no transfer
-of a copy, is not conveying.
-
-   An interactive user interface displays
-"Appropriate Legal Notices" to the extent that it includes a convenient and
-prominently visible feature that (1) displays an appropriate copyright notice,
-and (2) tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the work under
-this License, and how to view a copy of this License. If the interface presents a
-list of user commands or options, such as a menu, a prominent item in the list
-meets this criterion.
-
-   1. Source Code.
-
-   The "source code" for a work means
-the preferred form of the work for making modifications to it. "Object code"
-means any non-source form of a work.
-
-   A "Standard Interface" means an
-interface that either is an official standard defined by a recognized standards
-body, or, in the case of interfaces specified for a particular programming
-language, one that is widely used among developers working in that language.
-
-  
-The "System Libraries" of an executable work include anything, other than the
-work as a whole, that (a) is included in the normal form of packaging a Major
-Component, but which is not part of that Major Component, and (b) serves only to
-enable use of the work with that Major Component, or to implement a Standard
-Interface for which an implementation is available to the public in source code
-form. A "Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system (if any) on
-which the executable work runs, or a compiler used to produce the work, or an
-object code interpreter used to run it.
-
-   The "Corresponding Source" for a work
-in object code form means all the source code needed to generate, install, and
-(for an executable work) run the object code and to modify the work, including
-scripts to control those activities. However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free programs
-which are used unmodified in performing those activities but which are not part
-of the work. For example, Corresponding Source includes interface definition
-files associated with source files for the work, and the source code for shared
-libraries and dynamically linked subprograms that the work is specifically
-designed to require, such as by intimate data communication or control flow
-between those subprograms and other parts of the work.
-
-   The Corresponding
-Source need not include anything that users can regenerate automatically from
-other parts of the Corresponding Source.
-
-   The Corresponding Source for a work
-in source code form is that same work.
-
-   2. Basic Permissions.
-
-   All rights
-granted under this License are granted for the term of copyright on the Program,
-and are irrevocable provided the stated conditions are met. This License
-explicitly affirms your unlimited permission to run the unmodified Program. The
-output from running a covered work is covered by this License only if the output,
-given its content, constitutes a covered work. This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-   You may
-make, run and propagate covered works that you do not convey, without conditions
-so long as your license otherwise remains in force. You may convey covered works
-to others for the sole purpose of having them make modifications exclusively for
-you, or provide you with facilities for running those works, provided that you
-comply with the terms of this License in conveying all material for which you do
-not control copyright. Those thus making or running the covered works for you
-must do so exclusively on your behalf, under your direction and control, on terms
-that prohibit them from making any copies of your copyrighted material outside
-their relationship with you.
-
-   Conveying under any other circumstances is
-permitted solely under the conditions stated below. Sublicensing is not allowed;
-section 10 makes it unnecessary.
-
-   3. Protecting Users' Legal Rights From
-Anti-Circumvention Law.
-
-   No covered work shall be deemed part of an effective
-technological measure under any applicable law fulfilling obligations under
-article 11 of the WIPO copyright treaty adopted on 20 December 1996, or similar
-laws prohibiting or restricting circumvention of such measures.
-
-   When you
-convey a covered work, you waive any legal power to forbid circumvention of
-technological measures to the extent such circumvention is effected by exercising
-rights under this License with respect to the covered work, and you disclaim any
-intention to limit operation or modification of the work as a means of enforcing,
-against the work's users, your or third parties' legal rights to forbid
-circumvention of technological measures.
-
-   4. Conveying Verbatim Copies.
-
-  
-You may convey verbatim copies of the Program's source code as you receive it, in
-any medium, provided that you conspicuously and appropriately publish on each
-copy an appropriate copyright notice; keep intact all notices stating that this
-License and any non-permissive terms added in accord with section 7 apply to the
-code; keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-   You may charge any
-price or no price for each copy that you convey, and you may offer support or
-warranty protection for a fee.
-
-   5. Conveying Modified Source Versions.
-
-   You
-may convey a work based on the Program, or the modifications to produce it from
-the Program, in the form of source code under the terms of section 4, provided
-that you also meet all of these conditions:
-
-      a) The work must carry
-prominent notices stating that you modified it, and giving a relevant date.
-
-    
-b) The work must carry prominent notices stating that it is released under this
-License and any conditions added under section 7. This requirement modifies the
-requirement in section 4 to "keep intact all notices".
-
-      c) You must license
-the entire work, as a whole, under this License to anyone who comes into
-possession of a copy. This License will therefore apply, along with any
-applicable section 7 additional terms, to the whole of the work, and all its
-parts, regardless of how they are packaged. This License gives no permission to
-license the work in any other way, but it does not invalidate such permission if
-you have separately received it.
-
-      d) If the work has interactive user
-interfaces, each must display Appropriate Legal Notices; however, if the Program
-has interactive interfaces that do not display Appropriate Legal Notices, your
-work need not make them do so.
-
-   A compilation of a covered work with other
-separate and independent works, which are not by their nature extensions of the
-covered work, and which are not combined with it such as to form a larger
-program, in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not used to limit
-the access or legal rights of the compilation's users beyond what the individual
-works permit. Inclusion of a covered work in an aggregate does not cause this
-License to apply to the other parts of the aggregate.
-
-   6. Conveying Non-Source
-Forms.
-
-   You may convey a covered work in object code form under the terms of
-sections 4 and 5, provided that you also convey the machine-readable
-Corresponding Source under the terms of this License, in one of these ways:
-
-    
-a) Convey the object code in, or embodied in, a physical product (including a
-physical distribution medium), accompanied by the Corresponding Source fixed on a
-durable physical medium customarily used for software interchange.
-
-      b)
-Convey the object code in, or embodied in, a physical product (including a
-physical distribution medium), accompanied by a written offer, valid for at least
-three years and valid for as long as you offer spare parts or customer support
-for that product model, to give anyone who possesses the object code either (1) a
-copy of the Corresponding Source for all the software in the product that is
-covered by this License, on a durable physical medium customarily used for
-software interchange, for a price no more than your reasonable cost of physically
-performing this conveying of source, or (2) access to copy the Corresponding
-Source from a network server at no charge.
-
-      c) Convey individual copies of
-the object code with a copy of the written offer to provide the Corresponding
-Source. This alternative is allowed only occasionally and noncommercially, and
-only if you received the object code with such an offer, in accord with
-subsection 6b.
-
-      d) Convey the object code by offering access from a
-designated place (gratis or for a charge), and offer equivalent access to the
-Corresponding Source in the same way through the same place at no further charge.
-You need not require recipients to copy the Corresponding Source along with the
-object code. If the place to copy the object code is a network server, the
-Corresponding Source may be on a different server (operated by you or a third
-party) that supports equivalent copying facilities, provided you maintain clear
-directions next to the object code saying where to find the Corresponding Source.
-Regardless of what server hosts the Corresponding Source, you remain obligated to
-ensure that it is available for as long as needed to satisfy these
-requirements.
-
-      e) Convey the object code using peer-to-peer transmission,
-provided you inform other peers where the object code and Corresponding Source of
-the work are being offered to the general public at no charge under subsection
-6d.
-
-   A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be included in
-conveying the object code work.
-
-   A "User Product" is either (1) a "consumer
-product", which means any tangible personal property which is normally used for
-personal, family, or household purposes, or (2) anything designed or sold for
-incorporation into a dwelling. In determining whether a product is a consumer
-product, doubtful cases shall be resolved in favor of coverage. For a particular
-product received by a particular user, "normally used" refers to a typical or
-common use of that class of product, regardless of the status of the particular
-user or of the way in which the particular user actually uses, or expects or is
-expected to use, the product. A product is a consumer product regardless of
-whether the product has substantial commercial, industrial or non-consumer uses,
-unless such uses represent the only significant mode of use of the product.
-
-  
-"Installation Information" for a User Product means any methods, procedures,
-authorization keys, or other information required to install and execute modified
-versions of a covered work in that User Product from a modified version of its
-Corresponding Source. The information must suffice to ensure that the continued
-functioning of the modified object code is in no case prevented or interfered
-with solely because modification has been made.
-
-   If you convey an object code
-work under this section in, or with, or specifically for use in, a User Product,
-and the conveying occurs as part of a transaction in which the right of
-possession and use of the User Product is transferred to the recipient in
-perpetuity or for a fixed term (regardless of how the transaction is
-characterized), the Corresponding Source conveyed under this section must be
-accompanied by the Installation Information. But this requirement does not apply
-if neither you nor any third party retains the ability to install modified object
-code on the User Product (for example, the work has been installed in ROM).
-
-  
-The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates for a
-work that has been modified or installed by the recipient, or for the User
-Product in which it has been modified or installed. Access to a network may be
-denied when the modification itself materially and adversely affects the
-operation of the network or violates the rules and protocols for communication
-across the network.
-
-   Corresponding Source conveyed, and Installation
-Information provided, in accord with this section must be in a format that is
-publicly documented (and with an implementation available to the public in source
-code form), and must require no special password or key for unpacking, reading or
-copying.
-
-   7. Additional Terms.
-
-   "Additional permissions" are terms that
-supplement the terms of this License by making exceptions from one or more of its
-conditions. Additional permissions that are applicable to the entire Program
-shall be treated as though they were included in this License, to the extent that
-they are valid under applicable law. If additional permissions apply only to part
-of the Program, that part may be used separately under those permissions, but the
-entire Program remains governed by this License without regard to the additional
-permissions.
-
-   When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of it.
-(Additional permissions may be written to require their own removal in certain
-cases when you modify the work.) You may place additional permissions on
-material, added by you to a covered work, for which you have or can give
-appropriate copyright permission.
-
-   Notwithstanding any other provision of this
-License, for material you add to a covered work, you may (if authorized by the
-copyright holders of that material) supplement the terms of this License with
-terms:
-
-      a) Disclaiming warranty or limiting liability differently from the
-terms of sections 15 and 16 of this License; or
-
-      b) Requiring preservation
-of specified reasonable legal notices or author attributions in that material or
-in the Appropriate Legal Notices displayed by works containing it; or
-
-      c)
-Prohibiting misrepresentation of the origin of that material, or requiring that
-modified versions of such material be marked in reasonable ways as different from
-the original version; or
-
-      d) Limiting the use for publicity purposes of
-names of licensors or authors of the material; or
-
-      e) Declining to grant
-rights under trademark law for use of some trade names, trademarks, or service
-marks; or
-
-      f) Requiring indemnification of licensors and authors of that
-material by anyone who conveys the material (or modified versions of it) with
-contractual assumptions of liability to the recipient, for any liability that
-these contractual assumptions directly impose on those licensors and authors.
-
-  
-All other non-permissive additional terms are considered "further restrictions"
-within the meaning of section 10. If the Program as you received it, or any part
-of it, contains a notice stating that it is governed by this License along with a
-term that is a further restriction, you may remove that term. If a license
-document contains a further restriction but permits relicensing or conveying
-under this License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does not survive
-such relicensing or conveying.
-
-   If you add terms to a covered work in accord
-with this section, you must place, in the relevant source files, a statement of
-the additional terms that apply to those files, or a notice indicating where to
-find the applicable terms.
-
-   Additional terms, permissive or non-permissive,
-may be stated in the form of a separately written license, or stated as
-exceptions; the above requirements apply either way.
-
-   8. Termination.
-
-   You
-may not propagate or modify a covered work except as expressly provided under
-this License. Any attempt otherwise to propagate or modify it is void, and will
-automatically terminate your rights under this License (including any patent
-licenses granted under the third paragraph of section 11).
-
-   However, if you
-cease all violation of this License, then your license from a particular
-copyright holder is reinstated (a) provisionally, unless and until the copyright
-holder explicitly and finally terminates your license, and (b) permanently, if
-the copyright holder fails to notify you of the violation by some reasonable
-means prior to 60 days after the cessation.
-
-   Moreover, your license from a
-particular copyright holder is reinstated permanently if the copyright holder
-notifies you of the violation by some reasonable means, this is the first time
-you have received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after your receipt
-of the notice.
-
-   Termination of your rights under this section does not
-terminate the licenses of parties who have received copies or rights from you
-under this License. If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same material
-under section 10.
-
-   9. Acceptance Not Required for Having Copies.
-
-   You are
-not required to accept this License in order to receive or run a copy of the
-Program. Ancillary propagation of a covered work occurring solely as a
-consequence of using peer-to-peer transmission to receive a copy likewise does
-not require acceptance. However, nothing other than this License grants you
-permission to propagate or modify any covered work. These actions infringe
-copyright if you do not accept this License. Therefore, by modifying or
-propagating a covered work, you indicate your acceptance of this License to do
-so.
-
-   10. Automatic Licensing of Downstream Recipients.
-
-   Each time you
-convey a covered work, the recipient automatically receives a license from the
-original licensors, to run, modify and propagate that work, subject to this
-License. You are not responsible for enforcing compliance by third parties with
-this License.
-
-   An "entity transaction" is a transaction transferring control
-of an organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations. If propagation of a covered work results
-from an entity transaction, each party to that transaction who receives a copy of
-the work also receives whatever licenses to the work the party's predecessor in
-interest had or could give under the previous paragraph, plus a right to
-possession of the Corresponding Source of the work from the predecessor in
-interest, if the predecessor has it or can get it with reasonable efforts.
-
-  
-You may not impose any further restrictions on the exercise of the rights granted
-or affirmed under this License. For example, you may not impose a license fee,
-royalty, or other charge for exercise of rights granted under this License, and
-you may not initiate litigation (including a cross-claim or counterclaim in a
-lawsuit) alleging that any patent claim is infringed by making, using, selling,
-offering for sale, or importing the Program or any portion of it.
-
-   11.
-Patents.
-
-   A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based. The work thus
-licensed is called the contributor's "contributor version".
-
-   A contributor's
-"essential patent claims" are all patent claims owned or controlled by the
-contributor, whether already acquired or hereafter acquired, that would be
-infringed by some manner, permitted by this License, of making, using, or selling
-its contributor version, but do not include claims that would be infringed only
-as a consequence of further modification of the contributor version. For purposes
-of this definition, "control" includes the right to grant patent sublicenses in a
-manner consistent with the requirements of this License.
-
-   Each contributor
-grants you a non-exclusive, worldwide, royalty-free patent license under the
-contributor's essential patent claims, to make, use, sell, offer for sale, import
-and otherwise run, modify and propagate the contents of its contributor
-version.
-
-   In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent (such as an
-express permission to practice a patent or covenant not to sue for patent
-infringement). To "grant" such a patent license to a party means to make such an
-agreement or commitment not to enforce a patent against the party.
-
-   If you
-convey a covered work, knowingly relying on a patent license, and the
-Corresponding Source of the work is not available for anyone to copy, free of
-charge and under the terms of this License, through a publicly available network
-server or other readily accessible means, then you must either (1) cause the
-Corresponding Source to be so available, or (2) arrange to deprive yourself of
-the benefit of the patent license for this particular work, or (3) arrange, in a
-manner consistent with the requirements of this License, to extend the patent
-license to downstream recipients. "Knowingly relying" means you have actual
-knowledge that, but for the patent license, your conveying the covered work in a
-country, or your recipient's use of the covered work in a country, would infringe
-one or more identifiable patents in that country that you have reason to believe
-are valid.
-
-   If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a covered work,
-and grant a patent license to some of the parties receiving the covered work
-authorizing them to use, propagate, modify or convey a specific copy of the
-covered work, then the patent license you grant is automatically extended to all
-recipients of the covered work and works based on it.
-
-   A patent license is
-"discriminatory" if it does not include within the scope of its coverage,
-prohibits the exercise of, or is conditioned on the non-exercise of one or more
-of the rights that are specifically granted under this License. You may not
-convey a covered work if you are a party to an arrangement with a third party
-that is in the business of distributing software, under which you make payment to
-the third party based on the extent of your activity of conveying the work, and
-under which the third party grants, to any of the parties who would receive the
-covered work from you, a discriminatory patent license (a) in connection with
-copies of the covered work conveyed by you (or copies made from those copies), or
-(b) primarily for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement, or that
-patent license was granted, prior to 28 March 2007.
-
-   Nothing in this License
-shall be construed as excluding or limiting any implied license or other defenses
-to infringement that may otherwise be available to you under applicable patent
-law.
-
-   12. No Surrender of Others' Freedom.
-
-   If conditions are imposed on
-you (whether by court order, agreement or otherwise) that contradict the
-conditions of this License, they do not excuse you from the conditions of this
-License. If you cannot convey a covered work so as to satisfy simultaneously your
-obligations under this License and any other pertinent obligations, then as a
-consequence you may not convey it at all. For example, if you agree to terms that
-obligate you to collect a royalty for further conveying from those to whom you
-convey the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-   13. Use with
-the GNU Affero General Public License.
-
-   Notwithstanding any other provision of
-this License, you have permission to link or combine any covered work with a work
-licensed under version 3 of the GNU Affero General Public License into a single
-combined work, and to convey the resulting work. The terms of this License will
-continue to apply to the part which is the covered work, but the special
-requirements of the GNU Affero General Public License, section 13, concerning
-interaction through a network will apply to the combination as such.
-
-   14.
-Revised Versions of this License.
-
-   The Free Software Foundation may publish
-revised and/or new versions of the GNU General Public License from time to time.
-Such new versions will be similar in spirit to the present version, but may
-differ in detail to address new problems or concerns.
-
-   Each version is given a
-distinguishing version number. If the Program specifies that a certain numbered
-version of the GNU General Public License "or any later version" applies to it,
-you have the option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software Foundation. If the
-Program does not specify a version number of the GNU General Public License, you
-may choose any version ever published by the Free Software Foundation.
-
-   If the
-Program specifies that a proxy can decide which future versions of the GNU
-General Public License can be used, that proxy's public statement of acceptance
-of a version permanently authorizes you to choose that version for the Program.
-
-
-Later license versions may give you additional or different permissions. However,
-no additional obligations are imposed on any author or copyright holder as a
-result of your choosing to follow a later version.
-
-   15. Disclaimer of
-Warranty.
-
-   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS
-AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND,
-EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE
-RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
-PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR
-OR CORRECTION.
-
-   16. Limitation of Liability.
-
-   IN NO EVENT UNLESS REQUIRED
-BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER
-PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO
-YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL
-DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT
-LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
-YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
-PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY
-OF SUCH DAMAGES.
-
-   17. Interpretation of Sections 15 and 16.
-
-   If the
-disclaimer of warranty and limitation of liability provided above cannot be given
-local legal effect according to their terms, reviewing courts shall apply local
-law that most closely approximates an absolute waiver of all civil liability in
-connection with the Program, unless a warranty or assumption of liability
-accompanies a copy of the Program in return for a fee. END OF TERMS AND
-CONDITIONS
-
-How to Apply These Terms to Your New Programs
-
-If you develop a new
-program, and you want it to be of the greatest possible use to the public, the
-best way to achieve this is to make it free software which everyone can
-redistribute and change under these terms.
-
-To do so, attach the following
-notices to the program. It is safest to attach them to the start of each source
-file to most effectively state the exclusion of warranty; and each file should
-have at least the "copyright" line and a pointer to where the full notice is
-found.
-
-<one line to give the program's name and a brief idea of what it
-does.>
-
-Copyright (C) 2022 <name of author>
-
-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
-<https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by
-electronic and paper mail.
-
-If the program does terminal interaction, make it
-output a short notice like this when it starts in an interactive mode:
-
-<program>
-Copyright (C) 2022 <name of author>
-
-This program comes with ABSOLUTELY NO
-WARRANTY; for details type `show w'.
-
-This is free software, and you are welcome
-to redistribute it under certain conditions; type `show c' for details.
-
-The
-hypothetical commands `show w' and `show c' should show the appropriate parts of
-the General Public License. Of course, your program's commands might be
-different; for a GUI interface, you would use an "about box".
-
-You should also
-get your employer (if you work as a programmer) or school, if any, to sign a
-"copyright disclaimer" for the program, if necessary. For more information on
-this, and how to apply and follow the GNU GPL, see
-<https://www.gnu.org/licenses/>.
-
-The GNU General Public License does not permit
-incorporating your program into proprietary programs. If your program is a
-subroutine library, you may consider it more useful to permit linking proprietary
-applications with the library. If this is what you want to do, use the GNU Lesser
-General Public License instead of this License. But first, please read
-<https://www.gnu.org/ licenses /why-not-lgpl.html>.

packages/web/electron-builder.yml

@@ -1,29 +0,0 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json
-
-appId: com.proteria.opvault
-productName: OPVault Viewer
-files:
-  - "**/*"
-icon: dist/512x512.png
-directories:
-  output: bundle
-  app: dist
-  buildResources: dist
-mac:
-  category: public.app-category.productivity
-  target:
-    target: dir
-    arch:
-      - x64
-      - arm64
-  darkModeSupport: true
-linux:
-  executableName: opvault
-  category: Utility
-  icon: 512x512.png
-  artifactName: ${productName}-${version}-${arch}.${ext}
-  target:
-    target: AppImage
-    arch:
-      - x64
-      - arm64

packages/web/esbuild.js

@@ -8,10 +8,10 @@ const args = process.argv.slice(2)
 build({
   bundle: true,
   define: {},
-  entryPoints: ["./src/electron/index.ts", "./src/electron/preload.ts"],
+  entryPoints: ["./src/electron/index.ts"],
   outdir: "./dist/main",
   external: builtinModules.concat("electron"),
-  target: ["chrome96"],
+  target: ["chrome90"],
   tsconfig: "./tsconfig.json",
   sourcemap: "external",
   minify: process.env.NODE_ENV === "production",

packages/web/index.html

@@ -11,7 +11,7 @@
     <title>OPVault Viewer</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

packages/web/package.json

@@ -1,47 +1,58 @@
 {
   "name": "opvault-web",
-  "version": "1.0.220221",
+  "version": "1.0.0",
   "main": "dist/main/index.js",
   "author": "proteria",
-  "license": "GPL-3.0-or-later",
+  "license": "GPL-3.0-only",
   "description": "OnePassword local vault viewer",
   "scripts": {
-    "dev": "concurrently vite npm:start",
+    "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
     "start": "./esbuild.js && NODE_ENV=development electron --enable-transparent-visuals --disable-gpu ./dist/main/index.js",
     "bundle": "./scripts/build.sh"
   },
-  "dependencies": {
-    "@emotion/css": "^11.7.1",
-    "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
-    "buffer": "^6.0.3",
-    "lodash-es": "^4.17.21",
-    "path-browserify": "^1.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-icons": "^4.3.1",
-    "react-idle-timer": "4.6.4"
-  },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@emotion/css": "^11.5.0",
-    "@emotion/babel-plugin": "^11.7.2",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
     "@rollup/plugin-yaml": "^3.1.0",
-    "@types/babel__core": "^7.1.18",
+    "@types/react": "^17.0.0",
-    "@types/lodash-es": "^4.17.6",
+    "@types/react-dom": "^17.0.0",
-    "@types/react": "^17.0.39",
+    "@vitejs/plugin-react": "^1.0.0",
-    "@types/react-dom": "^17.0.11",
+    "buffer": "^6.0.3",
-    "@vitejs/plugin-react": "^1.2.0",
+    "electron": "^15.2.0",
-    "concurrently": "^7.0.0",
+    "electron-builder": "^22.13.1",
-    "electron": "^17.0.1",
+    "esbuild": "^0.13.6",
-    "electron-builder": "^22.14.13",
-    "esbuild": "^0.14.23",
     "js-yaml": "^4.1.0",
-    "lodash": "^4.17.21",
     "opvault.js": "*",
-    "sass": "^1.49.8",
+    "path-browserify": "^1.0.1",
-    "typescript": "^4.5.5",
+    "react": "^17.0.0",
-    "vite": "^2.8.4"
+    "react-dom": "^17.0.0",
+    "react-icons": "^4.3.1",
+    "sass": "^1.43.4",
+    "typescript": "^4.3.2",
+    "vite": "^2.6.4"
+  },
+  "build": {
+    "appId": "com.proteria.opvault",
+    "productName": "OPVault Viewer",
+    "files": [
+      "**/*"
+    ],
+    "icon": "dist/512x512.png",
+    "directories": {
+      "output": "bundle",
+      "app": "dist",
+      "buildResources": "build"
+    },
+    "linux": {
+      "executableName": "opvault",
+      "category": "Utility",
+      "icon": "512x512.png",
+      "target": [
+        "AppImage"
+      ]
+    }
   }
-}
+}

packages/web/scripts/build-i18n-yml-typedef.js

@@ -12,13 +12,8 @@ fs.writeFileSync(
   dtsPath,
   `type Translation = Record<string, string>;
 declare const exportee: {
-  ${Object.entries(json)
+  ${Object.keys(json)
-    .map(
+    .map(x => `${x}: Translation;`)
-      ([category, value]) =>
-        `${category}: {\n${Object.keys(value)
-          .map(key => `    ${key}: Translation;`)
-          .join("\n")}\n  };`
-    )
     .join("\n  ")}
 };
 export default exportee;

packages/web/scripts/build-third-party-license-info.js

@@ -1,42 +0,0 @@
-#!/usr/bin/env node
-const fs = require("fs")
-const { resolve } = require("path")
-
-const root = resolve(__dirname, "../../..")
-const packages = [
-  root,
-  resolve(root, "packages/web"),
-  resolve(root, "packages/opvault.js"),
-]
-
-const readJSON = path => JSON.parse(fs.readFileSync(path, "utf-8"))
-const infoMap = Object.fromEntries(
-  packages.flatMap(dir => {
-    const rootPkg = readJSON(resolve(dir, "package.json"))
-    const dependencies = Object.keys(rootPkg.dependencies || {})
-    return dependencies.map(dependency => {
-      const pkgDir = resolve(dir, "node_modules", dependency)
-      const pkg = readJSON(resolve(pkgDir, "package.json"))
-      const licenseFile = fs
-        .readdirSync(pkgDir)
-        .filter(x => x.toLowerCase().startsWith("license"))
-      if (licenseFile.length !== 1) {
-        console.error(fs.readdirSync(pkgDir))
-        throw new Error(`Cannot determine license file for ${pkg.name}`)
-      }
-      return [
-        pkg.name,
-        {
-          name: pkg.name,
-          author: pkg.author?.name ?? pkg.author,
-          license: fs.readFileSync(resolve(pkgDir, licenseFile[0]), "utf-8"),
-        },
-      ]
-    })
-  })
-)
-
-fs.writeFileSync(
-  resolve(__dirname, "../src/third-party-licenses.json"),
-  JSON.stringify(infoMap, null, 2)
-)

packages/web/scripts/build.sh

@@ -1,8 +1,5 @@
 #!/bin/sh
-./scripts/update-version.js
-./scripts/build-i18n-yml-typedef.js
-./scripts/build-third-party-license-info.js
-./scripts/build-package-json.js
 npx vite build
 NODE_ENV=production ./esbuild.js 
+./scripts/build-package-json.js
 ./node_modules/.bin/electron-builder build

packages/web/scripts/update-version.js

@@ -1,19 +0,0 @@
-#!/usr/bin/env node
-const fs = require("fs")
-const { resolve } = require("path")
-
-const json = require("../package.json")
-const date = new Date()
-json.version = json.version
-  .split(".")
-  .slice(0, 2)
-  .concat(
-    [
-      date.getUTCFullYear() - 2000,
-      (date.getUTCMonth() + 1).toString().padStart(2, "0"),
-      date.getUTCDate().toString().padStart(2, "0"),
-    ].join("")
-  )
-  .join(".")
-
-fs.writeFileSync(resolve(__dirname, "../package.json"), JSON.stringify(json, null, 2))

packages/web/scripts/vite-babel.ts

@@ -1,41 +0,0 @@
-import * as babel from "@babel/core"
-import type { PluginOption, TransformResult } from "vite"
-
-const sourceRegex = /\.(j|t)sx?$/
-
-export default function macrosPlugin(): PluginOption {
-  return {
-    name: "babel-macros",
-    enforce: "pre",
-    transform(source: string, filename: string) {
-      if (filename.includes("node_modules")) {
-        return undefined
-      }
-      if (!sourceRegex.test(filename)) {
-        return
-      }
-      const hasBabelMacro = source.includes('.macro"')
-      const hasEmotion = source.includes("@emotion")
-      if (!hasBabelMacro && !hasEmotion) {
-        return undefined
-      }
-      const result = babel.transformSync(source, {
-        filename,
-        parserOpts: {
-          plugins: ["jsx", "typescript", "decorators-legacy"],
-        },
-        plugins: [
-          hasBabelMacro && require.resolve("babel-plugin-macros"),
-          hasEmotion && require.resolve("@emotion/babel-plugin"),
-        ].filter(Boolean),
-        generatorOpts: {
-          decoratorsBeforeExport: true,
-        },
-        babelrc: false,
-        configFile: false,
-        sourceMaps: true,
-      })
-      return result as TransformResult | null
-    },
-  }
-}

packages/web/src/App.tsx

@@ -1,52 +1,45 @@
-/* eslint-disable import/no-unresolved */
+import { useCallback, useState } from "react"
-import { useCallback, useEffect, useState } from "react"
+import type { Vault } from "opvault.js"
-import type { Vault, OnePassword } from "opvault.js"
+import { OnePassword } from "opvault.js"
-import { useIdleTimer } from "react-idle-timer/modern"
+import { getBrowserAdapter } from "opvault.js/src/adapters/browser"
 import { VaultView } from "./pages/Vault"
-import { VaultPicker } from "./pages/VaultPicker"
+import { PickOPVault } from "./pages/PickOPVault"
-import { Key, useStorage } from "./utils/localStorage"
+import { Unlock } from "./pages/Unlock"
 
 export const App: React.FC = () => {
   const [instance, setInstance] = useState<OnePassword>()
   const [vault, setVault] = useState<Vault>()
 
-  const [enableAutoLock] = useStorage(Key.ENABLE_AUTO_LOCK)
+  const unlock = useCallback(
-  const [autolockAfter] = useStorage(Key.AUTO_LOCK_AFTER)
+    async (profile: string, password: string) => {
+      const vault = await instance!.getProfile(profile!)
+      await vault.unlock(password)
+      setVault(vault)
+    },
+    [instance]
+  )
+
+  const setHandle = useCallback(async (handle: FileSystemDirectoryHandle) => {
+    const adapter = getBrowserAdapter(handle)
+    const instance = new OnePassword({ path: "/", adapter })
+    setInstance(instance)
+  }, [])
 
   const onLock = useCallback(() => {
     vault?.lock()
     setVault(undefined)
   }, [vault])
 
-  const onAutoLock = useCallback(() => {
+  if (!instance) {
-    if (enableAutoLock) {
+    return <PickOPVault setHandle={setHandle} />
-      onLock()
+  }
-    }
-  }, [onLock, enableAutoLock])
-
-  const { reset, pause } = useIdleTimer({
-    timeout: autolockAfter * 1000,
-    onIdle: onAutoLock,
-  })
-
-  useEffect(() => {
-    if (vault) {
-      reset()
-    } else {
-      pause()
-    }
-  }, [vault])
-
   if (!vault) {
-    return (
+    return <Unlock instance={instance} onUnlock={unlock} />
-      <VaultPicker
-        instance={instance}
-        setInstance={setInstance}
-        vault={vault}
-        setVault={setVault}
-      />
-    )
   }
 
-  return <VaultView onLock={onLock} vault={vault} />
+  return (
+    <div>
+      <VaultView onLock={onLock} vault={vault} />
+    </div>
+  )
 }

packages/web/src/SideEffect.ts

@@ -1,31 +0,0 @@
-import { useEffect, memo } from "react"
-import { debounce } from "lodash-es"
-import { useLocaleContext, useTranslate } from "./i18n"
-import { Key, useStorage } from "./utils/localStorage"
-
-const updateCSS = debounce((name: string, value: string) => {
-  document.body.style.setProperty(name, value || null)
-}, 500)
-
-export const SideEffect = memo(() => {
-  const { locale } = useLocaleContext()
-  const t = useTranslate()
-
-  useEffect(() => {
-    document.documentElement.lang = locale
-    document.title = t.label.app_name
-  }, [locale])
-
-  const [uiFont] = useStorage(Key.UI_FONT)
-  const [monoFont] = useStorage(Key.MONOSPACE_FONT)
-
-  useEffect(() => {
-    updateCSS("--sans-serif", uiFont)
-  }, [uiFont])
-
-  useEffect(() => {
-    updateCSS("--monospace", monoFont)
-  }, [monoFont])
-
-  return null
-})

packages/web/src/about/LicenseViewer.tsx

@@ -1,65 +0,0 @@
-import styled from "@emotion/styled"
-import { useEffect, useMemo, useState } from "react"
-import { Container as ClickableContainer } from "../components/ItemFieldValue/Container"
-import { scrollbar } from "../styles"
-
-const Container = styled.div`
-  display: flex;
-`
-const ListContainer = styled.div`
-  min-width: 150px;
-  ul {
-    list-style-type: none;
-    margin-block-start: 0;
-    padding-inline-start: 0;
-  }
-  li {
-    line-height: 1.6em;
-  }
-`
-const LicenseText = styled.div`
-  flex-grow: 1;
-  font-family: var(--monospace);
-  max-height: 575px;
-  overflow-y: scroll;
-  white-space: pre-wrap;
-`
-
-export const LicenseView = () => {
-  const [licenseInfo, setLicenseInfo] = useState<
-    typeof import("../third-party-licenses.json")
-  >(() => ({} as any))
-  const names = useMemo(() => Object.keys(licenseInfo), [licenseInfo])
-
-  const [selected, setSelected] = useState<string>()
-
-  useEffect(() => {
-    import("../third-party-licenses.json").then(json => setLicenseInfo(json.default))
-  }, [])
-
-  useEffect(() => {
-    setSelected(names[0])
-  }, [names])
-
-  return (
-    <Container>
-      <ListContainer>
-        <ul>
-          {names.map(name => (
-            <li
-              key={name}
-              style={name === selected ? { fontWeight: 600 } : undefined}
-              onClick={() => setSelected(name)}
-            >
-              <ClickableContainer>{name}</ClickableContainer>
-            </li>
-          ))}
-        </ul>
-      </ListContainer>
-
-      <LicenseText className={scrollbar}>
-        {licenseInfo[selected as any]?.license}
-      </LicenseText>
-    </Container>
-  )
-}

packages/web/src/about/index.tsx

@@ -1,27 +0,0 @@
-import styled from "@emotion/styled"
-import { Modal } from "../components/Modal"
-import { useTranslate } from "../i18n"
-import { LicenseView } from "./LicenseViewer"
-
-const Container = styled.div`
-  width: 800px;
-  min-height: 450px;
-`
-const LicenseSectionHeader = styled.h3`
-  margin-top: 0;
-`
-
-export const About: React.FC<{
-  show: boolean
-  onHide(): void
-}> = ({ show, onHide }) => {
-  const t = useTranslate()
-  return (
-    <Modal maxWidth={800} show={show} title={t.label.about_app} onClose={onHide}>
-      <Container>
-        <LicenseSectionHeader>Licenses</LicenseSectionHeader>
-        <LicenseView />
-      </Container>
-    </Modal>
-  )
-}

packages/web/src/components/BigTextView.tsx

@@ -11,12 +11,10 @@ const Container = styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 6em;
+  font-size: 8em;
   text-align: center;
   padding: 20px 25px;
   word-break: break-word;
-  min-width: 75vw;
-  z-index: 2;
   @media (prefers-color-scheme: dark) {
     background: rgba(0, 0, 0, 0.6);
   }

packages/web/src/components/CategoryIcon.tsx

@@ -1,4 +1,3 @@
-import { memo } from "react"
 import { Category } from "opvault.js"
 import { cx, css } from "@emotion/css"
 import { BsBank2, BsPeopleFill } from "react-icons/bs"
@@ -78,11 +77,14 @@ interface CategoryIconProps {
   category: Category
 }
 
-export const CategoryIcon = memo<CategoryIconProps>(
+export const CategoryIcon: React.FC<CategoryIconProps> = ({
-  ({ className, category, style, fill }) => {
+  className,
-    const Component = getComponent(category)
+  category,
-    return Component ? (
+  style,
-      <Component className={cx(reactIconClass, className)} fill={fill} style={style} />
+  fill,
-    ) : null
+}) => {
-  }
+  const Component = getComponent(category)
-)
+  return Component ? (
+    <Component className={cx(reactIconClass, className)} fill={fill} style={style} />
+  ) : null
+}

packages/web/src/components/ErrorBoundary.tsx

@@ -21,7 +21,7 @@ const Header = styled.h2`
   margin: 0;
 `
 const Pre = styled.pre`
-  font-size: 1rem;
+  font-size: 15px;
   line-height: 1.3em;
 `
 

packages/web/src/components/FilteredVaultView.tsx

@@ -1,204 +0,0 @@
-import styled from "@emotion/styled"
-import { useEffect, useMemo, useState } from "react"
-import type { Item } from "opvault.js"
-import { Category } from "opvault.js"
-import { IoSearch } from "react-icons/io5"
-import { ItemList } from "../components/ItemList"
-import { ItemView } from "../components/Item"
-import { reactIconClass } from "../components/CategoryIcon"
-import { useTranslate } from "../i18n/index"
-import { scrollbar } from "../styles"
-
-const ListContainer = styled.div`
-  border-right: 1px solid var(--border-color);
-  width: 350px;
-  margin-right: 10px;
-  overflow-y: scroll;
-  overflow-y: overlay;
-  overflow-x: hidden;
-  @media (prefers-color-scheme: dark) {
-    background: #202020;
-    border-right-color: transparent;
-  }
-`
-const ItemContainer = styled.div`
-  width: calc(100% - 300px);
-  overflow: hidden;
-`
-const SearchContainer = styled.div`
-  text-align: center;
-  position: relative;
-  flex-grow: 1;
-  margin: 10px 0;
-  margin-right: 10px;
-`
-const SortContainer = styled.div`
-  display: flex;
-  margin: 10px 0;
-`
-const CategorySelect = styled.select`
-  width: 50%;
-  margin-left: 10px;
-  margin-right: 5px;
-`
-const SortSelect = styled.select`
-  width: calc(50% - 25px);
-`
-
-const SearchInput = styled.input`
-  --margin: 10px;
-  width: calc(100% - var(--margin) * 2 + 9px);
-  margin: 0 var(--margin);
-  padding-left: 2em !important;
-`
-const SearchIcon = styled(IoSearch)`
-  position: absolute;
-  top: 9px;
-  left: 20px;
-`
-
-const enum SortBy {
-  Name,
-  CreatedAt,
-  UpdatedAt,
-}
-
-export const FilteredVaultView: React.FC<{ items: Item[] }> = ({ items }) => {
-  const t = useTranslate()
-  const [item, setItem] = useState<Item>()
-  const [category, setCategory] = useState<Category>()
-  const [sortBy, setSortBy] = useState(SortBy.Name)
-  const [search, setSearch] = useState("")
-
-  useEffect(() => {
-    setItem(undefined)
-  }, [items])
-
-  const compareFn = useMemo((): ((a: Item, b: Item) => number) => {
-    switch (sortBy) {
-      case SortBy.Name:
-        return (a, b) => (a.overview.title ?? "").localeCompare(b?.overview.title ?? "")
-      case SortBy.CreatedAt:
-        return (a, b) => b.createdAt - a.createdAt
-      case SortBy.UpdatedAt:
-        return (a, b) => b.updatedAt - a.updatedAt
-    }
-  }, [sortBy])
-
-  const sortedItem = useMemo(() => items.slice().sort(compareFn), [items, compareFn])
-
-  const filtered = useMemo(() => {
-    let items = sortedItem.filter(x => x.category !== Category.Tombstone)
-    if (category != null) {
-      items = items.filter(x => x.category === category)
-    }
-
-    let res: Item[] = items
-    if (search) {
-      res = []
-      for (const x of items) {
-        const compare = Math.max(
-          stringCompare(search, x.overview.title),
-          stringCompare(search, x.overview.ainfo)
-        ) as CompareResult
-        switch (compare) {
-          case CompareResult.NoMatch:
-            continue
-          case CompareResult.Includes:
-            res.push(x)
-            break
-          case CompareResult.Equals:
-            res.unshift(x)
-            break
-        }
-      }
-    }
-    return res
-  }, [sortedItem, search, category])
-
-  const categoryMap = useMemo(
-    (): [Category | undefined, string][] => [
-      [undefined, t.label.category_all],
-      [Category.Login, t.label.category_login],
-      [Category.SecureNote, t.label.category_secure_note],
-      [Category.CreditCard, t.label.category_credit_card],
-      [Category.Identity, t.label.category_identity],
-      [Category.Password, t.label.category_password],
-      [Category.Membership, t.label.category_membership],
-      [Category.Database, t.label.category_database],
-      [Category.BankAccount, t.label.category_bank_account],
-      [Category.Email, t.label.category_email],
-      [Category.SoftwareLicense, t.label.category_software_license],
-      [Category.SSN, t.label.category_ssn],
-      [Category.Passport, t.label.category_passport],
-      [Category.OutdoorLicense, t.label.category_outdoor_license],
-      [Category.DriverLicense, t.label.category_driver_license],
-      [Category.Rewards, t.label.category_rewards],
-      [Category.Router, t.label.category_router],
-      [Category.Server, t.label.category_server],
-    ],
-    [t]
-  )
-
-  return (
-    <>
-      <ListContainer className={scrollbar}>
-        <SearchContainer>
-          <SearchInput
-            type="search"
-            value={search}
-            onChange={e => setSearch(e.currentTarget.value)}
-          />
-          <SearchIcon className={reactIconClass} />
-        </SearchContainer>
-
-        <SortContainer>
-          <CategorySelect
-            value={category}
-            onChange={e => setCategory((e.currentTarget.value as Category) || undefined)}
-          >
-            {categoryMap.map(([value, name]) => (
-              <option value={value || ""} key={name}>
-                {name}
-              </option>
-            ))}
-          </CategorySelect>
-
-          <SortSelect value={sortBy} onChange={e => setSortBy(+e.currentTarget.value)}>
-            <option key={1} value={SortBy.Name}>
-              {t.options.sort_by_name}
-            </option>
-            <option key={2} value={SortBy.CreatedAt}>
-              {t.options.sort_by_created_at}
-            </option>
-            <option key={3} value={SortBy.UpdatedAt}>
-              {t.options.sort_by_updated_at}
-            </option>
-          </SortSelect>
-        </SortContainer>
-        <ItemList items={filtered} onSelect={setItem} selected={item} />
-      </ListContainer>
-      <ItemContainer>
-        {item && <ItemView className={scrollbar} item={item} />}
-      </ItemContainer>
-    </>
-  )
-}
-
-enum CompareResult {
-  NoMatch,
-  Includes,
-  Equals,
-}
-
-function stringCompare(search: string, source?: string) {
-  if (!search) return CompareResult.Includes
-  if (!source) return CompareResult.NoMatch
-  source = source.toLocaleLowerCase()
-  search = search.toLocaleUpperCase()
-  const includes = source.includes(search.toLocaleLowerCase())
-  if (includes) {
-    return source.length === search.length ? CompareResult.Equals : CompareResult.Includes
-  }
-  return CompareResult.NoMatch
-}

packages/web/src/components/Item.tsx

@@ -1,9 +1,6 @@
 import styled from "@emotion/styled"
-import type { Attachment, AttachmentMetadata, Item, ItemField } from "opvault.js"
+import type { Attachment, AttachmentMetadata, Item } from "opvault.js"
-import type { ItemDetails } from "opvault.js/src/types"
+import { useEffect, useState } from "react"
-import { memo, useEffect, useState } from "react"
-import { useTranslate } from "../i18n"
-import { ItemNoTitle } from "../styles"
 import { CategoryIcon } from "./CategoryIcon"
 import { ItemDates } from "./ItemDates"
 import {
@@ -12,12 +9,10 @@ import {
   FieldTitle,
   ItemDetailsFieldView,
 } from "./ItemField"
-import { Password } from "./ItemFieldValue/Password"
 import { ItemWarning } from "./ItemWarning"
 
 interface ItemViewProps {
   item: Item
-  className?: string
 }
 
 const Header = styled.div`
@@ -59,117 +54,81 @@ const AttachmentContainer = styled.div`
   display: flex;
   margin: 5px 0;
 `
-const PlainNotes = styled.p`
-  white-space: pre-wrap;
-`
 
-const SectionsView = memo<{ sections?: ItemDetails["sections"] }>(({ sections }) =>
+export const ItemView: React.FC<ItemViewProps> = ({ item }) => (
-  sections?.length ? (
+  <Container>
-    <div style={{ marginBottom: 20 }}>
+    <Inner>
-      {sections
+      <ItemWarning item={item} />
-        .filter(s => s.fields?.some(x => x.v != null))
+      <Header>
-        .map((section, i) => (
+        {item.details.fields == null}
-          <div key={i}>
+        <Icon category={item.category} />
-            {section.title != null && <SectionTitle>{section.title}</SectionTitle>}
+        <ItemTitle>{item.overview.title}</ItemTitle>
-            {section.fields?.map((field, j) => (
+      </Header>
-              <ItemFieldView key={j} field={field} />
+      <details>
-            ))}
+        <summary>JSON</summary>
-          </div>
+        <pre>
-        ))}
+          {JSON.stringify({ overview: item.overview, details: item.details }, null, 2)}
-    </div>
+        </pre>
-  ) : null
+      </details>
-)
 
-const FieldsView = memo<{ fields?: ItemField[] }>(({ fields }) =>
+      <div style={{ marginBottom: 20 }}>
-  fields?.length ? (
+        {item.details.sections
-    <div style={{ marginBottom: 20 }}>
+          ?.filter(s => s.fields?.some(x => x.v != null))
-      {fields.map((field, i) => (
+          .map((section, i) => (
-        <ItemDetailsFieldView key={i} field={field} />
+            <div key={i}>
-      ))}
+              {section.title != null && <SectionTitle>{section.title}</SectionTitle>}
-    </div>
+              {section.fields?.map((field, j) => (
-  ) : null
+                <ItemFieldView key={j} field={field} />
-)
-
-const TagsView = memo<{ tags?: string[] }>(({ tags }) => {
-  const t = useTranslate()
-  if (!tags?.length) return null
-  return (
-    <ExtraField>
-      <FieldTitle>{t.noun.tags}</FieldTitle>
-      <div>
-        {tags.map((tag, i) => (
-          <Tag key={i}>{tag}</Tag>
-        ))}
-      </div>
-    </ExtraField>
-  )
-})
-
-const JSONView = memo<{ item: Item }>(({ item }) => (
-  <details>
-    <summary>JSON</summary>
-    <pre>
-      {JSON.stringify({ overview: item.overview, details: item.details }, null, 2)}
-    </pre>
-  </details>
-))
-
-export const ItemView = memo<ItemViewProps>(({ className, item }) => {
-  const t = useTranslate()
-  return (
-    <Container className={className}>
-      <Inner>
-        <ItemWarning item={item} />
-        <Header>
-          {item.details.fields == null}
-          <Icon category={item.category} />
-          <ItemTitle>
-            {item.overview.title || <ItemNoTitle>{t.label.no_title}</ItemNoTitle>}
-          </ItemTitle>
-        </Header>
-
-        <JSONView item={item} />
-        <div style={{ height: 10 }}></div>
-
-        <SectionsView sections={item.details.sections} />
-        <FieldsView fields={item.details.fields} />
-
-        {item.details.notesPlain != null && (
-          <ExtraField>
-            <FieldTitle>notes</FieldTitle>
-            <div>
-              <PlainNotes>{item.details.notesPlain}</PlainNotes>
-            </div>
-          </ExtraField>
-        )}
-
-        {item.details.password != null && (
-          <ExtraField>
-            <FieldTitle>{t.label.password}</FieldTitle>
-            <Password field={{ v: item.details.password }} />
-          </ExtraField>
-        )}
-
-        <TagsView tags={item.overview.tags} />
-
-        {item.attachments.length > 0 && (
-          <ExtraField>
-            <FieldTitle>attachments</FieldTitle>
-            <div>
-              {item.attachments.map((file, i) => (
-                <AttachmentView key={i} file={file} />
               ))}
             </div>
-          </ExtraField>
+          ))}
-        )}
+      </div>
 
+      {!!item.details.fields?.length && (
+        <div style={{ marginBottom: 20 }}>
+          {item.details.fields!.map((field, i) => (
+            <ItemDetailsFieldView key={i} field={field} />
+          ))}
+        </div>
+      )}
+
+      {item.details.notesPlain != null && (
         <ExtraField>
-          <ItemDates item={item} />
+          <FieldTitle>notes</FieldTitle>
+          <div>
+            <p>{item.details.notesPlain}</p>
+          </div>
         </ExtraField>
-      </Inner>
+      )}
-    </Container>
+
-  )
+      {!!item.overview.tags?.length && (
-})
+        <ExtraField>
+          <FieldTitle>tags</FieldTitle>
+          <div>
+            {item.overview.tags!.map((tag, i) => (
+              <Tag key={i}>{tag}</Tag>
+            ))}
+          </div>
+        </ExtraField>
+      )}
+
+      {item.attachments.length > 0 && (
+        <ExtraField>
+          <FieldTitle>attachments</FieldTitle>
+          <div>
+            {item.attachments.map((file, i) => (
+              <AttachmentView key={i} file={file} />
+            ))}
+          </div>
+        </ExtraField>
+      )}
+
+      <ExtraField>
+        <ItemDates item={item} />
+      </ExtraField>
+    </Inner>
+  </Container>
+)
 
 function AttachmentView({ file }: { file: Attachment }) {
   const [metadata, setMetadata] = useState<AttachmentMetadata>()

packages/web/src/components/ItemDates.tsx

@@ -1,4 +1,3 @@
-import { memo } from "react"
 import styled from "@emotion/styled"
 import type { Item } from "opvault.js"
 import { useTranslate } from "../i18n"
@@ -8,19 +7,18 @@ const Container = styled.div`
   font-size: 90%;
   line-height: 1.5em;
   opacity: 0.5;
-  user-select: none;
 `
 
-export const ItemDates = memo<{ item: Item }>(({ item }) => {
+export const ItemDates: React.FC<{ item: Item }> = ({ item }) => {
   const t = useTranslate()
   return (
     <Container>
       <div>
-        {t.label.last_updated}: {new Date(item.updatedAt).toLocaleString()}
+        {t.label_last_updated}: {new Date(item.updatedAt).toLocaleString()}
       </div>
       <div>
-        {t.label.created_at}: {new Date(item.createdAt).toLocaleString()}
+        {t.label_created_at}: {new Date(item.createdAt).toLocaleString()}
       </div>
     </Container>
   )
-})
+}

packages/web/src/components/ItemField.tsx

@@ -1,4 +1,3 @@
-import { memo, useMemo } from "react"
 import styled from "@emotion/styled"
 import type { ItemField, ItemSection } from "opvault.js"
 import { ErrorBoundary } from "./ErrorBoundary"
@@ -12,17 +11,11 @@ const Container: React.FC = styled.div`
 export const FieldTitle: React.FC = styled.div`
   font-size: 85%;
   margin-bottom: 3px;
-  user-select: none;
 `
 
-export const ItemFieldView = memo<{
+export const ItemFieldView: React.FC<{
   field: ItemSection.Any
-}>(({ field }) => {
+}> = ({ field }) => {
-  const title = useMemo(
-    () => ((field as ItemSection.Concealed).n?.startsWith("TOTP_") ? "TOTP" : field.t),
-    [field]
-  )
-
   if (field.v == null) {
     return null
   }
@@ -30,20 +23,17 @@ export const ItemFieldView = memo<{
   return (
     <ErrorBoundary>
       <Container>
-        <FieldTitle>{title}</FieldTitle>
+        <FieldTitle>{field.t}</FieldTitle>
         <ItemFieldValue field={field} />
       </Container>
     </ErrorBoundary>
   )
-})
+}
 
-const hideIds = new Set(["use_desktop", "use_mobile", "use_html"])
+export const ItemDetailsFieldView: React.FC<{
-const hideNames = new Set(["remember"])
-
-export const ItemDetailsFieldView = memo<{
   field: ItemField
-}>(({ field }) => {
+}> = ({ field }) => {
-  if (field.value == null || hideIds.has(field.id!) || hideNames.has(field.name)) {
+  if (field.value == null) {
     return null
   }
 
@@ -55,4 +45,4 @@ export const ItemDetailsFieldView = memo<{
       </Container>
     </ErrorBoundary>
   )
-})
+}

packages/web/src/components/ItemFieldContextMenu.tsx

@@ -4,11 +4,10 @@ import styled from "@emotion/styled"
 const Container = styled.menu`
   background-color: #fff;
   border-radius: 3px;
-  box-shadow: rgb(15 15 15 / 5%) 0px 0px 0px 1px, rgb(15 15 15 / 10%) 0px 3px 6px,
+  box-shadow: #0004 0px 1px 4px;
-    rgb(15 15 15 / 20%) 0px 9px 24px;
   left: 99%;
   margin-block-start: 0;
-  min-width: 195px;
+  min-width: 120px;
   padding-inline-start: 0;
   position: absolute;
   top: 0;
@@ -34,23 +33,16 @@ const Separator = styled.div`
 
 const Item = styled.div`
   cursor: default;
-  font-size: 0.875rem;
+  font-size: 13px;
   flex: 1 1 auto;
   display: flex;
-  height: 2.3em;
+  height: 2.5em;
   align-items: center;
   padding-left: 1em;
-  padding-right: 5px;
   position: relative;
-  &:first-of-type {
-    border-radius: 3px 3px 0 0;
-  }
-  &:last-of-type {
-    border-radius: 0 0 3px 3px;
-  }
   &:hover {
     background-color: #ddd;
-
+    border-radius: 3px;
     .item-field-context-menu {
       display: block;
     }

packages/web/src/components/ItemFieldValue.tsx

@@ -0,0 +1,130 @@
+import styled from "@emotion/styled"
+import type { ItemSection, ItemField } from "opvault.js"
+import { FieldType } from "opvault.js"
+import { useCallback, useMemo, useState } from "react"
+import { parseMonthYear } from "../utils"
+import { BigTextView } from "./BigTextView"
+import { ErrorBoundary } from "./ErrorBoundary"
+import { useItemFieldContextMenu } from "./ItemFieldContextMenu"
+
+const Container = styled.div``
+
+const Password: React.FC<{
+  field: ItemSection.Concealed
+}> = ({ field }) => {
+  const [show, setShow] = useState(false)
+  const [bigText, showBigText] = useState(false)
+
+  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
+  const onToggle = useCallback(() => setShow(x => !x), [])
+  const onCopy = useCallback(() => {
+    navigator.clipboard.writeText(field.v)
+  }, [field.v])
+  const onOpenBigText = useCallback(() => {
+    showBigText(true)
+  }, [])
+  const onCloseBigText = useCallback(() => {
+    showBigText(false)
+  }, [])
+
+  return (
+    <>
+      <Container
+        onContextMenu={onRightClick}
+        onDoubleClick={() => setShow(x => !x)}
+        style={{
+          fontFamily: "var(--monospace)",
+          ...(!show && { userSelect: "none" }),
+        }}
+      >
+        {show ? field.v : "·".repeat(10)}
+      </Container>
+      {bigText && <BigTextView onClose={onCloseBigText}>{field.v}</BigTextView>}
+      <ContextMenuContainer>
+        <Item onClick={onCopy}>Copier</Item>
+        <Item onClick={onToggle}>{show ? "Cacher" : "Afficher"}</Item>
+        {!bigText && <Item onClick={onOpenBigText}>Afficher en gros caractères</Item>}
+      </ContextMenuContainer>
+    </>
+  )
+}
+
+const MonthYear: React.FC<{ field: ItemSection.MonthYear }> = ({ field }) => {
+  const { year, month } = parseMonthYear(field.v)
+  return (
+    <Container>
+      {month.toString().padStart(2, "0")}/{year.toString().padStart(4, "0")}
+    </Container>
+  )
+}
+
+const DateView: React.FC<{ field: ItemSection.Date }> = ({ field }) => {
+  const date = useMemo(() => new Date(field.v * 1000), [field.v])
+  return <Container>{date.toLocaleDateString()}</Container>
+}
+
+const TextView: React.FC<{ value: string }> = ({ value }) => {
+  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
+  const onCopy = useCallback(() => {
+    navigator.clipboard.writeText(value)
+  }, [value])
+
+  return (
+    <>
+      <Container onContextMenu={onRightClick}>{value}</Container>
+      <ContextMenuContainer>
+        <Item onClick={onCopy}>Copier</Item>
+      </ContextMenuContainer>
+    </>
+  )
+}
+
+export const ItemFieldValue: React.FC<{
+  field: ItemSection.Any
+}> = ({ field }) => {
+  if (field.v == null) {
+    return null
+  }
+
+  switch (field.k) {
+    case "concealed":
+      return <Password field={field} />
+    case "monthYear":
+      return <MonthYear field={field} />
+    case "date":
+      return <DateView field={field} />
+    case "address":
+      return (
+        <Container style={{ whiteSpace: "pre" }}>
+          <div>{field.v.street}</div>
+          <div>
+            {field.v.city}, {field.v.state} ({field.v.zip})
+          </div>
+          <div>{field.v.country}</div>
+        </Container>
+      )
+  }
+
+  return (
+    <ErrorBoundary>
+      <TextView value={field.v} />
+    </ErrorBoundary>
+  )
+}
+
+export const ItemDetailsFieldValue: React.FC<{
+  field: ItemField
+}> = ({ field }) => {
+  if (
+    field.type === FieldType.Password ||
+    (field.type === FieldType.Text && field.designation === "password")
+  ) {
+    return <Password field={{ v: field.value } as any} />
+  }
+
+  return (
+    <ErrorBoundary>
+      <Container>{field.value}</Container>
+    </ErrorBoundary>
+  )
+}

packages/web/src/components/ItemFieldValue/Address.tsx

@@ -1,12 +0,0 @@
-import type { ItemSection } from "opvault.js"
-import { Container } from "./Container"
-
-export const Address: React.FC<{ field: ItemSection.Address }> = ({ field }) => (
-  <Container style={{ whiteSpace: "pre" }}>
-    <div>{field.v.street}</div>
-    <div>
-      {field.v.city}, {field.v.state} ({field.v.zip})
-    </div>
-    <div>{field.v.country}</div>
-  </Container>
-)

packages/web/src/components/ItemFieldValue/Container.ts

@@ -1,9 +0,0 @@
-import styled from "@emotion/styled"
-
-export const Container = styled.div`
-  cursor: pointer;
-  &:hover {
-    color: #6fa9ff;
-    text-decoration: underline;
-  }
-`

packages/web/src/components/ItemFieldValue/DateView.tsx

@@ -1,8 +0,0 @@
-import type { ItemSection } from "opvault.js"
-import { useMemo } from "react"
-import { Container } from "./Container"
-
-export const DateView: React.FC<{ field: ItemSection.Date }> = ({ field }) => {
-  const date = useMemo(() => new Date(field.v * 1000), [field.v])
-  return <Container>{date.toLocaleDateString()}</Container>
-}

packages/web/src/components/ItemFieldValue/MonthYear.tsx

@@ -1,12 +0,0 @@
-import type { ItemSection } from "opvault.js"
-import { parseMonthYear } from "../../utils"
-import { Container } from "./Container"
-
-export const MonthYear: React.FC<{ field: ItemSection.MonthYear }> = ({ field }) => {
-  const { year, month } = parseMonthYear(field.v)
-  return (
-    <Container>
-      {month.toString().padStart(2, "0")}/{year.toString().padStart(4, "0")}
-    </Container>
-  )
-}

packages/web/src/components/ItemFieldValue/OTP.tsx

@@ -1,64 +0,0 @@
-import styled from "@emotion/styled"
-import type { ItemSection } from "opvault.js"
-import { useCallback, useState } from "react"
-import { useTranslate } from "../../i18n"
-import { useItemFieldContextMenu } from "../ItemFieldContextMenu"
-import { Container } from "./Container"
-import { useCopy } from "./hooks"
-
-const OTPItemContainer = styled(Container)`
-  margin: 5px 0;
-`
-
-const OTPItem = ({ children }: { children: string }) => {
-  const { onRightClick } = useItemFieldContextMenu()
-  const onCopy = useCopy(children)
-
-  return (
-    <OTPItemContainer onContextMenu={onRightClick} onClick={onCopy} style={{}}>
-      {children}
-    </OTPItemContainer>
-  )
-}
-
-const ItemCount = styled(Container)`
-  opacity: 0.5;
-  user-select: none;
-`
-
-export const OTP: React.FC<{
-  field: Pick<ItemSection.Concealed, "v">
-}> = ({ field }) => {
-  const t = useTranslate()
-  const [show, setShow] = useState(false)
-
-  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
-  const onToggle = useCallback(() => setShow(x => !x), [])
-  const fields = field.v.split(" ")
-
-  return (
-    <>
-      {show ? (
-        <div
-          onContextMenu={onRightClick}
-          onDoubleClick={() => setShow(x => !x)}
-          style={{
-            fontFamily: "var(--monospace)",
-            paddingTop: 5,
-          }}
-        >
-          {fields.map((item, i) => (
-            <OTPItem key={i}>{item}</OTPItem>
-          ))}
-        </div>
-      ) : (
-        <ItemCount onContextMenu={onRightClick} onClick={onToggle}>
-          {fields.length} {fields.length === 1 ? t.noun.item : t.noun.items}
-        </ItemCount>
-      )}
-      <ContextMenuContainer>
-        <Item onClick={onToggle}>{show ? t.action.hide : t.action.show}</Item>
-      </ContextMenuContainer>
-    </>
-  )
-}

packages/web/src/components/ItemFieldValue/Password.tsx

@@ -1,49 +0,0 @@
-import type { ItemSection } from "opvault.js"
-import { useCallback, useState } from "react"
-import { useTranslate } from "../../i18n"
-import { BigTextView } from "../BigTextView"
-import { useItemFieldContextMenu } from "../ItemFieldContextMenu"
-import { Container } from "./Container"
-import { useCopy } from "./hooks"
-
-export const Password: React.FC<{
-  field: Pick<ItemSection.Concealed, "v">
-}> = ({ field }) => {
-  const t = useTranslate()
-  const [show, setShow] = useState(false)
-  const [bigText, showBigText] = useState(false)
-
-  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
-  const onToggle = useCallback(() => setShow(x => !x), [])
-  const onCopy = useCopy(field.v)
-  const onOpenBigText = useCallback(() => {
-    showBigText(true)
-  }, [])
-  const onCloseBigText = useCallback(() => {
-    showBigText(false)
-  }, [])
-
-  return (
-    <>
-      <Container
-        onContextMenu={onRightClick}
-        onDoubleClick={() => setShow(x => !x)}
-        onClick={onCopy}
-        style={{
-          fontFamily: "var(--monospace)",
-          ...(!show && { userSelect: "none" }),
-        }}
-      >
-        {show ? field.v : "·".repeat(10)}
-      </Container>
-      {bigText && <BigTextView onClose={onCloseBigText}>{field.v}</BigTextView>}
-      <ContextMenuContainer>
-        <Item onClick={onCopy}>{t.action.copy}</Item>
-        <Item onClick={onToggle}>{show ? t.action.hide : t.action.show}</Item>
-        {!bigText && (
-          <Item onClick={onOpenBigText}>{t.action.show_in_big_characters}</Item>
-        )}
-      </ContextMenuContainer>
-    </>
-  )
-}

packages/web/src/components/ItemFieldValue/Text.tsx

@@ -1,19 +0,0 @@
-import { useItemFieldContextMenu } from "../ItemFieldContextMenu"
-import { Container } from "./Container"
-import { useCopy } from "./hooks"
-
-export const TextView: React.FC<{ value: string }> = ({ value }) => {
-  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
-  const onCopy = useCopy(value)
-
-  return (
-    <>
-      <Container onContextMenu={onRightClick} onClick={onCopy}>
-        {value}
-      </Container>
-      <ContextMenuContainer>
-        <Item onClick={onCopy}>Copier</Item>
-      </ContextMenuContainer>
-    </>
-  )
-}

packages/web/src/components/ItemFieldValue/hooks.ts

@@ -1,14 +0,0 @@
-import { useCallback } from "react"
-import { useTranslate } from "../../i18n"
-import { toast, ToastType } from "../Toast"
-
-export function useCopy(text: string) {
-  const t = useTranslate()
-  return useCallback(() => {
-    navigator.clipboard.writeText(text)
-    toast({
-      type: ToastType.Secondary,
-      message: t.tips.copied_to_clipboard,
-    })
-  }, [text, t])
-}

packages/web/src/components/ItemFieldValue/index.tsx

@@ -1,52 +0,0 @@
-import type { ItemSection, ItemField } from "opvault.js"
-import { FieldType } from "opvault.js"
-import { ErrorBoundary } from "../ErrorBoundary"
-import { Password } from "./Password"
-import { OTP } from "./OTP"
-import { MonthYear } from "./MonthYear"
-import { DateView } from "./DateView"
-import { TextView } from "./Text"
-import { Address } from "./Address"
-
-export const ItemFieldValue: React.FC<{
-  field: ItemSection.Any
-}> = ({ field }) => {
-  if (field.v == null) {
-    return null
-  }
-
-  switch (field.k) {
-    case "concealed":
-      return field.n.startsWith("TOTP_") ? (
-        <OTP field={field} />
-      ) : (
-        <Password field={field} />
-      )
-    case "monthYear":
-      return <MonthYear field={field} />
-    case "date":
-      return <DateView field={field} />
-    case "address":
-      return <Address field={field} />
-  }
-
-  return (
-    <ErrorBoundary>
-      <TextView value={field.v} />
-    </ErrorBoundary>
-  )
-}
-
-export const ItemDetailsFieldValue: React.FC<{
-  field: ItemField
-}> = ({ field }) => {
-  if (field.type === FieldType.Password || field.designation === "password") {
-    return <Password field={{ v: field.value } as any} />
-  }
-
-  return (
-    <ErrorBoundary>
-      <TextView value={field.value!} />
-    </ErrorBoundary>
-  )
-}

packages/web/src/components/ItemList.tsx

@@ -1,11 +1,7 @@
-import { memo } from "react"
 import styled from "@emotion/styled"
 import { cx } from "@emotion/css"
 import type { Item } from "opvault.js"
-import { AiFillStar } from "react-icons/ai"
 import { CategoryIcon } from "./CategoryIcon"
-import { useTranslate } from "../i18n"
-import { ItemNoTitle } from "../styles"
 
 interface ListProps {
   items: Item[]
@@ -19,14 +15,13 @@ const List = styled.ol`
   padding: 0;
 `
 const ItemView = styled.li`
+  border-radius: 5px;
+  display: grid;
+  padding: 5px 15px;
+  transition: background-color 0.1s;
   align-items: center;
   cursor: default;
-  display: grid;
   grid-template-columns: 35px 1fr;
-  padding: 5px 15px;
-  position: relative;
-  transition: background-color 0.1s;
-  user-select: none;
   &:hover {
     background-color: var(--hover-background);
   }
@@ -41,58 +36,36 @@ const ItemTitle = styled.div`
   font-weight: 600;
   margin-bottom: 2px;
 `
-
 const ItemDescription = styled.div`
   font-size: 95%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 230px;
-  &.empty {
-    opacity: 0.4;
-  }
 `
 const Icon = styled(CategoryIcon)`
   font-size: 1.5em;
 `
-const Favorite = styled(AiFillStar)`
-  bottom: 10px;
-  display: inline-block;
-  fill: #fdcc0d;
-  left: 10px;
-  opacity: 0.9;
-  position: absolute;
-`
 
-export const ItemList = memo<ListProps>(({ items, onSelect, selected }) => {
+export const ItemList: React.FC<ListProps> = ({ items, onSelect, selected }) => (
-  const t = useTranslate()
+  <Container>
-  return (
+    <List>
-    <Container>
+      {items.map(item => (
-      <List>
+        <ItemView
-        {items.map(item => (
+          key={item.uuid}
-          <ItemView
+          onClick={() => onSelect(item)}
-            key={item.uuid}
+          className={cx({
-            onClick={() => onSelect(item)}
+            selected: selected?.uuid === item.uuid,
-            className={cx({
+            trashed: item.isDeleted,
-              selected: selected?.uuid === item.uuid,
+          })}
-              trashed: item.isDeleted,
+        >
-            })}
+          <Icon fill="#FFF" category={item.category} />
-          >
+          <div>
-            <div>
+            <ItemTitle>{item.overview.title!}</ItemTitle>
-              <Icon fill="#FFF" category={item.category} />
+            <ItemDescription>{item.overview.ainfo}</ItemDescription>
-              {!!item.fave && <Favorite />}
+          </div>
-            </div>
+        </ItemView>
-            <div>
+      ))}
-              <ItemTitle>
+    </List>
-                {item.overview.title || <ItemNoTitle>{t.label.no_title}</ItemNoTitle>}
+  </Container>
-              </ItemTitle>
+)
-              <ItemDescription className={cx(!item.overview.ainfo && "empty")}>
-                {item.overview.ainfo || "-"}
-              </ItemDescription>
-            </div>
-          </ItemView>
-        ))}
-      </List>
-    </Container>
-  )
-})

packages/web/src/components/ItemWarning.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled"
 import type { Item } from "opvault.js"
-import { useMemo, memo } from "react"
+import { useMemo } from "react"
 import { parseMonthYear } from "../utils"
 
 const Container = styled.div`
@@ -12,7 +12,7 @@ const Container = styled.div`
   }
 `
 
-export const ItemWarning = memo<{ item: Item }>(({ item }) => {
+export const ItemWarning: React.FC<{ item: Item }> = ({ item }) => {
   const isExpired = useMemo(() => {
     const fields = item.details.sections?.flatMap(x => x.fields ?? [])
     if (!fields?.length) return false
@@ -38,4 +38,4 @@ export const ItemWarning = memo<{ item: Item }>(({ item }) => {
   }
 
   return null
-})
+}

packages/web/src/components/Modal.tsx

@@ -1,98 +0,0 @@
-import styled from "@emotion/styled"
-import { useCallback, useEffect, useRef } from "react"
-import { useEventListener } from "../utils/useEvent"
-
-const ModalBackground = styled.div`
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(1px);
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-`
-const ModalBackground2 = styled.div`
-  z-index: 2;
-  width: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  display: flex;
-  align-items: center;
-`
-const ModalContainer = styled.dialog`
-  background: var(--page-background);
-  border-radius: 5px;
-  border: inherit;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
-  color: inherit;
-  margin: 0 auto;
-  padding: 0;
-
-  &::backdrop {
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(1px);
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-  }
-`
-const ModalTitle = styled.div`
-  border-bottom: 1px solid var(--border-color);
-  padding: 10px 20px;
-  font-weight: 600;
-  text-align: center;
-`
-const ModalContent = styled.div`
-  padding: 15px 20px;
-`
-
-document.createElement("dialog")
-
-export const Modal: React.FC<{
-  show: boolean
-  title: string
-  maxWidth?: number
-  onClose(): void
-}> = ({ show, children, title, maxWidth = 700, onClose }) => {
-  const dialogRef = useRef<HTMLDialogElement>(null)
-  const onBackgroundClick = useCallback(
-    e => {
-      if (e.currentTarget === e.target) {
-        e.stopPropagation()
-        onClose()
-      }
-    },
-    [onClose]
-  )
-
-  useEventListener(document.body, "keyup").on(
-    e => {
-      if (show && e.key === "Escape") {
-        onClose()
-      }
-    },
-    [show]
-  )
-
-  if (!show) {
-    return null
-  }
-
-  return (
-    <>
-      <ModalBackground />
-      <ModalBackground2 onClick={onBackgroundClick}>
-        <ModalContainer open ref={dialogRef} style={{ maxWidth }}>
-          <ModalTitle>{title}</ModalTitle>
-          <ModalContent>{children}</ModalContent>
-        </ModalContainer>
-      </ModalBackground2>
-    </>
-  )
-}

packages/web/src/components/TitleBar.tsx

@@ -1,4 +1,3 @@
-import { memo } from "react"
 import styled from "@emotion/styled"
 
 const Container = styled.div`
@@ -17,8 +16,8 @@ const Title = styled.div`
   flex-grow: 1;
 `
 
-export const TitleBar = memo(() => (
+export const TitleBar = () => (
   <Container>
     <Title>OPVault Viewer</Title>
   </Container>
-))
+)

packages/web/src/components/Toast.tsx

@@ -1,69 +0,0 @@
-import styled from "@emotion/styled"
-import { useEffect, useState } from "react"
-
-export enum ToastType {
-  Regular = "regular",
-  Primary = "primary",
-  Secondary = "secondary",
-  Success = "success",
-  Danger = "danger",
-  Warning = "warning",
-  Info = "info",
-}
-
-interface Message {
-  message: string
-  type: ToastType
-}
-interface InternalMessage extends Message {
-  opacity: number
-  id: number
-}
-
-export let toast: (message: Message) => void
-
-const Container = styled.div``
-const ToastContainer = styled.div`
-  position: fixed;
-  bottom: 0;
-  right: 20px;
-  padding: 8px 12px;
-  border-radius: 5px;
-  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
-  transition: opacity 1s ease-in-out, bottom 0.3s linear;
-`
-
-let lastId = 0
-
-export const Toast: React.FC = () => {
-  const [list, setList] = useState<InternalMessage[]>([])
-
-  useEffect(() => {
-    toast = message => {
-      const newId = ++lastId
-      setList(list => list.concat({ ...message, id: newId, opacity: 1 }))
-      setTimeout(() => {
-        setList(list => list.map(x => (x.id === newId ? { ...x, opacity: 0 } : x)))
-      }, 1000)
-    }
-  }, [])
-
-  return (
-    <Container>
-      {list.map((message, i, { length }) => (
-        <ToastContainer
-          onTransitionEnd={e => {
-            if (e.propertyName === "opacity") {
-              setList(list => list.filter(x => x.id !== message.id))
-            }
-          }}
-          key={message.id}
-          style={{ opacity: message.opacity, bottom: 40 * (length - i) - 10 }}
-          className={`color-${message.type}`}
-        >
-          {message.message}
-        </ToastContainer>
-      ))}
-    </Container>
-  )
-}

packages/web/src/components/VaultPicker.tsx

@@ -0,0 +1,22 @@
+import { useCallback } from "react"
+import { useTranslate } from "../i18n"
+
+export const VaultPicker: React.FC<{
+  setHandle(handle: FileSystemDirectoryHandle): void
+}> = ({ setHandle }) => {
+  const t = useTranslate()
+
+  const onClick = useCallback(async () => {
+    try {
+      const handle = await showDirectoryPicker()
+      setHandle(handle)
+    } catch (e) {
+      if ((e as Error).name === "AbortError") {
+        return
+      }
+      alert(e)
+    }
+  }, [setHandle])
+
+  return <button onClick={onClick}>{t.label_choose_a_vault}</button>
+}

packages/web/src/electron/index.ts

@@ -2,7 +2,6 @@
 // Modules to control application life and create native browser window
 import { join } from "path"
 import { app, BrowserWindow, Menu } from "electron"
-import "./ipc"
 
 function createWindow() {
   // Create the browser window.
@@ -14,7 +13,7 @@ function createWindow() {
     icon: join(__dirname, "../512x512.png"),
     webPreferences: {
       contextIsolation: true,
-      preload: join(__dirname, "preload.js"),
+      // preload: join(__dirname, "preload.js"),
     },
   })
 

packages/web/src/electron/ipc-types.d.ts

@@ -1,10 +0,0 @@
-import type { DirEntry } from "opvault.js/src/adapter"
-
-export interface IPC {
-  showDirectoryPicker(): Promise<string | undefined>
-  pathExists(path: string): Promise<boolean>
-  readDir(path: string): Promise<DirEntry[]>
-  readFile(path: string): Promise<Uint8Array>
-  readTextFile(path: string): Promise<string>
-  writeFile(path: string, data: string): Promise<void>
-}

packages/web/src/electron/ipc.ts

@@ -1,54 +0,0 @@
-import fs, { promises } from "fs"
-import { ipcMain, dialog } from "electron"
-import { adapter } from "opvault.js/src/adapter/node"
-import type { DirEntry } from "opvault.js/src/adapter"
-import type { IPC } from "./ipc-types"
-
-registerService({
-  async showDirectoryPicker() {
-    const result = await dialog.showOpenDialog({
-      properties: ["openDirectory", "treatPackageAsDirectory"],
-    })
-    if (result.canceled || !result.filePaths.length) return
-    return result.filePaths[0]
-  },
-
-  async pathExists(_, path) {
-    return fs.existsSync(path)
-  },
-
-  async readFile(_, path) {
-    return promises.readFile(path)
-  },
-
-  async readTextFile(_, path) {
-    return promises.readFile(path, "utf-8")
-  },
-
-  async writeFile(_, path, content) {
-    await promises.writeFile(path, content)
-  },
-
-  async readDir(_, path) {
-    const entries: DirEntry[] = []
-    for await (const dirent of adapter.fs.readDir(path)) {
-      entries.push(dirent)
-    }
-    return entries
-  },
-})
-
-/**
- * Listens to `channel`, when a new message arrives `listener` would be called
- * with `listener(event, ...args)`
- */
-function registerService(listeners: {
-  [K in keyof IPC]: (
-    event: Electron.IpcMainEvent,
-    ...args: Parameters<IPC[K]>
-  ) => ReturnType<IPC[K]>
-}) {
-  for (const [key, value] of Object.entries(listeners)) {
-    ipcMain.handle(`service-${key}`, value as any)
-  }
-}

packages/web/src/electron/preload.ts

@@ -1,5 +1,4 @@
-import { contextBridge, ipcRenderer } from "electron"
+import { contextBridge } from "electron"
+import { nodeAdapter } from "opvault.js/src/adapters/node"
 
-contextBridge.exposeInMainWorld("ipcRenderer", {
+contextBridge.exposeInMainWorld("nodeAdapter", nodeAdapter)
-  invoke: ipcRenderer.invoke,
-})

packages/web/src/i18n/index.tsx

@@ -1,25 +1,18 @@
-import {
+import { createContext, memo, useContext, useEffect, useMemo, useState } from "react"
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react"
 import texts from "./texts.yml"
-import { get, set, Key } from "../utils/localStorage"
 
-const categories = Object.keys(texts)
+type Keys = keyof typeof texts
 
-const ALLOWED = new Set(["en", "fr", "ja"])
+const ALLOWED = new Set(["en", "fr"])
-const SKIP_ITALIC = new Set(["zh_CN", "zh_TW", "ko", "ja"])
+const LOCALSTORAGE_KEY = "preferred-locale"
 
 function getLocaleFromStorage() {
-  const key = get(Key.PREFERRED_LOCALE)
+  try {
-  if (key && ALLOWED.has(key)) {
+    const key = localStorage.getItem(LOCALSTORAGE_KEY)
-    return key
+    if (key && ALLOWED.has(key)) {
-  }
+      return key
+    }
+  } catch {}
 }
 
 function getNavigatorLocale() {
@@ -45,42 +38,35 @@ export const useLocaleContext = () => useContext(LocaleContext)
 
 export function useTranslate() {
   const { locale } = useContext(LocaleContext)
-  const getter = useCallback(
+  const t = useMemo(
-    (category: string, key: string) => {
+    () =>
-      const obj = (texts as any)[category]
+      new Proxy(
-      if (
+        {},
-        process.env.NODE_ENV === "development" &&
+        {
-        !Object.prototype.hasOwnProperty.call(obj, key)
+          get(_, p: string) {
-      ) {
+            if (
-        throw new Error(`t.${key} does not exist.`)
+              process.env.NODE_ENV === "development" &&
-      }
+              !Object.prototype.hasOwnProperty.call(texts, p)
-      return obj[key][locale]
+            ) {
-    },
+              throw new Error(`t.${p} does not exist.`)
+            }
+            return (texts as any)[p][locale]
+          },
+        }
+      ) as {
+        [key in Keys]: string
+      },
     [locale]
   )
-
-  const t: {
-    [category in keyof typeof texts]: {
-      [key in keyof typeof texts[category]]: string
-    }
-  } = useMemo(
-    (): any =>
-      Object.fromEntries(
-        categories.map(category => [
-          category,
-          new Proxy({}, { get: (_, p: string) => getter(category, p) }),
-        ])
-      ),
-    [getter]
-  )
   return t
 }
 
 export const LocaleContextProvider = memo(({ children }) => {
   const [locale, setLocale] = useState(getEnvLocale)
   useEffect(() => {
-    set(Key.PREFERRED_LOCALE, locale)
+    try {
-    document.documentElement.lang = locale
+      localStorage.setItem(LOCALSTORAGE_KEY, locale)
+    } catch {}
   }, [locale])
   const value = useMemo(() => ({ locale, setLocale }), [locale])
   return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>

packages/web/src/i18n/texts.yml

@@ -1,270 +1,28 @@
 # /* spellchecker: disable */
-label:
+label_choose_a_vault:
-  app_name:
+  en: Pick a vault here.
-    en: OPVault Viewer
+  fr: Choisir un coffre ici.
-    fr: Lecteur de coffre OPVault
-    ja: OPVault ビューワー
 
-  choose_a_vault:
+label_no_vault_selected:
-    en: Pick a vault
+  en: No vault is selected.
-    fr: Choisir un coffre
+  fr: Aucun coffre n’est sélectionné.
-    ja: 保管庫を選ぶ
 
-  no_vault_selected:
+label_last_updated:
-    en: No vault is selected.
+  en: Last Updated
-    fr: Aucun coffre n’est sélectionné.
+  fr: Dernière modification
-    ja: 選択した保管庫はありません。
 
-  last_updated:
+label_created_at:
-    en: Last Updated
+  en: Created At
-    fr: Dernière modification
+  fr: Créé
-    ja: 更新日時
 
-  created_at:
+noun_vault:
-    en: Created At
+  en: vault
-    fr: Créé
+  fr: coffre
-    ja: 作成日時
 
-  password_placeholder:
+action_lock:
-    en: Master Password
+  en: Lock
-    fr: Mot de passe principal
+  fr: Vérouiller
-    ja: マスターパスワード
 
-  username:
+action_unlock:
-    en: Username
+  en: Unlock
-    fr: Nom d’utilisateur
+  fr: Déverouiller
-    ja: ユーザー名
-
-  password:
-    en: Password
-    fr: Mot de passe
-    ja: パスワード
-
-  no_title:
-    en: Untitled
-    fr: Sans titre
-    ja: 無題
-
-  settings:
-    en: Settings
-    fr: Préférences
-    ja: 設定
-
-  language:
-    en: Language
-    fr: Langue
-    ja: 言語
-
-  about_app:
-    en: About
-    fr: À propos
-    ja: バーション情報
-
-  category_all:
-    en: All
-    fr: Tous
-    ja: すべて
-
-  category_login:
-    en: Login
-    fr: Connexion
-    ja: ログイン
-
-  category_credit_card:
-    en: Credit Card
-    fr: Carte de crédit
-    ja: クレジットカード
-
-  category_secure_note:
-    en: Secure Note
-    fr: Note sécurisée
-    ja: セキュアノート
-
-  category_identity:
-    en: Identity
-    fr: Identité
-    ja: 個人情報
-
-  category_password:
-    en: Password
-    fr: Mot de passe
-    ja: パスワード
-
-  category_tombstone:
-    en: Tombstone
-    fr: Corbeille
-    ja: ゴミ箱
-
-  category_software_license:
-    en: Software License
-    fr: Licence de logiciel
-    ja: ソフトウェアライセンス
-
-  category_bank_account:
-    en: BankAccount
-    fr: Compte bancaire
-    ja: 銀行口座
-
-  category_database:
-    en: Database
-    fr: Base de données
-    ja: データベース
-
-  category_driver_license:
-    en: Driver License
-    fr: Permis de conduire
-    ja: 運転免許
-
-  category_outdoor_license:
-    en: Outdoor License
-    fr: Permis de chasse ou pêche
-    ja: 遊漁券及び狩猟免許
-
-  category_membership:
-    en: Membership
-    fr: Adhésion
-    ja: 会員資格
-
-  category_passport:
-    en: Passport
-    fr: Passeport
-    ja: 旅券
-
-  category_rewards:
-    en: Rewards
-    fr: Programme de fidélité
-    ja: ポイントサービス
-
-  category_ssn:
-    en: Social Security Numbers
-    fr: N° de sécurité sociale
-    ja: 社会保障番号
-
-  category_router:
-    en: Router
-    fr: Routeur sans fil
-    ja: Wi-Fiルーター
-
-  category_server:
-    en: Server
-    fr: Serveur
-    ja: サーバー
-
-  category_email:
-    en: Email
-    fr: Courriel
-    ja: メール
-
-options:
-  sort_by_name:
-    en: Sort by Name
-    fr: Trier par nom
-    ja: 名前順
-
-  sort_by_created_at:
-    en: Sort by date created
-    fr: Trier par date de création
-    ja: 作成日時順
-
-  sort_by_updated_at:
-    en: Sort by date modified
-    fr: Trier par date de modification
-    ja: 更新日時順
-
-  enable_autolock:
-    en: Auto Lock
-    fr: Verrouillage automatique
-    ja: 自動ロック
-
-  ui_font:
-    en: Interface font
-    fr: Police de l’interface
-    ja: フォント
-
-  monospace:
-    en: Monospace font
-    fr: Police monospace
-    ja: 等幅フォント
-
-noun:
-  vault:
-    en: vault
-    fr: coffre
-    ja: 保管庫
-
-  tags:
-    en: tags
-    fr: mots-clés
-    ja: キーワード
-
-  seconds:
-    en: seconds
-    fr: secondes
-    ja: 秒
-
-  item:
-    en: item
-    fr: élément
-    ja: アイテム
-
-  items:
-    en: items
-    fr: éléments
-    ja: アイテム
-
-action:
-  lock:
-    en: Lock
-    fr: Vérouiller
-    ja: ロック
-
-  unlock:
-    en: Unlock
-    fr: Déverouiller
-    ja: ロック解除
-
-  copy:
-    en: Copy
-    fr: Copier
-    ja: コピー
-
-  hide:
-    en: Hide
-    fr: Cacher
-    ja: 非表示
-
-  show:
-    en: Show
-    fr: Afficher
-    ja: 表示
-
-  show_in_big_characters:
-    en: Show in large characters
-    fr: Afficher en gros caractères
-    ja: 大きく表示
-
-  go_back:
-    en: Back
-    fr: Revenir
-    ja: 前に戻る
-
-  go_forward:
-    en: Forward
-    fr: Avancer
-    ja: 次に進む
-
-  clear_history:
-    en: Clear history
-    fr: Effacer l’historique
-    ja: 閲覧履歴を消す
-
-tips:
-  automatically_lock_after_inactivity:
-    en: Automatically lock after inactivity
-    fr: Verouiller automatiquement après un temps d’inactivité
-    ja: 一定時間使わないときに自動的にロックする
-
-  copied_to_clipboard:
-    en: Copied to clipboard
-    fr: Copié dans le presse-papier
-    ja: クリップボードへコピーしました

packages/web/src/index.scss

@@ -10,54 +10,37 @@ body {
   margin: 0;
   overflow: hidden;
   font-size: 15px;
-  font-family: var(--sans-serif);
+  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Roboto", "Oxygen", "Ubuntu",
-}
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-:root {
+
-  --border-color: #e3e3e3;
   --color: #000;
-  --hover-background: #ddd;
-  --label-background: #ddd;
-  --monospace: D2Coding, "source-code-pro", Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-  --page-background: #fff;
-  --sans-serif: -apple-system, BlinkMacSystemFont, system-ui, "Roboto", "Oxygen",
-    "Cantarell", "Droid Sans", "Helvetica Neue", "Noto Sans CJK JP", sans-serif;
-  --selected-background: #d5d5d5;
-  --red-border: #fa144d;
-  --titlebar-height: 0px;
   --titlebar-height: 46px;
-}
+  --titlebar-height: 0px;
-
+  --label-background: #ddd;
-@media (prefers-color-scheme: light) {
+  --selected-background: #c9c9c9;
-  :root.mac {
+  --hover-background: #ddd;
-    --page-background: #f7f7f7;
+  --monospace: D2Coding, source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-  }
+    monospace;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color: #fff;
-    --label-background: #353535;
-    --selected-background: #353535;
-    --border-color: #333;
-    --hover-background: #222;
-    --page-background: #292929;
-    --red-border: #9e1641;
-  }
-  body {
-    color: #fff;
-  }
 }
 
 html,
 body,
-#app {
+#root {
   height: 100%;
 }
 
-#app {
+@media (prefers-color-scheme: dark) {
-  background-color: var(--page-background);
+  body {
-  position: relative;
+    color: #fff;
+    --color: #fff;
+    --label-background: #353535;
+    --selected-background: #353535;
+    --selected-background: #15539e;
+    --hover-background: #222;
+  }
+  #root {
+    background-color: #292929;
+  }
 }
 
 pre,
@@ -69,51 +52,24 @@ input {
   font-family: inherit;
   font-size: inherit;
 }
-@mixin input {
+input[type="search"],
+input[type="input"],
+input[type="password"] {
   @include scheme(background-color, #fff, #2d2d2d);
   border-radius: 6px;
-  border: 1px solid #fff;
+  border: 1px solid;
   @include scheme(border-color, #cdc7c2, #1b1b1b);
+  color: inherit;
+  outline: none;
+  padding: 7px 8px;
   transition: 0.1s;
   &:focus {
     @include scheme(border-color, #3584e480, #15539e);
   }
 }
 
-input[type="search"],
-input[type="text"],
-input[type="number"],
-input[type="password"] {
-  @include input;
-  border-radius: 6px;
-  color: inherit;
-  outline: none;
-  padding: 7px 8px;
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-input[type="checkbox" i] {
-  @include input;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
-    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
-  padding: 9px;
-  border-radius: 3px;
-  appearance: none;
-  position: relative;
-  &:checked:after {
-    content: "\2714";
-    font-size: 1rem;
-    position: absolute;
-    top: 0px;
-    left: 3px;
-    color: var(--color);
-  }
-}
-
 button,
-select,
+select {
-.button {
   @include scheme(background-color, #f6f5f4, #333);
   border-radius: 4px;
   border: 1px solid;
@@ -128,6 +84,7 @@ select,
   }
 }
 button {
+  font-size: 16px;
   padding: 8px 15px;
   box-shadow: rgb(0 0 0 / 7%) 0px 1px 2px;
   transition: 0.1s;
@@ -140,33 +97,17 @@ select {
   padding: 5px 10px;
 }
 
-// #region color
+::-webkit-scrollbar {
-.color-primary,
+  width: 7px;
-.color-secondary,
-.color-info,
-.color-danger {
-  @include scheme(color, #fff, #fafafa);
 }
-.color-success,
+::-webkit-scrollbar-track {
-.color-warning {
+  background: transparent;
-  @include scheme(color, #000, #111);
 }
-.color-primary {
+::-webkit-scrollbar-thumb {
-  @include scheme(background-color, #0b5ed7, #375a7f);
+  @include scheme(background, #8883, #6663);
+  border-radius: 6px;
 }
-.color-secondary {
+::-webkit-scrollbar-thumb:hover {
-  @include scheme(background-color, #6c757d, #626262);
+  transition: 0.1s;
+  @include scheme(background, #ddd, #555);
 }
-.color-success {
-  @include scheme(background-color, #198754, #00bc8c);
-}
-.color-info {
-  @include scheme(background-color, #0dcaf0, #17a2b8);
-}
-.color-warning {
-  @include scheme(background-color, #ffc107, #f39c12);
-}
-.color-danger {
-  @include scheme(background-color, #dc3545, #e74c3c);
-}
-// #endregion

packages/web/src/main.tsx

@@ -2,23 +2,14 @@ import React from "react"
 import { render } from "react-dom"
 import { App } from "./App"
 import { LocaleContextProvider } from "./i18n"
-import { SideEffect } from "./SideEffect"
-import { Toast } from "./components/Toast"
 import "./index.scss"
 
-if (navigator.platform === "MacIntel") {
+render(
-  document.documentElement.classList.add("mac")
-}
-
-const Root: React.FC = () => (
   <React.StrictMode>
     {/* <TitleBar /> */}
     <LocaleContextProvider>
-      <SideEffect />
       <App />
-      <Toast />
     </LocaleContextProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
+  document.getElementById("root")
 )
-
-render(<Root />, document.getElementById("app"))

packages/web/src/modules.d.ts

@@ -1,3 +0,0 @@
-declare module "react-idle-timer/modern" {
-  export * from "react-idle-timer/dist/modern"
-}

packages/web/src/pages/PickOPVault.tsx

@@ -0,0 +1,23 @@
+import styled from "@emotion/styled"
+import { VaultPicker } from "../components/VaultPicker"
+import { useTranslate } from "../i18n"
+
+const Container = styled.div`
+  padding: 100px;
+  text-align: center;
+`
+const Info = styled.div`
+  margin: 10px;
+`
+
+export const PickOPVault: React.FC<{
+  setHandle(handle: FileSystemDirectoryHandle): void
+}> = ({ setHandle }) => {
+  const t = useTranslate()
+  return (
+    <Container>
+      <VaultPicker setHandle={setHandle} />
+      <Info>{t.label_no_vault_selected}</Info>
+    </Container>
+  )
+}

packages/web/src/pages/Unlock.tsx

@@ -0,0 +1,61 @@
+import type { OnePassword } from "opvault.js"
+import styled from "@emotion/styled"
+import { useCallback, useEffect, useState } from "react"
+import { useTranslate } from "../i18n"
+
+const Container = styled.form`
+  padding: 20px;
+  text-align: center;
+`
+
+export const Unlock: React.FC<{
+  instance: OnePassword
+  onUnlock(profile: string, password: string): void
+}> = ({ onUnlock, instance }) => {
+  const t = useTranslate()
+  const [profiles, setProfiles] = useState<string[]>(() => [])
+  const [profile, setProfile] = useState<string>()
+  const [password, setPassword] = useState("")
+
+  const unlock = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault()
+
+      if (!profile) return
+      onUnlock(profile, password)
+      setPassword("")
+    },
+    [onUnlock, profile, password]
+  )
+
+  useEffect(() => {
+    instance.getProfileNames().then(profiles => {
+      setProfiles(profiles)
+      setProfile(profiles[0])
+    })
+  }, [instance])
+
+  return (
+    <Container onSubmit={unlock}>
+      <div>
+        <select value={profile} onChange={e => setProfile(e.currentTarget.value)}>
+          {profiles.map(p => (
+            <option key={p} value={p}>
+              {t.noun_vault}: {p}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div style={{ margin: "10px 0" }}>
+        <input
+          type="password"
+          value={password}
+          onChange={e => setPassword(e.currentTarget.value)}
+        />
+      </div>
+      <button type="submit" disabled={!profile || !password}>
+        {t.action_unlock}
+      </button>
+    </Container>
+  )
+}

packages/web/src/pages/Vault.tsx

@@ -1,103 +1,134 @@
 import styled from "@emotion/styled"
-import { useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import type { Vault, Item } from "opvault.js"
-import { AiOutlineStar } from "react-icons/ai"
+import { Category } from "opvault.js"
-import { FiLock } from "react-icons/fi"
+import { IoSearch } from "react-icons/io5"
-import { Si1Password } from "react-icons/si"
+import { ItemList } from "../components/ItemList"
-import { BsGear } from "react-icons/bs"
+import { ItemView } from "../components/Item"
+import { reactIconClass } from "../components/CategoryIcon"
 import { useTranslate } from "../i18n/index"
-import { Settings } from "../settings"
-import { FilteredVaultView } from "../components/FilteredVaultView"
 
 const Container = styled.div`
   display: flex;
   height: calc(100vh - var(--titlebar-height));
 `
-const TabContainer = styled.div`
+const ListContainer = styled.div`
-  border-right: 1px solid var(--border-color);
+  width: 300px;
-  display: flex;
+  margin-right: 10px;
-  flex-direction: column;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  @media (prefers-color-scheme: dark) {
+    background: #202020;
+  }
+`
+const ItemContainer = styled.div`
+  width: calc(100% - 300px);
   overflow: hidden;
-  padding-bottom: 5px;
-  width: 54px;
-  @media (prefers-color-scheme: dark) {
-    background: #222;
-    border-right-color: transparent;
-  }
-  &&::-webkit-scrollbar {
-    display: none;
-  }
 `
-const TabButton = styled.button<{ active?: boolean }>`
+const SearchContainer = styled.div`
-  align-items: center;
+  text-align: center;
-  background: ${p => (p.active ? "var(--selected-background)" : "transparent")};
+  margin: 10px 0;
-  border-radius: ${p => (p.active ? 0 : 3)}px;
+  position: relative;
-  border: transparent;
-  box-shadow: none;
-  display: inline-flex;
-  margin-bottom: 5px;
-  font-size: 1.4666em;
-  padding: 10px 14px;
-  ${p => p.active && "&:hover { background: var(--selected-background); }"}
-  @media (prefers-color-scheme: dark) {
-    --selected-background: #1c1c1c;
-  }
 `
-const TabContainerMain = styled.div`
+const SortContainer = styled.div`
-  flex-grow: 1;
+  margin: 10px 10px;
 `
+const SearchInput = styled.input`
+  --margin: 10px;
+  width: calc(100% - var(--margin) * 2);
+  margin: 0 var(--margin);
+  padding-left: 2em !important;
+`
+const SearchIcon = styled(IoSearch)`
+  position: absolute;
+  top: 9px;
+  left: 20px;
+`
+
+const enum SortBy {
+  Name,
+  CreatedAt,
+  UpdatedAt,
+}
 
 export const VaultView: React.FC<{ vault: Vault; onLock(): void }> = ({
   vault,
   onLock,
 }) => {
-  const [tab, setTab] = useState(Tab.All)
-  const [items, setItems] = useState<Item[]>(() => [])
-  const [showSettings, setShowSettings] = useState(false)
   const t = useTranslate()
+  const [items, setItems] = useState<Item[]>(() => [])
+  const [item, setItem] = useState<Item>()
+  const [sortBy, setSortBy] = useState(SortBy.Name)
+  const [search, setSearch] = useState("")
+
+  const compareFn = useMemo((): ((a: Item, b: Item) => number) => {
+    switch (sortBy) {
+      case SortBy.Name:
+        return (a, b) => (a.overview.title ?? "").localeCompare(b?.overview.title ?? "")
+      case SortBy.CreatedAt:
+        return (a, b) => a.createdAt - b.createdAt
+      case SortBy.UpdatedAt:
+        return (a, b) => a.updatedAt - b.updatedAt
+    }
+  }, [sortBy])
+
+  const sortedItem = useMemo(() => items.slice().sort(compareFn), [items, compareFn])
 
   useEffect(() => {
+    setItem(undefined)
     arrayFrom(vault.values()).then(setItems)
   }, [vault])
 
+  const filtered = useMemo(
+    () =>
+      sortedItem
+        .filter(x => x.category !== Category.Tombstone)
+        .filter(
+          search
+            ? x =>
+                stringCompare(search, x.overview.title) ||
+                stringCompare(search, x.overview.ainfo)
+            : () => true
+        ),
+    [sortedItem, search]
+  )
+
   return (
     <Container>
-      <TabContainer>
+      <ListContainer>
-        <TabContainerMain>
+        <div
-          <TabButton active={tab === Tab.All} onClick={() => setTab(Tab.All)}>
+          style={{
-            <Si1Password />
+            margin: "10px 10px",
-          </TabButton>
+          }}
-          <TabButton active={tab === Tab.Favorites} onClick={() => setTab(Tab.Favorites)}>
+        >
-            <AiOutlineStar />
+          <button onClick={onLock}>{t.action_lock}</button>
-          </TabButton>
+        </div>
-        </TabContainerMain>
+        <SearchContainer>
-        <TabButton onClick={onLock} title={t.action.lock}>
+          <SearchInput
-          <FiLock />
+            type="search"
-        </TabButton>
+            value={search}
-        <TabButton onClick={() => setShowSettings(true)} title={t.label.settings}>
+            onChange={e => setSearch(e.currentTarget.value)}
-          <BsGear />
+          />
-        </TabButton>
+          <SearchIcon className={reactIconClass} />
-      </TabContainer>
+        </SearchContainer>
-
+        <SortContainer>
-      {tab === Tab.All ? (
+          <select
-        <FilteredVaultView items={items} />
+            style={{ width: "100%" }}
-      ) : tab === Tab.Favorites ? (
+            value={sortBy}
-        <FavoriteItemsView items={items} />
+            onChange={e => setSortBy(+e.currentTarget.value)}
-      ) : null}
+          >
-
+            <option value={SortBy.Name}>Sort by Name</option>
-      <Settings show={showSettings} onHide={() => setShowSettings(false)} />
+            <option value={SortBy.CreatedAt}>Sort by Created Time</option>
+            <option value={SortBy.UpdatedAt}>Sort by Updated Time</option>
+          </select>
+        </SortContainer>
+        <ItemList items={filtered} onSelect={setItem} selected={item} />
+      </ListContainer>
+      <ItemContainer>{item && <ItemView item={item} />}</ItemContainer>
     </Container>
   )
 }
 
-const FavoriteItemsView: React.FC<{ items: Item[] }> = ({ items }) => {
-  const favorites = useMemo(
-    () => items.filter(x => x.fave).sort((a, b) => a.fave - b.fave),
-    [items]
-  )
-  return <FilteredVaultView items={favorites} />
-}
-
 async function arrayFrom<T>(generator: AsyncGenerator<T, void, unknown>) {
   const list: T[] = []
   for await (const value of generator) {
@@ -106,7 +137,8 @@ async function arrayFrom<T>(generator: AsyncGenerator<T, void, unknown>) {
   return list
 }
 
-enum Tab {
+function stringCompare(search: string, source?: string) {
-  All,
+  if (!search) return true
-  Favorites,
+  if (!source) return false
+  return source.toLocaleLowerCase().includes(search.toLocaleLowerCase())
 }

packages/web/src/pages/VaultPicker/Picker.tsx

@@ -1,148 +0,0 @@
-import styled from "@emotion/styled"
-import { css } from "@emotion/css"
-import { useCallback, useMemo, memo, useState } from "react"
-import { Si1Password } from "react-icons/si"
-import { FaFolderOpen } from "react-icons/fa"
-import { ImCross } from "react-icons/im"
-import { MdClearAll } from "react-icons/md"
-import { BsGear, BsInfoCircle } from "react-icons/bs"
-import { openDirectory } from "../../utils/ipc-adapter"
-import { useTranslate } from "../../i18n"
-import { Key, useStorage } from "../../utils/localStorage"
-import { Settings } from "../../settings"
-import { About } from "../../about"
-
-const Container = styled.div`
-  padding: 100px;
-  max-width: 600px;
-  margin: 0 auto;
-`
-const List = styled.ul`
-  list-style-type: none;
-  padding-inline-start: 0;
-`
-const Item = styled.li`
-  align-items: center;
-  cursor: default;
-  display: flex;
-  padding: 8px 10px;
-  user-select: none;
-  &:not(:hover):not(:active) {
-    background: transparent;
-    border-color: transparent;
-  }
-`
-const icon = css`
-  font-size: 1.5em;
-  margin-right: 10px;
-`
-const Text = styled.div`
-  flex-grow: 1;
-`
-const Hr = styled.hr`
-  border: none;
-  border-top: 1px solid var(--border-color);
-`
-const DeleteItem = styled(ImCross)`
-  text-align: right;
-  font-size: 0.7em;
-  opacity: 0;
-  ${Item}:hover & {
-    opacity: 1;
-  }
-`
-const NonCriticalPath = styled.span`
-  opacity: 0.4;
-`
-
-const Path = memo(({ children }: { children: string }) => {
-  const segments = useMemo(() => children.split("/"), [children])
-  return (
-    <span>
-      {segments.map((seg, i, { length }) =>
-        i < length - 1 ? (
-          <NonCriticalPath key={i}>{seg}/</NonCriticalPath>
-        ) : (
-          <span key={i}>{seg}</span>
-        )
-      )}
-    </span>
-  )
-})
-
-const enum Modal {
-  None,
-  Settings,
-  About,
-}
-
-export const PickOPVault: React.FC<{
-  setPath(path: string): void
-}> = ({ setPath }) => {
-  const t = useTranslate()
-  const [modal, setModal] = useState(Modal.None)
-  const [list, $setList] = useStorage(Key.RECENTLY_OPENED_VAULTS)
-
-  const clearHistory = useCallback(() => {
-    $setList([])
-  }, [$setList])
-
-  const setList = useCallback(
-    (fn: (value: Set<string>) => void) => {
-      $setList(list => {
-        const set = new Set(list)
-        fn(set)
-        return Array.from(set)
-      })
-    },
-    [$setList]
-  )
-
-  const onClick = useCallback(async () => {
-    const path = await openDirectory()
-    if (path) {
-      setPath(path)
-      setList(set => set.add(path))
-    }
-  }, [setPath, setList])
-
-  return (
-    <Container>
-      <List>
-        <Item className="button" onClick={onClick}>
-          <FaFolderOpen className={icon} />
-          {t.label.choose_a_vault}…
-        </Item>
-        {list.map((item, i) => (
-          <Item className="button" onClick={() => setPath(item)} key={i}>
-            <Si1Password className={icon} />
-            <Text>
-              <Path>{item}</Path>
-            </Text>
-            <DeleteItem onClick={() => setList(list => list.delete(item))} />
-          </Item>
-        ))}
-        {list.length > 0 && (
-          <>
-            <Hr />
-            <Item className="button" onClick={() => clearHistory()}>
-              <MdClearAll className={icon} />
-              {t.action.clear_history}
-            </Item>
-          </>
-        )}
-        <Item className="button" onClick={() => setModal(Modal.Settings)}>
-          <BsGear className={icon} />
-          {t.label.settings}
-        </Item>
-        <Item className="button" onClick={() => setModal(Modal.About)}>
-          <BsInfoCircle className={icon} />
-          {t.label.about_app}
-        </Item>
-      </List>
-
-      <Settings show={modal === Modal.Settings} onHide={() => setModal(Modal.None)} />
-      <About show={modal === Modal.About} onHide={() => setModal(Modal.None)} />
-    </Container>
-  )
-}

packages/web/src/pages/VaultPicker/Unlock.tsx

@@ -1,153 +0,0 @@
-import type { OnePassword } from "opvault.js"
-import styled from "@emotion/styled"
-import React, { useCallback, useEffect, useState } from "react"
-import { IoMdArrowRoundBack } from "react-icons/io"
-import { FaUnlock } from "react-icons/fa"
-import { useTranslate } from "../../i18n"
-import { useWrongPasswordFeedback } from "../../utils/useWrongPasswordFeedback"
-
-const Container = styled.div`
-  padding: 20px;
-  transform: translate(-50%, -50%);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 500px;
-`
-const BackButton = styled.button`
-  && {
-    background: transparent;
-  }
-  border: none;
-  box-shadow: none;
-  font-size: 2em;
-  cursor: pointer;
-  padding: 0;
-  &:hover {
-    svg path {
-      fill: var(--selected-background);
-      transition: 0.2s;
-    }
-  }
-`
-const Input = styled.input`
-  box-shadow: inset 0 2px 2px rgb(0 0 0 / 8%);
-  font-size: 1.5em;
-  width: calc(95.5% - 60px);
-  && {
-    border-radius: 10px;
-    border-width: 1px;
-    padding: 15px 20px;
-    padding-right: 60px;
-  }
-`
-const Select = styled.select`
-  float: right;
-`
-const Submit = styled.button`
-  font-size: 1.8em;
-  && {
-    background: transparent;
-    border: none;
-    box-shadow: none;
-  }
-  svg path {
-    fill: var(--color);
-  }
-  &:hover {
-    transition: 0.2s;
-  }
-  text-align: center;
-  position: absolute;
-  top: 8px;
-  right: 5px;
-`
-const VaultPath = styled.div`
-  margin-top: 15px;
-  opacity: 0.7;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-export const Unlock: React.FC<{
-  instance: OnePassword
-  vaultPath: string
-  onUnlock(profile: string, password: string): Promise<boolean>
-  onReturn(): void
-}> = ({ onUnlock, onReturn, instance, vaultPath }) => {
-  const t = useTranslate()
-  const [profiles, setProfiles] = useState<string[]>(() => [])
-  const [profile, setProfile] = useState<string>()
-  const [password, setPassword] = useState("")
-
-  const [{ animation, error }, setFeedback] = useWrongPasswordFeedback()
-
-  const unlock = useCallback(
-    (e?: React.FormEvent) => {
-      e?.preventDefault()
-
-      if (!profile) return
-      onUnlock(profile, password).then(setFeedback)
-      setPassword("")
-    },
-    [onUnlock, profile, password]
-  )
-
-  const onKeyUp = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Enter") {
-        unlock()
-      }
-    },
-    [unlock]
-  )
-
-  useEffect(() => {
-    instance.getProfileNames().then(profiles => {
-      setProfiles(profiles)
-      setProfile(profiles[0])
-    })
-  }, [instance])
-
-  return (
-    <Container>
-      <div style={{ marginBottom: 10 }}>
-        <BackButton onClick={onReturn} title={t.action.go_back}>
-          <IoMdArrowRoundBack />
-        </BackButton>
-        <Select
-          title={t.noun.vault}
-          value={profile}
-          onChange={e => setProfile(e.currentTarget.value)}
-        >
-          {profiles.map(p => (
-            <option key={p} value={p}>
-              {t.noun.vault}: {p}
-            </option>
-          ))}
-        </Select>
-      </div>
-      <div style={{ margin: "10px 0", position: "relative" }}>
-        <Input
-          type="password"
-          value={password}
-          onChange={e => setPassword(e.currentTarget.value)}
-          placeholder={t.label.password_placeholder}
-          onKeyUp={onKeyUp}
-          style={{ animation, borderColor: error ? "var(--red-border)" : undefined }}
-        />
-        <Submit
-          type="submit"
-          disabled={!profile || !password}
-          onClick={unlock}
-          title={t.action.unlock}
-          style={{ animation }}
-        >
-          <FaUnlock />
-        </Submit>
-      </div>
-      <VaultPath>{vaultPath}</VaultPath>
-    </Container>
-  )
-}

packages/web/src/pages/VaultPicker/index.tsx

@@ -1,78 +0,0 @@
-import { useCallback, useEffect, useState } from "react"
-import type { Vault } from "opvault.js"
-import { OnePassword } from "opvault.js"
-import { Unlock } from "./Unlock"
-import { electronAdapter } from "../../utils/ipc-adapter"
-import { get, remove, set, Key } from "../../utils/localStorage"
-import { PickOPVault } from "./Picker"
-
-interface VaultPickerProps {
-  instance: OnePassword | undefined
-  setInstance(value?: OnePassword): void
-  vault: Vault | undefined
-  setVault(vault?: Vault): void
-}
-
-export const VaultPicker: React.FC<VaultPickerProps> = ({
-  instance,
-  setInstance,
-  vault,
-  setVault,
-}) => {
-  const [vaultPath, setVaultPath] = useState("")
-
-  const unlock = useCallback(
-    async (profile: string, password: string) => {
-      const vault = await instance!.getProfile(profile!)
-      try {
-        await vault.unlock(password)
-        setVault(vault)
-        return true
-      } catch {
-        return false
-      }
-    },
-    [instance, setVault]
-  )
-
-  const clearInstance = useCallback(() => {
-    setVaultPath("")
-    setInstance(undefined)
-  }, [setInstance])
-
-  useEffect(() => {
-    const existingPath = get(Key.LAST_VAULT_PATH)
-    if (existingPath != null) {
-      setVaultPath(existingPath)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (vaultPath) {
-      const instance = new OnePassword({
-        path: vaultPath,
-        adapter: electronAdapter,
-      })
-      setInstance(instance)
-      set(Key.LAST_VAULT_PATH, vaultPath)
-    } else {
-      setInstance(undefined)
-      remove(Key.LAST_VAULT_PATH)
-    }
-  }, [vaultPath, setInstance])
-
-  if (!instance) {
-    return <PickOPVault setPath={setVaultPath} />
-  }
-  if (!vault) {
-    return (
-      <Unlock
-        vaultPath={vaultPath}
-        onReturn={clearInstance}
-        instance={instance}
-        onUnlock={unlock}
-      />
-    )
-  }
-  return null
-}

packages/web/src/settings/index.tsx

@@ -1,117 +0,0 @@
-import styled from "@emotion/styled"
-import { Modal } from "../components/Modal"
-import { useLocaleContext, useTranslate } from "../i18n"
-import { Key, useStorage } from "../utils/localStorage"
-
-const FormItem = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 13px;
-`
-const FormLabel = styled.div`
-  width: 120px;
-`
-const FormValue = styled.div`
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  position: relative;
-  min-width: 200px;
-  select {
-    width: 100%;
-  }
-`
-const Checkbox = styled.input`
-  margin-left: 0;
-  margin-right: 8px;
-`
-const Input = styled.input`
-  width: 100%;
-`
-
-const GhostLabel = styled.div`
-  opacity: 0.5;
-  position: absolute;
-  left: 37px;
-  pointer-events: none;
-`
-
-export const Settings: React.FC<{
-  show: boolean
-  onHide(): void
-}> = ({ show, onHide }) => {
-  const { locale, setLocale } = useLocaleContext()
-  const t = useTranslate()
-
-  const [enableAutoLock, setEnableAutoLock] = useStorage(Key.ENABLE_AUTO_LOCK)
-  const [autolockAfter, setAutolockAfter] = useStorage(Key.AUTO_LOCK_AFTER)
-  const [uiFont, setUIFont] = useStorage(Key.UI_FONT)
-  const [monoFont, setMonoFont] = useStorage(Key.MONOSPACE_FONT)
-
-  return (
-    <Modal show={show} title={t.label.settings} onClose={onHide}>
-      <FormItem>
-        <FormLabel>{t.label.language}</FormLabel>
-        <FormValue>
-          <select
-            title={t.label.language}
-            value={locale}
-            onChange={e => setLocale(e.currentTarget.value)}
-          >
-            <option value="en">English</option>
-            <option value="fr">Français</option>
-            <option value="ja">日本語</option>
-          </select>
-        </FormValue>
-      </FormItem>
-
-      <FormItem>
-        <FormLabel title={t.tips.automatically_lock_after_inactivity}>
-          {t.options.enable_autolock}
-        </FormLabel>
-        <FormValue>
-          <Checkbox
-            type="checkbox"
-            checked={enableAutoLock}
-            onChange={e => setEnableAutoLock(e.target.checked)}
-          />
-          <input
-            type="number"
-            value={autolockAfter}
-            onChange={e => setAutolockAfter(e.target.valueAsNumber)}
-            disabled={!enableAutoLock}
-            min={5}
-          />
-          <GhostLabel>
-            <span style={{ opacity: 0 }}>{autolockAfter} </span>
-            {t.noun.seconds}
-          </GhostLabel>
-        </FormValue>
-      </FormItem>
-
-      <FormItem>
-        <FormLabel>{t.options.ui_font}</FormLabel>
-        <FormValue>
-          <Input
-            type="text"
-            value={uiFont}
-            onChange={e => setUIFont(e.target.value)}
-            spellCheck={false}
-          />
-        </FormValue>
-      </FormItem>
-
-      <FormItem>
-        <FormLabel>{t.options.monospace}</FormLabel>
-        <FormValue>
-          <Input
-            type="text"
-            value={monoFont}
-            onChange={e => setMonoFont(e.target.value)}
-            spellCheck={false}
-          />
-        </FormValue>
-      </FormItem>
-    </Modal>
-  )
-}

packages/web/src/styles.ts

@@ -1,39 +0,0 @@
-import { css } from "@emotion/css"
-import styled from "@emotion/styled"
-
-export const ItemNoTitle = styled.span`
-  font-weight: normal;
-  font-style: italic;
-  [lang^="zh"],
-  [lang="ko"],
-  [lang="ja"] & {
-    font-style: normal;
-  }
-`
-
-export const scrollbar = css`
-  &&::-webkit-scrollbar {
-    width: 7px;
-  }
-  &&::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &&:hover,
-  &&:active {
-    &&::-webkit-scrollbar-thumb {
-      background: #8883;
-      transition: 0.1s;
-      border-radius: 6px;
-      @media (prefers-color-scheme: dark) {
-        background: #6663;
-      }
-    }
-    &&::-webkit-scrollbar-thumb:hover {
-      background: #ddd;
-      transition: 0.1s;
-      @media (prefers-color-scheme: dark) {
-        background: #555;
-      }
-    }
-  }
-`

packages/web/src/utils/ipc-adapter.ts

@@ -1,31 +0,0 @@
-import type { Adapter } from "opvault.js/src/adapter"
-import type { IPC } from "../electron/ipc-types"
-import { memoize } from "./memoize"
-
-declare const ipcRenderer: Electron.IpcRenderer
-
-export async function openDirectory() {
-  return ipc.showDirectoryPicker()
-}
-
-export const electronAdapter: Adapter = {
-  fs: {
-    exists: path => ipc.pathExists(path),
-    readFile: path => ipc.readFile(path),
-    readTextFile: path => ipc.readTextFile(path),
-    async *readDir(path) {
-      yield* await ipc.readDir(path)
-    },
-    writeTextFile: (path, data) => ipc.writeFile(path, data),
-  },
-  subtle: crypto.subtle,
-}
-
-const ipc = new Proxy<IPC>({} as any, {
-  get: memoize(
-    (_, channel: string) =>
-      (...args: any[]) =>
-        ipcRenderer.invoke(`service-${channel}`, ...args),
-    (_, name) => name
-  ),
-})

packages/web/src/utils/localStorage.ts

@@ -1,82 +0,0 @@
-import { useCallback, useEffect, useState } from "react"
-
-export enum Key {
-  LAST_VAULT_PATH = "app.state.last_vault_path",
-  RECENTLY_OPENED_VAULTS = "app.state.recently_opened_vaults",
-  PREFERRED_LOCALE = "app.config.locale",
-  ENABLE_AUTO_LOCK = "app.config.enable_auto_lock",
-  AUTO_LOCK_AFTER = "app.config.auto_lock_after",
-  UI_FONT = "app.config.font.ui",
-  MONOSPACE_FONT = "app.config.font.monospace",
-}
-
-interface StoredData {
-  [Key.LAST_VAULT_PATH]: string
-  [Key.RECENTLY_OPENED_VAULTS]: string[]
-  [Key.PREFERRED_LOCALE]: string
-  [Key.ENABLE_AUTO_LOCK]: boolean
-  [Key.AUTO_LOCK_AFTER]: number
-  [Key.UI_FONT]: string
-  [Key.MONOSPACE_FONT]: string
-}
-
-const events = new Map(Object.values(Key).map(key => [key, new Set()])) as {
-  get<K extends Key>(key: K): Set<(value: StoredData[Key]) => void>
-}
-
-export function useStorage<K extends Key>(key: K) {
-  const [state, setState] = useState(get(key)!)
-  useEffect(() => {
-    events.get(key).add(setState as any)
-    return () => {
-      events.get(key).delete(setState as any)
-    }
-  }, [key])
-  const setState2 = useCallback(
-    (value: ((value: StoredData[K]) => StoredData[K]) | StoredData[K]) => {
-      set(key, value)
-    },
-    [key]
-  )
-
-  return [state, setState2] as const
-}
-
-export function get<K extends Key>(key: K): StoredData[K] | undefined {
-  try {
-    const value = localStorage.getItem(key)
-    return value == null ? undefined : (JSON.parse(value!) as StoredData[K])
-  } catch {}
-}
-
-export function set<K extends Key>(
-  key: K,
-  value: ((value: StoredData[K]) => StoredData[K]) | StoredData[K]
-) {
-  try {
-    if (typeof value === "function") {
-      value = value(get(key)!)
-    }
-    localStorage.setItem(key, JSON.stringify(value))
-    events.get(key).forEach(fn => fn(value as StoredData[K]))
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-export function remove(key: Key) {
-  try {
-    localStorage.removeItem(key)
-  } catch {}
-}
-
-const defaults: typeof set = (key, value) => {
-  if (!(key in localStorage)) {
-    set(key, value)
-  }
-}
-defaults(Key.ENABLE_AUTO_LOCK, true)
-defaults(Key.AUTO_LOCK_AFTER, 180)
-defaults(Key.RECENTLY_OPENED_VAULTS, [])
-defaults(Key.UI_FONT, "")
-defaults(Key.MONOSPACE_FONT, "")

packages/web/src/utils/memoize.ts

@@ -1,18 +0,0 @@
-export function memoize<T extends (...args: any[]) => any, K>(
-  fn: T,
-  getKey: (...args: Parameters<T>) => K
-): T {
-  const map = new Map<K, ReturnType<T>>()
-  function memoized(this: any, ...args: Parameters<T>): ReturnType<T> {
-    const key = getKey(...args)
-    if (map.has(key)) {
-      return map.get(key)!
-    } else {
-      const value = fn.apply(this, args)
-      map.set(key, value)
-      return value
-    }
-  }
-  Object.defineProperty(memoized, "name", { value: fn.name })
-  return memoized as any
-}

packages/web/src/utils/useEvent.ts

@@ -1,51 +0,0 @@
-import { useEffect } from "react"
-
-type UseEventListenerOptions = boolean | AddEventListenerOptions
-
-export { useEventListener }
-
-type On<This, Ev> = {
-  on(listener: (this: This, ev: Ev) => void, deps?: any[]): void
-}
-
-interface UseEventListener {
-  <K extends keyof MediaQueryListEventMap>(
-    mediaQueryList: MediaQueryList,
-    type: K,
-    options?: UseEventListenerOptions
-  ): On<MediaQueryList, MediaQueryListEventMap[K]>
-  <K extends keyof WindowEventMap>(
-    window: Window,
-    type: K,
-    options?: UseEventListenerOptions
-  ): On<Window, WindowEventMap[K]>
-  <K extends keyof DocumentEventMap>(
-    document: Document,
-    type: K,
-    options?: UseEventListenerOptions
-  ): On<Document, DocumentEventMap[K]>
-  <K extends keyof HTMLElementEventMap>(
-    element: HTMLElement,
-    type: K,
-    options?: UseEventListenerOptions
-  ): On<HTMLElement, HTMLElementEventMap[K]>
-}
-
-const useEventListener: UseEventListener = function useEventListener(
-  element: EventTarget,
-  type: string,
-  options?: UseEventListenerOptions
-) {
-  return {
-    on(listener: (ev: any) => any, deps?: any[]) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useEffect(
-        () => {
-          element.addEventListener(type, listener, options)
-          return () => element.removeEventListener(type, listener, options)
-        },
-        deps ? [element, type, ...deps] : undefined
-      )
-    },
-  }
-}

packages/web/src/utils/useWrongPasswordFeedback.ts

@@ -1,48 +0,0 @@
-import styled from "@emotion/styled"
-import { keyframes } from "@emotion/css"
-import React, { useCallback, useRef, useState } from "react"
-
-const shake = keyframes`
-  8%, 41% {
-    transform: translateX(-10px);
-  }
-  25%, 58% {
-    transform: translateX(10px);
-  }
-  75% {
-    transform: translateX(-5px);
-  }
-  92% {
-    transform: translateX(5px);
-  }
-  0%, 100% {
-    transform: translateX(0);
-  }
-  
-`
-
-const animation = `${shake} .5s linear`
-
-export function useWrongPasswordFeedback() {
-  const timeout = useRef(0)
-  const [show, setShow] = useState(false)
-
-  const callback = useCallback((success: boolean) => {
-    setShow(!success)
-    if (timeout.current) {
-      window.clearTimeout(timeout.current)
-    }
-
-    timeout.current = window.setTimeout(() => {
-      setShow(false)
-    }, 500)
-  }, [])
-
-  return [
-    {
-      animation: show ? animation : undefined,
-      error: show,
-    },
-    callback,
-  ] as const
-}

packages/web/src/vite-env.d.ts

@@ -1,5 +1 @@
 /// <reference types="vite/client" />
-
-interface Array<T> {
-  filter(predicate: BooleanConstructor): Exclude<T, null | undefined | 0 | "" | false>[]
-}

packages/web/vite.config.ts

@@ -1,12 +1,11 @@
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 import yaml from "@rollup/plugin-yaml"
-import babel from "./scripts/vite-babel"
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "./",
-  plugins: [babel(), react(), yaml()],
+  plugins: [react(), yaml()],
   define: {
     global: "globalThis",
     "process.browser": "true",
@@ -14,9 +13,6 @@ export default defineConfig({
   },
   build: {
     outDir: "dist/web",
-    rollupOptions: {
-      external: ["fs", ""],
-    },
   },
   resolve: {
     alias: {

test/profile.test.ts

@@ -0,0 +1,104 @@
+import { resolve } from "path";
+import { describe, it, beforeEach } from "mocha";
+import { expect } from "chai";
+
+import type { Vault } from "../packages/opvault.js/index";
+import { OnePassword } from "../packages/opvault.js/index";
+
+describe("OnePassword", () => {
+  const freddy = resolve(__dirname, "../freddy-2013-12-04.opvault");
+
+  describe("getProfileNames", () => {
+    it("freddy", async () => {
+      const instance = new OnePassword({ path: freddy });
+      expect(await instance.getProfileNames()).to.deep.equal(["default"]);
+    });
+
+    it.skip("ignores faulty folders", async () => {});
+  });
+
+  describe("unlock", () => {
+    let vault: Vault;
+
+    beforeEach(async () => {
+      vault = await new OnePassword({ path: freddy }).getProfile("default");
+    });
+
+    it("accepts correct password", async () => {
+      await expect(vault.unlock("freddy")).to.be.fulfilled;
+      expect(vault.isLocked).to.be.false;
+    });
+
+    it("rejects wrong password", () => {
+      ["Freddy", "_freddy", ""].forEach(async (password) => {
+        await expect(vault.unlock(password)).to.be.rejectedWith(
+          "Invalid password"
+        );
+        expect(vault.isLocked).to.be.true;
+      });
+    });
+  });
+
+  describe("content", () => {
+    let vault: Vault;
+
+    beforeEach(async () => {
+      vault = await new OnePassword({ path: freddy }).getProfile("default");
+      await vault.unlock("freddy");
+    });
+
+    it("reads notes", async () => {
+      const item = (await vault.getItem({
+        title: "A note with some attachments",
+      }))!;
+      expect(item).to.exist;
+      expect(item.uuid).to.equal("F2DB5DA3FCA64372A751E0E85C67A538");
+      expect(item.attachments).to.have.lengthOf(2);
+      expect(item.details).to.deep.equal({
+        notesPlain: "This note has two attachments.",
+      });
+      expect(item.overview).to.deep.equal({
+        title: "A note with some attachments",
+        ps: 0,
+        ainfo: "This note has two attachments.",
+      });
+    });
+
+    it("decrypts items", async () => {
+      const decrypted = require("./decrypted.json");
+      expect(vault.isLocked).to.be.false;
+      for (const [uuid, item] of Object.entries<any>(decrypted)) {
+        const actual = await vault.getItem(uuid);
+        expect(actual).to.exist;
+        expect(actual!.overview).to.deep.equal(item.overview);
+        expect(actual!.details).to.deep.equal(item.itemDetails);
+        expect(actual!.attachments).to.have.lengthOf(item.attachments.length);
+        for (const [i, attachment] of actual!.attachments.entries()) {
+          const expected = item.attachments[i];
+          await attachment.unlock();
+          expect(attachment.metadata).to.deep.equal(expected.metadata);
+          expect(attachment.file.toString("base64")).to.deep.equal(
+            expected.file
+          );
+          expect(attachment.icon.toString("base64")).to.deep.equal(
+            expected.icon
+          );
+        }
+      }
+    });
+  });
+
+  describe("lock", () => {
+    it("locks", async () => {
+      const instance = new OnePassword({ path: freddy });
+      const vault = await instance.getProfile("default");
+      await vault.unlock("freddy");
+      expect(vault.isLocked).to.be.false;
+
+      vault.lock();
+      expect(vault.isLocked).to.be.true;
+      expect(vault.getItem("F2DB5DA3FCA64372A751E0E85C67A538")).to.eventually
+        .throw;
+    });
+  });
+});

test/weakMap.test.ts

@@ -0,0 +1,43 @@
+import { describe, it } from "mocha";
+import { expect } from "chai";
+
+import { WeakValueMap } from "../packages/opvault.js/weakMap";
+
+declare const gc: () => void;
+
+describe("WeakValueMap", () => {
+  interface Value {
+    value: number;
+  }
+
+  it("covers base use cases", () => {
+    const map = new WeakValueMap<string, Value>();
+    const object = { value: 1 };
+    map.set("key", object);
+    expect(map.get("key")!.value).to.equal(1);
+    expect(map.delete("key")).to.be.true;
+    expect(!map.delete("key")).to.be.true;
+  });
+
+  it("overrides previous value", () => {
+    const map = new WeakValueMap<string, Value>();
+    map.set("key", { value: 2 });
+    map.set("key", { value: 3 });
+    expect(map.get("key")!.value).to.equal(3);
+  });
+
+  it("deletes garbage collected values", (done) => {
+    const map = new WeakValueMap<string, Value>();
+    map.set("key", { value: 1 });
+    setTimeout(() => {
+      gc();
+      expect(map.has("key")).to.be.false;
+      map.set("key", { value: 2 });
+
+      setTimeout(() => {
+        gc();
+        done();
+      });
+    });
+  });
+});