lablup / lablup/backend.ai-webui

Redesign the login dialog: roomier padding, larger inputs, visible vertical labels, and a tooltip-driven endpoint section

Open
#8,810 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.