feat: inline login form error and unify Alert font weight

packages/web/src/components/LoginForm/index.jsx

@@ -11,16 +11,19 @@ import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCreateAccessToken from 'hooks/useCreateAccessToken';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import { Alert } from '@mui/material';
 
 function LoginForm() {
   const isCloud = useCloud();
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
-  const enqueueSnackbar = useEnqueueSnackbar();
   const authentication = useAuthentication();
-  const { mutateAsync: createAccessToken, isPending: loading } =
-    useCreateAccessToken();
+  const {
+    mutateAsync: createAccessToken,
+    isPending: loading,
+    error,
+    isError,
+  } = useCreateAccessToken();
 
   React.useEffect(() => {
     if (authentication.isAuthenticated) {
@@ -37,11 +40,19 @@ function LoginForm() {
       });
       const { token } = data;
       authentication.updateToken(token);
-    } catch (error) {
-      enqueueSnackbar(error?.message || formatMessage('loginForm.error'), {
-        variant: 'error',
-      });
-    }
+    } catch {}
+  };
+
+  const renderError = () => {
+    const errors = error?.response?.data?.errors?.general || [
+      formatMessage('loginForm.error'),
+    ];
+
+    return errors.map((error) => (
+      <Alert severity="error" sx={{ mt: 2 }}>
+        {error}
+      </Alert>
+    ));
   };
 
   return (
@@ -94,6 +105,8 @@ function LoginForm() {
           </Link>
         )}
 
+        {isError && renderError()}
+
         <LoadingButton
           type="submit"
           variant="contained"