{"version":3,"file":"PasswordError.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/PasswordError.tsx"],"sourcesContent":["import { msg, plural } from '@lingui/core/macro';\nimport { useLingui } from '@lingui/react/macro';\nimport { BootstrapData } from '@stytch/core';\nimport React from 'react';\n\nimport Column from '../atoms/Column';\nimport Typography from '../atoms/Typography';\nimport VisuallyHidden from '../atoms/VisuallyHidden';\nimport styles from './PasswordError.module.css';\nimport type { PasswordInputProps } from './PasswordInput';\nimport { PasswordStrengthCheck } from './PasswordStrengthCheck';\n\n// This list of warnings and suggestions should be exhaustive, and is pulled from https://github.com/stytchauth/zxcvbn/blob/main/feedback/feedback.go\nconst warnings = {\n 'Short keyboard patterns are easy to guess.': msg({\n id: 'password.zxcvbn.warning.shortKeyboardPatterns',\n message: 'Short keyboard patterns are easy to guess.',\n }),\n 'Straight rows of keys are easy to guess.': msg({\n id: 'password.zxcvbn.warning.straightRows',\n message: 'Straight rows of keys are easy to guess.',\n }),\n 'Repeats like \"aaa\" are easy to guess.': msg({\n id: 'password.zxcvbn.warning.repeats',\n message: 'Repeats like \"aaa\" are easy to guess.',\n }),\n 'Repeats like \"abcabcabc\" are only slightly harder to guess than \"abc\".': msg({\n id: 'password.zxcvbn.warning.longerRepeats',\n message: 'Repeats like \"abcabcabc\" are only slightly harder to guess than \"abc\".',\n }),\n 'Sequences like \"abc\" or \"6543\" are easy to guess.': msg({\n id: 'password.zxcvbn.warning.sequences',\n message: 'Sequences like \"abc\" or \"6543\" are easy to guess.',\n }),\n 'Recent years are easy to guess.': msg({\n id: 'password.zxcvbn.warning.recentYears',\n message: 'Recent years are easy to guess.',\n }),\n 'Dates are often easy to guess.': msg({\n id: 'password.zxcvbn.warning.dates',\n message: 'Dates are often easy to guess.',\n }),\n 'This is a top-10 common password.': msg({\n id: 'password.zxcvbn.warning.top10CommonPassword',\n message: 'This is a top-10 common password.',\n }),\n 'This is a top-100 common password.': msg({\n id: 'password.zxcvbn.warning.top100CommonPassword',\n message: 'This is a top-100 common password.',\n }),\n 'This is a very common password.': msg({\n id: 'password.zxcvbn.warning.veryCommonPassword',\n message: 'This is a very common password.',\n }),\n 'This is similar to a commonly used password.': msg({\n id: 'password.zxcvbn.warning.similarToCommonPassword',\n message: 'This is similar to a commonly used password.',\n }),\n 'A word by itself is easy to guess.': msg({\n id: 'password.zxcvbn.warning.wordByItself',\n message: 'A word by itself is easy to guess.',\n }),\n 'Names and surnames by themselves are easy to guess.': msg({\n id: 'password.zxcvbn.warning.names',\n message: 'Names and surnames by themselves are easy to guess.',\n }),\n 'Common names and surnames are easy to guess.': msg({\n id: 'password.zxcvbn.warning.commonNames',\n message: 'Common names and surnames are easy to guess.',\n }),\n};\n\nconst suggestions = {\n 'Use a few words, avoid common phrases.': msg({\n id: 'password.zxcvbn.suggestion.useAFewWords',\n message: 'Use a few words, avoid common phrases.',\n }),\n 'No need for symbols, digits, or uppercase letters.': msg({\n id: 'password.zxcvbn.suggestion.noSymbolsDigitsUppercase',\n message: 'No need for symbols, digits, or uppercase letters.',\n }),\n 'Add another word or two. Uncommon words are better.': msg({\n id: 'password.zxcvbn.suggestion.addWords',\n message: 'Add another word or two. Uncommon words are better.',\n }),\n 'Use a longer keyboard pattern with more turns.': msg({\n id: 'password.zxcvbn.suggestion.longerKeyboardPattern',\n message: 'Use a longer keyboard pattern with more turns.',\n }),\n 'Avoid repeated words and characters.': msg({\n id: 'password.zxcvbn.suggestion.avoidRepeats',\n message: 'Avoid repeated words and characters.',\n }),\n 'Avoid sequences.': msg({\n id: 'password.zxcvbn.suggestion.avoidSequences',\n message: 'Avoid sequences.',\n }),\n 'Avoid recent years.': msg({\n id: 'password.zxcvbn.suggestion.avoidRecentYears',\n message: 'Avoid recent years.',\n }),\n 'Avoid years that are associated with you.': msg({\n id: 'password.zxcvbn.suggestion.avoidYearsAssociatedWithYou',\n message: 'Avoid years that are associated with you.',\n }),\n 'Avoid dates and years that are associated with you.': msg({\n id: 'password.zxcvbn.suggestion.avoidDatesAndYearsAssociatedWithYou',\n message: 'Avoid dates and years that are associated with you.',\n }),\n \"Capitalization doesn't help very much.\": msg({\n id: 'password.zxcvbn.suggestion.capitalization',\n message: \"Capitalization doesn't help very much.\",\n }),\n 'All-uppercase is almost as easy to guess as all-lowercase.': msg({\n id: 'password.zxcvbn.suggestion.allUppercase',\n message: 'All-uppercase is almost as easy to guess as all-lowercase.',\n }),\n \"Reversed words aren't much harder to guess.\": msg({\n id: 'password.zxcvbn.suggestion.reversed',\n message: \"Reversed words aren't much harder to guess.\",\n }),\n \"Predictable substitutions like '@' instead of 'a' don't help very much.\": msg({\n id: 'password.zxcvbn.suggestion.predictableSubstitutions',\n message: \"Predictable substitutions like '@' instead of 'a' don't help very much.\",\n }),\n};\n\nconst labels = {\n fulfilled: msg({ id: 'password.requirement.fulfilled', message: 'Fulfilled' }),\n notFulfilled: msg({ id: 'password.requirement.notFulfilled', message: 'Not fulfilled' }),\n warning: msg({ id: 'password.requirement.warning', message: 'Warning' }),\n suggestion: msg({ id: 'password.requirement.suggestion', message: 'Suggestion' }),\n} as const;\n\nconst CrossIcon = () => (\n \n);\nconst CheckIcon = () => (\n \n);\n\nexport type PasswordErrorProps =\n | {\n policy: 'zxcvbn';\n passwordInvalid: boolean;\n passwordScore: number;\n isPasswordBreached: boolean;\n // zxcvbn will return 0-1 warnings\n passwordWarning?: string;\n // zxcvbn will return 1-n suggestions\n passwordSuggestions: string[];\n }\n | {\n policy: 'luds';\n passwordInvalid: boolean;\n isPasswordBreached: boolean;\n missingCharacters: number;\n missingComplexity: number;\n }\n | { policy: 'notLoaded' };\n\nconst PasswordStrengthItem = ({ children, type }: { children: string; type: keyof typeof labels }) => {\n const { t } = useLingui();\n\n // notFulfilled and warning both have the same icon and color, they only differ in label\n const color =\n type === 'suggestion'\n ? undefined //\n : type === 'fulfilled'\n ? 'success'\n : 'destructive';\n\n const icon =\n type === 'suggestion' ? (\n \n ) : type === 'fulfilled' ? (\n \n ) : (\n \n );\n\n return (\n \n {icon}\n \n {t(labels[type])}: \n {children}\n \n \n );\n};\n\nexport const PasswordError = ({ bootstrap, ...props }: PasswordErrorProps & { bootstrap: BootstrapData }) => {\n const { t } = useLingui();\n const complexity = bootstrap.passwordConfig?.ludsComplexity ?? 0;\n const characterLength = bootstrap.passwordConfig?.ludsMinimumCount ?? 0;\n\n if (props.policy === 'notLoaded') {\n return null;\n }\n\n const { passwordInvalid, isPasswordBreached } = props;\n const passwordBreachedWarning = isPasswordBreached ? (\n \n {t({\n id: 'password.strengthError.breached',\n message:\n 'This password may have been used on a different site that experienced a security issue. Please choose another password.',\n })}\n \n ) : null;\n\n if (props.policy === 'zxcvbn') {\n const { passwordScore, passwordWarning, passwordSuggestions } = props;\n\n // The list of warnings and suggestions above should be exhaustive, but we'll fall back to the untranslated string just in case.\n const translatedWarning = passwordWarning\n ? (warnings[passwordWarning as keyof typeof warnings] ?? passwordWarning)\n : null;\n const uniqueSuggestions = [...new Set(passwordSuggestions)];\n const translatedSuggestions = uniqueSuggestions.map(\n (suggestion) => suggestions[suggestion as keyof typeof suggestions] ?? suggestion,\n );\n\n return (\n \n \n\n \n {passwordInvalid\n ? t({ id: 'password.strength.notAccepted', message: 'Password not accepted.' })\n : t({ id: 'password.strength.accepted', message: 'Password accepted.' })}\n \n\n