Chaim Lev-Ari
35 lines
942 B
TypeScript
35 lines
942 B
TypeScript
import { AlertTriangle, Check } from 'lucide-react';
|
|
|
|
import { usePublicSettings } from '@/react/portainer/settings/queries';
|
|
|
|
import { Icon } from '@@/Icon';
|
|
|
|
interface Props {
|
|
passwordValid: boolean;
|
|
forceChangePassword?: boolean;
|
|
}
|
|
|
|
export function PasswordCheckHint({
|
|
passwordValid,
|
|
forceChangePassword,
|
|
}: Props) {
|
|
const minPassLengthQuery = usePublicSettings({
|
|
select: (settings) => settings.RequiredPasswordLength,
|
|
});
|
|
const minPasswordLength = minPassLengthQuery.data;
|
|
|
|
return (
|
|
<div>
|
|
<p className="text-warning vertical-center">
|
|
<Icon icon={AlertTriangle} className="icon-warning" />
|
|
{forceChangePassword &&
|
|
'An administrator has changed your password requirements, '}
|
|
The password must be at least {minPasswordLength} characters long.
|
|
{passwordValid && (
|
|
<Icon icon={Check} className="!ml-1" mode="success" />
|
|
)}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|