@block-auth.io/angular 0.1.0

package/src/lib/components/btns/btn-block-auth.component.ts

@@ -0,0 +1,104 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { $extension, $locale } from '@block-auth.io/core';
+import { BtnBaseComponent } from '../../primitives/btn-base.component';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+
+const CHROME_STORE_URL =
+  'https://chromewebstore.google.com/detail/block-auth-one/jhjjpmjhiamddbfhogknjibkacajkpdg';
+
+/**
+ * El único botón que ramifica sobre el estado de la extensión (`$extension`,
+ * que no está envuelto por `BlockAuthService`, se lee aquí con `injectStore`).
+ * Según el estado (installed/isUser/isUserActive/isLocked):
+ *  - no instalada → abre la Chrome Web Store,
+ *  - no user / no activo / bloqueada → despacha el evento DOM `ext:open`,
+ *  - conectable → `client.connectBlockAuth()`.
+ * El label sale del mapa localizado `uiConfig.config.content.btns`.
+ */
+@Component({
+  selector: 'ba-btn-block-auth',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BtnBaseComponent],
+  template: `
+    @if (isDropdownProfile()) {
+      <button
+        id="btn-provider-blockauth-dropdown"
+        class="bas-h-full bas-w-full bas-border-0 bas-bg-transparent bas-p-0"
+        (click)="onBtnBlockAuthClicked()"
+      ><ng-content /></button>
+    } @else {
+      <ba-btn-base
+        btnId="btn-provider-blockauth"
+        [text]="getBtnText() || text()"
+        type="button-outlined"
+        size="small"
+        paddingClassNames="bas-px-12"
+        [isIcon]="true"
+        textClassNames="bas-text-white bas-font-semibold bas-leading-6 bas-text-base"
+        [disabled]="disabled()"
+        [applyDisabledStyles]="false"
+        [isLoader]="false"
+        [isFocusOutlinedEnabled]="false"
+        (action)="onBtnBlockAuthClicked()"
+      >
+        <img
+          slot="icon"
+          src="https://dashboard.block-auth.io/img/blockauth_logo.png"
+          width="24"
+          height="24"
+          alt="Block-Auth"
+        />
+      </ba-btn-base>
+    }
+  `,
+})
+export class BtnBlockAuthComponent {
+  isDropdownProfile = input(false);
+  disabled = input(false);
+  isEditable = input(false);
+  text = input('Conectar');
+
+  private client = injectBlockAuthClient();
+  private ui = injectStore(this.client.state.$ui);
+  private ws = injectStore(this.client.state.$ws);
+  private ext = injectStore($extension);
+  private locale = injectStore($locale);
+
+  private btnsTexts = computed(
+    () =>
+      (this.ui().uiConfig as
+        | { config?: { content?: { btns?: Record<string, Record<string, string>> } } }
+        | null)?.config?.content?.btns,
+  );
+  private txt = (key: string): string =>
+    this.btnsTexts()?.[key]?.[this.locale()] ?? this.text();
+
+  getBtnText = computed((): string => {
+    if (!(this.ws().ready && this.ui().isSdkSignedIn)) return '';
+    const ext = this.ext();
+    if (!ext.installed) return this.txt('download');
+    if (!ext.isUser) return this.txt('createAccount');
+    if (!ext.isUserActive) return this.txt('completeRegister');
+    if (ext.isLocked) return this.txt('unlockOtp');
+    return this.txt('connect');
+  });
+
+  onBtnBlockAuthClicked(): void {
+    if (this.isEditable()) return;
+    if (!this.ws().ready || !this.ui().isSdkSignedIn) return;
+    const ext = this.ext();
+    if (!ext.installed) {
+      if (typeof window !== 'undefined') window.open(CHROME_STORE_URL, '_blank');
+      return;
+    }
+    if (!ext.isUser || !ext.isUserActive || ext.isLocked) {
+      if (typeof document !== 'undefined') {
+        document.dispatchEvent(new CustomEvent('ext:open', { detail: {} }));
+      }
+      return;
+    }
+    this.client.connectBlockAuth();
+  }
+}

