From 4b5e355df9e291a5cb550483c7dad6c43f03d3a7 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Thu, 15 Apr 2021 23:45:50 -0400
Subject: [PATCH] fix(ui): correctly set autocomplete attribute for password
 fields (#1430)

---
 src/components/Login/LocalLogin.tsx           |  1 +
 src/components/ResetPassword/index.tsx        | 20 +++++++++----------
 src/components/UserList/index.tsx             |  6 +++++-
 .../UserSettings/UserPasswordChange/index.tsx | 13 +++++++++---
 src/i18n/locale/en.json                       |  1 +
 5 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/Login/LocalLogin.tsx b/src/components/Login/LocalLogin.tsx
index f4d4e51d..4216bf4a 100644
--- a/src/components/Login/LocalLogin.tsx
+++ b/src/components/Login/LocalLogin.tsx
@@ -84,6 +84,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                       id="password"
                       name="password"
                       type="password"
+                      autoComplete="current-password"
                       placeholder={intl.formatMessage(messages.password)}
                     />
                   </div>
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx
index 4a2925cd..94005ab1 100644
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -1,13 +1,13 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 import React, { useState } from 'react';
-import ImageFader from '../Common/ImageFader';
 import { defineMessages, useIntl } from 'react-intl';
-import LanguagePicker from '../Layout/LanguagePicker';
-import Button from '../Common/Button';
-import { Field, Form, Formik } from 'formik';
 import * as Yup from 'yup';
-import axios from 'axios';
-import { useRouter } from 'next/router';
-import Link from 'next/link';
+import Button from '../Common/Button';
+import ImageFader from '../Common/ImageFader';
+import LanguagePicker from '../Layout/LanguagePicker';
 
 const messages = defineMessages({
   passwordreset: 'Password Reset',
@@ -120,9 +120,7 @@ const ResetPassword: React.FC = () => {
                               id="password"
                               name="password"
                               type="password"
-                              placeholder={intl.formatMessage(
-                                messages.password
-                              )}
+                              autoComplete="new-password"
                               className="flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
                             />
                           </div>
@@ -141,8 +139,8 @@ const ResetPassword: React.FC = () => {
                             <Field
                               id="confirmPassword"
                               name="confirmPassword"
-                              placeholder="Confirm Password"
                               type="password"
+                              autoComplete="new-password"
                               className="flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
                             />
                           </div>
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index 5d9983f9..50f10d70 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -62,6 +62,7 @@ const messages = defineMessages({
   passwordinfodescription:
     'Enable email notifications to allow automatic password generation.',
   autogeneratepassword: 'Automatically Generate Password',
+  autogeneratepasswordTip: 'Email a server-generated password to the user',
   validationEmail: 'You must provide a valid email address',
   sortCreated: 'Creation Date',
   sortUpdated: 'Last Updated',
@@ -377,6 +378,9 @@ const UserList: React.FC = () => {
                   >
                     <label htmlFor="genpassword" className="checkbox-label">
                       {intl.formatMessage(messages.autogeneratepassword)}
+                      <span className="label-tip">
+                        {intl.formatMessage(messages.autogeneratepasswordTip)}
+                      </span>
                     </label>
                     <div className="form-input">
                       <Field
@@ -402,8 +406,8 @@ const UserList: React.FC = () => {
                           id="password"
                           name="password"
                           type="password"
+                          autoComplete="new-password"
                           disabled={values.genpassword}
-                          placeholder={intl.formatMessage(messages.password)}
                         />
                       </div>
                       {errors.password && touched.password && (
diff --git a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
index 0026c3ca..52b32a0c 100644
--- a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
@@ -165,7 +165,8 @@ const UserPasswordChange: React.FC = () => {
                       <Field
                         id="currentPassword"
                         name="currentPassword"
-                        type="text"
+                        type="password"
+                        autoComplete="current-password"
                       />
                     </div>
                     {errors.currentPassword && touched.currentPassword && (
@@ -180,7 +181,12 @@ const UserPasswordChange: React.FC = () => {
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
-                    <Field id="newPassword" name="newPassword" type="text" />
+                    <Field
+                      id="newPassword"
+                      name="newPassword"
+                      type="password"
+                      autoComplete="new-password"
+                    />
                   </div>
                   {errors.newPassword && touched.newPassword && (
                     <div className="error">{errors.newPassword}</div>
@@ -196,7 +202,8 @@ const UserPasswordChange: React.FC = () => {
                     <Field
                       id="confirmPassword"
                       name="confirmPassword"
-                      type="text"
+                      type="password"
+                      autoComplete="new-password"
                     />
                   </div>
                   {errors.confirmPassword && touched.confirmPassword && (
diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json
index a1765f70..60c7ce3e 100644
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -646,6 +646,7 @@
   "components.UserList.accounttype": "Account Type",
   "components.UserList.admin": "Admin",
   "components.UserList.autogeneratepassword": "Automatically Generate Password",
+  "components.UserList.autogeneratepasswordTip": "Email a server-generated password to the user",
   "components.UserList.bulkedit": "Bulk Edit",
   "components.UserList.create": "Create",
   "components.UserList.created": "Created",