Add magic link login UI with email validation and error handling #13

New Issue

2026-02-25T16:05:14+01:00

libretech commented

2026-02-25 16:05:14 +01:00

Summary

Build a login UI that allows users to request a magic link via email, with client-side email validation and error state handling.

Implementation Tasks

Create login page/modal with email input
Add client-side email format validation
Submit email to /auth/login endpoint
Show success state (Check your email)
Show error states (invalid email, rate limited, server error)
Handle magic link callback (token verification)

UI States

Initial: Email input + submit button
Loading: Spinner/disabled state during request
Success: Magic link sent, check your email message
Error: Specific error messages per error type

Acceptance Criteria

Email input validates format before submission
User sees clear feedback for all states (loading, success, error)
Rate limit errors show appropriate message
Accessible (keyboard navigation, screen reader labels)
Works on mobile viewports

## Summary Build a login UI that allows users to request a magic link via email, with client-side email validation and error state handling. ## Implementation Tasks - [x] Create login page/modal with email input - [x] Add client-side email format validation - [x] Submit email to /auth/login endpoint - [x] Show success state (Check your email) - [x] Show error states (invalid email, rate limited, server error) - [x] Handle magic link callback (token verification) ## UI States 1. Initial: Email input + submit button 2. Loading: Spinner/disabled state during request 3. Success: Magic link sent, check your email message 4. Error: Specific error messages per error type ## Acceptance Criteria - [x] Email input validates format before submission - [x] User sees clear feedback for all states (loading, success, error) - [x] Rate limit errors show appropriate message - [x] Accessible (keyboard navigation, screen reader labels) - [x] Works on mobile viewports

libretech added the phase-2 label 2026-02-25 16:05:14 +01:00

libretech referenced this issue

2026-02-28 09:33:11 +01:00

Epic: Phase 2 — Frontend Auth + Adaptation #12

libretech added the task label 2026-02-28 20:26:10 +01:00

~~libretech referenced this issue 2026-02-28 21:15:46 +01:00~~

Create public landing page at librenot.es with feature overview and CTAs #16

libretech changed title from ~~Add login and registration UI~~ to Add magic link login UI with email validation and error handling

2026-02-28 21:41:42 +01:00

~~libretech referenced this issue 2026-02-28 22:00:33 +01:00~~

Implement email magic link authentication system #9

~~libretech referenced this issue 2026-03-01 00:13:51 +01:00~~