separate log in and sign up forms

Author: Aishwarya Nair

Frontend/src/Components/LoginSignUp/Login.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import './LoginSignUp.css'
+import {useState} from 'react'
+import { useNavigate } from "react-router-dom";
+
+import password_icon from '../Assets/password.png'
+import user_icon from '../Assets/user.png'
+
+import { loginUser } from '../../User/UserServiceAPI'
+import {resetUserPasswordUsingFirebase} from "../../Authentication/UserAuthenticationController"
+
+export const Login = ({setAction}) => {
+    const navigate = useNavigate();
+
+    const [action, setAction] = useState("Log In");
+
+    const [userEmail, setUserEmail] = useState("");
+    const [userPassword, setUserPassword] = useState("");
+
+
+  return (
+    <div>
+        <div className="inputs">
+            <div className="input">
+                <div className="input-container">
+                    <img src= {user_icon} alt="" />
+                    <input type="text" placeholder = "Email" onChange={(e) => {setUserEmail(e.target.value);}} value={userEmail}/>
+                </div>
+            </div>
+            <div className="input">
+                <div className="input-container">
+                    <img src= {password_icon} alt="" />
+                    <input type="password" placeholder = "Password"  onChange={(e) => {setUserPassword(e.target.value);}} value={userPassword}/>
+                </div>
+            </div>
+           
+        </div>
+        <div className="forgot-password"> Forgot Password? <span onClick={()=>resetUserPasswordUsingFirebase(userEmail)}> Click Here.</span></div>
+        <div className="submit-container">
+            <div className="submit"
+            onClick = {async () => {
+                const result = await loginUser(userEmail, userPassword)
+                if(result) {
+                    navigate("/landing");
+                }
+            }}>Log In</div>
+        </div>
+        <div className="signup-nav"> Don't have an account? <span onClick={()=>setAction("Sign Up")}> Sign Up.</span></div>
+    </div>
+    
+  )
+}
+
+

Frontend/src/Components/LoginSignUp/LoginSignUp.jsx

@@ -3,75 +3,22 @@ import './LoginSignUp.css'
 import {useState} from 'react'
 import { useNavigate } from "react-router-dom";
 
-import password_icon from '../Assets/password.png'
-import user_icon from '../Assets/user.png'
-
-import { registerUser, loginUser } from '../../User/UserServiceAPI'
-import {resetUserPasswordUsingFirebase} from "../../Authentication/UserAuthenticationController"
+import { Login } from './Login';
+import { SignUp } from './SignUp';
 
 export const LoginSignUp = () => {
-    const navigate = useNavigate();
-
+    
     const [action, setAction] = useState("Log In");
 
-    const [userEmail, setUserEmail] = useState("");
-    const [userPassword, setUserPassword] = useState("");
-    const [userName, setUserName] = useState("");
-    const [preferredLang, setPreferredLang] = useState("");
-
   return (
     <div className="container-login">
         <div className="header">
             <div className="text"> {action} </div>
             <div className="underline"></div>
         </div>
-        <div className="inputs">
-            <div className="input">
-                <div className="input-container">
-                    <img src= {user_icon} alt="" />
-                    <input type="text" placeholder = "Email" onChange={(e) => {setUserEmail(e.target.value);}} value={userEmail}/>
-                </div>
-            </div>
-            <div className="input">
-                <div className="input-container">
-                    <img src= {password_icon} alt="" />
-                    <input type="password" placeholder = "Password"  onChange={(e) => {setUserPassword(e.target.value);}} value={userPassword}/>
-                </div>
-            </div>
-            {action === "Sign Up"? 
-                <div className="input">
-                    <input type="text" placeholder = "Name" onChange={(e) => {setUserName(e.target.value);}} value={userName}/>
-                </div>:
-                <div></div>}
-            {action === "Sign Up"? 
-                <div className="input">
-                    <input type="text" placeholder = "Preferred programming language" onChange={(e) => {setPreferredLang(e.target.value);}} value={preferredLang}/>
-                </div>:
-                <div></div>}
-        </div>
-        {action === "Sign Up" ? <div></div>: <div className="forgot-password" onClick={()=>resetUserPasswordUsingFirebase(userEmail)}> Forgot Password? <span> Click Here.</span></div>}
-        <div className="submit-container">
-            <div className={action==="Sign Up"? "submit gray": "submit"} 
-            onClick = {async () => {
-                setAction("Log In")
-                const result = await loginUser(userEmail, userPassword)
-
-                if(result) {
-                    navigate("/landing");
-                }
-            }}>Log In</div>
-            <div className={action==="Log In"? "submit gray": "submit"} 
-            onClick = {async () => {
-                setAction("Sign Up")
-                const result = await registerUser(userName, userEmail, userPassword, "GitHub ID Placeholder", preferredLang)
-
-                if(result) {
-                    navigate("/landing");
-                }
-            }}>Sign Up</div>
-        </div>
+        {action === "Log In"? <Login setAction={setAction}/>: <SignUp setAction={setAction}/>}
+        
     </div>
-    
   )
 }
 

Frontend/src/Components/LoginSignUp/SignUp.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import './LoginSignUp.css'
+import {useState} from 'react'
+import { useNavigate } from "react-router-dom";
+
+import password_icon from '../Assets/password.png'
+import user_icon from '../Assets/user.png'
+
+import { registerUser } from '../../User/UserServiceAPI'
+
+
+export const SignUp = (setAction) => {
+    const navigate = useNavigate();
+
+    const [userEmail, setUserEmail] = useState("");
+    const [userPassword, setUserPassword] = useState("");
+    const [userName, setUserName] = useState("");
+    const [preferredLang, setPreferredLang] = useState("");
+
+  return (
+    <div>
+        <div className="inputs">
+            <div className="input">
+                <div className="input-container">
+                    <img src= {user_icon} alt="" />
+                    <input type="text" placeholder = "Email" onChange={(e) => {setUserEmail(e.target.value);}} value={userEmail}/>
+                </div>
+            </div>
+            <div className="input">
+                <div className="input-container">
+                    <img src= {password_icon} alt="" />
+                    <input type="password" placeholder = "Password"  onChange={(e) => {setUserPassword(e.target.value);}} value={userPassword}/>
+                </div>
+            </div>
+            <div className="input">
+                    <input type="text" placeholder = "Name" onChange={(e) => {setUserName(e.target.value);}} value={userName}/>
+            </div>
+            <div className="input">
+                    <input type="text" placeholder = "Preferred programming language" onChange={(e) => {setPreferredLang(e.target.value);}} value={preferredLang}/>
+            </div>
+        </div>
+        
+        <div className="submit-container">
+            <div className= "submit"
+            onClick = {async () => {
+                const result = await registerUser(userName, userEmail, userPassword, "GitHub ID Placeholder", preferredLang)
+
+                if(result) {
+                    navigate("/landing");
+                }
+            }}>Sign Up</div>
+        </div>
+        <div className="login-nav"> Already have an account? <span onClick={()=>setAction("Log In")}> Log In.</span></div>
+    </div>
+    
+  )
+}
+
+