package/src/lib/components/btns/btn-gmail.component.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
+import { BtnGmailComponent } from './btn-gmail.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+describe('BtnGmail', () => {
+  it('compone BtnGoogleBase: al hacer click dispara oauth.signupGoogle', async () => {
+    const signupGoogleSpy = vi.fn(async () => undefined);
+    const fakeClient = { oauth: { signupGoogle: signupGoogleSpy } } as any;
+    await render(BtnGmailComponent, {
+      providers: [provideBlockAuthClientForTest(fakeClient)],
+    });
+    await fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => expect(signupGoogleSpy).toHaveBeenCalledWith('auth-code'));
+  });
+});

package/src/lib/components/btns/btn-gmail.component.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { BtnGoogleBaseComponent } from './btn-google-base.component';
+import { BiLogoGmailComponent } from '../../icons';
+
+/**
+ * Envuelve `BtnGoogleBase` con la paleta roja de Gmail y el icono `BiLogoGmail`
+ * inline como icono por defecto.
+ */
+@Component({
+  selector: 'ba-btn-gmail',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BtnGoogleBaseComponent, BiLogoGmailComponent],
+  template: `
+    <ba-btn-google-base
+      [isDropdownProfile]="isDropdownProfile()"
+      [text]="text()"
+      bgClassNames="bas-bg-[#ed2d2d] hover:bas-bg-[#eb1515]"
+      ringClassNames="bal-ba-hover-ring-red-400"
+      paddingClassNames="bas-px-12"
+      textClassNames="bas-text-white bas-font-semibold bas-leading-6 bas-text-base"
+      [iconEnabled]="iconEnabled()"
+      [disabled]="disabled()"
+      [isFocusOutlinedEnabled]="false"
+      [isEditable]="isEditable()"
+      (clicked)="clicked.emit()"
+    >
+      <ba-bi-logo-gmail slot="icon" class="bas-h-6 bas-w-6 bas-text-white" />
+      <ng-content />
+    </ba-btn-google-base>
+  `,
+})
+export class BtnGmailComponent {
+  isDropdownProfile = input(false);
+  text = input('Gmail');
+  iconEnabled = input(true);
+  disabled = input(false);
+  isEditable = input(false);
+
+  clicked = output<void>();
+}

package/src/lib/components/btns/btn-google-base.component.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
+import { BtnGoogleBaseComponent } from './btn-google-base.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+describe('BtnGoogleBase', () => {
+  it('al hacer click dispara client.oauth.signupGoogle("auth-code")', async () => {
+    const signupGoogleSpy = vi.fn(async () => undefined);
+    const fakeClient = { oauth: { signupGoogle: signupGoogleSpy } } as any;
+    await render(BtnGoogleBaseComponent, {
+      providers: [provideBlockAuthClientForTest(fakeClient)],
+    });
+    await fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => expect(signupGoogleSpy).toHaveBeenCalledWith('auth-code'));
+  });
+});

package/src/lib/components/btns/btn-google-base.component.ts

