Skip to content

Commit

Permalink
Merge branch 'SUGAM-ARORA:main' into 533/Footer-Responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@AkshitGarg24
AkshitGarg24 authored Jul 24, 2024
2 parents 3bb9d5f + ec54905 commit f1a9e2c
Show file tree
Hide file tree
Showing 4 changed files with 296 additions and 40 deletions.
15 changes: 5 additions & 10 deletions src/Components/Firebase/Firebase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,9 @@
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider, signInWithPopup, GithubAuthProvider } from "firebase/auth";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { getAuth, GoogleAuthProvider, signInWithPopup, GithubAuthProvider, RecaptchaVerifier, signInWithPhoneNumber } from "firebase/auth";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyBijC8S9eqfsv6FJ4-XfCJswmn9cxYqj80",
authDomain: "unicollab-38f58.firebaseapp.com",
Expand All @@ -25,9 +21,8 @@ const analytics = getAnalytics(firebaseApp);
const db = getFirestore(firebaseApp);
const googleProvider = new GoogleAuthProvider();
const githubProvider = new GithubAuthProvider();
const app = initializeApp(firebaseConfig);
const auth= getAuth(app);
const auth = getAuth(firebaseApp);

export { auth, signInWithPopup, githubProvider, googleProvider, GithubAuthProvider };
export { db, analytics, app };
export default app;
export { auth, signInWithPopup, githubProvider, googleProvider, GithubAuthProvider, RecaptchaVerifier, signInWithPhoneNumber };
export { db, analytics, firebaseApp as app };
export default firebaseApp;
188 changes: 159 additions & 29 deletions src/Components/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,35 @@ 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 { signInWithPopup, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth";
import {
signInWithPopup,
signInWithEmailAndPassword,
createUserWithEmailAndPassword,
RecaptchaVerifier,
signInWithPhoneNumber,
} from 'firebase/auth';

const LogIn = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [username, setUsername] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [isSignUpMode, setIsSignUpMode] = useState(false);
const [showPhoneAuth, setShowPhoneAuth] = useState(false);
const [phoneNumber, setPhoneNumber] = useState('');
const [otp, setOtp] = useState('');
const [verificationId, setVerificationId] = useState(null);
const navigate = useNavigate();

const handleGoogleSignIn = async () => {
try {
const result = await signInWithPopup(auth, googleProvider);
const user = result.user;
localStorage.setItem('user', JSON.stringify(user));
console.log("Google sign-in success:", user);
navigate("/");
console.log('Google sign-in success:', user);
navigate('/');
} catch (error) {
console.error("Google sign-in error:", error);
console.error('Google sign-in error:', error);
}
};

Expand All @@ -33,10 +43,10 @@ const LogIn = () => {
const result = await signInWithPopup(auth, githubProvider);
const user = result.user;
localStorage.setItem('user', JSON.stringify(user));
console.log("GitHub sign-in success:", user);
navigate("/");
console.log('GitHub sign-in success:', user);
navigate('/');
} catch (error) {
console.error("GitHub sign-in error:", error);
console.error('GitHub sign-in error:', error);
}
};

