Merge pull request #2969 from andrewbaldwin44/feature/auth-markdown-s…

…upport Webui Add Markdown Support for Auth Page
locustio · Nov 7, 2024 · bb0efad · bb0efad
2 parents d6f91d3 + 0c8308f
commit bb0efad
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/locust/webui/src/components/Form/CustomInput.tsx b/locust/webui/src/components/Form/CustomInput.tsx
@@ -2,6 +2,7 @@ import { Checkbox, FormControlLabel, TextField } from '@mui/material';
 
 import PasswordField from 'components/Form/PasswordField';
 import Select from 'components/Form/Select';
+import Markdown from 'components/Markdown/Markdown';
 import { ICustomInput } from 'types/form.types';
 
 export default function CustomInput({
@@ -27,7 +28,7 @@ export default function CustomInput({
     return (
       <FormControlLabel
         control={<Checkbox defaultChecked={defaultValue} />}
-        label={label}
+        label={<Markdown content={label} />}
         name={name}
       />
     );

diff --git a/locust/webui/src/pages/Auth.tsx b/locust/webui/src/pages/Auth.tsx
@@ -6,6 +6,7 @@ import Logo from 'assets/Logo';
 import CustomInput from 'components/Form/CustomInput';
 import PasswordField from 'components/Form/PasswordField';
 import DarkLightToggle from 'components/Layout/Navbar/DarkLightToggle';
+import Markdown from 'components/Markdown/Markdown';
 import useCreateTheme from 'hooks/useCreateTheme';
 import { IAuthArgs } from 'types/auth.types';
 
@@ -50,7 +51,7 @@ export default function Auth({
             <Box sx={{ display: 'flex', flexDirection: 'column', rowGap: 2 }}>
               <TextField label='Username' name='username' />
               <PasswordField />
-              {info && <Alert severity='info'>{info}</Alert>}
+              {info && <Alert severity='info'>{<Markdown content={info} />}</Alert>}
               {error && <Alert severity='error'>{error}</Alert>}
               <Button size='large' type='submit' variant='contained'>
                 Login
@@ -64,7 +65,7 @@ export default function Auth({
               {customForm.inputs.map((inputProps, index) => (
                 <CustomInput key={`custom-form-input-${index}`} {...inputProps} />
               ))}
-              {info && <Alert severity='info'>{info}</Alert>}
+              {info && <Alert severity='info'>{<Markdown content={info} />}</Alert>}
               {error && <Alert severity='error'>{error}</Alert>}
               <Button size='large' type='submit' variant='contained'>
                 {customForm.submitButtonText || 'Login'}

diff --git a/locust/webui/src/styles/theme.ts b/locust/webui/src/styles/theme.ts
@@ -17,6 +17,9 @@ const createTheme = (mode: PaletteMode) =>
           ':root': {
             '--footer-height': '40px',
           },
+          p: {
+            margin: 0,
+          },
         },
       },
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,9 @@ const createTheme = (mode: PaletteMode) => @@
               ':root': {
                 '--footer-height': '40px',
               },
+              p: {
+                margin: 0,
+              },
             },
           },
         },
@@ Expand Down @@