@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { BtnBaseComponent } from '../../primitives/btn-base.component';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+
+/**
+ * Botón Google base (icono + label). Toda la lógica OAuth vive en el core;
+ * aquí solo se renderiza y el click delega en `client.oauth.signupGoogle(mode)`.
+ * Los estilos son inputs reales (con los mismos defaults) para que `BtnGmail`
+ * pueda sobrescribirlos.
+ *
+ * El icono se proyecta con `[slot=icon]` y se re-proyecta hacia `BtnBase`
+ * (`ngProjectAs`).
+ */
+@Component({
+  selector: 'ba-btn-google-base',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BtnBaseComponent],
+  template: `
+    @if (isDropdownProfile()) {
+      <button
+        id="btn-provider-google-dropdown"
+        class="bas-h-full bas-w-full bas-border-0 bas-bg-transparent bas-p-0"
+        (click)="onBtnGmailClicked()"
+      ><ng-content /></button>
+    } @else {
+      <ba-btn-base
+        btnId="btn-provider-google"
+        [text]="text()"
+        type="button-outlined"
+        size="small"
+        [bgClassNames]="bgClassNames()"
+        [ringClassNames]="ringClassNames()"
+        [paddingClassNames]="paddingClassNames()"
+        [textClassNames]="textClassNames()"
+        [isIcon]="iconEnabled()"
+        [isFocusOutlinedEnabled]="isFocusOutlinedEnabled()"
+        [disabled]="disabled()"
+        (action)="onBtnGmailClicked()"
+      ><ng-content select="[slot=icon]" ngProjectAs="[slot=icon]" /></ba-btn-base>
+    }
+  `,
+})
+export class BtnGoogleBaseComponent {
+  isDropdownProfile = input(false);
+  mode = input<'auth-code' | 'implicit'>('auth-code');
+  text = input('Google');
+  bgClassNames = input('bas-bg-[#ed2d2d] hover:bas-bg-[#eb1515]');
+  ringClassNames = input('bal-ba-hover-ring-red-400');
+  paddingClassNames = input('bas-px-12');
+  textClassNames = input('bas-text-white bas-font-semibold bas-leading-6 bas-text-base');
+  iconEnabled = input(false);
+  disabled = input(false);
+  isFocusOutlinedEnabled = input(false);
+  isEditable = input(false);
+
+  clicked = output<void>();
+
+  private client = injectBlockAuthClient();
+
+  async onBtnGmailClicked(): Promise<void> {
+    if (this.isEditable()) return;
+    try {
+      await this.client.oauth.signupGoogle(this.mode());
+    } catch (err) {
+      // Exponer la mala configuración (clientId ausente, script GIS no cargado)
+      // y las cancelaciones en vez de tragárnoslas: un catch silencioso haría
+      // que el botón pareciera inerte cuando en realidad falló.
+      console.warn('[blockauth] Google sign-in failed:', err);
+    }
+    this.clicked.emit();
+  }
+}

package/src/lib/components/btns/btn-metamask.component.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { BtnMetamaskComponent } from './btn-metamask.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+describe('BtnMetamask', () => {
+  it('al hacer click dispara client.web3.signup("metamask")', async () => {
+    const signupSpy = vi.fn(async () => undefined);
+    const fakeClient = {
+      web3: { signup: signupSpy },
+      state: { $wallet: map({ address: null, isConnecting: false }) },
+    } as any;
+    await render(BtnMetamaskComponent, {
+      providers: [provideBlockAuthClientForTest(fakeClient)],
+    });
+    await fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => expect(signupSpy).toHaveBeenCalledWith('metamask'));
+  });
+});

package/src/lib/components/btns/btn-metamask.component.ts

