From 8a9b5d9746771d13c893046767e68a90ec64902c Mon Sep 17 00:00:00 2001
From: Andrew Baldwin <andrew.baldwin44@gmail.com>
Date: Tue, 19 Nov 2024 12:53:40 +0100
Subject: [PATCH 1/2] Add input type to login form

---
 docs/extending-locust.rst                        | 3 ++-
 examples/web_ui_auth/custom_form.py              | 3 +++
 locust/web.py                                    | 1 +
 locust/webui/src/components/Form/CustomInput.tsx | 3 ++-
 locust/webui/src/types/form.types.ts             | 1 +
 5 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/extending-locust.rst b/docs/extending-locust.rst
index 131fc24bd1..ec1cef4c40 100644
--- a/docs/extending-locust.rst
+++ b/docs/extending-locust.rst
@@ -163,7 +163,8 @@ A full example can be seen `in the auth example <https://github.com/locustio/loc
 In certain situations you may wish to further extend the fields present in the auth form. To achieve this, pass a ``custom_form`` dict
 to the ``environment.web_ui.auth_args``. In this case, the fields will be represented by a list of ``inputs``, the callback url is
 configured by the ``custom_form.callback_url``, and the submit button may optionally be configured using the ``custom_form.submit_button_text``.
-The fields in the auth form may be a text, select, checkbox, or secret password field.
+The fields in the auth form may be a text, select, checkbox, or secret password field. You may additionally override the HTML input type for
+specific field validation (e.g. type=email).
 
 For a full example see `configuring the custom_form in the auth example <https://github.com/locustio/locust/tree/master/examples/web_ui_auth/custom_form.py>`_.
 
diff --git a/examples/web_ui_auth/custom_form.py b/examples/web_ui_auth/custom_form.py
index 0345aa5fee..f3a579e681 100644
--- a/examples/web_ui_auth/custom_form.py
+++ b/examples/web_ui_auth/custom_form.py
@@ -55,6 +55,9 @@ def locust_init(environment, **_kwargs):
                         "name": "username",
                         # make field required
                         "is_required": True,
+                        # override input type for HTML validation
+                        # applies if !is_secret and !choices, and default_value is string | None
+                        "type": "email",
                     },
                     # boolean checkmark field
                     {"label": "Admin", "name": "is_admin", "default_value": False},
diff --git a/locust/web.py b/locust/web.py
index 8c18a4c0f5..004d85a62b 100644
--- a/locust/web.py
+++ b/locust/web.py
@@ -57,6 +57,7 @@
 class InputField(TypedDict, total=False):
     label: str
     name: str
+    type: str | None
     default_value: bool | None
     choices: list[str] | None
     is_secret: bool | None
diff --git a/locust/webui/src/components/Form/CustomInput.tsx b/locust/webui/src/components/Form/CustomInput.tsx
index 66c32968a6..67a4066b03 100644
--- a/locust/webui/src/components/Form/CustomInput.tsx
+++ b/locust/webui/src/components/Form/CustomInput.tsx
@@ -8,6 +8,7 @@ import { ICustomInput } from 'types/form.types';
 export default function CustomInput({
   name,
   label,
+  type = 'text',
   defaultValue,
   choices,
   isSecret,
@@ -54,7 +55,7 @@ export default function CustomInput({
       name={name}
       required={isRequired}
       sx={{ width: '100%' }}
-      type='text'
+      type={type}
     />
   );
 }
diff --git a/locust/webui/src/types/form.types.ts b/locust/webui/src/types/form.types.ts
index 60166e6ebf..affa73d7e5 100644
--- a/locust/webui/src/types/form.types.ts
+++ b/locust/webui/src/types/form.types.ts
@@ -1,6 +1,7 @@
 export interface ICustomInput {
   label: string;
   name: string;
+  type?: string;
   choices?: string[] | null;
   defaultValue?: string | number | boolean | null;
   isSecret?: boolean;

From f438f71f6f164c493970ce45d8d70a73258fabfb Mon Sep 17 00:00:00 2001
From: Andrew Baldwin <andrew.baldwin44@gmail.com>
Date: Tue, 19 Nov 2024 12:57:25 +0100
Subject: [PATCH 2/2] Update developing docs

---
 docs/developing-locust.rst | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/developing-locust.rst b/docs/developing-locust.rst
index efe12090e3..dcd553cb5c 100644
--- a/docs/developing-locust.rst
+++ b/docs/developing-locust.rst
@@ -138,7 +138,7 @@ Yarn
 
     $ yarn --version
 
-- Next in web, install all dependencies
+- Next, install all dependencies
 
 .. code-block:: console
 
@@ -149,9 +149,9 @@ Yarn
 Developing
 ----------
 
-To develop the frontend, run ``yarn dev``. This will start the Vite dev server and allow for viewing and editing the frontend, without needing to a run a locust web server
+To develop while running a locust instance, run ``yarn watch``. This will output the static files to the ``dist`` directory. Vite will automatically detect any changed files and re-build as needed. Simply refresh the page to view the changes
 
-To develop while running a locust instance, run ``yarn dev:watch``. This will output the static files to the ``dist`` directory. Vite will automatically detect any changed files and re-build as needed. Simply refresh the page to view the changes
+In certain situations (usually when styling), you may want to develop the frontend without running a locust instance. Running ``yarn dev`` will start the Vite dev server and allow for viewing your changes.
 
 To compile the webui, run ``yarn build``