diff --git a/frontend/package.json b/frontend/package.json index 0d68018..d2bb125 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -44,7 +44,8 @@ "remark-gfm": "^4.0.0", "socket.io-client": "^4.8.1", "stellar-sdk": "^12.2.0", - "zustand": "^5.0.12" + "zustand": "^5.0.12", + "zxcvbn": "^4.4.2" }, "devDependencies": { "@axe-core/cli": "^4.11.1", @@ -55,6 +56,7 @@ "@types/prismjs": "^1.26.5", "@types/react": "18.3.28", "@types/react-dom": "^18.3.7", + "@types/zxcvbn": "^4.4.5", "autoprefixer": "^10.4.19", "eslint": "^8.57.0", "eslint-config-next": "^14.2.5", diff --git a/frontend/src/components/RegistrationForm.tsx b/frontend/src/components/RegistrationForm.tsx index 6d2df3e..fa20e32 100644 --- a/frontend/src/components/RegistrationForm.tsx +++ b/frontend/src/components/RegistrationForm.tsx @@ -4,6 +4,7 @@ import { useState } from "react"; import { registerMerchant, type Merchant } from "../lib/auth"; import MaskedValue from "./MaskedValue"; import toast from "react-hot-toast"; +import zxcvbn from "zxcvbn"; import { useSetMerchantApiKey, useSetMerchantMetadata, @@ -14,6 +15,7 @@ export default function RegistrationForm() { const setApiKey = useSetMerchantApiKey(); const setMerchant = useSetMerchantMetadata(); const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); const [businessName, setBusinessName] = useState(""); const [notificationEmail, setNotificationEmail] = useState(""); const [loading, setLoading] = useState(false); @@ -138,6 +140,54 @@ export default function RegistrationForm() { /> +
+ {["Weak", "Fair", "Good", "Strong", "Strong"][zxcvbn(password).score]} +
+ )} +