Fix login submit issue

webapp/src/components/common/Form/index.tsx

@@ -27,12 +27,18 @@ import SaveIcon from "@mui/icons-material/Save";
 import { useUpdateEffect } from "react-use";
 import * as R from "ramda";
 import clsx from "clsx";
-import { LoadingButton } from "@mui/lab";
+import { LoadingButton, LoadingButtonProps } from "@mui/lab";
 import UndoIcon from "@mui/icons-material/Undo";
 import RedoIcon from "@mui/icons-material/Redo";
+import axios from "axios";
 import useEnqueueErrorSnackbar from "../../../hooks/useEnqueueErrorSnackbar";
 import useDebounce from "../../../hooks/useDebounce";
-import { getDirtyValues, stringToPath, toAutoSubmitConfig } from "./utils";
+import {
+  ROOT_ERROR_KEY,
+  getDirtyValues,
+  stringToPath,
+  toAutoSubmitConfig,
+} from "./utils";
 import useDebouncedState from "../../../hooks/useDebouncedState";
 import usePrompt from "../../../hooks/usePrompt";
 import { mergeSxProp } from "../../../utils/muiUtils";
@@ -57,6 +63,7 @@ export interface FormProps<
     | ((formApi: UseFormReturnPlus<TFieldValues, TContext>) => React.ReactNode)
     | React.ReactNode;
   submitButtonText?: string;
+  submitButtonIcon?: LoadingButtonProps["startIcon"];
   hideSubmitButton?: boolean;
   onStateChange?: (state: FormState<TFieldValues>) => void;
   autoSubmit?: boolean | AutoSubmitConfig;
@@ -78,6 +85,7 @@ function Form<TFieldValues extends FieldValues, TContext>(
     onSubmitError,
     children,
     submitButtonText,
+    submitButtonIcon,
     hideSubmitButton,
     onStateChange,
     autoSubmit,
@@ -123,14 +131,17 @@ function Form<TFieldValues extends FieldValues, TContext>(
       : config?.defaultValues,
   });
 
-  const { getValues, setValue, handleSubmit, formState, reset } = formApi;
+  const { getValues, setValue, setError, handleSubmit, formState, reset } =
+    formApi;
   // * /!\ `formState` is a proxy
-  const { isSubmitting, isSubmitSuccessful, isDirty, dirtyFields } = formState;
+  const { isSubmitting, isSubmitSuccessful, isDirty, dirtyFields, errors } =
+    formState;
   // Don't add `isValid` because we need to trigger fields validation.
   // In case we have invalid default value for example.
   const isSubmitAllowed = isDirty && !isSubmitting;
   const showSubmitButton = !hideSubmitButton && !autoSubmitConfig.enable;
   const showFooter = showSubmitButton || enableUndoRedo;
