v1.1.1

package.json

@@ -67,8 +67,9 @@
     "@tailwindcss/typography": "^0.5.9",
     "@tauri-apps/cli": "^1.4.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
-    "@types/node": "^18.17.0",
-    "@types/react": "^18.2.16",
+    "@types/html-to-text": "^9.0.1",
+    "@types/node": "^18.17.1",
+    "@types/react": "^18.2.17",
     "@types/react-dom": "^18.2.7",
     "@types/youtube-player": "^5.5.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",

src-tauri/Cargo.toml

@@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = [ "fs-write-file", "window-create", "path-all", "fs-read-dir", "fs-read-file", "clipboard-read-text", "clipboard-write-text", "dialog-open", "http-all", "http-multipart", "notification-all", "os-all", "process-relaunch", "shell-open", "system-tray", "updater", "window-close", "window-start-dragging"] }
+tauri = { version = "1.2", features = [ "fs-remove-file", "fs-write-file", "window-create", "path-all", "fs-read-dir", "fs-read-file", "clipboard-read-text", "clipboard-write-text", "dialog-open", "http-all", "http-multipart", "notification-all", "os-all", "process-relaunch", "shell-open", "system-tray", "updater", "window-close", "window-start-dragging"] }
 tauri-plugin-single-instance = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 tauri-plugin-stronghold = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }

src-tauri/src/main.rs

