mirror of
https://github.com/ente-io/ente.git
synced 2025-07-03 05:56:17 +00:00
919f0e2b57
Didn't want to prefix with "--ente" since these are not "global" vars, they're only for a small scope, using the mechanism that Pigment CSS is recommending that we follow to introduce dynamism with static styling. "et" could mean "ente" (but shorter), or "ente temp", or whatever you wish for it to mean really.
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { Typography, useTheme } from "@mui/material";
|
|
import { t } from "i18next";
|
|
import React, { useMemo } from "react";
|
|
import { estimatePasswordStrength } from "../utils/password";
|
|
|
|
interface PasswordStrengthHintProps {
|
|
password: string;
|
|
}
|
|
|
|
export const PasswordStrengthHint: React.FC<PasswordStrengthHintProps> = ({
|
|
password,
|
|
}) => {
|
|
const passwordStrength = useMemo(
|
|
() => estimatePasswordStrength(password),
|
|
[password],
|
|
);
|
|
|
|
const theme = useTheme();
|
|
const color =
|
|
passwordStrength == "weak"
|
|
? theme.vars.palette.critical.main
|
|
: passwordStrength == "moderate"
|
|
? theme.vars.palette.warning.main
|
|
: theme.vars.palette.accent.main;
|
|
|
|
return (
|
|
<Typography
|
|
variant="small"
|
|
sx={{
|
|
mt: "8px",
|
|
alignSelf: "flex-start",
|
|
whiteSpace: "pre",
|
|
color: "var(--et-color)",
|
|
}}
|
|
style={{ "--et-color": color } as React.CSSProperties}
|
|
>
|
|
{password
|
|
? t("passphrase_strength", { context: passwordStrength })
|
|
: /* empty space + white-space: pre to prevent layout shift. */
|
|
" "}
|
|
</Typography>
|
|
);
|
|
};
|