fix: fix the interaction issue with password modification.

unisat-wallet · Aug 5, 2023 · 41642d7 · 41642d7
1 parent 0847e8b
commit 41642d7
Showing 1 changed file with 27 additions and 46 deletions.
diff --git a/src/ui/pages/Settings/ChangePasswordScreen.tsx b/src/ui/pages/Settings/ChangePasswordScreen.tsx
@@ -12,57 +12,24 @@ type Status = '' | 'error' | 'warning' | undefined;
 export default function ChangePasswordScreen() {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const [passwordC, setPasswordC] = useState('');
-  const [password, setPassword] = useState('');
-  const [password2, setPassword2] = useState('');
-  const [statusC, setStatusC] = useState<Status>('');
-  const [status1, setStatus1] = useState<Status>('');
-  const [status2, setStatus2] = useState<Status>('');
+  const [originPassword, setOriginPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
   const [disabled, setDisabled] = useState(true);
   const wallet = useWallet();
   const tools = useTools();
 
   useEffect(() => {
-    setDisabled(true);
-    if (password) {
-      if (password.length < 6) {
-        tools.toastWarning('at least five characters');
-        setStatus1('error');
-        return;
-      }
-
-      setStatus1('');
-
-      if (password !== password2) {
-        tools.toastWarning('Entered passwords differ');
-        setStatus2('error');
-        return;
-      }
-      setStatus2('');
-
-      if (passwordC) {
-        setDisabled(false);
-      }
+    if (originPassword.length > 0 && newPassword.length >= 5 && newPassword === confirmPassword) {
+      setDisabled(false);
+    } else {
+      setDisabled(true);
     }
-  }, [passwordC, password, password2]);
-
-  const handleOnBlur = (e, type: string) => {
-    switch (type) {
-      case 'password':
-        setPassword(e.target.value);
-        break;
-      case 'password2':
-        setPassword2(e.target.value);
-        break;
-      case 'passwordC':
-        setPasswordC(e.target.value);
-        break;
-    }
-  };
+  }, [originPassword, newPassword, confirmPassword]);
 
   const verify = async () => {
     try {
-      await wallet.changePassword(passwordC, password);
+      await wallet.changePassword(originPassword, newPassword);
       tools.toastSuccess('Success');
       navigate('MainScreen');
     } catch (err) {
@@ -82,23 +49,37 @@ export default function ChangePasswordScreen() {
           <Input
             preset="password"
             placeholder="Current Password"
-            onBlur={(e) => {
-              handleOnBlur(e, 'passwordC');
+            onChange={(e) => {
+              setOriginPassword(e.target.value);
             }}
             autoFocus={true}
           />
           <Input
             preset="password"
             placeholder="New Password"
             onBlur={(e) => {
-              handleOnBlur(e, 'password');
+              if (newPassword.length < 5) {
+                tools.toastWarning('at least five characters');
+                return;
+              }
+              if (newPassword.length > 0 && confirmPassword.length > 0 && newPassword !== confirmPassword) {
+                tools.toastWarning('Entered passwords differ');
+              }
+            }}
+            onChange={(e) => {
+              setNewPassword(e.target.value);
             }}
           />
           <Input
             preset="password"
             placeholder="Confirm Password"
             onBlur={(e) => {
-              handleOnBlur(e, 'password2');
+              if (newPassword.length > 0 && confirmPassword.length > 0 && newPassword !== confirmPassword) {
+                tools.toastWarning('Entered passwords differ');
+              }
+            }}
+            onChange={(e) => {
+              setConfirmPassword(e.target.value);
             }}
           />
           <Button