+  const rootError = errors.root?.[ROOT_ERROR_KEY];
 
   const formApiPlus = useFormApiPlus({
     formApi,
@@ -240,8 +251,17 @@ function Form<TFieldValues extends FieldValues, TContext>(
       }
 
       return Promise.all(res)
-        .catch((error) => {
-          enqueueErrorSnackbar(t("form.submit.error"), error);
+        .catch((err) => {
+          enqueueErrorSnackbar(t("form.submit.error"), err);
+
+          // Any error under the `root` key are not persisted with each submission.
+          // They will be deleted automatically.
+          // cf. https://www.react-hook-form.com/api/useform/seterror/
+          setError(`root.${ROOT_ERROR_KEY}`, {
+            message: axios.isAxiosError(err)
+              ? err.response?.data.description
+              : err?.toString(),
+          });
         })
         .finally(() => {
           preventClose.current = false;
@@ -304,8 +324,13 @@ function Form<TFieldValues extends FieldValues, TContext>(
           <FormProvider {...formApiPlus}>{children}</FormProvider>
         )}
       </FormContext.Provider>
+      {rootError && (
+        <Box color="error.main" sx={{ fontSize: "0.9rem", mb: 2 }}>
+          {rootError.message || t("form.submit.error")}
+        </Box>
+      )}
       {showFooter && (
-        <Box sx={{ display: "flex" }}>
+        <Box sx={{ display: "flex" }} className="Form__Footer">
           {showSubmitButton && (
             <>
               <LoadingButton
@@ -314,7 +339,13 @@ function Form<TFieldValues extends FieldValues, TContext>(
                 disabled={!isSubmitAllowed}
                 loading={isSubmitting}
                 loadingPosition="start"
-                startIcon={<SaveIcon />}
+                startIcon={
+                  RA.isNotUndefined(submitButtonIcon) ? (
+                    submitButtonIcon
+                  ) : (
+                    <SaveIcon />
+                  )
+                }
               >
                 {submitButtonText || t("global.save")}
               </LoadingButton>

webapp/src/components/common/Form/useFormApiPlus.ts

@@ -184,9 +184,8 @@ function useFormApiPlus<TFieldValues extends FieldValues, TContext>(
 
   // `formState` is wrapped with a Proxy and updated in batch.
   // The API is updated here to keep reference, like `useForm` return.
-  useEffect(() => {
-    formApiPlus.formState = formState;
-  }, [formApiPlus, formState]);
+  // ! Don't used `useEffect`, because it's read before render.
+  formApiPlus.formState = formState;
 
   return formApiPlus;
 }

webapp/src/components/common/Form/utils.ts

@@ -57,3 +57,5 @@ export function stringToPath(input: string): string[] {
     .split(/\.|\[/)
     .filter(Boolean);
 }
+
+export const ROOT_ERROR_KEY = "default";

webapp/src/components/wrappers/LoginWrapper.tsx

@@ -1,7 +1,6 @@
-import { useState } from "react";
 import { Box, Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { LoadingButton } from "@mui/lab";
+import LoginIcon from "@mui/icons-material/Login";
 import { login } from "../../redux/ducks/auth";
 import logo from "../../assets/logo.png";
 import topRightBackground from "../../assets/top-right-background.png";
@@ -30,7 +29,6 @@ interface Props {
 
 function LoginWrapper(props: Props) {
   const { children } = props;
-  const [loginError, setLoginError] = useState("");
   const { t } = useTranslation();
   const user = useAppSelector(getAuthUser);
   const dispatch = useAppDispatch();
@@ -62,18 +60,8 @@ function LoginWrapper(props: Props) {
   // Event Handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleSubmit = async (data: SubmitHandlerPlus<FormValues>) => {
-    const { values } = data;
-
-    setLoginError("");
-
-    try {
-      await dispatch(login(values)).unwrap();
-    } catch (err) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      setLoginError((err as any).data?.message || t("login.error"));
-      throw err;
-    }
+  const handleSubmit = ({ values }: SubmitHandlerPlus<FormValues>) => {
+    return dispatch(login(values)).unwrap();
   };
 
   ////////////////////////////////////////////////////////////////
@@ -150,47 +138,43 @@ function LoginWrapper(props: Props) {
                   </Typography>
                 </Box>
                 <Box width="70%" my={2}>
-                  <Form onSubmit={handleSubmit} hideSubmitButton>
-                    {({ control, formState: { isDirty, isSubmitting } }) => (
+                  <Form
+                    onSubmit={handleSubmit}
+                    submitButtonText={t("global.connexion")}
+                    submitButtonIcon={<LoginIcon />}
+                    sx={{
+                      ".Form__Footer": {
+                        justifyContent: "center",
+                      },
+                    }}
+                  >
+                    {({ control }) => (
                       <>
                         <StringFE
                           name="username"
-                          sx={{ my: 3 }}
                           label="NNI"
                           variant="filled"
+                          size="small"
+                          sx={{ mb: 2 }}
                           fullWidth
                           control={control}
                           rules={{ required: t("form.field.required") }}
                         />
                         <PasswordFE
                           name="password"
-                          variant="filled"
                           label={t("global.password")}
-                          inputProps={{ autoComplete: "current-password" }}
+                          variant="filled"
+                          size="small"
+                          inputProps={{
+                            // https://web.dev/sign-in-form-best-practices/#current-password
+                            autoComplete: "current-password",
+                            id: "current-password",
+                          }}
+                          sx={{ mb: 3 }}
                           fullWidth
                           control={control}
                           rules={{ required: t("form.field.required") }}
                         />
-                        {loginError && (
-                          <Box
-                            mt={2}
-                            color="error.main"
-                            mb={4}
-                            sx={{ fontSize: "0.9rem" }}
-                          >
-                            {loginError}
-                          </Box>
-                        )}
-                        <Box display="flex" justifyContent="center" mt={6}>
-                          <LoadingButton
-                            type="submit"
-                            variant="contained"
-                            loading={isSubmitting}
-                            disabled={!isDirty || isSubmitting}
-                          >
-                            {t("global.connexion")}
-                          </LoadingButton>
-                        </Box>
                       </>
                     )}
                   </Form>