Merge pull request #2545 from wardpieters/develop

fix: duplicate 2FA error messages

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import loginCheckpoint from '@/api/auth/loginCheckpoint';
-import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { ActionCreator } from 'easy-peasy';
 import { StaticContext } from 'react-router';
@@ -20,8 +19,7 @@ interface Values {
 type OwnProps = RouteComponentProps<Record<string, string | undefined>, StaticContext, { token?: string }>
 
 type Props = OwnProps & {
-    addError: ActionCreator<FlashStore['addError']['payload']>;
+    clearAndAddHttpError: ActionCreator<FlashStore['clearAndAddHttpError']['payload']>;
-    clearFlashes: ActionCreator<FlashStore['clearFlashes']['payload']>;
 }
 
 const LoginCheckpointContainer = () => {
@@ -79,9 +77,7 @@ const LoginCheckpointContainer = () => {
 };
 
 const EnhancedForm = withFormik<Props, Values>({
-    handleSubmit: ({ code, recoveryCode }, { setSubmitting, props: { addError, clearFlashes, location } }) => {
+    handleSubmit: ({ code, recoveryCode }, { setSubmitting, props: { clearAndAddHttpError, location } }) => {
-        clearFlashes();
-
         loginCheckpoint(location.state?.token || '', code, recoveryCode)
             .then(response => {
                 if (response.complete) {
@@ -95,7 +91,7 @@ const EnhancedForm = withFormik<Props, Values>({
             .catch(error => {
                 console.error(error);
                 setSubmitting(false);
-                addError({ message: httpErrorToHuman(error) });
+                clearAndAddHttpError({ error: error });
             });
     },
 
@@ -106,7 +102,7 @@ const EnhancedForm = withFormik<Props, Values>({
 })(LoginCheckpointContainer);
 
 export default ({ history, location, ...props }: OwnProps) => {
-    const { addError, clearFlashes } = useFlash();
+    const { clearAndAddHttpError } = useFlash();
 
     if (!location.state?.token) {
         history.replace('/auth/login');
@@ -115,8 +111,7 @@ export default ({ history, location, ...props }: OwnProps) => {
     }
 
     return <EnhancedForm
-        addError={addError}
+        clearAndAddHttpError={clearAndAddHttpError}
-        clearFlashes={clearFlashes}
         history={history}
         location={location}
         {...props}

resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx

@@ -7,7 +7,6 @@ import { object, string } from 'yup';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import disableAccountTwoFactor from '@/api/account/disableAccountTwoFactor';
-import { httpErrorToHuman } from '@/api/http';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 
@@ -16,11 +15,10 @@ interface Values {
 }
 
 export default ({ ...props }: RequiredModalProps) => {
-    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
 
     const submit = ({ password }: Values, { setSubmitting }: FormikHelpers<Values>) => {
-        clearFlashes('account:two-factor');
         disableAccountTwoFactor(password)
             .then(() => {
                 updateUserData({ useTotp: false });
@@ -29,7 +27,7 @@ export default ({ ...props }: RequiredModalProps) => {
             .catch(error => {
                 console.error(error);
 
-                addError({ message: httpErrorToHuman(error), key: 'account:two-factor' });
+                clearAndAddHttpError({ error: error, key: 'account:two-factor' });
                 setSubmitting(false);
             });
     };

resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx

@@ -6,7 +6,6 @@ import getTwoFactorTokenUrl from '@/api/account/getTwoFactorTokenUrl';
 import enableAccountTwoFactor from '@/api/account/enableAccountTwoFactor';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
-import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import Field from '@/components/elements/Field';
 import tw from 'twin.macro';
@@ -22,20 +21,18 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
     const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
 
     const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
-    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     useEffect(() => {
-        clearFlashes('account:two-factor');
         getTwoFactorTokenUrl()
             .then(setToken)
             .catch(error => {
                 console.error(error);
-                addError({ message: httpErrorToHuman(error), key: 'account:two-factor' });
+                clearAndAddHttpError({ error: error, key: 'account:two-factor' });
             });
     }, []);
 
     const submit = ({ code }: Values, { setSubmitting }: FormikHelpers<Values>) => {
-        clearFlashes('account:two-factor');
         enableAccountTwoFactor(code)
             .then(tokens => {
                 setRecoveryTokens(tokens);
@@ -43,7 +40,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
             .catch(error => {
                 console.error(error);
 
-                addError({ message: httpErrorToHuman(error), key: 'account:two-factor' });
+                clearAndAddHttpError({ error: error, key: 'account:two-factor' });
             })
             .then(() => setSubmitting(false));
     };