Merge pull request #2196 from automatisch/AUT-1364

feat: inline login form error and unify Alert font weight

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

@@ -112,7 +112,7 @@ export default function ResetPasswordForm() {
               <Alert
                 data-test="accept-invitation-form-error"
                 severity="error"
-                sx={{ mt: 1, fontWeight: 500 }}
+                sx={{ mt: 1 }}
               >
                 {formatMessage('acceptInvitationForm.invalidToken')}
               </Alert>

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

@@ -126,7 +126,7 @@ function AddAppConnection(props) {
       </DialogTitle>
 
       {authDocUrl && (
-        <Alert severity="info" sx={{ fontWeight: 300 }}>
+        <Alert severity="info">
           {formatMessage('addAppConnection.callToDocs', {
             appName: name,
             docsLink: generateExternalLink(authDocUrl),
@@ -138,7 +138,7 @@ function AddAppConnection(props) {
         <Alert
           data-test="add-connection-error"
           severity="error"
-          sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
+          sx={{ mt: 1, wordBreak: 'break-all' }}
         >
           {!errorDetails && errorMessage}
           {errorDetails && (

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

@@ -32,10 +32,7 @@ function AdminApplicationAuthClientDialog(props) {
     <Dialog open={true} onClose={onClose}>
       <DialogTitle>{title}</DialogTitle>
       {error && (
-        <Alert
-          severity="error"
-          sx={{ mt: 1, fontWeight: 500, wordBreak: 'break-all' }}
-        >
+        <Alert severity="error" sx={{ mt: 1, wordBreak: 'break-all' }}>
           {error.message}
         </Alert>
       )}

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

@@ -188,7 +188,7 @@ function InstallationForm() {
         )}
       />
       {install.isSuccess && (
-        <Alert data-test="success-alert" severity="success" sx={{ mt: 3, fontWeight: 500 }}>
+        <Alert data-test="success-alert" severity="success" sx={{ mt: 3 }}>
           {formatMessage('installationForm.success', {
             link: (str) => (
               <Link

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"

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

@@ -84,10 +84,7 @@ function TestSubstep(props) {
           }}
         >
           {hasError && (
-            <Alert
-              severity="error"
-              sx={{ mb: 2, fontWeight: 500, width: '100%' }}
-            >
+            <Alert severity="error" sx={{ mb: 2, width: '100%' }}>
               <pre style={{ margin: 0, whiteSpace: 'pre-wrap' }}>
                 {JSON.stringify(errorDetails, null, 2)}
               </pre>
@@ -104,13 +101,11 @@ function TestSubstep(props) {
               severity="warning"
               sx={{ mb: 1, width: '100%' }}
             >
-              <AlertTitle sx={{ fontWeight: 700 }}>
+              <AlertTitle>
                 {formatMessage('flowEditor.noTestDataTitle')}
               </AlertTitle>
 
-              <Box sx={{ fontWeight: 400 }}>
-                {formatMessage('flowEditor.noTestDataMessage')}
-              </Box>
+              <Box>{formatMessage('flowEditor.noTestDataMessage')}</Box>
             </Alert>
           )}
 

packages/web/src/pages/CreateUser/index.jsx

@@ -124,7 +124,6 @@ export default function CreateUser() {
                 <Alert
                   severity="info"
                   color="primary"
-                  sx={{ fontWeight: '500' }}
                   data-test="invitation-email-info-alert"
                 >
                   {formatMessage('createUser.invitationEmailInfo', {

packages/web/src/pages/Execution/index.jsx

@@ -42,13 +42,9 @@ export default function Execution() {
       <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
         {!isExecutionStepsLoading && !data?.pages?.[0].data.length && (
           <Alert severity="warning" sx={{ flex: 1 }}>
-            <AlertTitle sx={{ fontWeight: 700 }}>
-              {formatMessage('execution.noDataTitle')}
-            </AlertTitle>
+            <AlertTitle>{formatMessage('execution.noDataTitle')}</AlertTitle>
 
-            <Box sx={{ fontWeight: 400 }}>
-              {formatMessage('execution.noDataMessage')}
-            </Box>
+            <Box>{formatMessage('execution.noDataMessage')}</Box>
           </Alert>
         )}
 

packages/web/src/pages/ProfileSettings/index.jsx

@@ -266,8 +266,8 @@ function ProfileSettings() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Alert variant="outlined" severity="error" sx={{ fontWeight: 500 }}>
-            <AlertTitle sx={{ fontWeight: 700 }}>
+          <Alert variant="outlined" severity="error">
+            <AlertTitle>
               {formatMessage('profileSettings.deleteMyAccount')}
             </AlertTitle>
 

packages/web/src/styles/theme.js

@@ -278,6 +278,20 @@ export const defaultTheme = createTheme({
         }),
       },
     },
+    MuiAlert: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          fontWeight: theme.typography.fontWeightRegular,
+        }),
+      },
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          fontWeight: theme.typography.fontWeightBold,
+        }),
+      },
+    },
   },
 });
 export const mationTheme = createTheme(