Skip to content

Implement Sign up, Login, and Logout features #111

@elainefan331

Description

@elainefan331

Description:
Implement complete authentication modal system with Sign Up and Login functionality. This includes frontend React components with Material-UI styling, form validation, and integration with the Express.js backend authentication API.

Tasks:

  • Create UserSignup modal
  • Create UserLogin modal
  • Add logout feature
  • Fix NavItems to render modals
  • Connect to authentication endpoints
  • Integrate login, signup, logout, get currentUser to redux
  • Add google OAuth button
  • Add orcid OAuth button
  • Manual testing of flows
  • Test error handling and persistence

Acceptance Criteria:
Login Modal

  • Opens when "Sign In" is clicked in user menu
  • Validates email format and required fields
  • Shows/hides password with toggle button
  • Displays error messages for failed authentication
  • Closes and updates app state on successful login
  • Has link to switch to signup modal
  • Resets form when closed

Signup Modal

  • Opens when "Create Account" is clicked in user menu
  • Validates email format, password strength, required fields
  • Confirms password matches with visual feedback
  • Displays error messages for validation failures
  • Prevents duplicate email registration
  • Closes and updates app state on successful signup
  • Has link to switch to login modal
  • Resets form when closed

Authentication State

  • User menu shows "Sign In" and "Create Account" when logged out
  • User menu shows username, "Dashboard", "Settings", and "Logout" when logged in
  • Authentication persists across page refreshes
  • Logout clears authentication state and redirects to home

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions