From 4ee6a5f103cc18f81cc904147959025df9e39912 Mon Sep 17 00:00:00 2001 From: Sania Date: Tue, 5 Nov 2024 11:32:05 +0530 Subject: [PATCH] Responsive sign-in and login with Google functions --- frontend/src/Pages/LoginPage.jsx | 18 +-- frontend/src/Pages/Register.jsx | 193 ++++++++++--------------------- 2 files changed, 69 insertions(+), 142 deletions(-) diff --git a/frontend/src/Pages/LoginPage.jsx b/frontend/src/Pages/LoginPage.jsx index 51c3662..1467c42 100644 --- a/frontend/src/Pages/LoginPage.jsx +++ b/frontend/src/Pages/LoginPage.jsx @@ -171,13 +171,17 @@ const Login = () => { {/* Google Login Button */} + type="button" + onClick="window.location.href='https://accounts.google.com'" // This triggers Google authentication + className="flex items-center justify-center w-full py-3 mt-4 font-semibold text-white transition duration-300 ease-in-out transform bg-red-500 rounded-lg hover:bg-red-600 hover:scale-105" + > + Google Icon + Sign in with Google + {/* Forgot Password Link */} diff --git a/frontend/src/Pages/Register.jsx b/frontend/src/Pages/Register.jsx index 3f78939..77d483e 100644 --- a/frontend/src/Pages/Register.jsx +++ b/frontend/src/Pages/Register.jsx @@ -2,40 +2,35 @@ import React, { useState, useEffect } from "react"; import logo from "../assets/stationsaarthi.svg"; import { useNavigate } from "react-router-dom"; import backicon from "../assets/svg/backicon.svg"; -import { GoogleLogin } from "@react-oauth/google"; -import { FaFacebook } from "react-icons/fa"; -import { jwtDecode } from "jwt-decode"; +import { FaFacebook, FaUser, FaPhone } from "react-icons/fa"; +import { MdAttachEmail, MdOutlinePassword } from "react-icons/md"; import { registerValidation } from "../validations/validation"; -import { FaUser , FaPhone } from "react-icons/fa"; -import { MdAttachEmail , MdOutlinePassword} from "react-icons/md"; +import jwtDecode from "jwt-decode"; const Register = () => { - - useEffect(() => { - document.title = 'Station Saarthi | Register'; - }, []); + useEffect(() => { + document.title = 'Station Saarthi | Register'; + }, []); const navigate = useNavigate(); const LoginClick = () => navigate("/Login"); const HomeClick = () => navigate("/"); - - const [username, setUserName] = useState(""); // Changed from name to username + const [username, setUserName] = useState(""); const [phoneNumber, setPhoneNumber] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [confirmationMessage, setConfirmationMessage] = useState(""); - const [passwordStrength, setPasswordStrength] = useState(""); // State for password strength feedback + const [passwordStrength, setPasswordStrength] = useState(""); const [errors, setErrors] = useState({}); - const [passwordVisible, setPasswordVisible] = useState(false); // State for password visibility - + const [passwordVisible, setPasswordVisible] = useState(false); const handleRegister = async (e) => { e.preventDefault(); try { await registerValidation.validate( - { username, password, phoneNumber, email }, // Updated validation call + { username, password, phoneNumber, email }, { abortEarly: false } ); setErrors({}); @@ -50,14 +45,14 @@ const Register = () => { try { const response = await fetch( - "http://localhost:3000/api/register", "https://stationguidebackend.onrender.com", + "https://stationguidebackend.onrender.com/api/register", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ - name: username, // Updated from name to username + name: username, phoneNumber: phoneNumber ? phoneNumber : "", email, password, @@ -73,7 +68,7 @@ const Register = () => { setConfirmationMessage( "Your account is created successfully. Please login to access the website." ); - setUserName(""); // Reset username + setUserName(""); setPhoneNumber(""); setEmail(""); setPassword(""); @@ -86,7 +81,6 @@ const Register = () => { } }; - // Use effect to clear the confirmation message after 3 seconds useEffect(() => { if (confirmationMessage) { const timer = setTimeout(() => setConfirmationMessage(""), 3000); @@ -94,7 +88,6 @@ const Register = () => { } }, [confirmationMessage]); - // Function to check password strength const checkPasswordStrength = (password) => { if (password.length < 6) { return "Weak"; @@ -110,76 +103,27 @@ const Register = () => { } }; - // Update password strength when password changes useEffect(() => { setPasswordStrength(checkPasswordStrength(password)); }, [password]); - // Handle Google success - const handleGoogleLoginSuccess = async (credentialResponse) => { - const token = credentialResponse.credential; - - // Decode the token to extract user information - const decoded = jwtDecode(token); - console.log("Decoded Google Token:", decoded); - - try { - const response = await fetch( - "https://stationguide.onrender.com/api/register", - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - name: decoded.name, - phoneNumber: phoneNumber ? phoneNumber : "", - email: decoded.email, - password: "", - isGoogle: true, - }), - } - ); - - const data = await response.json(); - - if (response.ok) { - setConfirmationMessage( - "Your account is created successfully. Please login to access the website." - ); - setUserName(""); // Reset username - setPhoneNumber(""); - setEmail(""); - setPassword(""); - } else { - setConfirmationMessage(`Error: ${data.error}`); - } - } catch (error) { - console.error("Error registering with Google:", error); - } - }; - - // Handle Google failure - const handleGoogleLoginFailure = () => { - console.log("Google Sign-In failed"); - }; - const togglePasswordVisibility = () => { - setPasswordVisible(!passwordVisible); // Toggle password visibility -}; + setPasswordVisible(!passwordVisible); + }; return ( <> -
+
{confirmationMessage && (
{confirmationMessage}
)} - + +
{
-
-
-
-
- @@ -319,26 +232,36 @@ const Register = () => {
- -
- -
- Already have an account?{" "}
+ +
+

+ Already have an account?{" "} + +

+
); }; -export default Register; \ No newline at end of file +export default Register;