Add pass verification on Backup

src/backend/electron.cjs

@@ -408,6 +408,15 @@ const verifyPassword = async (password) => {
   }
 };
 
+const checkPass = async (password) => {
+  const passHash = await crypto.cn_fast_hash(toHex(password));
+  if (passHash === userPassword) {
+    return true
+  } else {
+    return false
+  }
+}
+
 async function saveWalletInfo(walletName) {
   let walletPath = userDataDir + "/" + walletName + ".wallet"
   let knownWallets = await getMyWallets()
@@ -523,6 +532,11 @@ ipcMain.handle("get-seed", async (e) => {
   }
 });
 
+ipcMain.handle('verify-pass', async (e, password) => {
+  return await checkPass(password)
+})
+
+
 ipcMain.handle('get-privkeys', async () => {
   return walletBackend.getPrimaryAddressPrivateKeys()
 })

src/backend/preload.cjs

@@ -25,6 +25,9 @@ contextBridge.exposeInMainWorld("api", {
     return ipcRenderer.invoke("check-touchId");
   },
 
+  verifyPass: async (password) => {
+    return await ipcRenderer.invoke('verify-pass', password)
+},
 
   getNode: async () => {
     return await ipcRenderer.invoke("get-node");

src/lib/components/Backdrop.svelte

@@ -0,0 +1,32 @@
+<script>
+  //To handle true and false, or in this case show and hide.
+  import { fade } from 'svelte/transition';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  const close = () => {
+    dispatch('close');
+  };
+</script>
+
+<div on:click|self={close} in:fade={{ duration: 100 }} out:fade={{ duration: 100 }} class="backdrop">
+  <slot></slot>
+</div>
+
+<style lang="scss">
+  .backdrop {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: var(--backdrop-color);
+    backdrop-filter: blur(8px);
+    z-index: 103;
+    border-radius: 15px;
+  }
+</style>

src/lib/components/Verify.svelte

@@ -0,0 +1,76 @@
+<script>
+  import { fly } from 'svelte/transition';
+  import Backdrop from '$lib/components/Backdrop.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { wallet } from '$lib/stores/wallet';
+  import Button from './buttons/Button.svelte';
+
+  const dispatch = createEventDispatcher();
+  let password = '';
+  let enableButton = false;
+
+  $: if (password.length > 1) enableButton = true;
+  else enableButton = false;
+
+  const verify = async () => {
+    const result = await window.api.verifyPass(password);
+    if (!result) {
+      window.api.errorMessage('Wrong password');
+      return;
+    }
+    goto('/auth/backup-wallet');
+    close();
+  };
+
+  const keyDown = (e) => {
+    if (e.key === 'Enter' && password.length > 0) {
+      verify();
+    } else if (e.key === 'Escape') {
+      close();
+    }
+  };
+
+  const close = () => {
+    $wallet.verify = false;
+  };
+</script>
+
+<svelte:window on:keydown={keyDown} />
+<Backdrop on:close={close}>
+  <div in:fly={{ y: 20 }} out:fly={{ y: -50 }} class="field">
+    <input placeholder="Enter password" spellcheck="false" type="password" autocomplete="false" bind:value={password} />
+    <Button on:click={verify} enabled={enableButton} disabled={!enableButton} text="Confirm" />
+  </div>
+</Backdrop>
+
+<style lang="scss">
+  .field {
+    width: 50%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    padding: 0 0 0 0.5rem;
+    background-color: var(--card-background);
+    border: 1px solid var(--card-border);
+    border-radius: 0.4rem;
+    padding-right: 10px;
+  }
+
+  input {
+    margin: 0 auto;
+    width: 100%;
+    height: 50px;
+    transition: 200ms ease-in-out;
+    color: var(--text-color);
+    background-color: transparent;
+    border: none;
+    font-size: 1.1rem;
+
+    &:focus {
+      outline: none;
+      border: none;
+    }
+  }
+</style>

src/lib/components/layout/Navbar.svelte

@@ -10,6 +10,7 @@
   import Logo from '$lib/components/icons/Logo.svelte';
   import Contacts from '$lib/components/icons/Navbar/Contacts.svelte';
   import Tooltip from '../Tooltip.svelte';
+  import { wallet } from '$lib/stores/wallet';
 </script>
 
 <nav in:fade>
@@ -55,7 +56,7 @@
       </button>
     </Tooltip>
     <Tooltip title="Wallet backup" stylized={true}>
-      <button on:click={() => goto('/auth/backup-wallet')}>
+      <button on:click={() => ($wallet.verify = true)}>
         <Logo size="22" />
       </button>
     </Tooltip>

src/lib/stores/wallet.js

@@ -8,7 +8,8 @@ export const wallet = writable({
     preparedTransaction: undefined,
     file: false,
     path: false,
-    started: false
+    started: false,
+    verify: false
 })
 
 export const transactions = writable({