feat(signup): add password strength and breach check using HIBP API

- Implemented frontend password validation for minimum strength:
  - Requires 8+ characters with uppercase, lowercase, digit, and special character.
- Integrated haveibeenpwned (HIBP) k-anonymity API to detect breached passwords.
- Display appropriate error messages for weak or pwned passwords.
- Updated Message component to support "error" and "default" types with styling.
- Cleaned up SignupPage form UI and removed unused refs (e.g., roleElement).
- Created passwordUtils.js to isolate SHA-1 hashing and API call logic.
This commit is contained in:
K
2025-07-18 02:06:43 +05:30
parent 23a271fbce
commit aaf88fda56
3 changed files with 100 additions and 65 deletions
+11 -5
View File
@@ -1,12 +1,18 @@
import React from "react";
const Message = ({ message }) => {
const Message = ({ message, type = "error" }) => {
const date = new Date();
const background =
type === "error"
? "bg-red-100 border border-red-400 text-red-700"
: "bg-gray-100 border border-gray-300 text-gray-800";
return (
<div className="w-auto h-auto bg-gray-200 rounded-md text-start p-3 mx-4">
<p className="">{message}</p>
<p className="text-end text-sm ">
{date.getDate()}/{date.getMonth()}/{date.getFullYear()}{" "}
<div className={`rounded-md p-3 ${background}`}>
<p className="font-medium">{message}</p>
<p className="text-end text-sm text-gray-600">
{date.getDate()}/{date.getMonth() + 1}/{date.getFullYear()}{" "}
{date.toLocaleTimeString()}
</p>
</div>