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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user