public/librenotes
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects Releases Wiki Activity

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

New Issue
Open
opened 2026-02-25 16:05:14 +01:00 by libretech · 0 comments
libretech commented 2026-02-25 16:05:14 +01:00
Owner
Copy Link

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

  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

  • 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 - [ ] 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 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 - [ ] 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
libretech added the
phase-2
 label 2026-02-25 16:05:14 +01:00
libretech added the
task
 label 2026-02-28 20:26:10 +01:00
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 added the
frontend
 label 2026-03-01 20:32:37 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
backend
Backend changes
database
Database changes
documentation
Documentation improvements
epic
frontend
Frontend changes
infrastructure
Infrastructure and deployment
launch
Launch and release tasks
phase-0
phase-1
phase-2
phase-3
phase-4
phase-5
phase-6
security
Security-related
task
Actionable task
No Label
frontend
phase-2
task
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
libretech
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: public/librenotes#13
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?