From ecb0bff4f3935c1767a48b2d23566495503407b2 Mon Sep 17 00:00:00 2001
From: brecert <me@bree.dev>
Date: Sun, 19 Sep 2021 04:11:54 -0400
Subject: [PATCH] Set appropriate `autocomplete` attributes for password reset

- make autocomplete set to `current-password` and `new-password` for password resets
- fixes #198
---
 .../intermediate/popovers/ModifyAccount.tsx   |  2 +
 src/pages/login/FormField.tsx                 | 68 ++++++++++---------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/context/intermediate/popovers/ModifyAccount.tsx b/src/context/intermediate/popovers/ModifyAccount.tsx
index 4c2e68a8..a840e1aa 100644
--- a/src/context/intermediate/popovers/ModifyAccount.tsx
+++ b/src/context/intermediate/popovers/ModifyAccount.tsx
@@ -108,6 +108,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
                         register={register}
                         showOverline
                         error={errors.new_password?.message}
+                        autoComplete="new-password"
                     />
                 )}
                 {field === "username" && (
@@ -124,6 +125,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
                     register={register}
                     showOverline
                     error={errors.current_password?.message}
+                    autoComplete="current-password"
                 />
                 {error && (
                     <Overline type="error" error={error}>
diff --git a/src/pages/login/FormField.tsx b/src/pages/login/FormField.tsx
index 9f8b9131..06b2eea2 100644
--- a/src/pages/login/FormField.tsx
+++ b/src/pages/login/FormField.tsx
@@ -5,8 +5,10 @@ import { Text, Localizer } from "preact-i18n";
 import InputBox from "../../components/ui/InputBox";
 import Overline from "../../components/ui/Overline";
 
-interface Props {
-    type: "email" | "username" | "password" | "invite" | "current_password";
+type FieldType = "email" | "username" | "password" | "invite" | "current_password";
+
+type Props = Omit<JSX.HTMLAttributes<HTMLInputElement>, "children" | "as"> & {
+    type: FieldType;
     showOverline?: boolean;
     register: UseFormMethods["register"];
     error?: string;
@@ -19,6 +21,7 @@ export default function FormField({
     showOverline,
     error,
     name,
+    ...props
 }: Props) {
     return (
         <>
@@ -41,44 +44,45 @@ export default function FormField({
                         type === "invite" || type === "username"
                             ? "text"
                             : type === "current_password"
-                            ? "password"
-                            : type
+                                ? "password"
+                                : type
                     }
                     // See https://github.com/mozilla/contain-facebook/issues/783
                     className="fbc-has-badge"
                     ref={register(
                         type === "password" || type === "current_password"
                             ? {
-                                  validate: (value: string) =>
-                                      value.length === 0
-                                          ? "RequiredField"
-                                          : value.length < 8
-                                          ? "TooShort"
-                                          : value.length > 1024
-                                          ? "TooLong"
-                                          : undefined,
-                              }
+                                validate: (value: string) =>
+                                    value.length === 0
+                                        ? "RequiredField"
+                                        : value.length < 8
+                                            ? "TooShort"
+                                            : value.length > 1024
+                                                ? "TooLong"
+                                                : undefined,
+                            }
                             : type === "email"
-                            ? {
-                                  required: "RequiredField",
-                                  pattern: {
-                                      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                                      message: "InvalidEmail",
-                                  },
-                              }
-                            : type === "username"
-                            ? {
-                                  validate: (value: string) =>
-                                      value.length === 0
-                                          ? "RequiredField"
-                                          : value.length < 2
-                                          ? "TooShort"
-                                          : value.length > 32
-                                          ? "TooLong"
-                                          : undefined,
-                              }
-                            : { required: "RequiredField" },
+                                ? {
+                                    required: "RequiredField",
+                                    pattern: {
+                                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                                        message: "InvalidEmail",
+                                    },
+                                }
+                                : type === "username"
+                                    ? {
+                                        validate: (value: string) =>
+                                            value.length === 0
+                                                ? "RequiredField"
+                                                : value.length < 2
+                                                    ? "TooShort"
+                                                    : value.length > 32
+                                                        ? "TooLong"
+                                                        : undefined,
+                                    }
+                                    : { required: "RequiredField" },
                     )}
+                    {...props}
                 />
             </Localizer>
         </>