diff --git a/frontend/src/components/Register/RegisterForm.tsx b/frontend/src/components/Register/RegisterForm.tsx index 7b954b885..5b58525ba 100644 --- a/frontend/src/components/Register/RegisterForm.tsx +++ b/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 /> { global?: string; } @@ -36,15 +28,48 @@ 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: { @@ -52,14 +77,15 @@ export const AuthLogin: React.FC<{ showSignUp?: boolean }> = ({ // 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} /> diff --git a/frontend/src/pages/AuthLogin/AuthLoginCreate.tsx b/frontend/src/pages/AuthLogin/AuthLoginCreate.tsx index e20ac16de..99b42a397 100644 --- a/frontend/src/pages/AuthLogin/AuthLoginCreate.tsx +++ b/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 }> = ({ { - global?: string; -} - -export const AuthLogin: React.FC<{ showSignUp?: boolean }> = ({ - showSignUp = false -}) => { - const { apiPost, refreshUser } = useAuthContext(); - const [errors, setErrors] = useState({}); - - // Once a user signs in, call refreshUser() so that the callback is called and the user gets signed in. - const { authStatus } = useAuthenticator((context) => [context.isPending]); - useEffect(() => { - refreshUser(); - }, [refreshUser, authStatus]); - - const formFields = { - confirmSignIn: { - confirmation_code: { - label: 'Enter 2FA Code from your authenticator app' - } - }, - confirmResetPassword: { - confirmation_code: { - label: 'Enter code sent to your email address' - } - }, - 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.' - } - } - }; - - const onSubmit: React.FormEventHandler = async (e) => { - e.preventDefault(); - try { - const { redirectUrl, state, nonce } = await apiPost('/auth/login', { - body: {} - }); - localStorage.setItem('state', state); - localStorage.setItem('nonce', nonce); - window.location.href = redirectUrl; - } catch (e) { - console.error(e); - setErrors({ - global: 'Something went wrong logging in.' - }); - } - }; - - if (process.env.REACT_APP_USE_COGNITO) { - return ( - -

Welcome to Crossfeed

- - -
-
PLATFORM NOTIFICATION
-
- Important Notice: Temporary Downtime During Crossfeed Migration -
-
- {' '} - The Crossfeed environment is moving. The migration will require a - temporary downtime of approximately one week. -
-
- {' '} - The downtime will begin on Wednesday, October 25, through the end - of day Wednesday, November 01.{' '} -
-
- For additional information, please click{' '} - - here. - -
-
-
-
**Warning**
-
- {' '} - This system contains U.S. Government Data. Unauthorized use of - this system is prohibited. Use of this computer system, authorized - or unauthorized, constitutes consent to monitoring of this system. -
-
- {' '} - This computer system, including all related equipment, networks, - and network devices (specifically including internet access) are - provided only for authorized U.S. Government use. U.S. Government - computer systems may be monitored for all lawful purposes, - including to ensure that their use is authorized, for management - of the system, to facilitate protection against unauthorized - access, and to verify security procedures, survivability, and - operational security. Monitoring includes active attacks by - authorized U.S. Government entities to test or verify the security - of this system. During monitoring, information may be examined, - recorded, copied and used for authorized purposes. All - information, including personal information, placed or sent over - this system may be monitored. -
-
- {' '} - Unauthorized use may subject you to criminal prosecution. Evidence - of unauthorized use collected during monitoring may be used for - administrative, criminal, or other adverse action. Use of this - system constitutes consent to monitoring for these purposes. -
-
-
-
- ); - } - - return ( - -

Welcome to Crossfeed

- {errors.global &&

{errors.global}

} - - - New to Crossfeed? Register with Login.gov - -
- ); -};