From 0c8308f8d762873e31b2eb971455a909f9665f1c Mon Sep 17 00:00:00 2001
From: Andrew Baldwin <andrew.baldwin44@gmail.com>
Date: Thu, 7 Nov 2024 15:17:18 +0100
Subject: [PATCH] Add markdown support for auth page

---
 locust/webui/src/components/Form/CustomInput.tsx | 3 ++-
 locust/webui/src/pages/Auth.tsx                  | 5 +++--
 locust/webui/src/styles/theme.ts                 | 3 +++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/locust/webui/src/components/Form/CustomInput.tsx b/locust/webui/src/components/Form/CustomInput.tsx
index 0cdaa3e180..40810e5a4d 100644
--- 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
index c9ceb652ce..5ef647fbc2 100644
--- 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
index c3391c7d95..53e023b235 100644
--- 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,
+          },
         },
       },
     },