@block-auth.io/angular 0.2.7 → 0.2.9

package/.turbo/turbo-typecheck.log

@@ -1,9 +1,9 @@
 
-> @block-auth.io/angular@0.2.7 pretypecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> @block-auth.io/angular@0.2.8 pretypecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
 > pnpm build:css
 
 
-> @block-auth.io/angular@0.2.7 build:css /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> @block-auth.io/angular@0.2.8 build:css /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
 > tailwindcss -i ../ui-styles/src/input.css -c ./tailwind.config.cjs -o ./src/styles.generated.css --minify && node scripts/css-to-ts.mjs
 
 Browserslist: caniuse-lite is outdated. Please run:
@@ -12,8 +12,8 @@ Browserslist: caniuse-lite is outdated. Please run:
 
 Rebuilding...
 
-Done in 904ms.
+Done in 1810ms.
 
-> @block-auth.io/angular@0.2.7 typecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> @block-auth.io/angular@0.2.8 typecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
 > tsc -p tsconfig.lib.json --noEmit
 

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @block-auth.io/angular
 
+## 0.2.9
+
+### Patch Changes
+
+- a6f8290: Con el OTP caducado, el login ya no se queda mudo. Nuevo estado
+  `$ui.isOtpRequired`: se activa cuando `user:txns:create` llega con
+  `otpExpired`, o cuando llega `signin:expired` a mitad de un login (antes
+  llamaba a `_onError` y cerraba el modal). El SDK abre la extensión sobre la
+  transacción pendiente (`openExtensionOnTxn`, evento `ext:txn`) y sigue
+  esperando hasta que la extensión la aprueba. `TxnsOverview` (react, vue y
+  angular) cambia ACEPTAR por un aviso con el botón "Abrir extensión"; sin
+  extensión, el aviso manda a la app.
+- Updated dependencies [a6f8290]
+  - @block-auth.io/core@0.9.0
+
+## 0.2.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @block-auth.io/core@0.8.1
+
 ## 0.2.6
 
 ### Patch Changes

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@block-auth.io/angular",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "dependencies": {
     "nanostores": "^0.10.0",
     "tslib": "^2.6.0",
-    "@block-auth.io/core": "0.8.0",
+    "@block-auth.io/core": "0.9.0",
     "@block-auth.io/ui-styles": "0.4.0"
   },
   "peerDependencies": {

package/src/lib/components/txns/txns-overview.component.test.ts

@@ -1,6 +1,7 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/angular';
 import { map } from 'nanostores';
+import { setExtensionInstalled, resetExtension } from '@block-auth.io/core';
 import { TxnsOverviewComponent } from './txns-overview.component';
 import { provideBlockAuthClientForTest } from '../../testing';
 
@@ -104,4 +105,33 @@ describe('TxnsOverview', () => {
     await fireEvent.click(screen.getByText('ACCEPT'));
     expect(screen.getByText('No application key found')).toBeDefined();
   });
+
+  describe('con la verificación OTP caducada', () => {
+    const pending = { requests: [{ id: 7, pre_params: JSON.stringify({ appName: 'Shop' }) }] };
+    afterEach(() => resetExtension());
+
+    it('cambia ACEPTAR por el aviso y abre la extensión sobre la txn', async () => {
+      setExtensionInstalled(true);
+      const onExtTxn = vi.fn();
+      document.addEventListener('ext:txn', onExtTxn);
+      await render(TxnsOverviewComponent, {
+        providers: [provideBlockAuthClientForTest(makeClient(pending, { isOtpRequired: true }))],
+      });
+
+      expect(screen.getByText(/Enter your code in the Block-Auth extension/)).toBeDefined();
+      expect(screen.queryByText('ACCEPT')).toBeNull();
+      await fireEvent.click(screen.getByText('Open extension'));
+      expect(onExtTxn).toHaveBeenCalledTimes(1);
+      document.removeEventListener('ext:txn', onExtTxn);
+    });
+
+    it('sin la extensión manda a la app y no ofrece abrir nada', async () => {
+      await render(TxnsOverviewComponent, {
+        providers: [provideBlockAuthClientForTest(makeClient(pending, { isOtpRequired: true }))],
+      });
+
+      expect(screen.getByText(/Enter your code in the Block-Auth app/)).toBeDefined();
+      expect(screen.queryByText('Open extension')).toBeNull();
+    });
+  });
 });

