From 43944a7d31802c6ce3aa899b5be3b70bda365274 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 29 Apr 2022 18:28:34 +0100
Subject: [PATCH] Enable Autocomplete (#2645)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/components/auth/TwoFactor.tsx                | 11 +++++++++--
 apps/web/components/security/EnableTwoFactorModal.tsx |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/auth/TwoFactor.tsx b/apps/web/components/auth/TwoFactor.tsx
index dab53579..28a5627f 100644
--- a/apps/web/components/auth/TwoFactor.tsx
+++ b/apps/web/components/auth/TwoFactor.tsx
@@ -29,8 +29,15 @@ export default function TwoFactor() {
     <div className="mx-auto !mt-0 max-w-sm">
       <p className="mb-4 text-sm text-gray-500">{t("2fa_enabled_instructions")}</p>
       <input hidden type="hidden" value={value} {...methods.register("totpCode")} />
-      <div className="flex flex-row space-x-1">
-        <Input className={className} name="2fa1" inputMode="decimal" {...digits[0]} autoFocus />
+      <div className="flex flex-row justify-between">
+        <Input
+          className={className}
+          name="2fa1"
+          inputMode="decimal"
+          {...digits[0]}
+          autoFocus
+          autoComplete="one-time-code"
+        />
         <Input className={className} name="2fa2" inputMode="decimal" {...digits[1]} />
         <Input className={className} name="2fa3" inputMode="decimal" {...digits[2]} />
         <Input className={className} name="2fa4" inputMode="decimal" {...digits[3]} />
diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx
index 4c613123..e0cf227e 100644
--- a/apps/web/components/security/EnableTwoFactorModal.tsx
+++ b/apps/web/components/security/EnableTwoFactorModal.tsx
@@ -173,6 +173,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
                   inputMode="numeric"
                   onInput={(e) => setTotpCode(e.currentTarget.value)}
                   className="block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"
+                  autoComplete="one-time-code"
                 />
               </div>