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 ( -
-
- 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 +