Merge pull request #502 from Ojas-Arora/test

Github Login
SUGAM-ARORA · Jul 19, 2024 · 842b4e1 · 842b4e1
2 parents fcb3235 + 9fcb054
commit 842b4e1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 22 deletions.
diff --git a/src/Components/Firebase/Firebase.js b/src/Components/Firebase/Firebase.js
@@ -23,11 +23,11 @@ const firebaseConfig = {
 const firebaseApp = initializeApp(firebaseConfig);
 const analytics = getAnalytics(firebaseApp);
 const db = getFirestore(firebaseApp);
-const auth = getAuth(firebaseApp);
 const googleProvider = new GoogleAuthProvider();
+const githubProvider = new GithubAuthProvider();
 const app = initializeApp(firebaseConfig);
-const provider = new GoogleAuthProvider();
+const auth= getAuth(app);
 
-export { auth, provider, signInWithPopup, googleProvider, GithubAuthProvider };
+export { auth, signInWithPopup, githubProvider, googleProvider, GithubAuthProvider };
 export { db, analytics, app };
 export default app;
diff --git a/src/Components/Login.css b/src/Components/Login.css
@@ -302,6 +302,9 @@ form.sign-in-form {
   height: 48px;
   font-weight: 600;
   font-size: 0.8rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .right-panel .image,
 .right-panel .content {

diff --git a/src/Components/Login.js b/src/Components/Login.js
@@ -4,8 +4,8 @@ import './Login.css';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import logImg from './Profile/log.svg';
 import registerImg from './Profile/register.svg';
-import homeIcon from './FreeLancer/homeicon.png'
-import { auth, googleProvider } from './Firebase/Firebase.js';
+import homeIcon from './FreeLancer/homeicon.png';
+import { auth, googleProvider, githubProvider } from './Firebase/Firebase.js';
 import { signInWithPopup } from "firebase/auth";
 
 const LogIn = () => {
@@ -14,29 +14,32 @@ const LogIn = () => {
   const [username, setUsername] = useState('');
   const [showPassword, setShowPassword] = useState(false);
   const [isSignUpMode, setIsSignUpMode] = useState(false);
-  const [user, setUser] = useState({
-    firstName: '',
-    lastname: '',
-    email: '',
-    password: '',
-    confirmPassword: '',
-  });
   const navigate = useNavigate();
 
   const handleGoogleSignIn = async () => {
     try {
       const result = await signInWithPopup(auth, googleProvider);
       const user = result.user;
-      const uid = user.uid;
       localStorage.setItem('user', JSON.stringify(user));
       console.log("Google sign-in success:", user);
-
       navigate("/");
     } catch (error) {
       console.error("Google sign-in error:", error);
     }
   };
 
+  const handleGitHubSignIn = async () => {
+    try {
+      const result = await signInWithPopup(auth, githubProvider);
+      const user = result.user;
+      localStorage.setItem('user', JSON.stringify(user));
+      console.log("GitHub sign-in success:", user);
+      navigate("/");
+    } catch (error) {
+      console.error("GitHub sign-in error:", error);
+    }
+  };
+
   const handleNextClick = async (e) => {
     e.preventDefault();
     const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
@@ -197,6 +200,9 @@ const LogIn = () => {
               <Link to="https://www.linkedin.com" className="social-icon">
                 <i className="fab fa-linkedin-in" style={{ color: 'darkturquoise' }}></i>
               </Link>
+              <div onClick={handleGitHubSignIn} className="social-icon">
+                <i className="fab fa-github" style={{ color: 'darkturquoise' }}></i>
+              </div>
             </div>
           </form>
 
@@ -218,8 +224,8 @@ const LogIn = () => {
             <div className="input-field">
               <i className="fas fa-envelope"></i>
               <input
-                type="email"
                 className='input'
+                type="email"
                 placeholder="Email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
@@ -228,6 +234,7 @@ const LogIn = () => {
             <div className="input-field">
               <i className="fas fa-lock"></i>
               <input
+                className='input'
                 type={showPassword ? 'text' : 'password'}
                 placeholder="Password"
                 value={password}
@@ -237,7 +244,7 @@ const LogIn = () => {
                 {showPassword ? <i className="fas fa-eye-slash"></i> : <i className="fas fa-eye"></i>}
               </button>
             </div>
-            <input type="submit" value="Sign Up" className="btn1 solid" />
+            <input type="submit" className="btn1" value="Sign Up" />
             <p className="social-text">Connect with Social Magic</p>
             <div className="social-media">
               <Link to="https://www.facebook.com" className="social-icon">
@@ -252,6 +259,9 @@ const LogIn = () => {
               <Link to="https://www.linkedin.com" className="social-icon">
                 <i className="fab fa-linkedin-in" style={{ color: 'darkturquoise' }}></i>
               </Link>
+              <div onClick={handleGitHubSignIn} className="social-icon">
+                <i className="fab fa-github" style={{ color: 'darkturquoise' }}></i>
+              </div>
             </div>
           </form>
         </div>
@@ -260,23 +270,23 @@ const LogIn = () => {
       <div className="panels-container">
         <div className="panel left-panel">
           <div className="content">
-            <h3>New here ?</h3>
-            <p>Join the UniCollab community to collaborate and innovate with fellow students.</p>
+            <h3>New here?</h3>
+            <p>Step into UniCollab with a social login or create a new account.</p>
             <button className="btn1 transparent" id="sign-up-btn" onClick={toggleSignUpMode}>
               Sign Up
             </button>
           </div>
-          <img src={logImg} className="image" alt="Sign in" />
+          <img src={logImg} className="image" alt="" />
         </div>
         <div className="panel right-panel">
           <div className="content">
-            <h3>One of us ?</h3>
-            <p>Welcome back! Log in to access your projects and collaborations.</p>
+            <h3>One of us?</h3>
+            <p>Sign in to continue your journey with UniCollab.</p>
             <button className="btn1 transparent" id="sign-in-btn" onClick={toggleSignUpMode}>
               Sign In
             </button>
           </div>
-          <img src={registerImg} className="image" alt="Sign up" />
+          <img src={registerImg} className="image" alt="" />
         </div>
       </div>
     </div>