ayush585/edgex

[Component] Extract LoginModal into reusable component

Open

#5 opened on Jul 28, 2025

View on GitHubContributor guide
 (2 comments) (0 reactions) (1 assignee)JavaScript (35 forks)auto 404
GSSoC 25frontendgood first issuehelp wantedmediumrefractor

Repository metrics

Stars
 (14 stars)
PR merge metrics
 (PR metrics pending)

Description

Currently, both MoodMirror and CareerCrack use similar but separate login/signup modals. This creates duplicate code that makes maintenance harder.

Let's follow the DRY (Don't Repeat Yourself) principle and:

✅ Your Task: Create a shared LoginModal.jsx component (put it inside src/components/common/ or a similar shared folder)

Move the current logic (Firebase Auth, input fields, toggle password, etc.) into that shared component

Replace the old modals in both MoodMirror and CareerCrack with this new reusable one

🔥 Important Notes: Firebase Auth will still work in the new component Just import it from your existing firebase.js setup:

js Copy Edit import { auth } from '../../firebase'; Feel free to pass props if each app needs minor changes (e.g. title="Welcome to MoodMirror")

🏁 Result: Cleaner, reusable code that’s easier to update and extend for future features like OAuth or validation!

Contributor guide

Research direction
Find the existing login modal components in MoodMirror and CareerCrack, identify the shared logic (Firebase Auth, input fields, toggle password), then create a new LoginModal.jsx in src/components/common/ and refactor both apps to import and use it. Pass any app specific props like title.
Tech stack
javascriptreactfirebase
Domain
frontend
Issue type
Refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScriptReactGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80