Merge pull request #2469 from cisagov/2260-focus-input-field-for-logi…

…n-page-and-2fa-component

* Enable auto focus of first input field for components related to sign in, registration, and password reset.
* Update placeholder text to improve site accessibility when using a screen reader.
* Delete AuthContextOld.tsx, commented out code, and unused imports.

frontend/src/components/Register/RegisterForm.tsx

@@ -253,6 +253,7 @@ export const RegisterForm: React.FC<{
           value={values.email}
           onChange={onTextChange}
           helperText={errorEmailMessage ? errorEmailMessage : null}
+          autoFocus
         />
         <TextField
           margin="dense"

frontend/src/pages/AuthLogin/AuthLogin.tsx

@@ -2,26 +2,18 @@ import React, { useEffect, useState } from 'react';
 import { AuthForm } from 'components';
 import { useAuthContext } from 'context';
 import { Button } from '@trussworks/react-uswds';
-// import { Alert, AlertTitle, Box, Grid, Link, Typography } from '@mui/material';
 import { Box, Grid, Link, Typography } from '@mui/material';
 import { RegisterForm } from 'components/Register/RegisterForm';
 import { CrossfeedWarning } from 'components/WarningBanner';
-import {
-  Authenticator,
-  // ThemeProvider,
-  useAuthenticator
-} from '@aws-amplify/ui-react';
+import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react';
 import { I18n } from 'aws-amplify';
 
 const TOTP_ISSUER = process.env.REACT_APP_TOTP_ISSUER;
-// Strings come from https://github.com/aws-amplify/amplify-ui/blob/main/packages/ui/src/i18n/dictionaries/authenticator/en.ts
 I18n.putVocabulariesForLanguage('en-US', {
   'Setup TOTP': 'Set up 2FA',
   'Confirm TOTP Code': 'Enter 2FA Code'
 });
-// const amplifyTheme = {
-//   name: 'my-theme'
-// };
+
 interface Errors extends Partial<FormData> {
   global?: string;
 }
@@ -36,30 +28,64 @@ export const AuthLogin: React.FC<{ showSignUp?: boolean }> = ({
   useEffect(() => {
     refreshUser();
   }, [refreshUser, authStatus]);
+
   const formFields = {
+    signIn: {
+      username: {
+        label: 'Email',
+        placeholder: 'Enter your email address',
+        required: true,
+        autoFocus: true
+      },
+      password: {
+        label: 'Password',
+        placeholder: 'Enter your password',
+        required: true
+      }
+    },
     confirmSignIn: {
       confirmation_code: {
-        label: 'Enter 2FA Code from your authenticator app'
+        label: 'Confirmation Code',
+        placeholder: 'Enter code from your authenticator app',
+        autoFocus: true
+      }
+    },
+    resetPassword: {
+      username: {
+        label: 'Email',
+        placeholder: 'Enter your email address',
+        required: true,
+        autoFocus: true
       }
     },
     confirmResetPassword: {
       confirmation_code: {
-        label: 'Enter code sent to your email address'
+        label: 'Confirmation Code',
+        placeholder: 'Enter code sent to your email address',
+        autoFocus: true
+      }
+    },
+    confirmSignUp: {
+      confirmation_code: {
+        label: 'Confirmation Code',
+        placeholder: 'Enter code sent to your email address',
+        autoFocus: true
       }
     },
     setupTOTP: {
       QR: {
         // Set the issuer and name so that the authenticator app shows them.
         // TODO: Set the issuer to the email, once this is resolved: https://github.com/aws-amplify/amplify-ui/issues/3387.
         totpIssuer: TOTP_ISSUER
-        // totpUsername: email,
       },
       confirmation_code: {
         label:
-          'Set up 2FA by scanning the QR code with an authenticator app on your phone.'
+          'Set up 2FA by scanning the QR code with an authenticator app on your phone.',
+        autoFocus: true
       }
     }
   };
+
   const onSubmit: React.FormEventHandler = async (e) => {
     e.preventDefault();
     try {
@@ -115,6 +141,7 @@ export const AuthLogin: React.FC<{ showSignUp?: boolean }> = ({
             /* hideSignUp={
                 !showSignUp && !(process.env.NODE_ENV === 'development')
               }*/
+            // Hide sign up button unless we are in development mode.
             hideSignUp={true}
           />
         </Grid>

frontend/src/pages/AuthLogin/AuthLoginCreate.tsx

@@ -42,14 +42,46 @@ export const AuthLoginCreate: React.FC<{ showSignUp?: boolean }> = ({
   }, [refreshUser, authStatus]);
 
   const formFields = {
+    signIn: {
+      username: {
+        label: 'Email',
+        placeholder: 'Enter your email address',
+        required: true,
+        autoFocus: true
+      },
+      password: {
+        label: 'Password',
+        placeholder: 'Enter your password',
+        required: true
+      }
+    },
     confirmSignIn: {
       confirmation_code: {
-        label: 'Enter 2FA Code from your authenticator app'
+        label: 'Confirmation Code',
+        placeholder: 'Enter code from your authenticator app',
+        autoFocus: true
+      }
+    },
+    resetPassword: {
+      username: {
+        label: 'Email',
+        placeholder: 'Enter your email address',
+        required: true,
+        autoFocus: true
       }
     },
     confirmResetPassword: {
       confirmation_code: {
-        label: 'Enter code sent to your email address'
+        label: 'Confirmation Code',
+        placeholder: 'Enter code sent to your email address',
+        autoFocus: true
+      }
+    },
+    confirmSignUp: {
+      confirmation_code: {
+        label: 'Confirmation Code',
+        placeholder: 'Enter code sent to your email address',
+        autoFocus: true
       }
     },
     setupTOTP: {
@@ -61,7 +93,8 @@ export const AuthLoginCreate: React.FC<{ showSignUp?: boolean }> = ({
       },
       confirmation_code: {
         label:
-          'Set up 2FA by scanning the QR code with an authenticator app on your phone.'
+          'Set up 2FA by scanning the QR code with an authenticator app on your phone.',
+        autoFocus: true
       }
     }
   };
@@ -94,7 +127,6 @@ export const AuthLoginCreate: React.FC<{ showSignUp?: boolean }> = ({
 
         <ThemeProvider theme={amplifyTheme}>
           <Authenticator
-            loginMechanisms={['email']}
             formFields={formFields}
             /* Hide the sign up button unless we are 1) on the /signup page or 2) in development mode. */
             hideSignUp={