Remove password visibility indicators (#2903)

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<Props> {
   const { t } = useTranslation();
-  const [{ isNewValid, newPass }, setNewPass] = useState<NewPass>({ isNewValid: false, newPass: '' });
+  const [newPass1, setNewPass1] = useState<NewPass>({ isValid: false, password: '' });
+  const [newPass2, setNewPass2] = useState<NewPass>({ isValid: false, password: '' });
   const [{ isOldValid, oldPass }, setOldPass] = useState<OldPass>({ 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
             />
             <Password
               help={t<string>('The new account password. Once set, all future account unlocks will be performed with this new password.')}
-              isError={!isNewValid}
+              isError={!newPass1.isValid}
               label={t<string>('your new password')}
-              onChange={_onChangeNew}
+              onChange={_onChangeNew1}
               onEnter={_doChange}
               tabIndex={2}
-              value={newPass}
+              value={newPass1.password}
+            />
+            <Password
+              help={t<string>('Verify the password entered above.')}
+              isError={!newPass2.isValid}
+              label={t<string>('password (repeat)')}
+              onChange={_onChangeNew2}
+              onEnter={_doChange}
+              tabIndex={2}
+              value={newPass2.password}
             />
           </div>
         </AddressRow>
@@ -110,7 +126,7 @@ function ChangePass ({ address, className = '', onClose }: Props): React.ReactEl
       <Modal.Actions onCancel={onClose}>
         <Button
           icon='sign-in'
-          isDisabled={!isNewValid || !isOldValid}
+          isDisabled={!newPass1.isValid || !newPass2.isValid || !isOldValid}
           isPrimary
           label={t<string>('Change')}
           onClick={_doChange}

packages/react-components/src/Password.tsx

@@ -6,9 +6,9 @@ import { BareProps } from './types';
 
 import React from 'react';
 import { MAX_PASS_LEN } from '@polkadot/ui-keyring/defaults';
-import { useToggle } from '@polkadot/react-hooks';
+// import { useToggle } from '@polkadot/react-hooks';
 
-import Button from './Button';
+// import Button from './Button';
 import Input from './Input';
 
 interface Props extends BareProps {
@@ -31,7 +31,7 @@ interface Props extends BareProps {
 }
 
 function Password ({ autoFocus, children, className = '', defaultValue, help, isDisabled, isError, isFull, label, labelExtra, name, onChange, onEnter, onEscape, tabIndex, value, withLabel }: Props): React.ReactElement<Props> {
-  const [isVisible, toggleVisible] = useToggle();
+  // const [isVisible, toggleVisible] = useToggle();
 
   return (
     <Input
@@ -39,7 +39,6 @@ function Password ({ autoFocus, children, className = '', defaultValue, help, is
       className={`ui--Password ${className}`}
       defaultValue={defaultValue}
       help={help}
-      isAction
       isDisabled={isDisabled}
       isError={isError}
       isFull={isFull}
@@ -51,22 +50,23 @@ function Password ({ autoFocus, children, className = '', defaultValue, help, is
       onEnter={onEnter}
       onEscape={onEscape}
       tabIndex={tabIndex}
-      type={
-        isVisible
-          ? 'text'
-          : 'password'
-      }
+      // type={
+      //   isVisible
+      //     ? 'text'
+      //     : 'password'
+      // }
+      type='password'
       value={value}
       withLabel={withLabel}
     >
-      <Button
+      {/* <Button
         icon={
           isVisible
             ? 'hide'
             : 'unhide'
         }
         onClick={toggleVisible}
-      />
+      /> */}
       {children}
     </Input>
   );