refactor(user-dropdown): remove registration functionality and simplify user dropdown structure
This commit is contained in:
@@ -54,9 +54,6 @@
|
||||
<app-user-dropdown
|
||||
id="store-user-dropdown"
|
||||
[user]="user()"
|
||||
[isAuthenticated]="isAuthenticated()"
|
||||
(loginClick)="onLoginClick()"
|
||||
(registerClick)="onRegisterClick()"
|
||||
(logoutClick)="onLogoutClick()"
|
||||
/>
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
[isAuthenticated]="isAuthenticated()"
|
||||
(cartClick)="isCartOpen.set(!isCartOpen())"
|
||||
(loginClick)="onLoginClick()"
|
||||
(registerClick)="onRegisterClick()"
|
||||
(logoutClick)="onLogoutClick()"
|
||||
/>
|
||||
|
||||
|
||||
@@ -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']),
|
||||
|
||||
Reference in New Issue
Block a user