Skip to content

feat: redesign login screen#387

Draft
Kaandroids wants to merge 1 commit into
subshell:masterfrom
Kaandroids:feature/login-screen-redesign
Draft

feat: redesign login screen#387
Kaandroids wants to merge 1 commit into
subshell:masterfrom
Kaandroids:feature/login-screen-redesign

Conversation

@Kaandroids

Copy link
Copy Markdown

This is a proposal for a refreshed login screen. I'm opening it as a draft to gather feedback first, in the spirit of the contributing guide's "discuss bigger changes before investing time" advice — the login screen felt like the smallest self-contained slice to demonstrate a direction. If you like where this is going, I'd be happy to extend the visual language to the rest of the app step by step. If not, some of the smaller fixes below might still be worth cherry-picking.

What changed

  • Split-panel layout: an animated brand panel (the O-Neko cat assembles itself and blinks) next to a clean sign-in panel
  • Dark & light mode wired to the existing theming infrastructure — the new language pill and theme toggle dispatch the same NGXS actions (SetLocale, SetThemeMode) as the existing switchers, so choices apply app-wide
  • All strings go through ngx-translate, with new en/de dictionary entries
  • The logo lives in a standalone assets/oneko-animated.svg with its part animations embedded, keeping the template lean
  • Space Grotesk is self-hosted via fontsource, consistent with the existing font setup (no Google Fonts CDN)

Smaller fixes riding along

  • Real <form> submission (Enter works natively), autocomplete attributes so password managers work, autofocus on the username field
  • Loading state and double-submit guard on the sign-in button
  • Decorative elements are aria-hidden; prefers-reduced-motion disables all animations
  • The login page previously rendered the footer linking to oneko.io, which no longer resolves (the domain is gone) — the redesigned page shows a plain "open source · apache-2.0" line instead. The footer on the other pages still carries the dead link; happy to send a separate one-line PR for that.

Screenshots

Dark mode

Redesigned login screen in dark mode

Light mode

Redesigned login screen in light mode

Verification

  • ng build --configuration production passes with no new warnings
  • Tested against a real backend (v1.8.2 running in a kind cluster): successful login, failed-login snackbar, language switch, theme switch

Happy to adjust anything — scope, colors, naming.

Split-panel login: an animated brand panel with the assembling
O-Neko logo, and a form panel wired to the existing theming
(dark/light) and i18n (EN/DE) infrastructure.

- the logo lives in assets/oneko-animated.svg with its part
  animations embedded, keeping the template lean
- the language pill and theme toggle dispatch the existing
  NGXS actions (SetLocale, SetThemeMode), so choices apply
  app-wide as before
- real form submit with autocomplete, autofocus and a loading
  state on the submit button
- new login strings added to the en/de dictionaries
- Space Grotesk is self-hosted via fontsource, matching the
  existing font setup
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant