diff --git a/packages/page-accounts/src/Accounts/modals/ChangePass.tsx b/packages/page-accounts/src/Accounts/modals/ChangePass.tsx index 3417a6b61c..a48211826e 100644 --- a/packages/page-accounts/src/Accounts/modals/ChangePass.tsx +++ b/packages/page-accounts/src/Accounts/modals/ChangePass.tsx @@ -15,8 +15,8 @@ interface Props { } interface NewPass { - isNewValid: boolean; - newPass: string; + isValid: boolean; + password: string; } interface OldPass { @@ -26,15 +26,22 @@ interface OldPass { function ChangePass ({ address, className = '', onClose }: Props): React.ReactElement { const { t } = useTranslation(); - const [{ isNewValid, newPass }, setNewPass] = useState({ isNewValid: false, newPass: '' }); + const [newPass1, setNewPass1] = useState({ isValid: false, password: '' }); + const [newPass2, setNewPass2] = useState({ isValid: false, password: '' }); const [{ isOldValid, oldPass }, setOldPass] = useState({ isOldValid: false, oldPass: '' }); - const _onChangeNew = useCallback( - (newPass: string) => - setNewPass({ isNewValid: keyring.isPassValid(newPass), newPass }), + const _onChangeNew1 = useCallback( + (password: string) => + setNewPass1({ isValid: keyring.isPassValid(password), password }), [] ); + const _onChangeNew2 = useCallback( + (password: string) => + setNewPass2({ isValid: keyring.isPassValid(password) && (newPass1.password === password), password }), + [newPass1] + ); + const _onChangeOld = useCallback( (oldPass: string) => setOldPass({ isOldValid: keyring.isPassValid(oldPass), oldPass }), @@ -62,16 +69,16 @@ function ChangePass ({ address, className = '', onClose }: Props): React.ReactEl } try { - keyring.encryptAccount(account, newPass); + keyring.encryptAccount(account, newPass1.password); } catch (error) { - setNewPass((state: NewPass) => ({ ...state, isNewValid: false })); + setNewPass2((state: NewPass) => ({ ...state, isValid: false })); return; } onClose(); }, - [address, newPass, oldPass, onClose] + [address, newPass1, oldPass, onClose] ); return ( @@ -97,12 +104,21 @@ function ChangePass ({ address, className = '', onClose }: Props): React.ReactEl /> ('The new account password. Once set, all future account unlocks will be performed with this new password.')} - isError={!isNewValid} + isError={!newPass1.isValid} label={t('your new password')} - onChange={_onChangeNew} + onChange={_onChangeNew1} onEnter={_doChange} tabIndex={2} - value={newPass} + value={newPass1.password} + /> + ('Verify the password entered above.')} + isError={!newPass2.isValid} + label={t('password (repeat)')} + onChange={_onChangeNew2} + onEnter={_doChange} + tabIndex={2} + value={newPass2.password} /> @@ -110,7 +126,7 @@ function ChangePass ({ address, className = '', onClose }: Props): React.ReactEl