Merge pull request #551 from Ojas-Arora/test

Adding Facebook Authentication
SUGAM-ARORA · Jul 24, 2024 · 0943a79 · 0943a79
2 parents 0cdff8b + 9a241c2
commit 0943a79
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 20 deletions.
diff --git a/src/App.js b/src/App.js
@@ -52,9 +52,22 @@ function App() {
         <GoToTop />
         <Footer />
         <ChatbotIcon />
-        <a href="/feedback" style={{ position: 'fixed', bottom: '20px', left: '30px',zIndex:'1000' }}>
-          <button style={{backgroundColor:'#ff21bc'}}>Help Us Improve!</button>
-        </a>
+        <a href="/feedback" style={{ position: 'fixed', bottom: '20px', left: '30px', zIndex: '1000' }}>
+  <button
+    style={{
+      backgroundColor: '#ff21bc',
+      fontSize: '17px', // Optional: sets text size
+      width: '180px',  // Adjust width as needed
+      height: '45px',  // Adjust height as needed
+      padding: '0',    // Reset padding if needed
+      border: 'none',  // Remove border if any
+      borderRadius: '5px', // Optional: adds rounded corners
+    }}
+  >
+    Help Us Improve!
+  </button>
+</a>
+
       </div>
     </>
   );

diff --git a/src/Components/Firebase/Firebase.js b/src/Components/Firebase/Firebase.js
@@ -2,7 +2,7 @@
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
 import { getFirestore } from "firebase/firestore";
-import { getAuth, GoogleAuthProvider, signInWithPopup, GithubAuthProvider, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
+import { getAuth, GoogleAuthProvider, GithubAuthProvider, FacebookAuthProvider, signInWithPopup, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
@@ -21,8 +21,9 @@ const analytics = getAnalytics(firebaseApp);
 const db = getFirestore(firebaseApp);
 const googleProvider = new GoogleAuthProvider();
 const githubProvider = new GithubAuthProvider();
+const facebookProvider = new FacebookAuthProvider();
 const auth = getAuth(firebaseApp);
 
-export { auth, signInWithPopup, githubProvider, googleProvider, GithubAuthProvider, RecaptchaVerifier, signInWithPhoneNumber };
+export { auth, signInWithPopup, githubProvider, googleProvider, facebookProvider, GithubAuthProvider, FacebookAuthProvider, RecaptchaVerifier, signInWithPhoneNumber };
 export { db, analytics, firebaseApp as app };
-export default firebaseApp;
+export default firebaseApp;
diff --git a/src/Components/Login.css b/src/Components/Login.css
@@ -289,9 +289,10 @@ form.sign-in-form {
 }
 
 .panel p {
-  font-size: 0.95rem;
+  font-size: 1.1rem;
   padding: 0.8rem 0;
   color: white;
+  font-family:Arial, Helvetica, sans-serif;
 }
 
 .btn.transparent {

diff --git a/src/Components/Login.js b/src/Components/Login.js
@@ -5,7 +5,7 @@ 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, githubProvider } from './Firebase/Firebase.js';
+import { auth, googleProvider, githubProvider, facebookProvider } from './Firebase/Firebase.js';
 import {
   signInWithPopup,
   signInWithEmailAndPassword,
@@ -49,7 +49,18 @@ const LogIn = () => {
       console.error('GitHub sign-in error:', error);
     }
   };
-
+  const handleFacebookSignIn = async () => {
+    try {
+      const result = await signInWithPopup(auth, facebookProvider);
+      const user = result.user;
+      localStorage.setItem('user', JSON.stringify(user));
+      console.log('Facebook sign-in success:', user);
+      navigate('/');
+    } catch (error) {
+      console.error('Facebook sign-in error:', error);
+    }
+  };
+
   const handleLogin = async (e) => {
     e.preventDefault();
     const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
@@ -243,9 +254,9 @@ const LogIn = () => {
             <input type="submit" value="Login" className="btn1 solid" />
             <p className="social-text">Connect with Social Magic</p>
             <div className="social-media">
-              <Link to="https://www.facebook.com" className="social-icon">
+              <div onClick={handleFacebookSignIn} className="social-icon">
                 <i className="fab fa-facebook-f" style={{ color: 'darkturquoise' }}></i>
-              </Link>
+              </div>
               <Link to="https://www.twitter.com" className="social-icon">
                 <i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
               </Link>
@@ -341,9 +352,9 @@ const LogIn = () => {
             <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">
+            <div onClick={handleFacebookSignIn} className="social-icon">
                 <i className="fab fa-facebook-f" style={{ color: 'darkturquoise' }}></i>
-              </Link>
+              </div>
               <Link to="https://www.twitter.com" className="social-icon">
                 <i className="fab fa-twitter" style={{ color: 'darkturquoise' }}></i>
               </Link>
@@ -372,9 +383,22 @@ const LogIn = () => {
               Join us today and start collaborating with students from
               universities worldwide!
             </p>
-            <button className="btn1 transparent" onClick={toggleSignUpMode}>
-              Sign Up
-            </button>
+            <button
+  className="btn1 transparent"
+  onClick={toggleSignUpMode}
+  style={{
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '30%', // Adjust width as needed
+    padding: '10px 20px', // Adjust padding as necessary
+    margin: '0 auto', // Center the button itself if it has a fixed width
+    fontSize: '14px', // Set text size to 14px
+  }}
+>
+  Sign Up
+</button>
+
           </div>
           <img src={logImg} className="image" alt="Log In" />
         </div>
@@ -385,9 +409,22 @@ const LogIn = () => {
               Log in to access your account and continue collaborating and
               innovating.
             </p>
-            <button className="btn1 transparent" onClick={toggleSignUpMode}>
-              Log In
-            </button>
+            <button
+  className="btn1 transparent"
+  onClick={toggleSignUpMode}
+  style={{
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '30%', // Ensure the button takes full width if needed
+    padding: '10px 20px', // Adjust padding as necessary
+    margin: '0 auto', // Center the button itself if it has a fixed width
+    fontSize: '14px', // Set text size to 14px
+  }}
+>
+  Log In
+</button>
+
           </div>
           <img src={registerImg} className="image" alt="Sign Up" />
         </div>

diff --git a/src/Components/footer_section/Pricing/pricing.js b/src/Components/footer_section/Pricing/pricing.js
@@ -3,12 +3,15 @@ import React from "react";
 import './pricing.css';
 import Arrow from '../../projects/arrow.png'
 import { Link } from "react-router-dom";
+import homeIcon from '../../../img/homeicon.png';
 
 function Pricing() {
     return (
         <div className="pricing">
             <div className="header">
-                <Link className='arrow' to="/"><img src={Arrow} alt="back" /></Link>
+            <Link to="/" className="home-link">
+              <img src={homeIcon} alt="Home" className="home-icon" />
+            </Link>
                 <div className="headingHeader">Start your 7 day free trial today</div>
                 <div className="description">Unlock Advanced Features and Maximize Your Potential with UniCollab Pro.</div>
             </div>