Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Facebook Authentication #551

Merged
merged 2 commits into from
Jul 24, 2024
Merged

Adding Facebook Authentication #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
687efd0
Adding Facebook Authentication
Ojas-Arora Jul 24, 2024
9a241c2
Facebook Authentication
Ojas-Arora Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
Expand Down
7 changes: 4 additions & 3 deletions src/Components/Firebase/Firebase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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;
3 changes: 2 additions & 1 deletion src/Components/Login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
61 changes: 49 additions & 12 deletions src/Components/Login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}$/;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
5 changes: 4 additions & 1 deletion src/Components/footer_section/Pricing/pricing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down