diff --git a/public/assets/sign-in_icon.jpg b/public/assets/sign-in_icon.jpg new file mode 100644 index 0000000..c66ae90 Binary files /dev/null and b/public/assets/sign-in_icon.jpg differ 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 ( -
- ) -} - -export default RegisterForm \ No newline at end of file + }, [success, navigate]); + + return ( + + ); +}; + +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 = () => { ) : ( <>