Merge pull request #2230 from lindapaiste/fix/pw-autocomplete

Add autocomplete attributes to password forms - Fixes #2229

Author: raclim

client/modules/User/components/AccountForm.jsx

@@ -74,8 +74,9 @@ function AccountForm() {
                 <input
                   className="form__input"
                   aria-label={t('AccountForm.EmailARIA')}
-                  type="text"
+                  type="email"
                   id="email"
+                  autoComplete="email"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -117,6 +118,7 @@ function AccountForm() {
                   aria-label={t('AccountForm.UserNameARIA')}
                   type="text"
                   id="username"
+                  autoComplete="username"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -136,6 +138,7 @@ function AccountForm() {
                   aria-label={t('AccountForm.CurrentPasswordARIA')}
                   type="password"
                   id="currentPassword"
+                  autoComplete="current-password"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -155,6 +158,7 @@ function AccountForm() {
                   aria-label={t('AccountForm.NewPasswordARIA')}
                   type="password"
                   id="newPassword"
+                  autoComplete="new-password"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (

client/modules/User/components/LoginForm.jsx

@@ -39,6 +39,7 @@ function LoginForm() {
                   aria-label={t('LoginForm.UsernameOrEmailARIA')}
                   type="text"
                   id="email"
+                  autoComplete="username"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -58,6 +59,7 @@ function LoginForm() {
                   aria-label={t('LoginForm.PasswordARIA')}
                   type="password"
                   id="password"
+                  autoComplete="current-password"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (

client/modules/User/components/NewPasswordForm.jsx

@@ -35,6 +35,7 @@ function NewPasswordForm(props) {
                   aria-label={t('NewPasswordForm.TitleARIA')}
                   type="password"
                   id="Password"
+                  autoComplete="new-password"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -54,6 +55,7 @@ function NewPasswordForm(props) {
                   type="password"
                   aria-label={t('NewPasswordForm.ConfirmPasswordARIA')}
                   id="confirm password"
+                  autoComplete="new-password"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (

client/modules/User/components/SignupForm.jsx

@@ -62,6 +62,7 @@ function SignupForm() {
                   aria-label={t('SignupForm.TitleARIA')}
                   type="text"
                   id="username"
+                  autoComplete="username"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -79,8 +80,9 @@ function SignupForm() {
                 <input
                   className="form__input"
                   aria-label={t('SignupForm.EmailARIA')}
-                  type="text"
+                  type="email"
                   id="email"
+                  autoComplete="email"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -100,6 +102,7 @@ function SignupForm() {
                   aria-label={t('SignupForm.PasswordARIA')}
                   type="password"
                   id="password"
+                  autoComplete="new-password"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (
@@ -119,6 +122,7 @@ function SignupForm() {
                   type="password"
                   aria-label={t('SignupForm.ConfirmPasswordARIA')}
                   id="confirm password"
+                  autoComplete="new-password"
                   {...field.input}
                 />
                 {field.meta.touched && field.meta.error && (