lablup / lablup/backend.ai-webui
Redesign the login dialog: roomier padding, larger inputs, visible vertical labels, and a tooltip-driven endpoint section
- Dominant language
- TypeScript
- Stars
- 133
- Forks
- 81
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 355
Description
The login dialog is visually cramped: padding too tight for the 400px modal, small inputs, narrow gaps, and an icon-driven "Advanced" endpoint area that does not match the vertical form-item convention used everywhere else in the WebUI.
## Login dialog
**Spacing**
- Inner padding 24 → 32px. Logo gets 48px above it and clears the first field by 32px; the logo is centred.
- Field gap 16px; the space between the Login button and Advanced is widened.
**Fields**
- Visible `BAIFormItem` labels ABOVE each control (vertical), replacing placeholder-only fields. The app-wide "(optional)" suffix is suppressed — every field here is required to sign in.
- Controls render at `size="lg"` (32 → 36px) and the value text one type step up (14 → 17px).
**Email vs Username**
- Verified against the webserver (`POST /server/login`): `admin@lablup.com` authenticates (200), `admin` — the same account's `username` — returns 401 `Credential/signature mismatch`. Username login is NOT supported.
- Label/placeholder "Email or Username" → "Email" (`login.Email` replaces `login.E-mailOrUsername` in 21 locales).
**Colour hierarchy**
- The primary Login button is the only branded element: `size="lg"` + semibold label.
- "Advanced" and "Forgot password" drop the accent colour and render as grey semibold labels. "Sign up" keeps the accent.
**Remember ID / password recovery** (new)
- A "Remember ID" checkbox and a "Forgot password" text button share one row directly under the credentials, above the CTA — matching the reference design.
- "Remember ID" persists only the identifier (`saved_login_id` + `remember_login_id` in the general options scope), never the password, and only on a successful login. Unchecking clears it. `VITE_DEFAULT_EMAIL` still wins on a dev box.
- "Sign up" moves to the very bottom, centred, on its own.
- New keys: `login.RememberID`, `login.FindPassword` (21 locales).
**Advanced / endpoint**
- A normal vertical form item — "Endpoint" label above a full-width input — on a muted surface, so the disclosed block reads as a child of the quiet grey toggle without a border.
- The standalone `Info` icon button and the custom side help panel it opened are replaced by the standard `BAIFormItem` `tooltip` help glyph (`?`). The tooltip restores the panel's bold heading above the description.
**Endpoint history**
- The cloud-icon dropdown becomes a history icon button with a tooltip, at the right of the endpoint input.
- The panel lists each endpoint and its delete action on ONE row (Astryx `List`/`ListItem` with a trailing `IconButton`), replacing the two-row-per-endpoint dropdown. Selecting fills the field and closes the panel; deleting removes the row without selecting it.
- The `VITE_DEFAULT_API_ENDPOINT` row stays undeletable — it is re-injected from the env on every load, so a delete could not stick.
## Sign-up modal
- The agreement sentence is rendered BESIDE the checkbox instead of as its label, so only the box toggles. The label still carries the full sentence for screen readers.
- "Terms of Service" and "Privacy Policy" become inline links inside that sentence, each opening its own modal; the separate link row below the checkbox is removed.
## Out of scope
- FR-3559 (blurred "About Endpoint" help panel) becomes moot for this field — the panel is replaced by a tooltip. No separate fix is attempted.
JIRA Issue: FR-3560
Contributor guide
No contributing guide indexed for this repository
Research direction
Locate the login dialog and sign-up modal implementations, then trace the general options storage and the locale entries mentioned in the issue. Done means the redesigned forms, remember-ID behavior, endpoint history interactions, tooltip help, sign-up links, and 21-locale key updates all match the stated requirements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- authentication, frontend, internationalization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100