@block-auth.io/angular 0.1.2 → 0.2.1

package/.turbo/turbo-typecheck.log

@@ -1,9 +1,9 @@
 
-> @block-auth.io/angular@0.1.2 pretypecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> @block-auth.io/angular@0.2.0 pretypecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
 > pnpm build:css
 
 
-> @block-auth.io/angular@0.1.2 build:css /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> @block-auth.io/angular@0.2.0 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 1039ms.
+Done in 1016ms.
 
-> @block-auth.io/angular@0.1.2 typecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
+> @block-auth.io/angular@0.2.0 typecheck /home/vlad/Escritorio/blockauth-code/blockauth-sdk/packages/angular
 > tsc -p tsconfig.lib.json --noEmit
 

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @block-auth.io/angular
 
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @block-auth.io/core@0.4.2
+
+## 0.2.0
+
+### Minor Changes
+
+- Conditionally render DropdownProfile actions based on authentication state
+
 ## 0.1.2
 
 ### Patch Changes

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@block-auth.io/angular",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "dependencies": {
     "nanostores": "^0.10.0",
     "tslib": "^2.6.0",
-    "@block-auth.io/core": "0.4.1",
+    "@block-auth.io/core": "0.4.2",
     "@block-auth.io/ui-styles": "0.4.0"
   },
   "peerDependencies": {

package/src/lib/components/dds/dropdown-profile-btn.component.ts

@@ -62,30 +62,22 @@ import { TbCopyComponent, TbCopyCheckFilledComponent } from '../../icons';
             <ba-tb-copy class="bal-ba-transition-2 bas-h-[18px] bas-w-[18px] bas-shrink-0" />
           }
         </div>
+        <!-- Solo texto, no copiable (la fila DID de arriba es la única acción de copiar) -->
         @if (showAccountRow()) {
-          <div
-            [class]="
-              'bal-ba-transition-2 bas-flex bas-max-w-full bas-flex-row bas-items-center bas-justify-center bas-gap-1 bas-cursor-pointer ' +
-              (isAccountCopied() ? 'bas-text-[#4d849b]' : 'hover:bas-opacity-50')
-            "
-            (click)="onCopyAccount($event)"
-          >
+          <div class="bal-ba-transition-2 bas-flex bas-max-w-full bas-flex-row bas-items-center bas-justify-center bas-gap-1">
             <p class="bas-m-0 bas-truncate bas-text-xs">{{ accountSubtitle() }}</p>
-            @if (isAccountCopied()) {
-              <ba-tb-copy-check-filled class="bal-ba-transition-2 bas-h-4 bas-w-4 bas-shrink-0" />
-            } @else {
-              <ba-tb-copy class="bal-ba-transition-2 bas-h-4 bas-w-4 bas-shrink-0" />
-            }
           </div>
         }
       </div>
       <div [class]="arrowContainerClassNames()">
