Adding Facebook Authentication

SUGAM-ARORA · Jul 24, 2024 · 687efd0 · 687efd0
1 parent 4df104f
commit 687efd0
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 43 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/feedback/feedback.css b/src/Components/feedback/feedback.css
@@ -1,44 +1,53 @@
 .headingFeedback {
     font-size: 80px;
-    font-weight: 600;
+    font-family: Arial, Helvetica, sans-serif; /* Update font family */
     max-width: 1000px;
     width: 85vw;
     margin: auto;
     text-align: center;
     margin-bottom: 80px;
-    color: #ff21bc;
+    color: white;
     margin-top: 40px;
-    font-weight: bold;
+    font-weight: bold; /* Make text bold */
+    animation: fadeIn 1.5s ease-in-out forwards;
 }
 
 .formFeedback {
     width: 65vw;
     height: auto;
-    outline: 5px solid #ff21bc;
+    font-family: Arial, Helvetica, sans-serif; /* Update font family */
+    outline: 3px solid white;
     transition: 0.2s box-shadow ease-in-out;
     margin: auto;
-    box-shadow: 0px 0px 11px 4px #ff21bc;
+    box-shadow: 7px 7px 32px 20px #6052ff;
     margin-bottom: 100px;
     padding: 20px;
+    border-radius: 50px;
+    font-size: 22px;
+}
+
+.formforFeedback {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center the form elements */
+    gap: 30px;
+    font-family: Arial, Helvetica, sans-serif; /* Update font family */
 }
 
 .componentsFormFeedback {
     width: 90%;
     gap: 50px;
     display: flex;
     flex-direction: column;
+    align-items: center; /* Center the labels */
+    text-align: center; /* Center-align text */
     gap: 10px;
+    font-family: Arial, Helvetica, sans-serif; /* Update font family */
 }
 
 .componentsFormFeedback label {
     font-size: large;
-    font-weight: bold;
-}
-
-.formforFeedback {
-    display: flex;
-    flex-direction: column;
-    gap: 30px;
+    font-weight: bold; /* Make text bold */
 }
 
 .star-rating {
@@ -60,44 +69,81 @@
 }
 
 .star-rating input[type="radio"]:checked~label {
-    color: #ff5c5c;
+    color: #ff21bc;
 }
 
 .star-rating label:hover,
 .star-rating label:hover~label {
-    color: #ff5c5c;
+    color: #ff21bc;
 }
-#star5,#star4,#star3,#star2,#star1{
+
+#star5, #star4, #star3, #star2, #star1 {
     font-size: 120px;
 }
 
-#issue{
+#issue {
     background-color: #201d41;
     font-weight: 600;
+    font-size: 18px;
     height: 35px;
     text-align: center;
+    border: 1px solid #ccc;
+    border-bottom: 4px solid aliceblue;
 }
 
-#comments{
+#comments {
     min-height: 200px;
-    font-size: 18px;
+    font-size: 22px;
+    border: 1px solid #ccc;
+    border-bottom: 4px solid aliceblue;
+}
+
+#email {
+    border: 1px solid #ccc;
+    border-bottom: 4px solid aliceblue;
+}
+
+#nameFeedback {
+    border: 1px solid #ccc;
+    border-bottom: 4px solid aliceblue;
+}
+
+button {
+    background-color: #ff21bc; /* Set button color */
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    font-size: 22px; /* Match the form font size */
+    font-weight: bold; /* Make the button text bold */
+    font-family: Arial, Helvetica, sans-serif; /* Update font family */
+}
+
+button:hover {
+    background-color: #201d41; /* Change hover color */
 }
-@media only screen and (max-width:900px){
-    .formFeedback{
+
+@media only screen and (max-width: 900px) {
+    .formFeedback {
         width: 80vw;
     }
 }
-@media only screen and (max-width:750px) {
+
+@media only screen and (max-width: 750px) {
     .headingFeedback {
         font-size: 60px;
     }
 }
-@media only screen and (max-width:550px) {
+
+@media only screen and (max-width: 550px) {
     .headingFeedback {
         font-size: 50px;
     }
 }
-@media only screen and (max-width:450px) {
+
+@media only screen and (max-width: 450px) {
     .headingFeedback {
         font-size: 40px;
     }

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>