chore: better logic for changing password in ui

src/admin/components/views/collections/Edit/Auth/index.tsx

@@ -18,17 +18,11 @@ const baseClass = 'auth-fields';
 const Auth: React.FC<Props> = (props) => {
   const { useAPIKey, requirePassword, verify, collection: { slug }, collection, email, operation } = props;
   const [changingPassword, setChangingPassword] = useState(requirePassword);
-  const { getField } = useWatchForm();
+  const { getField, dispatchFields } = useWatchForm();
   const modified = useFormModified();
 
   const enableAPIKey = getField('enableAPIKey');
 
-  useEffect(() => {
-    if (!modified) {
-      setChangingPassword(false);
-    }
-  }, [modified]);
-
   const {
     serverURL,
     routes: {
@@ -36,6 +30,15 @@ const Auth: React.FC<Props> = (props) => {
     },
   } = useConfig();
 
+  const handleChangePassword = useCallback(async (state: boolean) => {
+    if (!state) {
+      dispatchFields({ type: 'REMOVE', path: 'password' });
+      dispatchFields({ type: 'REMOVE', path: 'confirm-password' });
+    }
+
+    setChangingPassword(state);
+  }, [dispatchFields]);
+
   const unlock = useCallback(async () => {
     const url = `${serverURL}${api}/${slug}/unlock`;
     const response = await fetch(url, {
@@ -55,6 +58,12 @@ const Auth: React.FC<Props> = (props) => {
     }
   }, [serverURL, api, slug, email]);
 
+  useEffect(() => {
+    if (!modified) {
+      setChangingPassword(false);
+    }
+  }, [modified]);
+
   if (collection.auth.disableLocalStrategy) {
     return null;
   }
@@ -80,7 +89,7 @@ const Auth: React.FC<Props> = (props) => {
             <Button
               size="small"
               buttonStyle="secondary"
-              onClick={() => setChangingPassword(false)}
+              onClick={() => handleChangePassword(false)}
             >
               Cancel
             </Button>
@@ -91,7 +100,7 @@ const Auth: React.FC<Props> = (props) => {
         <Button
           size="small"
           buttonStyle="secondary"
-          onClick={() => setChangingPassword(true)}
+          onClick={() => handleChangePassword(true)}
         >
           Change Password
         </Button>