Fix password change flow

src/lib/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from './navigation';
 export * from './other';
 export * from './encryption';
+export * from './storage';

src/lib/helpers/storage.ts

@@ -0,0 +1,8 @@
+import { LOCAL, PASSWORD } from '$const';
+import { storageService } from '$services';
+import { HashSaltSchema } from '$types';
+
+export const getPassword = async () => {
+	const data = await storageService.getWithoutCallback({ key: PASSWORD, area: LOCAL });
+	return HashSaltSchema.safeParse(data);
+};

src/lib/queries/password.ts

@@ -7,16 +7,11 @@ import {
 	SESSION_DATA_KEY,
 	SETUP_PASSWORD
 } from '$const';
-import { hashPassword, verifyPassword } from '$helpers';
+import { getPassword, hashPassword, verifyPassword } from '$helpers';
 import { lockKey, storageService, unlockKey } from '$services';
-import { EncryptedDeviceKeySchema, HashSaltSchema } from '$types';
+import { EncryptedDeviceKeySchema } from '$types';
 import { createMutation, createQuery, type QueryClient } from '@tanstack/svelte-query';
 
-const getPassword = async () => {
-	const data = await storageService.getWithoutCallback({ key: PASSWORD, area: LOCAL });
-	return HashSaltSchema.safeParse(data);
-};
-
 export function createSetupPasswordQuery() {
 	return createQuery({
 		queryKey: [SETUP_PASSWORD],
@@ -87,11 +82,7 @@ export function createChangePasswordWithDeviceKeyMutation(queryClient: QueryClie
 				throw new Error('Invalid device key');
 			}
 
-			console.log(parsedDeviceKey.data);
-			console.log(parsedResult.data.hash);
-
 			const decryptedKey = await unlockKey(parsedDeviceKey.data, parsedResult.data.hash);
-			console.log('test2');
 			const newHashSalt = await hashPassword(mutationData.newPassword);
 
 			storageService.set({

src/lib/queries/sessionAndKey.ts

@@ -58,8 +58,6 @@ export function createStoreDeviceKey(queryClient: QueryClient) {
 				value: deviceKey,
 				area: LOCAL
 			});
-
-			console.log(deviceKey);
 		},
 
 		onSuccess: () => {

src/lib/services/generate-keys.ts

@@ -6,7 +6,7 @@ const uint8ArrayToBase64 = (bytes: Uint8Array) => btoa(String.fromCharCode(...by
 
 const base64ToArrayBuffer = (base64: string) => {
 	const binaryString = atob(base64);
-	return new Uint8Array([...binaryString].map((char) => char.charCodeAt(0))).buffer;
+	return new Uint8Array([...binaryString].map((char) => char.charCodeAt(0)));
 };
 
 const lock = (root: never, password: string) =>

src/lib/stores/index.ts

@@ -1,3 +1,2 @@
 export * from './passphrase';
-export * from './password';
 export * from './keys-store';

src/lib/stores/keys-store.ts

@@ -1,6 +1,7 @@
 import type { KeysState } from '$types';
 import { writable } from 'svelte/store';
 import { generateKeys } from '../services/generate-keys';
+import { getPassword } from '$helpers';
 
 const initKeysStore = () => {
 	const initialState: KeysState = {
@@ -19,10 +20,14 @@ const initKeysStore = () => {
 		isInitialState: () =>
 			subscribe((state) => JSON.stringify(state) === JSON.stringify(initialState)),
 		subscribe,
-		generate: async (passphrase: string, extensionPassword: string) => {
+		generate: async (passphrase: string) => {
 			update((state) => ({ ...state, loading: true }));
 			try {
-				const keys = await generateKeys(passphrase, extensionPassword);
+				const hashSalt = await getPassword();
+				if (!hashSalt.success) {
+					throw new Error('Password missing');
+				}
+				const keys = await generateKeys(passphrase, hashSalt.data.hash);
 				set({ keys, loading: false });
 			} catch (error) {
 				set(initialState);

src/routes/setup-keys/generate-keys/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { keysStore, passphraseStore, passwordStore } from '$stores';
+	import { keysStore, passphraseStore } from '$stores';
 	import { goto } from '$app/navigation';
 	import { Button, Title, AppParagraph } from '$components';
 	import { sessionStorageQueries } from '$queries';
@@ -14,11 +14,11 @@
 	});
 
 	async function generate() {
-		await keysStore.generate($passphraseStore, $passwordStore);
-		console.log($keysStore.keys);
+		await keysStore.generate($passphraseStore);
+
 		if ($keysStore.keys) {
 			passphraseStore.clean();
-			passwordStore.clean();
+
 			if ($keysStore.keys.encodedDeviceWithExtensionPassword) {
 				$storeDeviceKey.mutate($keysStore.keys.encodedDeviceWithExtensionPassword, {
 					onSuccess: () => {

src/routes/setup-pass/app-password/+page.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { AppParagraph, Button, Title } from '$components';
-	import { passwordStore } from '$stores';
 	import { sessionStorageQueries } from '$queries';
 	import { dismissWindow } from '$helpers';
 	import InputPassword from '$components/InputPassword.svelte';
 
 	const { createPassword } = sessionStorageQueries();
 
+	let password = '';
 	let confirmPassword = '';
 
-	$: charCount = $passwordStore.length;
-	$: isDisabled = charCount < 8 || confirmPassword !== $passwordStore;
+	$: charCount = password.length;
+	$: isDisabled = charCount < 8 || confirmPassword !== password;
 </script>
 
 <Title>Set Key Manager Password</Title>
@@ -21,7 +21,7 @@
 />
 <div class="w-full p-6">
 	<InputPassword
-		bind:value={$passwordStore}
+		bind:value={password}
 		label="New Password (8 Characters min)"
 		extraProps="mb-6"
 		error={charCount < 8 ? 'Please enter a minimum of 8 Characters' : ''}
@@ -30,7 +30,7 @@
 		bind:value={confirmPassword}
 		label="Confirm New Password"
 		extraProps="mb-4"
-		error={confirmPassword !== $passwordStore ? "Password doesn't Match" : ''}
+		error={confirmPassword !== password ? "Password doesn't Match" : ''}
 	/>
 </div>
 
@@ -40,7 +40,7 @@
 		disabled={isDisabled}
 		label="Set password"
 		onClick={() =>
-			$createPassword.mutate($passwordStore, {
+			$createPassword.mutate(password, {
 				onSuccess: () => {
 					goto('enter-passphrase');
 				}

static/manifest.json

@@ -1,7 +1,7 @@
 {
 	"name": "Holo key manager",
 	"description": "A browser extension to manage holo keys",
-	"version": "0.0.25",
+	"version": "0.0.26",
 	"manifest_version": 3,
 	"browser_specific_settings": {
 		"gecko": {