@@ -0,0 +1,98 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { BtnBaseComponent } from '../../primitives/btn-base.component';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+
+/**
+ * Botón de conexión MetaMask (EVM). El click delega en
+ * `client.web3.signup('metamask')`, que conecta la wallet inyectada y corre
+ * todo el handshake de signup en el core.
+ */
+const styles = {
+  bgClassNames: 'bas-bg-[#eb5900] hover:bas-bg-[#d85100]',
+  disabledBgClassNames: 'bas-bg-[rgba(235,89,0,0.75)] hover:bas-bg-[rgba(216,81,0,0.75)]',
+  ringClassNames: 'bal-ba-hover-ring-orange-400',
+  paddingClassNames: 'bas-px-12',
+  textClassNames: 'bas-text-white bas-font-semibold bas-leading-6 bas-text-base',
+  loaderWidth: 70,
+  loaderColor: '#fefefe',
+};
+
+@Component({
+  selector: 'ba-btn-metamask',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BtnBaseComponent],
+  template: `
+    @if (isDropdownProfile()) {
+      <button
+        id="btn-provider-metamask-dropdown"
+        class="bas-h-full bas-w-full bas-border-0 bas-bg-transparent bas-p-0"
+        (click)="onMetamaskSigning()"
+      ><ng-content /></button>
+    } @else {
+      <ba-btn-base
+        btnId="btn-provider-metamask"
+        [text]="btnText()"
+        type="button-outlined"
+        size="small"
+        [bgClassNames]="wallet().isConnecting ? disabledBg : bg"
+        [ringClassNames]="ring"
+        [paddingClassNames]="padding"
+        [textClassNames]="textCls"
+        [isLoader]="wallet().isConnecting"
+        [loaderWidth]="loaderWidth"
+        [loaderColor]="loaderColor"
+        [isIcon]="iconEnabled()"
+        [isFocusOutlinedEnabled]="false"
+        [disabled]="disabled()"
+        (action)="onMetamaskSigning()"
+      >
+        <img
+          slot="icon"
+          src="https://img.icons8.com/ios-filled/48/ffffff/metamask-logo.png"
+          height="24"
+          width="24"
+          alt="MetaMask"
+        />
+      </ba-btn-base>
+    }
+  `,
+})
+export class BtnMetamaskComponent {
+  isDropdownProfile = input(false);
+  text = input('MetaMask');
+  isTextInsteadOfAccount = input(false);
+  iconEnabled = input(true);
+  disabled = input(false);
+  isEditable = input(false);
+
+  clicked = output<void>();
+
+  private client = injectBlockAuthClient();
+  wallet = injectStore(this.client.state.$wallet);
+
+  bg = styles.bgClassNames;
+  disabledBg = styles.disabledBgClassNames;
+  ring = styles.ringClassNames;
+  padding = styles.paddingClassNames;
+  textCls = styles.textClassNames;
+  loaderWidth = styles.loaderWidth;
+  loaderColor = styles.loaderColor;
+
+  btnText = computed(() => {
+    const short = (a: string | null) => (a ? `${a.slice(0, 6)}…${a.slice(-4)}` : '');
+    return this.isTextInsteadOfAccount() ? this.text() : short(this.wallet().address) || this.text();
+  });
+
+  async onMetamaskSigning(): Promise<void> {
+    if (this.isEditable()) return;
+    if (this.wallet().isConnecting) return;
+    try {
+      await this.client.web3.signup('metamask');
+    } catch {
+      /* conexión/firma cancelada o fallida */
+    }
+    this.clicked.emit();
+  }
+}

package/src/lib/components/btns/btn-microsoft.component.test.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
+import { BtnMicrosoftComponent } from './btn-microsoft.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+describe('BtnMicrosoft', () => {
+  it('al hacer click dispara client.oauth.signupMicrosoft()', async () => {
+    const signupMicrosoftSpy = vi.fn(async () => undefined);
+    const fakeClient = { oauth: { signupMicrosoft: signupMicrosoftSpy } } as any;
+    await render(BtnMicrosoftComponent, {
+      providers: [provideBlockAuthClientForTest(fakeClient)],
+    });
+    await fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => expect(signupMicrosoftSpy).toHaveBeenCalled());
+  });
+});

package/src/lib/components/btns/btn-microsoft.component.ts

