From d61abaee7a47eb5a876075b1503553f6c17639ef Mon Sep 17 00:00:00 2001
From: Mike McNeil <mikermcneil@users.noreply.github.com>
Date: Mon, 24 Nov 2025 11:47:57 -0800
Subject: [PATCH] Improve mobile web login experience: Update LoginForm.tsx
 (#36172)

I don't know if this works (didn't check the component interface to see
what props it takes, so will leave that to up to the reviewer of this PR
to edit and complete, if you please wouldn't mind. Also if you're aware
of other areas we can make this improvement to the email field, such as
signup and in the password recovery flow, then would you please make
those changes?)

Goal: I'm trying to improve the mobile web experience and get handset
devices like iPhones to open the email keyboard and _not_ capitalize the
first letter you type when logging in.

To do that, we need the generated HTML to use `type="email"`. For
example, to look like this:
https://github.com/fleetdm/fleet/blob/78ee32fd588ab273fa2cc890487b614be8c5c754/website/views/pages/entrance/login.ejs#L19


- [x] QA'd all new/changed functionality manually

---------

Co-authored-by: Jacob Shandling <jacob@shandling.dev>
---
 frontend/components/forms/LoginForm/LoginForm.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/components/forms/LoginForm/LoginForm.tsx b/frontend/components/forms/LoginForm/LoginForm.tsx
index da0240ea83..611cd5675a 100644
--- a/frontend/components/forms/LoginForm/LoginForm.tsx
+++ b/frontend/components/forms/LoginForm/LoginForm.tsx
@@ -155,12 +155,13 @@ const LoginForm = ({
   }
 
   return (
-    <form onSubmit={onFormSubmit} className={loginFormClass}>
+    <form onSubmit={onFormSubmit} className={loginFormClass} noValidate>
       {baseError && <div className="form__base-error">{baseError}</div>}
       <div className={`${baseClass}__form`}>
         <InputFieldWithIcon
           error={errors.email}
           autofocus
+          type="email"
           label="Email"
           placeholder="Email"
           value={formData.email}