From e8f5c71066117558c1beddc3eae9730db4f052e6 Mon Sep 17 00:00:00 2001
From: Thomas Van Dort <tom@ethyca.com>
Date: Wed, 7 Aug 2024 17:34:04 -0400
Subject: [PATCH 1/2] Pass autoComplete prop to input.

---
 clients/admin-ui/src/features/common/form/inputs.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx
index 022a689b82e..7a25c939510 100644
--- a/clients/admin-ui/src/features/common/form/inputs.tsx
+++ b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -549,6 +549,7 @@ export const CustomTextInput = ({
   isRequired = false,
   inputRightElement,
   size,
+  autoComplete,
   ...props
 }: CustomInputProps & StringField) => {
   const [initialField, meta] = useField(props);
@@ -561,6 +562,7 @@ export const CustomTextInput = ({
   const innerInput = (
     <TextInput
       {...field}
+      autoComplete={autoComplete}
       isDisabled={disabled}
       data-testid={`input-${field.name}`}
       placeholder={placeholder}

From 3eebb8bdc393e3b6a56b529a6b787ba1b7a4f594 Mon Sep 17 00:00:00 2001
From: Thomas Van Dort <tom@ethyca.com>
Date: Wed, 7 Aug 2024 17:34:19 -0400
Subject: [PATCH 2/2] Use autocomplete to hint to auto fill.

Password managers like 1Password were not showing the "create new password" field when users set their password for the first time.
1Password recommends the following.
https://developer.1password.com/docs/web/compatible-website-design/#password-change-and-reset-forms

More about the autocomplete field here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
---
 clients/admin-ui/src/pages/login.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/clients/admin-ui/src/pages/login.tsx b/clients/admin-ui/src/pages/login.tsx
index b7da81f9098..0058e8e87e3 100644
--- a/clients/admin-ui/src/pages/login.tsx
+++ b/clients/admin-ui/src/pages/login.tsx
@@ -260,6 +260,9 @@ const Login: NextPage = () => {
                         <CustomTextInput
                           name="password"
                           label={isFromInvite ? "Set new password" : "Password"}
+                          autoComplete={
+                            isFromInvite ? "new-password" : "current-password"
+                          }
                           type="password"
                           variant="stacked"
                           size="md"