diff --git a/frontend/src/Pages/Register.jsx b/frontend/src/Pages/Register.jsx index 30b9018..3aa76af 100644 --- a/frontend/src/Pages/Register.jsx +++ b/frontend/src/Pages/Register.jsx @@ -1,182 +1,156 @@ -import React, { useState } from "react"; -import logo from "../assets/stationsaarthi.svg"; // Ensure the path is correct -import { useNavigate } from "react-router-dom"; -import backicon from "../assets/svg/backicon.svg"; -import { AiFillEye, AiFillEyeInvisible } from "react-icons/ai"; // Import the eye icons +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'; const Register = () => { - const navigate = useNavigate(); - const LoginClick = () => { - navigate("/Login"); // Navigates to the login page - }; - const HomeClick = () => { - navigate("/"); // Navigates to the home page - }; + const navigate = useNavigate(); + const LoginClick = () => navigate('/Login'); + const HomeClick = () => navigate('/'); - const [name, setName] = useState(""); - const [phoneNumber, setPhoneNumber] = useState(""); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [showPassword, setShowPassword] = useState(false); // State for password visibility + const [name, setName] = 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 handleRegister = (e) => { - e.preventDefault(); - // Handle registration logic here - }; + const handleRegister = (e) => { + e.preventDefault(); + setConfirmationMessage("Your account is created successfully. Please login to access the website."); + setName(''); + setPhoneNumber(''); + setEmail(''); + setPassword(''); + }; - return ( - <> -
- {/* Logo and Title */} -
- -
-
- Station Saarthi Logo -

Station Saarthi

-

- Your Trusted Platform Guide -

-
+ // Use effect to clear the confirmation message after 3 seconds + useEffect(() => { + if (confirmationMessage) { + const timer = setTimeout(() => setConfirmationMessage(''), 3000); + return () => clearTimeout(timer); + } + }, [confirmationMessage]); - {/* Registration Form */} -
- {/* Register Heading */} -

- Register -

+ // Function to check password strength + const checkPasswordStrength = (password) => { + if (password.length < 6) { + return "Weak"; + } else if (password.length >= 6 && /[A-Z]/.test(password) && /[0-9]/.test(password) && /[!@#$%^&*]/.test(password)) { + return "Strong"; + } else { + return "Moderate"; + } + }; - {/* Name Input */} -
- - setName(e.target.value)} - placeholder="Enter your name" - className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" - required - /> -
+ // Update password strength when password changes + useEffect(() => { + setPasswordStrength(checkPasswordStrength(password)); + }, [password]); - {/* Phone Number Input */} -
- - setPhoneNumber(e.target.value)} - placeholder="Enter your phone number" - pattern="\d{10}" - maxLength="10" - className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" - required - /> - {phoneNumber && phoneNumber.length !== 10 && ( -

- Please enter a valid 10-digit phone number. -

- )} -
+ return ( + <> +
+ {confirmationMessage && ( +
+ {confirmationMessage} +
+ )} + +
+ +
+
+ Station Saarthi Logo +

Station Saarthi

+

Your Trusted Platform Guide

+
- {/* Email Input */} -
- - setEmail(e.target.value)} - placeholder="Enter your email" - className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" - required - /> -
+ +

+ Register +

- {/* Password Input with Eye Icon */} -
- - setPassword(e.target.value)} - placeholder="Create a password" - className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" - required - /> - {/* Eye Icon to toggle password visibility */} - -
+
+ + setName(e.target.value)} + placeholder="Enter your name" + className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
- {/* Register Button */} - - +
+ + setPhoneNumber(e.target.value)} + placeholder="Enter your phone number" + pattern="\d{10}" + maxLength="10" + className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> + {phoneNumber && phoneNumber.length !== 10 && ( +

Please enter a valid 10-digit phone number.

+ )} +
- {/* Already have an account link */} -

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

-
- - ); +
+ + setEmail(e.target.value)} + placeholder="Enter your email" + className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +
+ +
+ + setPassword(e.target.value)} + placeholder="Create a password" + className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + required + /> +

+ {password && `Password strength: ${passwordStrength}`} +

+ {passwordStrength === "Weak" && ( +

Try using a longer password with uppercase letters, numbers, and symbols for a stronger password.

+ )} +
+ + + + +

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

+
+ + ); }; export default Register;