Password Validation Added

Imperial79 · May 21, 2024 · 9612b05 · 9612b05
1 parent 8c9bdd9
commit 9612b05
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 29 deletions.
diff --git a/frontend/src/Screens/Authentication/Register.jsx b/frontend/src/Screens/Authentication/Register.jsx
@@ -7,10 +7,14 @@ import { Context } from "../../context/ContextProvider";
 
 export const Register = () => {
   const { showAlert, userID } = useContext(Context);
-
+  const passwordRegex =
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [passwordValid, setPasswordValid] = useState(false);
+  const [showPasswordRequirements, setShowPasswordRequirements] =
+    useState(false);
   const [latitude, setLatitude] = useState("");
   const [longitude, setLongitude] = useState("");
   const [city, setCity] = useState("");
@@ -24,6 +28,17 @@ export const Register = () => {
   if (userID) {
     navigate("/");
   }
+  const handlePasswordChange = (e) => {
+    const passwordValue = e.target.value;
+    setPassword(passwordValue);
+    setPasswordValid(passwordRegex.test(passwordValue));
+  };
+  const showPasswordRequirementsPopup = () => {
+    setShowPasswordRequirements(true);
+    setTimeout(() => {
+      setShowPasswordRequirements(false);
+    }, 3000);
+  };
   const { coords, isGeolocationAvailable, isGeolocationEnabled } =
     useGeolocated({
       positionOptions: {
@@ -234,23 +249,23 @@ export const Register = () => {
                 <label htmlFor="otp" className="block font-semibold mb-1">
                   OTP
                 </label>
-              <div className="flex items-center">
-                <input
-                  type="text"
-                  id="otp"
-                  value={otp}
-                  onChange={(e) => setOtp(e.target.value)}
-                  className="textfield w-3/4 p-1 mr-2"
-                  placeholder="Enter OTP"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={handleOTPVerification}
-                  className="kTextButton"
-                >
-                  Verify OTP
-                </button>
+                <div className="flex items-center">
+                  <input
+                    type="text"
+                    id="otp"
+                    value={otp}
+                    onChange={(e) => setOtp(e.target.value)}
+                    className="textfield w-3/4 p-1 mr-2"
+                    placeholder="Enter OTP"
+                    required
+                  />
+                  <button
+                    type="button"
+                    onClick={handleOTPVerification}
+                    className="kTextButton"
+                  >
+                    Verify OTP
+                  </button>
                 </div>
               </div>
             )}
@@ -262,11 +277,24 @@ export const Register = () => {
                 type="password"
                 id="password"
                 value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="textfield"
+                onChange={handlePasswordChange}
+                onFocus={showPasswordRequirementsPopup}
+                className={`textfield ${
+                  passwordValid
+                    ? "border-solid border-2 border-green-600"
+                    : "border-solid border-2 border-red-600"
+                }`}
                 placeholder="Your password here ..."
                 required
               />
+              <div
+                className={`password-requirements-popup ${
+                  showPasswordRequirements ? "show" : ""
+                }`}
+              >
+                At least 8 characters, one uppercase letter, one lowercase
+                letter, one digit, and one special character
+              </div>
             </div>
             {/* list of locality */}
             {/* {addressList &&
@@ -318,8 +346,10 @@ export const Register = () => {
             >
               Get My Location
             </button>
-            <button type="submit" className="kButton w-full"
-            disabled={!emailVerified}
+            <button
+              type="submit"
+              className="kButton w-full"
+              disabled={!emailVerified || !passwordValid}
             >
               Create Account
             </button>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -7,10 +7,10 @@
   padding: 0;
 }
 
-.kButton{
+.kButton {
   @apply bg-blue-700 text-white py-2 px-4 rounded-full hover:bg-blue-900 select-none;
 }
-.kTextButton{
+.kTextButton {
   @apply text-blue-700 font-medium underline-offset-4 hover:underline select-none;
 }
 
@@ -26,17 +26,34 @@
   @apply bg-blue-700 text-white font-medium hover:bg-blue-700;
 }
 
-.menu{
+.menu {
   @apply bg-gray-50 shadow-xl fixed top-20 p-2 right-5 rounded-lg flex flex-col gap-2 w-[150px] md:hidden;
 }
-.menuBtn{
+.menuBtn {
   @apply flex gap-3 py-2 px-3 hover:bg-gray-200 transition-all rounded-xl items-center truncate;
 }
 
-.textfield{
+.textfield {
   @apply bg-white border-2 w-full p-2;
 }
 
-.circleAvatar{
+.circleAvatar {
   @apply h-10 w-10 rounded-full overflow-hidden;
-}
+}
+
+.password-requirements-popup {
+  position: absolute;
+  top: 348px;
+  left: 49%;
+  transform: translateX(3%);
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.password-requirements-popup.show {
+  opacity: 1;
+}