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}
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}>

View file

@ -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>
</>