Authentication Pages (Login, Register, Forgot Password)

[1nonlypiece]

Description
Design the complete authentication flow including login, registration, password recovery, and email verification screens. These screens should feel secure while remaining simple and welcoming.

Target Users

• New users creating accounts
• Returning users logging in
• Users who forgot their credentials

Design Requirements

Must Include:

• Login Page:
  • Email/username input field
  • Password input field with show/hide toggle
  • "Remember me" checkbox
  • Login button (primary CTA)
  • "Forgot password?" link
  • "Create account" link
  • Social/wallet login options (Stellar wallet)
  • Error states for invalid credentials
• Registration Page:
  • Email input field
  • Password input with strength indicator
  • Password confirmation field
  • Terms of service checkbox with link
  • Privacy policy acknowledgment
  • Create account button
  • "Already have an account? Login" link
  • Progress indicator (if multi-step)
• Forgot Password Page:
  • Email input field
  • Submit button
  • Success state with instructions
  • Back to login link
• Password Reset Page:
  • New password input
  • Confirm password input
  • Password requirements checklist
  • Reset button
  • Token expiry error state
• Email Verification Page:
  • Verification success state
  • Verification failed/expired state
  • Resend verification email option

Should Include:

• Two-factor authentication setup/entry
• Magic link login option
• Account type selection during registration (Individual vs. Organization)
• Onboarding questions during registration (use case, role)
• Loading states for form submission
• Rate limiting feedback (too many attempts)

Design Specifications

• Form width: 400-480px centered
• Input height: 48-56px minimum
• Password strength: Visual indicator (bar or checkmarks)
• Error messages: Inline, below respective fields
• Success messages: Full-page confirmation with next steps

Deliverables

• Login page (default, loading, error states)
• Registration page (all steps if multi-step)
• Forgot password flow (request, confirmation, reset, success)
• Email verification states
• Mobile responsive versions
• Interactive prototype of complete auth flow

Designer Notes

• Security is paramount—the design should feel trustworthy
• Don't ask for unnecessary information during registration
• Provide clear feedback for all user actions
• Consider users on slow connections (loading states)