Merge pull request #51 from nileshkr022/main

Password strength checker added at signup page
yazdanhaider · Oct 17, 2024 · fe6a104 · fe6a104
2 parents 4f017be + 7da688d
commit fe6a104
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
diff --git a/Frontend/package.json b/Frontend/package.json
@@ -23,6 +23,7 @@
     "react-datepicker": "^7.4.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-password-strength-bar": "^0.4.1",
     "react-router-dom": "^6.27.0",
     "styled-components": "^6.1.13"
   },

diff --git a/Frontend/src/components/SignUp.jsx b/Frontend/src/components/SignUp.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 import { FaUser, FaEnvelope, FaLock, FaPhoneAlt } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
+import PasswordStrengthBar from 'react-password-strength-bar'; // Importing PasswordStrengthBar
 
 const SignUp = () => {
     const [formData, setFormData] = useState({
@@ -88,6 +89,9 @@ const SignUp = () => {
                                 required
                             />
                         </div>
+
+                        {/* Password Strength Checker */}
+                        <PasswordStrengthBar password={formData.password} />
                     </div>
                     <div>
                         <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>

diff --git a/package-lock.json b/package-lock.json