google authentication done

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;
-  }
+.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 */
+}

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 (
-        <form autoComplete='off' onSubmit={handleSubmit} >
-            <div className="form-group my-2">
-                <input
-                    type="text"
-                    name="name"
-                    className="form-control my-3"
-                    placeholder="Name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                />
-            </div>
-
-            <div className="form-group my-2">
-                <input
-                    type="email"
-                    name="email"
-                    className="form-control my-3"
-                    placeholder="Email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                />
-            </div>
-
-            <div className="form-group my-2">
-                <input
-                    type="password"
-                    name="password"
-                    className="form-control my-3"
-                    placeholder="Password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                />
-            </div>
-            <div className="form-group my-2">
-                <input
-                    type="password"
-                    name="passwordConfirmation"
-                    className="form-control my-3 "
-                    placeholder="Re-type Password"
-                    value={passwordConfirmation}
-                    onChange={(e) => setPasswordConfirmation(e.target.value)}
-                />
-            </div>
-
-
-
-            <button type="submit" className='glow-on-hover'>Register</button>
-        </form>
-    )
-}
-
-export default RegisterForm
+  }, [success, navigate]);
+
+  return (
+    <form autoComplete='off'>
+      {/* Google Sign-In Button */}
+      <button type='button' onClick={handleGoogleSignIn} className='google-signin-btn'>
+        <span className='google-icon'>
+          {/* Add your Google icon here (you can use an SVG or an image) */}
+          <img
+
+ src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+
+ alt="Google Logo"
+
+/>
+        </span>
+        Sign in with Google
+      </button>
+    </form>
+  );
+};
+
+export default RegisterForm;

src/components/HomePageComponents/Navigation.jsx

@@ -44,15 +44,17 @@ const NavigationComponent = () => {
         ) : (
           <>
             <li className='nav-item'>
-              <Link className='login-btn' to='/login'>
-                Login
-              </Link>
-            </li>
-            <li className='nav-item'>
-              <Link className='register-btn' to='/register'>
-                Register
+              <Link className='login-btn' to='/Register'>
+                Sign In / Sign Up  <img
+
+//  src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+src="../../../public/assets/sign-in_icon.jpg"
+ alt="IIPS Logo"
+ width="70px"
+/>
               </Link>
             </li>
+
           </>
         )}
       </ul>

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;
+
 
-
+  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;
+}

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 = () => {
 
         <div className='register-form'>
           <RegisterForm />
-          <Link to="/login" className='register-login-link'>Already a member? Login</Link>
+
         </div>
       </div>
     </div>