Expand All @@ -57,7 +67,11 @@ const LogIn = () => {

if (valid) {
try {
const userCredential = await signInWithEmailAndPassword(auth, email, password);
const userCredential = await signInWithEmailAndPassword(
auth,
email,
password
);
const user = userCredential.user;
console.log('Login successful:', user);
localStorage.setItem('user', JSON.stringify(user));
Expand Down Expand Up @@ -95,7 +109,11 @@ const LogIn = () => {

if (valid) {
try {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
const userCredential = await createUserWithEmailAndPassword(
auth,
email,
password
);
const user = userCredential.user;
console.log('Signup successful:', user);
displayAlert('Signed up. Now login');
Expand All @@ -115,6 +133,10 @@ const LogIn = () => {
clearErrors();
};

const togglePhoneAuth = () => {
setShowPhoneAuth(!showPhoneAuth);
};

const displayAlert = (message) => {
alert(message);
};
Expand All @@ -125,6 +147,58 @@ const LogIn = () => {
setUsername('');
};

const handlePhoneSignIn = async () => {
try {
if (!window.recaptchaVerifier) {
window.recaptchaVerifier = new RecaptchaVerifier(
'recaptcha-container',
{
size: 'invisible',
callback: (response) => {
console.log('Recaptcha verified');
},
},
auth
);
}

const appVerifier = window.recaptchaVerifier;

if (!phoneNumber.startsWith('+')) {
displayAlert('Please include country code in phone number.');
return;
}

const confirmationResult = await signInWithPhoneNumber(
auth,
phoneNumber,
appVerifier
);
setVerificationId(confirmationResult);
console.log('SMS sent.');
displayAlert('OTP sent. Please check your phone.');
} catch (error) {
console.error('Error during phone sign-in:', error);
displayAlert('Failed to send OTP. Please try again.');
}
};

const verifyOtp = async () => {
try {
if (verificationId) {
const result = await verificationId.confirm(otp);
const user = result.user;
localStorage.setItem('user', JSON.stringify(user));
console.log('Phone sign-in success:', user);
displayAlert('Phone verification successful!');
navigate('/');
}
} catch (error) {
console.error('Error verifying OTP:', error);
displayAlert('Invalid OTP. Please try again.');
}
};

return (
<div className={`container1 ${isSignUpMode ? 'sign-up-mode' : ''}`}>
<div className="forms-container">
Expand All @@ -134,11 +208,11 @@ const LogIn = () => {
<img src={homeIcon} alt="Home" className="home-icon" />
</Link>
<h2 className="title">Step into UniCollab! Log In</h2>

<div className="input-field">
<i className="fas fa-user"></i>
<input
className='input'
className="input"
type="email"
placeholder="Email"
value={email}
Expand All @@ -148,14 +222,22 @@ const LogIn = () => {
<div className="input-field">
<i className="fas fa-lock"></i>
<input
className='input'
className="input"
type={showPassword ? 'text' : 'password'}
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="button" className="toggle-password" onClick={togglePasswordVisibility}>
{showPassword ? <i className="fas fa-eye-slash"></i> : <i className="fas fa-eye"></i>}
<button
type="button"
className="toggle-password"
onClick={togglePasswordVisibility}
>
{showPassword ? (
<i className="fas fa-eye-slash"></i>
) : (
<i className="fas fa-eye"></i>
)}
</button>
</div>
<input type="submit" value="Login" className="btn1 solid" />
Expand All @@ -176,18 +258,51 @@ const LogIn = () => {
<div onClick={handleGitHubSignIn} className="social-icon">
<i className="fab fa-github" style={{ color: 'darkturquoise' }}></i>
</div>
<div onClick={togglePhoneAuth} className="social-icon">
<i className="fas fa-phone" style={{ color: 'darkturquoise' }}></i>
</div>
</div>

{showPhoneAuth && (
<div className="phone-auth-section">
<div className="input-field">
<i className="fas fa-phone"></i>
<input
type="tel"
placeholder="Phone Number"
value={phoneNumber}
onChange={(e) => setPhoneNumber(e.target.value)}
/>
</div>
<button type="button" className="btn1 solid" onClick={handlePhoneSignIn}>
Send OTP
</button>
<div className="input-field">
<i className="fas fa-key"></i>
<input
type="text"
placeholder="Enter OTP"
value={otp}
onChange={(e) => setOtp(e.target.value)}
/>
</div>
<button type="button" className="btn1 solid" onClick={verifyOtp}>
Verify OTP
</button>
<div id="recaptcha-container"></div>
</div>
)}
</form>

<form className="sign-up-form" onSubmit={handleSignUp}>
<h2 className="title">Start Journey with UniCollab</h2>
<Link to="/" className="home-link">
<img src={homeIcon} alt="Home" className="home-icon" />
</Link>
<h2 className="title">Sign Up for UniCollab</h2>

<div className="input-field">
<i className="fas fa-user"></i>
<input
className='input'
type="text"
placeholder="Username"
value={username}
Expand All @@ -197,7 +312,6 @@ const LogIn = () => {
<div className="input-field">
<i className="fas fa-envelope"></i>
<input
className='input'
type="email"
placeholder="Email"
value={email}
Expand All @@ -207,14 +321,21 @@ const LogIn = () => {
<div className="input-field">
<i className="fas fa-lock"></i>
<input
className='input'
type={showPassword ? 'text' : 'password'}
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="button" className="toggle-password" onClick={togglePasswordVisibility}>
{showPassword ? <i className="fas fa-eye-slash"></i> : <i className="fas fa-eye"></i>}
<button
type="button"
className="toggle-password"
onClick={togglePasswordVisibility}
>
{showPassword ? (
<i className="fas fa-eye-slash"></i>
) : (
<i className="fas fa-eye"></i>
)}
</button>
</div>
<input type="submit" className="btn1" value="Sign Up" />
Expand All @@ -235,6 +356,9 @@ const LogIn = () => {
<div onClick={handleGitHubSignIn} className="social-icon">
<i className="fab fa-github" style={{ color: 'darkturquoise' }}></i>
</div>
<div onClick={togglePhoneAuth} className="social-icon">
<i className="fas fa-phone" style={{ color: 'darkturquoise' }}></i>
</div>
</div>
</form>
</div>
Expand All @@ -243,23 +367,29 @@ const LogIn = () => {
<div className="panels-container">
<div className="panel left-panel">
<div className="content">
<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}>
<h3>New to UniCollab?</h3>
<p>
Join us today and start collaborating with students from
universities worldwide!
</p>
<button className="btn1 transparent" onClick={toggleSignUpMode}>
Sign Up
</button>
</div>
<img src={logImg} className="image" alt="" />
<img src={logImg} className="image" alt="Log In" />
</div>
<div className="panel right-panel">
<div className="content">
<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
<h3>One of Us?</h3>
<p>
Log in to access your account and continue collaborating and
innovating.
</p>
<button className="btn1 transparent" onClick={toggleSignUpMode}>
Log In
</button>
</div>
<img src={registerImg} className="image" alt="" />
<img src={registerImg} className="image" alt="Sign Up" />
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit f1a9e2c

Please sign in to comment.