+
+
+ setFocused(true)}
+ onBlur={() => setFocused(false)}
+ style={{
+ width: "100%",
+ padding: "10px 13px",
+ fontSize: "14px",
+ fontFamily: "'Outfit', sans-serif",
+ color: "#1e293b",
+ background: focused ? "#fff" : "#f8fafc",
+ border: focused ? "1.5px solid #1e3a8a" : "1.5px solid #e2e8f0",
+ borderRadius: "8px",
+ outline: "none",
+ boxSizing: "border-box",
+ transition: "border-color 0.18s, background 0.18s, box-shadow 0.18s",
+ boxShadow: focused ? "0 0 0 3px rgba(30,58,138,0.10)" : "none",
+ letterSpacing: "0.12em",
+ }}
+ onMouseEnter={(e) => { if (!focused) e.currentTarget.style.borderColor = "#94a3b8"; }}
+ onMouseLeave={(e) => { if (!focused) e.currentTarget.style.borderColor = "#e2e8f0"; }}
+ {...props}
+ />
+
+
+ {showStrength &&
}
+
+ );
+});
+
+export default PasswordInput;
\ No newline at end of file
diff --git a/components/passwordStrengthBar.tsx b/components/passwordStrengthBar.tsx
new file mode 100644
index 0000000..e1051c5
--- /dev/null
+++ b/components/passwordStrengthBar.tsx
@@ -0,0 +1,45 @@
+const strengthColors = ["#ef4444", "#f97316", "#eab308", "#3b82f6"];
+const strengthLabels = ["Weak", "Fair", "Good", "Strong"];
+
+const getStrength = (password: string): number => {
+ let score = 0;
+ if (password.length >= 8) score++;
+ if (/[A-Z]/.test(password)) score++;
+ if (/[0-9]/.test(password)) score++;
+ if (/[^A-Za-z0-9]/.test(password)) score++;
+
+ return score;
+};
+
+interface PasswordStrengthBarProps {
+ password: string;
+}
+
+const PasswordStrengthBar: React.FC