-        <ba-dropdown-arrow
-          id="ba-ddp-btn-arrow"
-          [isOpen]="isProfileOpen()"
-          [color]="style().colorBase"
-          [sizeClassNames]="arrowSizesClassNames()"
-        />
+        @if (isSigned()) {
+          <ba-dropdown-arrow
+            id="ba-ddp-btn-arrow"
+            [isOpen]="isProfileOpen()"
+            [color]="style().colorBase"
+            [sizeClassNames]="arrowSizesClassNames()"
+          />
+        }
       </div>
     </div>
   `,
@@ -154,7 +146,6 @@ export class DropdownProfileBtnComponent {
   );
 
   protected readonly isDidCopied = signal(false);
-  protected readonly isAccountCopied = signal(false);
 
   protected readonly gridClassNames = computed(() => this.gridClassNamesBySize[this.dropdownBtnSize()]);
   protected readonly imgSizesClassNames = computed(() => this.imgSizesClassNamesBySize[this.dropdownBtnSize()]);
@@ -168,18 +159,12 @@ export class DropdownProfileBtnComponent {
   });
 
   onCopyDid(e: MouseEvent): void {
-    this.copy(this.rawDid(), this.isDidCopied, e);
-  }
-  onCopyAccount(e: MouseEvent): void {
-    this.copy(this.rawAccount(), this.isAccountCopied, e);
-  }
-
-  private copy(value: string, copiedSignal: { set: (v: boolean) => void }, e: MouseEvent): void {
     // Don't toggle the dropdown open/closed when the user only wants to copy.
     e.stopPropagation();
+    const value = this.rawDid();
     if (!value) return;
     void navigator.clipboard?.writeText(value);
-    copiedSignal.set(true);
-    setTimeout(() => copiedSignal.set(false), 3000);
+    this.isDidCopied.set(true);
+    setTimeout(() => this.isDidCopied.set(false), 3000);
   }
 }

package/src/lib/components/dds/dropdown-profile.component.test.ts

@@ -18,13 +18,15 @@ vi.mock('@wagmi/connectors', () => ({
 // packages/vue/.../DropdownProfile.test.ts). Client falso con `logout` spy y
 // stores nanostores; serviceName 'blockauth' para textos en inglés.
 describe('DropdownProfile', () => {
-  function makeClient(logout = vi.fn(async () => {})) {
+  // isSigned: true — el item list (My profile/Change account/Disconnect)
+  // solo se muestra autenticado (ver dropdown-profile.component.ts).
+  function makeClient(logout = vi.fn(async () => {}), uiOverrides: Record<string, unknown> = {}) {
     return {
       logout,
       web3: { signup: vi.fn() },
       oauth: { signupGoogle: vi.fn(), signupMicrosoft: vi.fn() },
       connectBlockAuth: vi.fn(),
-      state: { $ui: map({ serviceName: 'blockauth' }), $ws: map({}) },
+      state: { $ui: map({ serviceName: 'blockauth', isSigned: true, ...uiOverrides }), $ws: map({}) },
     } as any;
   }
 
@@ -95,4 +97,14 @@ describe('DropdownProfile', () => {
     });
     expect(screen.getByTestId('dropdown-profile').className).toContain('bas-w-fit');
   });
+
+  it('sin firmar (conectado pero no autenticado) solo permite copiar el DID', async () => {
+    await render(DropdownProfileComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient(vi.fn(), { isSigned: false }))],
+    });
+    await fireEvent.click(screen.getByTestId('dropdown-profile-btn'));
+    expect(screen.queryByText('My profile')).toBeNull();
+    expect(screen.queryByText('Change account')).toBeNull();
+    expect(screen.queryByText('Disconnect')).toBeNull();
+  });
 });

package/src/lib/components/dds/dropdown-profile.component.ts

@@ -88,22 +88,23 @@ export interface DropdownProfileAdditionalItem {
                 (clicked)="item.onClick()"
               />
             }
-            <!-- CHANGE ACCOUNT -->
-            <ba-change-account
-              [serviceName]="serviceName()"
-              [text]="localized(btnsTexts().changeAccount, 'Change account')"
-              [disabled]="disabled()"
-              [isTopBorder]="isWeb3Service() || itemsToShow().length > 0"
-              (changeAccountClicked)="onChangeAccountClicked()"
-            />
-            <!-- DISCONNECT -->
-            <ba-dropdown-profile-item
-              id="ba-dd8-disconnect-0"
-              [text]="localized(btnsTexts().disconnect, 'Disconnect')"
-              [firstIcon]="disconnectIcon"
-              [isTopBorder]="true"
-              (clicked)="onDisconnectClicked()"
-            />
+            <!-- CHANGE ACCOUNT + DISCONNECT — hidden until the login transaction is signed -->
+            @if (isSigned()) {
+              <ba-change-account
+                [serviceName]="serviceName()"
+                [text]="localized(btnsTexts().changeAccount, 'Change account')"
+                [disabled]="disabled()"
+                [isTopBorder]="isWeb3Service() || itemsToShow().length > 0"
+                (changeAccountClicked)="onChangeAccountClicked()"
+              />
+              <ba-dropdown-profile-item
+                id="ba-dd8-disconnect-0"
+                [text]="localized(btnsTexts().disconnect, 'Disconnect')"
+                [firstIcon]="disconnectIcon"
+                [isTopBorder]="true"
+                (clicked)="onDisconnectClicked()"
+              />
+            }
           </ul>
         </div>
       }
@@ -153,6 +154,7 @@ export class DropdownProfileComponent {
   private animTimeout: ReturnType<typeof setTimeout> | undefined;
 
   protected readonly serviceName = computed(() => this.ui().serviceName ?? 'blockauth');
+  protected readonly isSigned = computed(() => this.ui().isSigned);
 
   private readonly uiConfigContent = computed(
     () =>
@@ -191,12 +193,15 @@ export class DropdownProfileComponent {
     },
   ]);
 
-  protected readonly itemsToShow = computed(
-    () => this.additionalDropdownItems() ?? this.defaultAdditionalDropdownItems(),
+  // Not fully authenticated yet (connected but transaction unsigned): only the
+  // "Copy DID" row in `DropdownProfileBtnComponent` is a valid action, so the
+  // item list (My profile / Change account / Disconnect) stays empty.
+  protected readonly itemsToShow = computed(() =>
+    this.isSigned() ? this.additionalDropdownItems() ?? this.defaultAdditionalDropdownItems() : [],
   );
   private readonly web2Services = ['google', 'microsoft'];
   protected readonly isWeb3Service = computed(() => !this.web2Services.includes(this.serviceName()));
-  protected readonly totalDropdownItems = computed(() => 2 + this.itemsToShow().length);
+  protected readonly totalDropdownItems = computed(() => (this.isSigned() ? 2 + this.itemsToShow().length : 0));
 
   private readonly heightBySize: Record<string, number> = { xs: 46, small: 52, base: 58, large: 64 };
 
@@ -217,6 +222,7 @@ export class DropdownProfileComponent {
   }
 
   onProfileClicked(): void {
+    if (!this.isSigned()) return;
     this.isAnimationCompleted.set(false);
     const next = !this.isProfileOpen();
     this.isProfileOpen.set(next);