[Component] Extract LoginModal into reusable component

(2 commentaires) (0 réaction) (1 personne assignée)JavaScript (35 forks)auto 404

GSSoC 25frontendgood first issuehelp wantedmediumrefractor

Métriques du dépôt

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!

Direction de recherche: Trouvez les composants modaux de connexion existants dans MoodMirror et CareerCrack, identifiez la logique partagée (Firebase Auth, champs de saisie, basculement du mot de passe), puis créez un nouveau LoginModal.jsx dans src/components/common/ et refactorez les deux applications pour l'importer et l'utiliser. Passez des props spécifiques à l'application comme title.
Stack technique: javascriptreactfirebase
Domaine: frontend
Type d'issue: Refactorisation
Difficulté: 2
Temps estimé: Une demi journée
Statut d'activité: Active
Clarté: Claire
Prérequis: JavaScriptReactGit
Accessibilité débutant: 80