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": { "requirements": {
"title": "Password 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", "match": "Passwords match",
"notMatch": "Passwords don't 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")} {t("users.dialog.form.password.requirements.title")}
</p> </p>
<ul className="space-y-1"> <ul className="space-y-1">
<li className="flex items-center gap-2 text-xs"> {(
{requirements.length ? ( [
<LuCheck className="size-3.5 text-green-500" /> "length",
) : ( "uppercase",
<LuX className="size-3.5 text-red-500" /> "digit",
)} "special",
<span ] as const
className={ ).map((req) => (
requirements.length <li
? "text-green-600" key={req}
: "text-red-600" className="flex items-center gap-2 text-xs"
}
> >
{t( {requirements[req] ? (
"users.dialog.form.password.requirements.length", <LuCheck className="size-3.5 text-green-500" />
) : (
<LuX className="size-3.5 text-red-500" />
)} )}
</span> <span
</li> className={
requirements[req]
? "text-green-600"
: "text-red-600"
}
>
{t(
`users.dialog.form.password.requirements.${req}`,
)}
</span>
</li>
))}
</ul> </ul>
</div> </div>
</div> </div>

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

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