Merge pull request #2992 from andrewbaldwin44/feature/auth-input-type

Add Input Type to Login Form

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``
 

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>`_.
 

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},

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

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}
     />
   );
 }

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;