Set appropriate autocomplete attributes for password reset

- make autocomplete set to `current-password` and `new-password` for password resets
- fixes #198
This commit is contained in:
brecert 2021-09-19 04:11:54 -04:00
parent 3b9916c072
commit ecb0bff4f3
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96
2 changed files with 38 additions and 32 deletions

View file

@ -108,6 +108,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
register={register} register={register}
showOverline showOverline
error={errors.new_password?.message} error={errors.new_password?.message}
autoComplete="new-password"
/> />
)} )}
{field === "username" && ( {field === "username" && (
@ -124,6 +125,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
register={register} register={register}
showOverline showOverline
error={errors.current_password?.message} error={errors.current_password?.message}
autoComplete="current-password"
/> />
{error && ( {error && (
<Overline type="error" error={error}> <Overline type="error" error={error}>

View file

@ -5,8 +5,10 @@ import { Text, Localizer } from "preact-i18n";
import InputBox from "../../components/ui/InputBox"; import InputBox from "../../components/ui/InputBox";
import Overline from "../../components/ui/Overline"; import Overline from "../../components/ui/Overline";
interface Props { type FieldType = "email" | "username" | "password" | "invite" | "current_password";
type: "email" | "username" | "password" | "invite" | "current_password";
type Props = Omit<JSX.HTMLAttributes<HTMLInputElement>, "children" | "as"> & {
type: FieldType;
showOverline?: boolean; showOverline?: boolean;
register: UseFormMethods["register"]; register: UseFormMethods["register"];
error?: string; error?: string;
@ -19,6 +21,7 @@ export default function FormField({
showOverline, showOverline,
error, error,
name, name,
...props
}: Props) { }: Props) {
return ( return (
<> <>
@ -41,44 +44,45 @@ export default function FormField({
type === "invite" || type === "username" type === "invite" || type === "username"
? "text" ? "text"
: type === "current_password" : type === "current_password"
? "password" ? "password"
: type : type
} }
// See https://github.com/mozilla/contain-facebook/issues/783 // See https://github.com/mozilla/contain-facebook/issues/783
className="fbc-has-badge" className="fbc-has-badge"
ref={register( ref={register(
type === "password" || type === "current_password" type === "password" || type === "current_password"
? { ? {
validate: (value: string) => validate: (value: string) =>
value.length === 0 value.length === 0
? "RequiredField" ? "RequiredField"
: value.length < 8 : value.length < 8
? "TooShort" ? "TooShort"
: value.length > 1024 : value.length > 1024
? "TooLong" ? "TooLong"
: undefined, : undefined,
} }
: type === "email" : type === "email"
? { ? {
required: "RequiredField", required: "RequiredField",
pattern: { pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "InvalidEmail", message: "InvalidEmail",
}, },
} }
: type === "username" : type === "username"
? { ? {
validate: (value: string) => validate: (value: string) =>
value.length === 0 value.length === 0
? "RequiredField" ? "RequiredField"
: value.length < 2 : value.length < 2
? "TooShort" ? "TooShort"
: value.length > 32 : value.length > 32
? "TooLong" ? "TooLong"
: undefined, : undefined,
} }
: { required: "RequiredField" }, : { required: "RequiredField" },
)} )}
{...props}
/> />
</Localizer> </Localizer>
</> </>