web: use pgp keys for inbox

Signed-off-by: 01zulfi <[email protected]>

Author: 01zulfi

apps/web/package-lock.json

@@ -113,6 +113,7 @@
     "happy-dom": "16.0.1",
     "ip": "^2.0.1",
     "lorem-ipsum": "^2.0.4",
+    "openpgp": "^6.2.2",
     "otplib": "^12.0.1",
     "rollup-plugin-visualizer": "^5.13.1",
     "vite": "5.4.11",

apps/web/package.json

@@ -0,0 +1,210 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { useState } from "react";
+import { Button, Flex, Text } from "@theme-ui/components";
+import Dialog from "../components/dialog";
+import { BaseDialogProps, DialogManager } from "../common/dialog-manager";
+import { db } from "../common/db";
+import Field from "../components/field";
+import { showToast } from "../utils/toast";
+import { SerializedKeyPair } from "@notesnook/crypto";
+import { ConfirmDialog } from "./confirm";
+
+type InboxPGPKeysDialogProps = BaseDialogProps<boolean> & {
+  keys?: SerializedKeyPair | null;
+};
+
+export const InboxPGPKeysDialog = DialogManager.register(
+  function InboxPGPKeysDialog(props: InboxPGPKeysDialogProps) {
+    const { keys: initialKeys, onClose } = props;
+    const [mode, setMode] = useState<"choose" | "edit">(
+      initialKeys ? "edit" : "choose"
+    );
+    const [publicKey, setPublicKey] = useState(initialKeys?.publicKey || "");
+    const [privateKey, setPrivateKey] = useState(initialKeys?.privateKey || "");
+    const [isLoading, setIsLoading] = useState(false);
+
+    const hasChanges =
+      publicKey !== (initialKeys?.publicKey || "") ||
+      privateKey !== (initialKeys?.privateKey || "");
+
+    async function handleAutoGenerate() {
+      try {
+        setIsLoading(true);
+        await db.user.getInboxKeys();
+        showToast("success", "Inbox keys generated");
+        onClose(true);
+      } catch (error) {
+        showToast("error", "Failed to generate inbox keys");
+        console.error(error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    async function handleSave() {
+      const trimmedPublicKey = publicKey.trim();
+      const trimmedPrivateKey = privateKey.trim();
+      if (!trimmedPublicKey || !trimmedPrivateKey) {
+        showToast("error", "Both public and private keys are required");
+        return;
+      }
+
+      try {
+        setIsLoading(true);
+        const isValid = await db.storage().validatePGPKeyPair({
+          publicKey: trimmedPublicKey,
+          privateKey: trimmedPrivateKey
+        });
+        if (!isValid) {
+          showToast(
+            "error",
+            "Invalid PGP key pair. Please check your keys and try again."
+          );
+          return;
+        }
+
+        if (initialKeys) {
+          const ok = await ConfirmDialog.show({
+            title: "Change Inbox PGP Keys",
+            message:
+              "Changing Inbox PGP keys will delete all your unsynced inbox items. Are you sure?",
+            positiveButtonText: "Yes",
+            negativeButtonText: "No"
+          });
+          if (!ok) return;
+        }
+
+        await db.user.saveInboxKeys({
+          publicKey: trimmedPublicKey,
+          privateKey: trimmedPrivateKey
+        });
+        showToast("success", "Inbox keys saved");
+        onClose(true);
+      } catch (error) {
+        showToast("error", "Failed to save inbox keys");
+        console.error(error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    if (mode === "choose") {
+      return (
+        <Dialog
+          isOpen={true}
+          title="Setup Inbox PGP Keys"
+          width={500}
+          negativeButton={{
+            text: "Cancel",
+            onClick: () => onClose(false)
+          }}
+        >
+          <Flex sx={{ flexDirection: "column", gap: 3 }}>
+            <Text sx={{ fontSize: "body", color: "paragraph" }}>
+              Choose how you want to set up your Inbox PGP keys:
+            </Text>
+            <Flex sx={{ flexDirection: "column", gap: 2 }}>
+              <Button
+                variant="secondary"
+                onClick={handleAutoGenerate}
+                disabled={isLoading}
+                sx={{ width: "100%" }}
+              >
+                {isLoading ? "Generating..." : "Auto-generate keys"}
+              </Button>
+              <Text
+                sx={{
+                  fontSize: "body",
+                  color: "paragraph",
+                  textAlign: "center"
+                }}
+              >
+                Or
+              </Text>
+              <Button
+                variant="secondary"
+                onClick={() => setMode("edit")}
+                disabled={isLoading}
+                sx={{ width: "100%" }}
+              >
+                Provide your own keys
+              </Button>
+            </Flex>
+          </Flex>
+        </Dialog>
+      );
+    }
+
+    return (
+      <Dialog
+        isOpen={true}
+        title="Inbox PGP Keys"
+        width={600}
+        positiveButton={{
+          text: isLoading ? "Saving..." : "Save",
+          onClick: handleSave,
+          disabled: isLoading || !hasChanges
+        }}
+        negativeButton={{
+          text: "Cancel",
+          onClick: () => onClose(false)
+        }}
+      >
+        <Flex sx={{ flexDirection: "column", gap: 3 }}>
+          <Field
+            label="Public Key"
+            id="publicKey"
+            name="publicKey"
+            as="textarea"
+            required
+            value={publicKey}
+            onChange={(e) => setPublicKey(e.target.value)}
+            sx={{
+              fontFamily: "monospace",
+              fontSize: "body",
+              minHeight: 150,
+              resize: "vertical"
+            }}
+            placeholder="Enter your PGP public key..."
+            disabled={isLoading}
+          />
+          <Field
+            label="Private Key"
+            id="privateKey"
+            name="privateKey"
+            as="textarea"
+            required
+            value={privateKey}
+            onChange={(e) => setPrivateKey(e.target.value)}
+            sx={{
+              fontFamily: "monospace",
+              fontSize: "body",
+              minHeight: 150,
+              resize: "vertical"
+            }}
+            placeholder="Enter your PGP private key..."
+            disabled={isLoading}
+          />
+        </Flex>
+      </Dialog>
+    );
+  }
+);

apps/web/src/dialogs/inbox-pgp-keys-dialog.tsx

@@ -20,6 +20,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { SettingsGroup } from "./types";
 import { useStore as useSettingStore } from "../../stores/setting-store";
 import { InboxApiKeys } from "./components/inbox-api-keys";
+import { InboxPGPKeysDialog } from "../inbox-pgp-keys-dialog";
+import { db } from "../../common/db";
+import { showPasswordDialog } from "../password-dialog";
+import { strings } from "@notesnook/intl";
 
 export const InboxSettings: SettingsGroup[] = [
   {
@@ -42,6 +46,41 @@ export const InboxSettings: SettingsGroup[] = [
           }
         ]
       },
+      {
+        key: "show-inbox-pgp-keys",
+        title: "Inbox PGP Keys",
+        description: "View/edit your Inbox PGP keys",
+        keywords: ["inbox", "pgp", "keys"],
+        onStateChange: (listener) =>
+          useSettingStore.subscribe((s) => s.isInboxEnabled, listener),
+        isHidden: () => !useSettingStore.getState().isInboxEnabled,
+        components: [
+          {
+            type: "button",
+            title: "Show",
+            variant: "secondary",
+            action: async () => {
+              const ok = await showPasswordDialog({
+                title: "Authenticate to view/edit Inbox PGP keys",
+                inputs: {
+                  password: {
+                    label: strings.accountPassword(),
+                    autoComplete: "current-password"
+                  }
+                },
+                validate: ({ password }) => {
+                  return db.user.verifyPassword(password);
+                }
+              });
+              if (!ok) return;
+
+              InboxPGPKeysDialog.show({
+                keys: await db.user.getInboxKeys()
+              });
+            }
+          }
+        ]
+      },
       {
         key: "inbox-api-keys",
         title: "",

apps/web/src/dialogs/settings/inbox-settings.ts

@@ -26,14 +26,14 @@ import {
 } from "./key-value";
 import { NNCrypto } from "./nncrypto";
 import type {
-  AsymmetricCipher,
   Cipher,
   SerializedKey,
   SerializedKeyPair
 } from "@notesnook/crypto";
 import { isFeatureSupported } from "../utils/feature-check";
 import { IKeyStore } from "./key-store";
 import { User } from "@notesnook/core";
+import * as openpgp from "openpgp";
 
 type EncryptedKey = { iv: Uint8Array; cipher: BufferSource };
 export type DatabasePersistence = "memory" | "db";
@@ -133,8 +133,44 @@ export class NNStorage implements IStorage {
     return await NNCrypto.exportKey(password, salt);
   }
 
-  async generateCryptoKeyPair() {
-    return await NNCrypto.exportKeyPair();
+  async generatePGPKeyPair(): Promise<SerializedKeyPair> {
+    const keys = await openpgp.generateKey({
+      userIDs: [{ name: "NN", email: "[email protected]" }]
+    });
+    return { publicKey: keys.publicKey, privateKey: keys.privateKey };
+  }
+
+  async validatePGPKeyPair(keys: SerializedKeyPair): Promise<boolean> {
+    try {
+      const dummyData = JSON.stringify({
+        favorite: true,
+        title: "Hello world"
+      });
+
+      const publicKey = await openpgp.readKey({ armoredKey: keys.publicKey });
+      const encrypted = await openpgp.encrypt({
+        message: await openpgp.createMessage({
+          text: dummyData
+        }),
+        encryptionKeys: publicKey
+      });
+
+      const message = await openpgp.readMessage({
+        armoredMessage: encrypted
+      });
+      const privateKey = await openpgp.readPrivateKey({
+        armoredKey: keys.privateKey
+      });
+      const decrypted = await openpgp.decrypt({
+        message,
+        decryptionKeys: privateKey
+      });
+
+      return decrypted.data === dummyData;
+    } catch (e) {
+      console.error("PGP key pair validation error:", e);
+      return false;
+    }
   }
 
   async hash(password: string, email: string): Promise<string> {
@@ -165,12 +201,21 @@ export class NNStorage implements IStorage {
     return NNCrypto.decryptMulti(key, items, "text");
   }
 
-  decryptAsymmetric(
-    keyPair: SerializedKeyPair,
-    cipherData: AsymmetricCipher<"base64">
+  async decryptPGPMessage(
+    privateKeyArmored: string,
+    encryptedMessage: string
   ): Promise<string> {
-    cipherData.format = "base64";
-    return NNCrypto.decryptAsymmetric(keyPair, cipherData, "base64");
+    const message = await openpgp.readMessage({
+      armoredMessage: encryptedMessage
+    });
+    const privateKey = await openpgp.readPrivateKey({
+      armoredKey: privateKeyArmored
+    });
+    const decrypted = await openpgp.decrypt({
+      message,
+      decryptionKeys: privateKey
+    });
+    return decrypted.data;
   }
 
   /**