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

Feat: Polish Angular UI with cohesive design system

Browse Source 
Introduces a shared CSS custom property token layer and applies it
across all five views (library, upload, detail, login, app shell).
Each view now has intentional loading, empty, and error states.

- styles.css: 13 design tokens on :root; shimmer skeleton animation
- Library: 150ms-debounced skeleton loading, empty state with /upload
  link, error card with retry, card hover lift, broken-image fallback
- Upload: token-styled drop-zone, Uploading… spinner, 4s success
  banner, distinct validation vs. network error messages
- Detail: image skeleton, network error card (separate from 404
  not-found card), Owner actions panel, danger tag error styling,
  broken-image fallback
- Login: vertically centred surface card, danger field/server errors,
  Signing in… disabled button
- App shell: 48px fixed header, app name left, sign-out right, no
  reflow on auth state change
- All 24 ESLint errors resolved (including pre-existing auth spec
  issues); ng build and ng lint pass clean

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
agathanonymous
2026-05-03 20:03:56 +00:00
parent 5179786261
commit 9246f75fdd
23 changed files with 1777 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
ui/src/app/login/login.component.ts
View File

@@ -10,29 +10,69 @@ import { AuthService } from '../auth/auth.service';
imports: [CommonModule, ReactiveFormsModule],
template: `
<div class="login-page">
<h1>Sign In</h1>
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
<div class="field">
<label for="username">Username</label>
<input id="username" type="text" formControlName="username" />
<span *ngIf="form.get('username')?.invalid && form.get('username')?.touched" class="validation-error">
Username is required
</span>
</div>
<div class="field">
<label for="password">Password</label>
<input id="password" type="password" formControlName="password" />
<span *ngIf="form.get('password')?.invalid && form.get('password')?.touched" class="validation-error">
Password is required
</span>
</div>
<p *ngIf="errorMessage" class="error-message">{{ errorMessage }}</p>
<button type="submit" [disabled]="loading">
{{ loading ? 'Signing in…' : 'Sign In' }}
</button>
</form>
<div class="login-card">
<h1>Sign In</h1>
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
<div class="field">
<label for="username">Username</label>
<input id="username" type="text" formControlName="username" autocomplete="username" />
<span *ngIf="form.get('username')?.invalid && form.get('username')?.touched" class="validation-error">
Username is required
</span>
</div>
<div class="field">
<label for="password">Password</label>
<input id="password" type="password" formControlName="password" autocomplete="current-password" />
<span *ngIf="form.get('password')?.invalid && form.get('password')?.touched" class="validation-error">
Password is required
</span>
</div>
<p *ngIf="errorMessage" class="error-message">{{ errorMessage }}</p>
<button type="submit" [disabled]="loading">
{{ loading ? 'Signing in…' : 'Sign In' }}
</button>
</form>
</div>
</div>
`,
styles: [`
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: var(--bg);
}
.login-card {
width: 100%;
max-width: 400px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 40px 32px;
}
h1 { margin-bottom: 28px; font-size: 1.5rem; }
.field { margin-bottom: 20px; }
label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: var(--text-muted); }
input[type="text"], input[type="password"] {
width: 100%; padding: 10px 12px;
background: var(--bg); border: 1px solid var(--border);
color: var(--text); border-radius: var(--radius);
font-size: 1rem; transition: border-color var(--transition);
}
input:focus { outline: none; border-color: var(--border-focus); }
.validation-error { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--danger); }
.error-message { margin-bottom: 16px; color: var(--danger); font-size: 0.9rem; }
button[type="submit"] {
width: 100%; padding: 11px;
background: var(--accent); color: var(--accent-text);
border: none; border-radius: var(--radius);
font-size: 1rem; font-weight: 600; cursor: pointer;
transition: opacity var(--transition);
}
button[type="submit"]:disabled { opacity: 0.5; cursor: default; }
`],
})
export class LoginComponent {
form: FormGroup;
@@ -53,6 +93,7 @@ export class LoginComponent {
onSubmit(): void {
if (this.form.invalid) {
this.form.markAllAsTouched();
return;
}
this.loading = true;