m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Refactor password validation (#16902)

Browse Source 
* ui: add common constant PASSWORD_MIN_LENGTH=8

* ui: simplify password validation logic

* ui: getPasswordStrengthLabel using t from context

Co-authored-by: Alex Donesky <adonesky@gmail.com>
This commit is contained in:
legobeat 2022-12-15 20:56:27 +00:00 committed by GitHub
parent 4ba081a096
commit 1acb1b2e5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/components/app/create-new-vault/create-new-vault.js
View File

@ -6,6 +6,7 @@ import Button from '../../ui/button';
import CheckBox from '../../ui/check-box';
import Typography from '../../ui/typography';
import SrpInput from '../srp-input';
import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common';
export default function CreateNewVault({
disabled = false,
@ -27,7 +28,7 @@ export default function CreateNewVault({
let newConfirmPasswordError = '';
let newPasswordError = '';
if (newPassword && newPassword.length < 8) {
if (newPassword && newPassword.length < PASSWORD_MIN_LENGTH) {
newPasswordError = t('passwordNotLongEnough');
}

1
ui/helpers/constants/common.js
View File

@ -23,3 +23,4 @@ _supportRequestLink =
export const SUPPORT_REQUEST_LINK = _supportRequestLink;
export const CONTRACT_ADDRESS_LINK = _contractAddressLink;
export const PASSWORD_MIN_LENGTH = 8;

68
ui/pages/onboarding-flow/create-password/create-password.js
View File

@ -26,6 +26,7 @@ import {
TwoStepProgressBar,
twoStepStages,
} from '../../../components/app/step-progress-bar';
import { PASSWORD_MIN_LENGTH } from '../../../helpers/constants/common';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
import { getFirstTimeFlowType } from '../../../selectors';
import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
@ -55,76 +56,66 @@ export default function CreatePassword({
return false;
}
if (password.length < 8) {
if (password.length < PASSWORD_MIN_LENGTH) {
return false;
}
return !passwordError && !confirmPasswordError;
}, [password, confirmPassword, passwordError, confirmPasswordError]);
const getPasswordStrengthLabel = (score, translation) => {
const getPasswordStrengthLabel = (isTooShort, score) => {
if (isTooShort) {
return {
className: 'create-password__weak',
text: t('passwordNotLongEnough'),
description: '',
};
}
if (score >= 4) {
return {
className: 'create-password__strong',
text: translation('strong'),
text: t('strong'),
description: '',
};
} else if (score === 3) {
}
if (score === 3) {
return {
className: 'create-password__average',
text: translation('average'),
text: t('average'),
description: t('passwordStrengthDescription'),
};
}
return {
className: 'create-password__weak',
text: translation('weak'),
text: t('weak'),
description: t('passwordStrengthDescription'),
};
};
const handlePasswordChange = (passwordInput) => {
let confirmError = '';
let passwordInputError = '';
const passwordEvaluation = zxcvbn(passwordInput);
const passwordStrengthLabel = getPasswordStrengthLabel(
passwordEvaluation.score,
t,
);
let passwordStrengthDescription = passwordStrengthLabel.description;
let passwordStrengthInput = t('passwordStrength', [
<span
key={passwordEvaluation.score}
className={passwordStrengthLabel.className}
>
const isTooShort =
passwordInput.length && passwordInput.length < PASSWORD_MIN_LENGTH;
const { score } = zxcvbn(passwordInput);
const passwordStrengthLabel = getPasswordStrengthLabel(isTooShort, score);
const passwordStrengthComponent = t('passwordStrength', [
<span key={score} className={passwordStrengthLabel.className}>
{passwordStrengthLabel.text}
</span>,
]);
if (passwordInput.length < 8) {
passwordInputError = passwordInput.length
? t('passwordNotLongEnough')
: '';
passwordStrengthInput = null;
passwordStrengthDescription = '';
}
if (confirmPassword && passwordInput !== confirmPassword) {
confirmError = t('passwordsDontMatch');
}
const confirmError =
!confirmPassword || passwordInput === confirmPassword
? ''
: t('passwordsDontMatch');
setPassword(passwordInput);
setPasswordError(passwordInputError);
setPasswordStrength(passwordStrengthInput);
setPasswordStrengthText(passwordStrengthDescription);
setPasswordStrength(passwordStrengthComponent);
setPasswordStrengthText(passwordStrengthLabel.description);
setConfirmPasswordError(confirmError);
};
const handleConfirmPasswordChange = (confirmPasswordInput) => {
let error = '';
if (password !== confirmPasswordInput) {
error = t('passwordsDontMatch');
}
const error =
password === confirmPasswordInput ? '' : t('passwordsDontMatch');
setConfirmPassword(confirmPasswordInput);
setConfirmPasswordError(error);
@ -185,7 +176,6 @@ export default function CreatePassword({
<FormField
dataTestId="create-password-new"
autoFocus
error={passwordError}
passwordStrength={passwordStrength}
passwordStrengthText={passwordStrengthText}
onChange={handlePasswordChange}