refactor(user-dropdown): remove registration functionality and simplify user dropdown structure

This commit is contained in:
2026-07-08 03:03:56 +00:00
parent f6ac1b8727
commit 3579abdecb
7 changed files with 23 additions and 140 deletions

View File

@@ -54,9 +54,6 @@
<app-user-dropdown
id="store-user-dropdown"
[user]="user()"
[isAuthenticated]="isAuthenticated()"
(loginClick)="onLoginClick()"
(registerClick)="onRegisterClick()"
(logoutClick)="onLogoutClick()"
/>
}

View File

@@ -20,7 +20,6 @@ export class StoreHeaderComponent {
readonly isAuthenticated = input<boolean>(false);
readonly cartClick = output<void>();
readonly loginClick = output<void>();
readonly registerClick = output<void>();
readonly logoutClick = output<void>();
protected readonly isUserDropdownOpen = signal(false);
@@ -56,11 +55,6 @@ export class StoreHeaderComponent {
this.loginClick.emit();
}
protected onRegisterClick(): void {
this.isUserDropdownOpen.set(false);
this.registerClick.emit();
}
protected onLogoutClick(): void {
this.isUserDropdownOpen.set(false);
this.logoutClick.emit();

View File

@@ -1,52 +1,23 @@
<section class="user-dropdown" role="menu" aria-label="Menu de usuario">
@if (isAuthenticated()) {
<div class="user-dropdown__profile">
<div class="user-dropdown__identity">
<span class="user-dropdown__name">{{ displayName() }}</span>
</div>
</div>
<div class="user-dropdown__profile">
<span class="user-dropdown__name">{{ displayName() }}</span>
</div>
<div class="user-dropdown__divider"></div>
<div class="user-dropdown__divider"></div>
<button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-account">
<span>Mi cuenta</span>
</button>
<button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-purchases">
<span>Mis compras</span>
</button>
<button
type="button"
class="user-dropdown__item user-dropdown__item--danger"
role="menuitem"
data-testid="user-dropdown-logout"
(click)="logoutClick.emit()"
>
<span>Cerrar sesion</span>
</button>
} @else {
<div class="user-dropdown__guest">
<span class="user-dropdown__guest-title">Mi cuenta</span>
<span class="user-dropdown__guest-copy">Accede para ver tus compras y continuar mas rapido.</span>
</div>
<button
type="button"
class="user-dropdown__primary"
role="menuitem"
data-testid="user-dropdown-login"
(click)="loginClick.emit()"
>
Iniciar sesion
</button>
<button
type="button"
class="user-dropdown__secondary"
role="menuitem"
data-testid="user-dropdown-register"
(click)="registerClick.emit()"
>
Crear cuenta
</button>
}
<button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-account">
Mi cuenta
</button>
<button type="button" class="user-dropdown__item" role="menuitem" data-testid="user-dropdown-purchases">
Mis compras
</button>
<button
type="button"
class="user-dropdown__item"
role="menuitem"
data-testid="user-dropdown-logout"
(click)="logoutClick.emit()"
>
Cerrar sesion
</button>
</section>

View File

@@ -8,8 +8,7 @@
}
.user-dropdown {
position: relative;
color: #202020;
display: grid;
background: #ffffff;
border: 1px solid rgba(32, 32, 32, 0.1);
border-radius: 8px;
@@ -22,60 +21,30 @@
padding: 0.25rem;
}
.user-dropdown__identity,
.user-dropdown__guest {
display: grid;
min-width: 0;
gap: 0.15rem;
}
.user-dropdown__name,
.user-dropdown__guest-title {
.user-dropdown__name {
color: #a0a0a0;
font-size: 13px;
font-weight: 325;
line-height: 1.2;
}
.user-dropdown__guest-copy {
overflow: hidden;
color: #666666;
font-size: 0.8rem;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-dropdown__guest {
padding: 0.25rem 0.25rem 0.75rem;
}
.user-dropdown__divider {
height: 1px;
margin: 0.6rem 0;
background: rgba(32, 32, 32, 0.08);
}
.user-dropdown__item,
.user-dropdown__primary,
.user-dropdown__secondary {
.user-dropdown__item {
width: 100%;
border: 0;
border-radius: 6px;
font: inherit;
cursor: pointer;
}
.user-dropdown__item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.6rem;
color: #8a8a8a;
font-size: 14px;
font-weight: 700;
text-align: left;
background: transparent;
cursor: pointer;
transition: color 0.15s ease;
}
@@ -86,46 +55,6 @@
outline: none;
}
.user-dropdown__item--danger:active,
.user-dropdown__item--danger:hover,
.user-dropdown__item--danger:focus-visible {
color: var(--tenant-primary);
}
.user-dropdown__primary,
.user-dropdown__secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.35rem;
padding: 0.55rem 0.85rem;
font-size: 0.88rem;
font-weight: 700;
}
.user-dropdown__primary {
color: #ffffff;
background: var(--tenant-primary);
}
.user-dropdown__primary:hover,
.user-dropdown__primary:focus-visible {
filter: brightness(0.96);
outline: none;
}
.user-dropdown__secondary {
margin-top: 0.5rem;
color: var(--tenant-primary);
background: rgba(0, 0, 0, 0.04);
}
.user-dropdown__secondary:hover,
.user-dropdown__secondary:focus-visible {
background: rgba(0, 0, 0, 0.07);
outline: none;
}
@keyframes user-dropdown-enter {
from {
opacity: 0;

View File

@@ -8,9 +8,6 @@ import { AuthUser } from '../../../../services/auth/auth.interfaces';
})
export class UserDropdownComponent {
readonly user = input<AuthUser | null>(null);
readonly isAuthenticated = input(false);
readonly loginClick = output<void>();
readonly registerClick = output<void>();
readonly logoutClick = output<void>();
protected readonly displayName = computed(() => this.user()?.nombre_apellido || 'Mi cuenta');

View File

@@ -6,7 +6,6 @@
[isAuthenticated]="isAuthenticated()"
(cartClick)="isCartOpen.set(!isCartOpen())"
(loginClick)="onLoginClick()"
(registerClick)="onRegisterClick()"
(logoutClick)="onLogoutClick()"
/>

View File

@@ -89,10 +89,6 @@ export class StoreLayoutComponent implements OnInit {
void this.router.navigate(['/login']);
}
protected onRegisterClick(): void {
void this.router.navigate(['/register']);
}
protected onLogoutClick(): void {
this.authService.logout().subscribe({
next: () => void this.router.navigate(['/login']),