Merge pull request #10116 from nixocio/ui_issue_9126

Update Login page

Update Login page.

See: #9126

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

awx/ui_next/src/screens/Login/Login.jsx

@@ -127,7 +127,7 @@ function AWXLogin({ alt, isAuthenticated }) {
   if (authError?.response?.status === 401) {
     helperText = t`Invalid username or password. Please try again.`;
   } else {
-    helperText = t`There was a problem signing in. Please try again.`;
+    helperText = t`There was a problem logging in. Please try again.`;
   }
 
   const HeaderBrand = (
@@ -147,9 +147,8 @@ function AWXLogin({ alt, isAuthenticated }) {
     <Login header={Header} footer={Footer}>
       <LoginMainHeader
         data-cy="login-header"
-        title={
+        title={brandName ? t`Welcome to Ansible ${brandName}!` : ''}
-          brandName ? t`Welcome to Ansible ${brandName}! Please Sign In.` : ''
+        subtitle={t`Please log in`}
-        }
       />
       <LoginMainBody>
         <Formik

awx/ui_next/src/screens/Login/Login.test.jsx

@@ -90,6 +90,12 @@ describe('<Login />', () => {
     expect(passwordInput.props().value).toBe('');
     expect(submitButton.props().isDisabled).toBe(false);
     expect(wrapper.find('AlertModal').length).toBe(0);
+    expect(wrapper.find('LoginMainHeader').prop('subtitle')).toBe(
+      'Please log in'
+    );
+    expect(wrapper.find('LoginMainHeader').prop('title')).toBe(
+      'Welcome to Ansible AWX!'
+    );
   });
 
   test('custom logo renders Brand component with correct src and alt', async () => {