From b4197e54e62158dcdb5294014c455f5c40c653ad Mon Sep 17 00:00:00 2001
From: Nick <nick.a.molloy@gmail.com>
Date: Wed, 22 Jun 2022 21:05:03 +1200
Subject: [PATCH] fix: input fields (PR #1110 from
 NickMolloy/improve-input-attributes)

* Use correct input type

"string" is not a valid input type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
"text" is the actual valid value.

* Use correct autocomplete values for credential fields
"true", "on", and "confirm-password" are not valid autocomplete values https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
---
 frontend/src/component/user/HostedAuth/HostedAuth.tsx       | 3 ++-
 frontend/src/component/user/PasswordAuth/PasswordAuth.tsx   | 6 +++---
 .../component/user/UserProfile/EditProfile/EditProfile.tsx  | 4 ++--
 .../user/common/ResetPasswordForm/ResetPasswordForm.tsx     | 4 ++--
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.tsx b/frontend/src/component/user/HostedAuth/HostedAuth.tsx
index 5cbde3d723..ce2745b946 100644
--- a/frontend/src/component/user/HostedAuth/HostedAuth.tsx
+++ b/frontend/src/component/user/HostedAuth/HostedAuth.tsx
@@ -113,7 +113,7 @@ const HostedAuth: VFC<IHostedAuthProps> = ({ authDetails, redirect }) => {
                                 label="Username or email"
                                 name="username"
                                 id="username"
-                                type="string"
+                                type="text"
                                 onChange={evt => setUsername(evt.target.value)}
                                 value={username}
                                 error={Boolean(usernameError)}
@@ -130,6 +130,7 @@ const HostedAuth: VFC<IHostedAuthProps> = ({ authDetails, redirect }) => {
                                 value={password}
                                 error={Boolean(passwordError)}
                                 helperText={passwordError}
+                                autoComplete="current-password"
                                 data-testid={LOGIN_PASSWORD_ID}
                             />
                             <Grid container>
diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.tsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.tsx
index 51c54029d6..d25e10dfc1 100644
--- a/frontend/src/component/user/PasswordAuth/PasswordAuth.tsx
+++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.tsx
@@ -117,12 +117,12 @@ const PasswordAuth: VFC<IPasswordAuthProps> = ({ authDetails, redirect }) => {
                                 label="Username or email"
                                 name="username"
                                 id="username"
-                                type="string"
+                                type="text"
                                 onChange={evt => setUsername(evt.target.value)}
                                 value={username}
                                 error={Boolean(usernameError)}
                                 helperText={usernameError}
-                                autoComplete="true"
+                                autoComplete="username"
                                 data-testid={LOGIN_EMAIL_ID}
                                 variant="outlined"
                                 size="small"
@@ -136,7 +136,7 @@ const PasswordAuth: VFC<IPasswordAuthProps> = ({ authDetails, redirect }) => {
                                 value={password}
                                 error={Boolean(passwordError)}
                                 helperText={passwordError}
-                                autoComplete="true"
+                                autoComplete="current-password"
                                 data-testid={LOGIN_PASSWORD_ID}
                             />
                             <Button
diff --git a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
index edce53a5f0..410199b5bc 100644
--- a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
+++ b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
@@ -115,7 +115,7 @@ const EditProfile = ({
                     label="Password"
                     name="password"
                     value={password}
-                    autoComplete="on"
+                    autoComplete="new-password"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                         setPassword(e.target.value)
                     }
@@ -125,7 +125,7 @@ const EditProfile = ({
                     label="Confirm password"
                     name="confirmPassword"
                     value={confirmPassword}
-                    autoComplete="on"
+                    autoComplete="new-password"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                         setConfirmPassword(e.target.value)
                     }
diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
index 8f6f6024e9..5cc0527fc5 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
@@ -115,7 +115,7 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
                         setPassword(e.target.value)
                     }
                     onFocus={() => setShowPasswordChecker(true)}
-                    autoComplete="password"
+                    autoComplete="new-password"
                     data-loading
                 />
                 <PasswordField
@@ -124,7 +124,7 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                         setConfirmPassword(e.target.value)
                     }
-                    autoComplete="confirm-password"
+                    autoComplete="new-password"
                     data-loading
                 />
                 <ConditionallyRender