[Feat]: Align the Web password login page with Tabularis design

Open
  • Is something wrong?
#1,341 2 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@Detoy is already working on this.

Since Oct 29, 2026.

  • #1347 by @Detoy — open

Assessment

This issue has not been assessed yet.

Description

feature request

Prerequisites

  • I have written a descriptive issue title
  • I have searched existing issues to ensure the feature has not already been requested

🚀 Feature Proposal

Bring the Tabularis Web password login page into line with the application's visual design, including its existing error states.

This follows the working connection-link continuation merged in PR #1294 and the review discussion. In the browser check, the login page used the browser's default typography, input and button styling.

Motivation

The sign-in page is the first screen a signed-out user sees when opening a connection link. It should feel like part of Tabularis and give clear, consistent feedback when sign-in fails.

Example

  1. Open a saved connection link while signed out: 
    /connections/<connection-id>/editor
  2. See a responsive, branded sign-in form with the same visual hierarchy and control styling as the app.
  3. Enter an incorrect password and see a clearly styled error. Correct the password and arrive at the original connection editor.

Acceptance criteria

  • The login page uses a coherent Tabularis layout, typography, spacing, input and primary-button styling.
  • Colors, radii and fonts follow the repository's design-token rules, with intentional light and dark appearances.
  • The form remains usable on narrow viewports, with a visible label, keyboard submission, visible focus and appropriate password autocomplete.
  • Invalid credentials, rate limiting and session-limit feedback use the same layout and accessible error presentation.
  • Existing return-target validation, origin checks, referrer policy and login response behavior remain covered by tests.
  • Browser checks cover successful login, a failed attempt followed by success, connection-link continuation and rejected return targets. The desktop-free Rust check still passes.

Where to start

Contributor notes

  • Follow the repo rules in .rules/ (Rust, TypeScript, React, design tokens, accessibility, testing).
  • Add any new UI strings to every locale under packages/web-ui/src/i18n/locales/.
  • Keep shared backend logic in src-tauri/src/application/ and transport-specific code in the corresponding transport module; preserve the desktop-free build.
  • Run the relevant tests and repository checks, including cargo check --no-default-features from src-tauri/ for backend changes.
  • Questions? Ask here or on Discord.
Dominant language
TypeScript
Stars
5.1k
Forks
335
Avg merge
1d 7h
Merged PRs (30d)
255

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from TabularisDB/tabularis

All issues in TabularisDB/tabularis

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.