@@ -127,8 +127,8 @@ fn main() {
       tauri_plugin_stronghold::Builder::new(|password| {
         let config = argon2::Config {
           lanes: 2,
-          mem_cost: 10_000,
-          time_cost: 10,
+          mem_cost: 50_000,
+          time_cost: 30,
           thread_mode: argon2::ThreadMode::from_threads(2),
           variant: argon2::Variant::Argon2id,
           ..Default::default()

src-tauri/tauri.conf.json

@@ -29,6 +29,7 @@
 				"readFile": true,
 				"readDir": true,
 				"writeFile": true,
+				"removeFile": true,
 				"scope": [
 					"$APPDATA/*",
 					"$DATA/*",

src/app.tsx

@@ -12,6 +12,7 @@ import { ImportStep2Screen } from '@app/auth/import/step-2';
 import { ImportStep3Screen } from '@app/auth/import/step-3';
 import { MigrateScreen } from '@app/auth/migrate';
 import { OnboardingScreen } from '@app/auth/onboarding';
+import { ResetScreen } from '@app/auth/reset';
 import { UnlockScreen } from '@app/auth/unlock';
 import { WelcomeScreen } from '@app/auth/welcome';
 import { ChannelScreen } from '@app/channel';
@@ -71,6 +72,7 @@ const router = createBrowserRouter([
       },
       { path: 'unlock', element: <UnlockScreen /> },
       { path: 'migrate', element: <MigrateScreen /> },
+      { path: 'reset', element: <ResetScreen /> },
     ],
   },
   {

src/app/auth/create/step-1.tsx

@@ -137,9 +137,13 @@ export function CreateStep1Screen() {
               'I have saved my key, continue →'
             )}
           </Button>
-          <Button preset="large-alt" onClick={() => download()}>
-            {downloaded ? 'Saved in Download folder' : 'Download'}
-          </Button>
+          {downloaded ? (
+            <span className="text-sm text-zinc-400">Saved in download folder</span>
+          ) : (
+            <Button preset="large-alt" onClick={() => download()}>
+              Download
+            </Button>
+          )}
         </div>
       </div>
     </div>

src/app/auth/reset.tsx

@@ -0,0 +1,176 @@
+import { getPublicKey, nip19 } from 'nostr-tools';
+import { useState } from 'react';
+import { Resolver, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+
+import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+
+import { useStronghold } from '@stores/stronghold';
+
+import { useAccount } from '@utils/hooks/useAccount';
+import { useSecureStorage } from '@utils/hooks/useSecureStorage';
+
+type FormValues = {
+  password: string;
+  privkey: string;
+};
+
+const resolver: Resolver<FormValues> = async (values) => {
+  return {
+    values: values.password ? values : {},
+    errors: !values.password
+      ? {
+          password: {
+            type: 'required',
+            message: 'This is required.',
+          },
+        }
+      : {},
+  };
+};
+
+export function ResetScreen() {
+  const navigate = useNavigate();
+  const setPrivkey = useStronghold((state) => state.setPrivkey);
+
+  const [passwordInput, setPasswordInput] = useState('password');
+  const [loading, setLoading] = useState(false);
+
+  const { account } = useAccount();
+  const { save, reset } = useSecureStorage();
+
+  // toggle private key
+  const showPassword = () => {
+    if (passwordInput === 'password') {
+      setPasswordInput('text');
+    } else {
+      setPasswordInput('password');
+    }
+  };
+
+  const {
+    register,
+    setError,
+    handleSubmit,
+    formState: { errors, isDirty, isValid },
+  } = useForm<FormValues>({ resolver });
+
+  const onSubmit = async (data: { [x: string]: string }) => {
+    setLoading(true);
+    if (data.password.length > 3) {
+      try {
+        let privkey = data.privkey;
+        if (privkey.startsWith('nsec')) {
+          privkey = nip19.decode(privkey).data as string;
+        }
+
+        const tmpPubkey = getPublicKey(privkey);
+
+        if (tmpPubkey !== account.pubkey) {
+          setLoading(false);
+          setError('password', {
+            type: 'custom',
+            message:
+              "Private key don't match current account store in database, please check again",
+          });
+        } else {
+          // remove old stronghold
+          await reset();
+          // save privkey to secure storage
+          await save(account.pubkey, account.privkey, data.password);
+          // add privkey to state
+          setPrivkey(account.privkey);
+          // redirect to home
+          navigate('/auth/unlock', { replace: true });
+        }
+      } catch {
+        setLoading(false);
+        setError('password', {
+          type: 'custom',
+          message: 'Invalid private key',
+        });
+      }
+    } else {
+      setLoading(false);
+      setError('password', {
+        type: 'custom',
+        message: 'Password is required and must be greater than 3',
+      });
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mx-auto w-full max-w-md">
+        <div className="mb-8 text-center">
+          <h1 className="text-xl font-semibold text-zinc-100">Reset unlock password</h1>
+        </div>
+        <div className="flex flex-col gap-4">
+          <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-3">
+            <div className="flex flex-col gap-1">
+              <label htmlFor="privkey" className="font-medium text-zinc-200">
+                Private key
+              </label>
+              <div className="relative">
+                <input
+                  {...register('privkey', { required: true })}
+                  type="text"
+                  placeholder="nsec..."
+                  className="relative w-full rounded-lg bg-zinc-800 px-3.5 py-3 text-zinc-100 !outline-none placeholder:text-zinc-400"
+                />
+              </div>
+            </div>
+            <div className="flex flex-col gap-1">
+              <label htmlFor="password" className="font-medium text-zinc-200">
+                Set a new password to protect your key
+              </label>
+              <div className="relative">
+                <input
+                  {...register('password', { required: true })}
+                  type={passwordInput}
+                  placeholder="min. 4 characters"
+                  className="relative w-full rounded-lg bg-zinc-800 py-3 pl-3.5 pr-11 text-zinc-100 !outline-none placeholder:text-zinc-400"
+                />
+                <button
+                  type="button"
+                  onClick={() => showPassword()}
+                  className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+                >
+                  {passwordInput === 'password' ? (
+                    <EyeOffIcon
+                      width={20}
+                      height={20}
+                      className="text-zinc-500 group-hover:text-zinc-100"
+                    />
+                  ) : (
+                    <EyeOnIcon
+                      width={20}
+                      height={20}
+                      className="text-zinc-500 group-hover:text-zinc-100"
+                    />
+                  )}
+                </button>
+              </div>
+              <span className="text-sm text-red-400">
+                {errors.password && <p>{errors.password.message}</p>}
+              </span>
+            </div>
+            <div className="flex items-center justify-center">
+              <button
+                type="submit"
+                disabled={!isDirty || !isValid}
+                className="mt-3 inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-zinc-100 hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+              >
+                {loading ? (
+                  <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+                ) : (
+                  'Continue →'
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/auth/unlock.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
 
@@ -119,7 +119,7 @@ export function UnlockScreen() {
                 {errors.password && <p>{errors.password.message}</p>}
               </span>
             </div>
-            <div className="flex items-center justify-center">
+            <div className="flex flex-col items-center justify-center">
               <button
                 type="submit"
                 disabled={!isDirty || !isValid}
@@ -131,6 +131,12 @@ export function UnlockScreen() {
                   'Continue →'
                 )}
               </button>
+              <Link
+                to="/auth/reset"
+                className="inline-flex h-12 items-center justify-center text-center text-sm text-zinc-400"
+              >
+                Reset password
+              </Link>
             </div>
           </form>
         </div>

src/app/chats/components/unknowns.tsx

@@ -91,7 +91,7 @@ export function UnknownsModal({ data }: { data: Chats[] }) {
                 <div className="flex h-[500px] flex-col overflow-y-auto overflow-x-hidden pb-5">
                   {data.map((user) => (
                     <div
-                      key={user.event_id || user.id}
+                      key={user.sender_pubkey}
                       className="group flex items-center justify-between px-4 py-3 hover:bg-zinc-800"
                     >
                       <User pubkey={user.sender_pubkey} />

src/shared/composer/composer.tsx

@@ -21,9 +21,13 @@ import { useImageUploader } from '@utils/hooks/useUploader';
 import { sendNativeNotification } from '@utils/notification';
 
 export function Composer() {
+  const { publish } = usePublish();
+
   const [status, setStatus] = useState<null | 'loading' | 'done'>(null);
   const [reply, clearReply] = useComposer((state) => [state.reply, state.clearReply]);
 
+  const upload = useImageUploader();
+
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
@@ -56,9 +60,6 @@ export function Composer() {
     },
   });
 
-  const upload = useImageUploader();
-  const { publish } = usePublish();
-
   const uploadImage = async (file?: string) => {
     const image = await upload(file);
     if (image.url) {

src/shared/composer/mention/suggestion.tsx

@@ -5,10 +5,9 @@ import { getAllMetadata } from '@libs/storage';
 
 import { MentionList } from '@shared/composer';
 
-const users = await getAllMetadata();
-
 export const Suggestion = {
-  items: ({ query }) => {
+  items: async ({ query }) => {
+    const users = await getAllMetadata();
     return users
       .filter((item) => item.ident.toLowerCase().startsWith(query.toLowerCase()))
       .slice(0, 5);

src/utils/hooks/useSecureStorage.tsx

@@ -1,4 +1,5 @@
-import { appConfigDir } from '@tauri-apps/api/path';
+import { removeFile } from '@tauri-apps/api/fs';
+import { BaseDirectory, appConfigDir } from '@tauri-apps/api/path';
 import { Stronghold } from 'tauri-plugin-stronghold-api';
 
 const dir = await appConfigDir();
@@ -29,5 +30,9 @@ export function useSecureStorage() {
     return decoded;
   };
 
-  return { save, load };
+  const reset = async () => {
+    return await removeFile('lume.stronghold', { dir: BaseDirectory.AppConfig });
+  };
+
+  return { save, load, reset };
 }