package/src/lib/components/txns/txns-overview.component.ts

@@ -6,7 +6,13 @@ import {
   input,
   signal,
 } from '@angular/core';
-import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
+import {
+  $extension,
+  $locale,
+  openExtensionOnTxn,
+  t as translate,
+  type TextKey,
+} from '@block-auth.io/core';
 import { injectBlockAuthClient } from '../../provide-block-auth';
 import { injectStore } from '../../inject-store';
 import { TxnComponent } from './internals/txn.component';
@@ -104,6 +110,30 @@ const TXN_ERROR_TEXT_KEYS: Record<string, TextKey> = {
         (prevTxnClicked)="onPrevTxnClicked()"
         (nextTxnClicked)="onNextTxnClicked()"
       />
+      <!-- The server refuses this page's accept while the OTP window is
+           over: the code is entered in the extension, which approves. -->
+      @if (isOtpRequired()) {
+      <div
+        class="bas-flex bas-w-full bas-max-w-[330px] bas-flex-col bas-items-center bas-gap-6 bas-text-center"
+      >
+        <p class="bas-m-0 bas-text-base bas-text-[var(--bal-primary-800)]">
+          {{ t(ext().installed ? 'otpExpiredExtension' : 'otpExpiredApp') }}
+        </p>
+        @if (ext().installed) {
+        <button
+          type="button"
+          id="btn-txn-open-extension"
+          (click)="openExtensionOnTxn()"
+          class="bal-ba-ring-base bal-ba-ring bal-ba-transition-2 bas-group bas-relative bas-box-border bas-flex bas-flex-row bas-gap-2 bas-items-center bas-overflow-hidden bas-bg-[#38b000] hover:bas-bg-[#329e00] bal-ba-hover-ring-green-500 bal-ba-focus-ring-green-500 bas-h-[42px] bas-px-2.5 bas-py-0 bal-ba-hover-ring-2 bas-cursor-pointer bal-ba-focus-ring-2 focus:bas-opacity-90 bal-ba-focus-ring-offset-2 bal-ba-hover-ring-offset-2 bas-w-full bas-justify-center bas-border-none bas-rounded-md"
+        >
+          <span
+            class="bal-ba-transition-2 bas-text-white bas-text-center bas-text-base bas-font-medium bas-flex bas-h-full bas-items-center"
+            >{{ t('openExtension') }}</span
+          >
+        </button>
+        }
+      </div>
+      } @else {
       <div class="bas-h-[334px] bas-w-full bas-max-w-[330px]">
         <ba-txn
           [hasSolicitedData]="hasSolicitedData()"
@@ -116,7 +146,7 @@ const TXN_ERROR_TEXT_KEYS: Record<string, TextKey> = {
           (solicitedDataClicked)="showSolicitedData.set(true)"
         />
       </div>
-      } @if (showPermissions()) {
+      } } @if (showPermissions()) {
       <div
         class="bal-ba-transition-2 bal-ba-backdrop-blur-base bal-ba-backdrop-blur-sm bas-absolute bas-z-30 bas-box-border bas-h-full bas-w-full"
         (click)="showPermissions.set(false)"
@@ -148,6 +178,7 @@ export class TxnsOverviewComponent {
   private readonly client = injectBlockAuthClient();
   private readonly ws = injectStore(this.client.state.$ws);
   private readonly ui = injectStore(this.client.state.$ui);
+  protected readonly ext = injectStore($extension);
   private readonly locale = injectStore($locale);
   protected t = (key: TextKey): string => translate(key, this.locale());
 
@@ -166,6 +197,8 @@ export class TxnsOverviewComponent {
   protected readonly txns = computed(() => this.ws().requests ?? []);
   protected readonly did = computed(() => this.ws().did);
   protected readonly isSigning = computed(() => this.ui().isSigning);
+  protected readonly isOtpRequired = computed(() => this.ui().isOtpRequired);
+  protected readonly openExtensionOnTxn = openExtensionOnTxn;
   protected readonly isEmpty = computed(() => this.txns().length === 0);
   protected readonly errorText = computed(() =>
     this.t(