@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { BtnBaseComponent } from '../../primitives/btn-base.component';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { TiVendorMicrosoftComponent } from '../../icons';
+
+/**
+ * Botón Microsoft (glifo + label). El click delega en
+ * `client.oauth.signupMicrosoft()` (la config MSAL + el handshake de signup
+ * viven en el core).
+ */
+const msStyles = {
+  bgClassNames: 'bas-bg-[#2b88d8] hover:bas-bg-[#0078d4]',
+  ringClassNames: 'bal-ba-hover-ring-blue-400',
+  textClassNames: 'bas-text-white bas-font-semibold bas-leading-6 bas-text-base',
+  paddingClassNames: 'bas-px-12',
+};
+
+@Component({
+  selector: 'ba-btn-microsoft',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BtnBaseComponent, TiVendorMicrosoftComponent],
+  template: `
+    @if (isDropdownProfile()) {
+      <button
+        id="btn-provider-microsoft-dropdown"
+        class="bas-h-full bas-w-full bas-border-0 bas-bg-transparent bas-p-0"
+        (click)="microsoftSignin()"
+      ><ng-content /></button>
+    } @else {
+      <ba-btn-base
+        btnId="btn-provider-microsoft"
+        [text]="text()"
+        type="button-outlined"
+        size="small"
+        [bgClassNames]="bg"
+        [ringClassNames]="ring"
+        [paddingClassNames]="padding"
+        [textClassNames]="textCls"
+        [isIcon]="iconEnabled()"
+        [isFocusOutlinedEnabled]="false"
+        [disabled]="disabled()"
+        (action)="microsoftSignin()"
+      >
+        <ba-ti-vendor-microsoft slot="icon" class="bas-h-6 bas-w-6 bas-text-white" />
+      </ba-btn-base>
+    }
+  `,
+})
+export class BtnMicrosoftComponent {
+  isDropdownProfile = input(false);
+  text = input('Microsoft');
+  iconEnabled = input(true);
+  disabled = input(false);
+  isEditable = input(false);
+
+  clicked = output<void>();
+
+  private client = injectBlockAuthClient();
+
+  bg = msStyles.bgClassNames;
+  ring = msStyles.ringClassNames;
+  padding = msStyles.paddingClassNames;
+  textCls = msStyles.textClassNames;
+
+  async microsoftSignin(): Promise<void> {
+    if (this.isEditable()) return;
+    try {
+      await this.client.oauth.signupMicrosoft();
+    } catch (err) {
+      // Exponer mala configuración (clientId ausente, errores MSAL) y
+      // cancelaciones en vez de tragárnoslas.
+      console.warn('[blockauth] Microsoft sign-in failed:', err);
+    }
+    this.clicked.emit();
+  }
+}

package/src/lib/components/btns/btn-phantom.component.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { BtnPhantomComponent } from './btn-phantom.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+describe('BtnPhantom', () => {
+  it('al hacer click dispara client.web3.signup("phantom")', async () => {
+    const signupSpy = vi.fn(async () => undefined);
+    const fakeClient = {
+      web3: { signup: signupSpy },
+      state: { $wallet: map({ address: null, isConnecting: false }) },
+    } as any;
+    await render(BtnPhantomComponent, {
+      providers: [provideBlockAuthClientForTest(fakeClient)],
+    });
+    await fireEvent.click(screen.getByRole('button'));
+    await waitFor(() => expect(signupSpy).toHaveBeenCalledWith('phantom'));
+  });
+});

package/src/lib/components/btns/btn-phantom.component.ts

