fixup! Use async versions of bcrypt methods to avoid freezing browser tab (#204)

Author: sharevb

package.json

@@ -94,6 +94,7 @@
     "@zxcvbn-ts/language-en": "^3.0.2",
     "@zxing/library": "^0.21.3",
     "a11y-color-contrast": "^0.2.0",
+    "abort-signal-polyfill": "^1.0.0",
     "aircodes": "^1.3.16",
     "ajv": "^8.17.1",
     "ajv-errors": "^3.0.0",

pnpm-lock.yaml

@@ -5,6 +5,8 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { LoadingPlugin } from 'vue-loading-overlay';
 
+import { installAbortSignalPolyfill } from 'abort-signal-polyfill';
+
 import { registerSW } from 'virtual:pwa-register';
 import shadow from 'vue-shadow-dom';
 import { hideSplashScreen } from 'vite-plugin-splash-screen/runtime';
@@ -27,6 +29,8 @@ window.addEventListener('vite:preloadError', (event: Event) => {
   window.location.reload();
 });
 
+installAbortSignalPolyfill();
+
 // eslint-disable-next-line no-extend-native
 BigInt.prototype.toJSON = function () {
   return JSON.rawJSON ? JSON.rawJSON(this.toString()) : this.toString();

src/main.ts

@@ -1,7 +1,11 @@
 import { compare, hash } from 'bcryptjs';
 import { assert, describe, expect, test } from 'vitest';
+import { installAbortSignalPolyfill } from 'abort-signal-polyfill';
 import { type Update, bcryptWithProgressUpdates } from './bcrypt.models';
 
+// Install the polyfill
+installAbortSignalPolyfill();
+
 // simplified polyfill for https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fromAsync
 async function fromAsync<T>(iter: AsyncIterable<T>) {
   const out: T[] = [];
@@ -32,7 +36,7 @@ describe('bcrypt models', () => {
       const updates = await fromAsync(bcryptWithProgressUpdates(hash, ['abc', 5]));
       const result = checkProgressAndGetResult(updates);
 
-      expect(result.value).toMatch(/^\$2a\$05\$.{53}$/);
+      expect(result.value).toMatch(/^\$2[ab]\$05\$.{53}$/);
       expect(result.timeTakenMs).toBeGreaterThan(0);
     });
 

src/tools/bcrypt/bcrypt.models.test.ts

@@ -5,7 +5,7 @@ describe('htpasswd-generator', () => {
   it('generate correct entries', () => {
     const commonValues = { username: 'a', password: 'a' };
 
-    expect(generateHtpasswd({ ...commonValues, saltRounds: 10, algorithm: 'bcrypt' })).toContain('a:$2a$10$');
+    expect(generateHtpasswd({ ...commonValues, saltRounds: 10, algorithm: 'bcrypt' })).toMatch(/a:\$2[ab]\$10\$/);
     expect(generateHtpasswd({ ...commonValues, salt: 'k9azwE5H', algorithm: 'apr1' })).toBe('a:$apr1$k9azwE5H$zIyj4gqCWXiwB2Iof6jHf1');
     expect(generateHtpasswd({ ...commonValues, salt: 'xs4x6VWJ', algorithm: 'md5' })).toBe('a:$1$xs4x6VWJ$lOH0fBF6QyWdTOEeqcFnP/');
     expect(generateHtpasswd({ ...commonValues, salt: 'grEPbuEp', algorithm: 'sha256' })).toBe('a:$5$grEPbuEp$DUmEMT5C4TRgZCs9ZFKOJZ/IgR5FJIOUH0dasQFPw57');
@@ -16,7 +16,7 @@ describe('htpasswd-generator', () => {
   it('generate correct entries (unicode)', () => {
     const commonValues = { username: 'a', password: 'àùé' };
 
-    expect(generateHtpasswd({ ...commonValues, saltRounds: 10, algorithm: 'bcrypt' })).toContain('a:$2a$10$');
+    expect(generateHtpasswd({ ...commonValues, saltRounds: 10, algorithm: 'bcrypt' })).toMatch(/a:\$2[ab]\$10\$/);
     expect(() => generateHtpasswd({ ...commonValues, salt: 'mL016JCr', algorithm: 'apr1' })).toThrow();
     expect(() => generateHtpasswd({ ...commonValues, salt: 'YshCU1p1', algorithm: 'md5' })).toThrow();
     expect(generateHtpasswd({ ...commonValues, salt: 'Rojf48Kp', algorithm: 'sha256' })).toBe('a:$5$Rojf48Kp$/dY3S.yDqW2ZH/YKrF85q6JszyP.bhIF/Qu31Q49Oa5');