agatha/reactbin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Header title links to grid; sign-out redirects to grid

Browse Source 
Make the app title a clickable link to / so users can return to the
image grid from any sub-page without the browser back button. Change
the sign-out destination from /login to / since the grid is publicly
accessible and avoids unnecessary friction post-logout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
agathanonymous
2026-05-03 20:14:35 +00:00
parent 9246f75fdd
commit 28df9a1261
7 changed files with 160 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ui/src/app/app.component.spec.ts
View File

@@ -63,7 +63,7 @@ describe('AppComponent', () => {
expect(btn).toBeNull();
});
it('onLogout calls auth.logout and navigates to /login', () => {
it('onLogout calls auth.logout and navigates to / (grid)', () => {
authSpy.isAuthenticated.and.returnValue(true);
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
@@ -71,7 +71,16 @@ describe('AppComponent', () => {
spyOn(router, 'navigate');
fixture.componentInstance.onLogout();
expect(authSpy.logout).toHaveBeenCalled();
expect(router.navigate).toHaveBeenCalledWith(['/login']);
expect(router.navigate).toHaveBeenCalledWith(['/']);
});
it('header app-name is a link to /', () => {
authSpy.isAuthenticated.and.returnValue(false);
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const link = (fixture.nativeElement as HTMLElement).querySelector('a.app-name') as HTMLAnchorElement;
expect(link).not.toBeNull();
expect(link.getAttribute('href')).toBe('/');
});
it('header height is 48px', () => {

10
ui/src/app/app.component.ts
View File

@@ -1,15 +1,15 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, RouterOutlet } from '@angular/router';
import { Router, RouterLink, RouterOutlet } from '@angular/router';
import { AuthService } from './auth/auth.service';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
imports: [CommonModule, RouterLink, RouterOutlet],
template: `
<header class="app-header">
<span class="app-name">Reactbin</span>
<a routerLink="/" class="app-name">Reactbin</a>
<button *ngIf="auth.isAuthenticated()" class="logout-btn" (click)="onLogout()">Sign out</button>
</header>
<router-outlet />
@@ -25,7 +25,7 @@ import { AuthService } from './auth/auth.service';
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.app-name { font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: 0.02em; }
.app-name { font-weight: 600; font-size: 1rem; color: var(--text); letter-spacing: 0.02em; text-decoration: none; }
.logout-btn {
background: none;
border: 1px solid var(--border);
@@ -46,6 +46,6 @@ export class AppComponent {
onLogout(): void {
this.auth.logout();
this.router.navigate(['/login']);
this.router.navigate(['/']);
}
}