administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-14 16:01:13 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(ui): Enhance password requirements: update minimum length to 12 characters and add checks for uppercase letters, digits, and special characters

Browse Source
This commit is contained in:
Alex Neo 2026-04-28 15:39:33 +03:00
parent 4171efcd79
commit 9ab9b8576c
3 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/public/locales/en/views/settings.json
View File

@ -899,7 +899,10 @@
},
"requirements": {
"title": "Password requirements:",
"length": "At least 12 characters"
"length": "At least 12 characters",
"uppercase": "At least one uppercase letter",
"digit": "At least one digit",
"special": "At least one special character (!@#$%^&*(),.?\":{}|<>)"
},
"match": "Passwords match",
"notMatch": "Passwords don't match"

44
web/src/components/overlay/SetPasswordDialog.tsx
View File

@ -354,24 +354,36 @@ export default function SetPasswordDialog({
{t("users.dialog.form.password.requirements.title")}
</p>
<ul className="space-y-1">
<li className="flex items-center gap-2 text-xs">
{requirements.length ? (
<LuCheck className="size-3.5 text-green-500" />
) : (
<LuX className="size-3.5 text-red-500" />
)}
<span
className={
requirements.length
? "text-green-600"
: "text-red-600"
}
{(
[
"length",
"uppercase",
"digit",
"special",
] as const
).map((req) => (
<li
key={req}
className="flex items-center gap-2 text-xs"
>
{t(
"users.dialog.form.password.requirements.length",
{requirements[req] ? (
<LuCheck className="size-3.5 text-green-500" />
) : (
<LuX className="size-3.5 text-red-500" />
)}
</span>
</li>
<span
className={
requirements[req]
? "text-green-600"
: "text-red-600"
}
>
{t(
`users.dialog.form.password.requirements.${req}`,
)}
</span>
</li>
))}
</ul>
</div>
</div>

5
web/src/utils/passwordUtil.ts
View File

@ -4,7 +4,7 @@ export const calculatePasswordStrength = (password: string): number => {
if (!password) return 0;
let strength = 0;
if (password.length >= 8) strength += 1;
if (password.length >= 12) strength += 1;
if (/\d/.test(password)) strength += 1;
if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength += 1;
if (/[A-Z]/.test(password)) strength += 1;
@ -14,6 +14,9 @@ export const calculatePasswordStrength = (password: string): number => {
export const getPasswordRequirements = (password: string) => ({
length: password?.length >= 12,
uppercase: /[A-Z]/.test(password),
digit: /\d/.test(password),
special: /[!@#$%^&*(),.?":{}|<>]/.test(password),
});
export const getPasswordStrengthLabel = (