From 638cc22e00ca5d0673168e1a0bceb1307cca6192 Mon Sep 17 00:00:00 2001 From: Sanyam Jain Date: Tue, 2 Jan 2024 15:31:24 +0530 Subject: [PATCH] google authentication done --- public/assets/sign-in_icon.jpg | Bin 0 -> 8168 bytes .../AuthComponents/RegisterForm.css | 33 +++-- .../AuthComponents/RegisterForm.jsx | 131 ++++++------------ .../HomePageComponents/Navigation.jsx | 16 ++- src/pages/AuthPages/Register/Register.css | 87 ++++++------ src/pages/AuthPages/Register/Register.jsx | 4 +- 6 files changed, 124 insertions(+), 147 deletions(-) create mode 100644 public/assets/sign-in_icon.jpg diff --git a/public/assets/sign-in_icon.jpg b/public/assets/sign-in_icon.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c66ae904daa8f00bf8e0d4021114b99d4898b162 GIT binary patch literal 8168 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 D;LgmG literal 0 HcmV?d00001 diff --git a/src/components/AuthComponents/RegisterForm.css b/src/components/AuthComponents/RegisterForm.css index 7ae8256..416acb8 100644 --- a/src/components/AuthComponents/RegisterForm.css +++ b/src/components/AuthComponents/RegisterForm.css @@ -1,12 +1,23 @@ -/* registerform.css */ +/* RegisterForm.css */ -.form-group { - margin-bottom: 15px; - } - - .form-control { - width: 100%; - padding: 10px; - border: 1px solid #ccc; - border-radius: 5px; - } \ No newline at end of file +.google-signin-btn { + background-color: rgb(204 244 255); + color: rgb(20 71 228); + padding: 15px 20px; /* Adjust padding for a larger button size */ + border: none; + border-radius: 10px; + cursor: pointer; + font-size: 30px; /* Increase font size */ + font-weight: bold; /* Make the text bold */ + display: flex; + align-items: center; /* Align items vertically in the center */ +} + +.google-signin-btn:hover { + background-color: black; /* Darker Google Blue on hover */ +} + +.google-icon img { + margin-right: 20px; /* Add some spacing between the text and the Google icon */ + width: 100px; /* Set a fixed width for the Google icon image */ +} diff --git a/src/components/AuthComponents/RegisterForm.jsx b/src/components/AuthComponents/RegisterForm.jsx index 0eeb846..41b274a 100644 --- a/src/components/AuthComponents/RegisterForm.jsx +++ b/src/components/AuthComponents/RegisterForm.jsx @@ -1,91 +1,52 @@ +// RegisterForm.jsx import React from 'react'; -import { useDispatch } from 'react-redux'; - -import { signUpUser } from '../../redux/actionCreators/authActionCreator'; import { useNavigate } from 'react-router-dom'; -import { toast } from 'react-toastify'; -import'./RegisterForm.css' -const RegisterForm = () => { - - const [name, setName] = React.useState("") - const [email, setEmail] = React.useState("") - const [password, setPassword] = React.useState("") - const [passwordConfirmation, setPasswordConfirmation] = React.useState("") - const [ success,setSuccess] = React.useState(false) -const dispatch = useDispatch() -const navigate = useNavigate() - -const handleSubmit = (e) =>{ +import firebase from 'firebase/compat/app'; +import 'firebase/compat/auth'; +import './RegisterForm.css'; - e.preventDefault(); - if(!name || !email || !password || !passwordConfirmation){ - toast.error("Please fill in all fields") - return; - - } - if(password !== passwordConfirmation){ - toast.error("Password do not match ") - return +const RegisterForm = () => { + const [success, setSuccess] = React.useState(false); + const navigate = useNavigate(); + + const handleGoogleSignIn = async () => { + try { + const provider = new firebase.auth.GoogleAuthProvider(); + const result = await firebase.auth().signInWithPopup(provider); + const user = result.user; + alert("Sign in successful"); + console.log('Google Sign-In Successful:', user); + // Redirect to the dashboard page + navigate('/dashboard'); + } catch (error) { + console.error('Google Sign-In Error:', error.message); } - dispatch(signUpUser(name,email,password,setSuccess));//we are sending to the redux; authActionCreator signup; -} + }; -React.useEffect(()=>{ - if(success){ - //jaise hi authActionCreator signup , success ko true kr dega then user will redirect to the dashboard page - navigate("/dashboard") + React.useEffect(() => { + if (success) { + navigate('/dashboard'); } -},[success]) - return ( -
-
- setName(e.target.value)} - /> -
- -
- setEmail(e.target.value)} - /> -
- -
- setPassword(e.target.value)} - /> -
-
- setPasswordConfirmation(e.target.value)} - /> -
- - - - -
- ) -} - -export default RegisterForm \ No newline at end of file + }, [success, navigate]); + + return ( +
+ {/* Google Sign-In Button */} + +
+ ); +}; + +export default RegisterForm; diff --git a/src/components/HomePageComponents/Navigation.jsx b/src/components/HomePageComponents/Navigation.jsx index 4f21ced..4769a48 100644 --- a/src/components/HomePageComponents/Navigation.jsx +++ b/src/components/HomePageComponents/Navigation.jsx @@ -44,15 +44,17 @@ const NavigationComponent = () => { ) : ( <>
  • - - Login - -
    • -
  • - - Register + + Sign In / Sign Up IIPS Logo
    • + )} diff --git a/src/pages/AuthPages/Register/Register.css b/src/pages/AuthPages/Register/Register.css index b321af3..25bbffa 100644 --- a/src/pages/AuthPages/Register/Register.css +++ b/src/pages/AuthPages/Register/Register.css @@ -1,46 +1,49 @@ /* Register.css */ body, html { - margin: 0; - padding: 0; - height: 100%; - font-size: 25px; /* Set a base font size for the entire page */ - } - - .register-container { - background: linear-gradient(to right, #373b44, #4286f4); /* Gradient background */ - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - } - - .register-content { - text-align: center; - } - - .register-heading { - background: linear-gradient(to right, #7eff7c, rgb(255, 255, 11)); /* Gradient text color */ - -webkit-background-clip: text; /* Clip the text to the background gradient */ - background-clip: text; /* Define the standard property for compatibility */ - color: transparent; - font-size: 3em; /* Adjust the font size for the heading */ - /* Add some spacing below the heading */ - font-weight: bolder; - padding-bottom: 30px; - } - - - .register-login-link { - background: linear-gradient(to right, #ff3232, #89b659); /* Gradient text color */ - -webkit-background-clip: text; /* Clip the text to the background gradient */ - background-clip: text; /* Define the standard property for compatibility */ - color: transparent; - font-size: 2em; /* Adjust the font size for the link */ - font-weight: bolder; - padding: 47px; - - } + margin: 0; + padding: 0; + height: 100%; + font-size: 25px; /* Set a base font size for the entire page */ +} + +.register-container { + background: linear-gradient(to right, #373b44, #4286f4); /* Gradient background */ + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} + +.register-content { + text-align: center; +} + +.register-heading { + background: linear-gradient(to right, #7eff7c, rgb(255, 255, 11)); /* Gradient text color */ + -webkit-background-clip: text; /* Clip the text to the background gradient */ + background-clip: text; /* Define the standard property for compatibility */ + color: transparent; + font-size: 4em; /* Adjust the font size for the heading */ + font-weight: bolder; + padding-bottom: 30px; + - \ No newline at end of file + position: relative; + +} + +.register-login-link { + background: linear-gradient(to right, #ff3232, #89b659); /* Gradient text color */ + -webkit-background-clip: text; /* Clip the text to the background gradient */ + background-clip: text; /* Define the standard property for compatibility */ + color: transparent; + font-size: 2em; /* Adjust the font size for the link */ + font-weight: bolder; + padding: 47px; +} + +.register-login-link:hover { + color: #fff; +} \ No newline at end of file diff --git a/src/pages/AuthPages/Register/Register.jsx b/src/pages/AuthPages/Register/Register.jsx index bae4338..099ede1 100644 --- a/src/pages/AuthPages/Register/Register.jsx +++ b/src/pages/AuthPages/Register/Register.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link } from 'react-router-dom'; + import RegisterForm from '../../../components/AuthComponents/RegisterForm'; import './Register.css'; // Import your styles @@ -11,7 +11,7 @@ const Register = () => {
    - Already a member? Login +