@@ -0,0 +1,93 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { BtnBaseComponent } from '../../primitives/btn-base.component';
+import { imgUrlByService } from '../../primitives/helpers';
+import { injectBlockAuthClient } from '../../provide-block-auth';
+import { injectStore } from '../../inject-store';
+
+/**
+ * Botón de conexión Phantom (Solana). El click delega en
+ * `client.web3.signup('phantom')`.
+ */
+const styles = {
+  bgClassNames: 'bas-bg-[#9092e7] hover:bas-bg-[#7b7de2]',
+  disabledBgClassNames: 'bas-bg-[rgba(144,146,231,0.75)] hover:bas-bg-[rgba(123,125,226,0.75)]',
+  ringClassNames: 'bal-ba-hover-ring-puple-400',
+  paddingClassNames: 'bas-px-12',
+  textClassNames: 'bas-text-white bas-font-semibold bas-leading-6 bas-text-base',
+  loaderWidth: 70,
+  loaderColor: '#fefefe',
+};
+
+@Component({
+  selector: 'ba-btn-phantom',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BtnBaseComponent],
+  template: `
+    @if (isDropdownProfile()) {
+      <button
+        id="btn-provider-phantom-dropdown"
+        class="bas-h-full bas-w-full bas-border-0 bas-bg-transparent bas-p-0"
+        (click)="onPhantomSignin()"
+      ><ng-content /></button>
+    } @else {
+      <ba-btn-base
+        btnId="btn-provider-phantom"
+        [text]="btnText()"
+        type="button-outlined"
+        size="small"
+        [bgClassNames]="wallet().isConnecting ? disabledBg : bg"
+        [ringClassNames]="ring"
+        [paddingClassNames]="padding"
+        [textClassNames]="textCls"
+        [isLoader]="wallet().isConnecting"
+        [loaderWidth]="loaderWidth"
+        [loaderColor]="loaderColor"
+        [isIcon]="iconEnabled()"
+        [isFocusOutlinedEnabled]="false"
+        [disabled]="disabled()"
+        (action)="onPhantomSignin()"
+      >
+        <img slot="icon" [src]="phantomIconSrc" height="24" width="24" alt="Phantom" />
+      </ba-btn-base>
+    }
+  `,
+})
+export class BtnPhantomComponent {
+  isDropdownProfile = input(false);
+  text = input('Phantom');
+  isTextInsteadOfAccount = input(false);
+  iconEnabled = input(true);
+  disabled = input(false);
+  isEditable = input(false);
+
+  clicked = output<void>();
+
+  private client = injectBlockAuthClient();
+  wallet = injectStore(this.client.state.$wallet);
+
+  bg = styles.bgClassNames;
+  disabledBg = styles.disabledBgClassNames;
+  ring = styles.ringClassNames;
+  padding = styles.paddingClassNames;
+  textCls = styles.textClassNames;
+  loaderWidth = styles.loaderWidth;
+  loaderColor = styles.loaderColor;
+  phantomIconSrc = imgUrlByService('phantom-white');
+
+  btnText = computed(() => {
+    const short = (a: string | null) => (a ? `${a.slice(0, 6)}…${a.slice(-4)}` : '');
+    return this.isTextInsteadOfAccount() ? this.text() : short(this.wallet().address) || this.text();
+  });
+
+  async onPhantomSignin(): Promise<void> {
+    if (this.isEditable()) return;
+    if (this.wallet().isConnecting) return;
+    try {
+      await this.client.web3.signup('phantom');
+    } catch {
+      /* conexión/firma cancelada o fallida */
+    }
+    this.clicked.emit();
+  }
+}

package/src/lib/components/btns/btn-signin.component.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { map } from 'nanostores';
+import { BtnSigninComponent } from './btn-signin.component';
+import { provideBlockAuthClientForTest } from '../../testing';
+
+function makeClient(ui: Record<string, unknown> = {}) {
+  const requestSignin = vi.fn();
+  const openModal = vi.fn();
+  const $ui = map({ isSigning: false, serviceName: null, uiConfig: null, ...ui });
+  const client = { requestSignin, openModal, state: { $ui } } as any;
+  return { client, requestSignin, openModal, $ui };
+}
+
+describe('BtnSignin', () => {
+  it('renderiza con el id correcto', async () => {
+    const { client } = makeClient();
+    await render(BtnSigninComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    expect(screen.getByRole('button').id).toBe('btn-login-signup');
+  });
+
+  it('al hacer click llama requestSignin y NO openModal si enabled es falsy', async () => {
+    const { client, requestSignin, openModal } = makeClient();
+    await render(BtnSigninComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByRole('button'));
+    expect(requestSignin).toHaveBeenCalledOnce();
+    expect(openModal).not.toHaveBeenCalled();
+  });
+
+  it('abre el modal signin si uiConfig.config[serviceName].enabled es true', async () => {
+    const { client, requestSignin, openModal } = makeClient({
+      serviceName: 'blockauth',
+      uiConfig: { config: { blockauth: { enabled: true } } },
+    });
+    await render(BtnSigninComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByRole('button'));
+    expect(requestSignin).toHaveBeenCalled();
+    expect(openModal).toHaveBeenCalledWith('signin');
+  });
+
+  it('no llama requestSignin ni openModal si isEditable es true', async () => {
+    const { client, requestSignin, openModal } = makeClient();
+    @Component({
+      standalone: true,
+      imports: [BtnSigninComponent],
+      template: `<ba-btn-signin [isEditable]="true" />`,
+    })
+    class HostComponent {}
+    await render(HostComponent, { providers: [provideBlockAuthClientForTest(client)] });
+    await fireEvent.click(screen.getByRole('button'));
+    expect(requestSignin).not.toHaveBeenCalled();
+    expect(openModal).not.toHaveBeenCalled();
+  });
+});