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

change password requirements

Browse Source
This commit is contained in:
Josh Hawkins
2026-01-31 14:31:51 -06:00
parent 8b426743c2
commit a8cccaaf1c
6 changed files with 29 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/public/locales/en/views/settings.json
+1 -4
View File
@@ -728,10 +728,7 @@
},
"requirements": {
"title": "Password requirements:",
"length": "At least 8 characters",
"uppercase": "At least one uppercase letter",
"digit": "At least one digit",
"special": "At least one special character (!@#$%^&*(),.?\":{}|<>)"
"length": "At least 12 characters"
},
"match": "Passwords match",
"notMatch": "Passwords don't match"
web/src/components/overlay/CreateUserDialog.tsx
+2 -62
View File
@@ -85,13 +85,7 @@ export default function CreateUserDialog({
}),
password: z
.string()
.min(8, t("users.dialog.form.password.requirements.length"))
.regex(/[A-Z]/, t("users.dialog.form.password.requirements.uppercase"))
.regex(/\d/, t("users.dialog.form.password.requirements.digit"))
.regex(
/[!@#$%^&*(),.?":{}|<>]/,
t("users.dialog.form.password.requirements.special"),
),
.min(12, t("users.dialog.form.password.requirements.length")),
confirmPassword: z
.string()
.min(1, t("users.dialog.createUser.confirmPassword")),
@@ -263,7 +257,7 @@ export default function CreateUserDialog({
className={`${getPasswordStrengthColor(
password,
)} transition-all duration-300`}
style={{ width: `${(passwordStrength / 4) * 100}%` }}
style={{ width: `${passwordStrength * 100}%` }}
/>
</div>
<p className="text-xs text-muted-foreground">
@@ -296,60 +290,6 @@ export default function CreateUserDialog({
)}
</span>
</li>
<li className="flex items-center gap-2 text-xs">
{requirements.uppercase ? (
<LuCheck className="size-3.5 text-green-500" />
) : (
<LuX className="size-3.5 text-red-500" />
)}
<span
className={
requirements.uppercase
? "text-green-600"
: "text-red-600"
}
>
{t(
"users.dialog.form.password.requirements.uppercase",
)}
</span>
</li>
<li className="flex items-center gap-2 text-xs">
{requirements.digit ? (
<LuCheck className="size-3.5 text-green-500" />
) : (
<LuX className="size-3.5 text-red-500" />
)}
<span
className={
requirements.digit
? "text-green-600"
: "text-red-600"
}
>
{t(
"users.dialog.form.password.requirements.digit",
)}
</span>
</li>
<li className="flex items-center gap-2 text-xs">
{requirements.special ? (
<LuCheck className="size-3.5 text-green-500" />
) : (
<LuX className="size-3.5 text-red-500" />
)}
<span
className={
requirements.special
? "text-green-600"
: "text-red-600"
}
>
{t(
"users.dialog.form.password.requirements.special",
)}
</span>
</li>
</ul>
</div>
</div>
web/src/components/overlay/SetPasswordDialog.tsx
+2 -62
View File
@@ -76,13 +76,7 @@ export default function SetPasswordDialog({
const baseSchema = {
password: z
.string()
.min(8, t("users.dialog.form.password.requirements.length"))
.regex(/[A-Z]/, t("users.dialog.form.password.requirements.uppercase"))
.regex(/\d/, t("users.dialog.form.password.requirements.digit"))
.regex(
/[!@#$%^&*(),.?":{}|<>]/,
t("users.dialog.form.password.requirements.special"),
),
.min(12, t("users.dialog.form.password.requirements.length")),
confirmPassword: z.string(),
};
@@ -345,7 +339,7 @@ export default function SetPasswordDialog({
className={`${getPasswordStrengthColor(
password,
)} transition-all duration-300`}
style={{ width: `${(passwordStrength / 4) * 100}%` }}
style={{ width: `${passwordStrength * 100}%` }}
/>
</div>
<p className="text-xs text-muted-foreground">
@@ -378,60 +372,6 @@ export default function SetPasswordDialog({
)}
</span>
</li>
<li className="flex items-center gap-2 text-xs">
{requirements.uppercase ? (
<LuCheck className="size-3.5 text-green-500" />
) : (
<LuX className="size-3.5 text-red-500" />
)}
<span
className={
requirements.uppercase
? "text-green-600"
: "text-red-600"
}
>
{t(
"users.dialog.form.password.requirements.uppercase",
)}
</span>
</li>
<li className="flex items-center gap-2 text-xs">
{requirements.digit ? (
<LuCheck className="size-3.5 text-green-500" />
) : (
<LuX className="size-3.5 text-red-500" />
)}
<span
className={
requirements.digit
? "text-green-600"
: "text-red-600"
}
>
{t(
"users.dialog.form.password.requirements.digit",
)}
</span>
</li>
<li className="flex items-center gap-2 text-xs">
{requirements.special ? (
<LuCheck className="size-3.5 text-green-500" />
) : (
<LuX className="size-3.5 text-red-500" />
)}
<span
className={
requirements.special
? "text-green-600"
: "text-red-600"
}
>
{t(
"users.dialog.form.password.requirements.special",
)}
</span>
</li>
</ul>
</div>
</div>
web/src/utils/passwordUtil.ts
+4 -11
View File
@@ -11,10 +11,7 @@ export const calculatePasswordStrength = (password: string): number => {
};
export const getPasswordRequirements = (password: string) => ({
length: password?.length >= 8,
uppercase: /[A-Z]/.test(password || ""),
digit: /\d/.test(password || ""),
special: /[!@#$%^&*(),.?":{}|<>]/.test(password || ""),
length: password?.length >= 12,
});
export const getPasswordStrengthLabel = (
@@ -24,9 +21,7 @@ export const getPasswordStrengthLabel = (
const strength = calculatePasswordStrength(password);
if (!password) return "";
if (strength <= 1) return t("users.dialog.form.password.strength.weak");
if (strength === 2) return t("users.dialog.form.password.strength.medium");
if (strength === 3) return t("users.dialog.form.password.strength.strong");
if (strength < 1) return t("users.dialog.form.password.strength.weak");
return t("users.dialog.form.password.strength.veryStrong");
};
@@ -34,8 +29,6 @@ export const getPasswordStrengthColor = (password: string): string => {
const strength = calculatePasswordStrength(password);
if (!password) return "bg-gray-200";
if (strength <= 1) return "bg-red-500";
if (strength === 2) return "bg-yellow-500";
if (strength === 3) return "bg-green-500";
return "bg-green-600";
if (strength === 0) return "bg-red-500";
return "bg-green-500";
};