feat: tup-712 login form new help links (#449)

* feat: tup-712 login form new help link

* fix: tup-712 wrong link text

* chore: npx nx format:write

* fix: tup-712 update tests

* fix: tup-712 tests and bad links

* docs: tup-712 cautionary comment

* feat: tup-712 new link texts

* fix: tup-712 test failure

* fix: tup-712 "Username" not "User Name"

* test: tup-712 "Username" not "User Name"

libs/tup-components/src/auth/LoginComponent/LoginComponent.spec.tsx

@@ -93,19 +93,25 @@ describe('LoginComponent', () => {
       ).toEqual(1)
     );
   });
-  it('should link to TAS Create Account if Create Account clicked', async () => {
+  it('should link to TAM', async () => {
     const { getByText, getAllByRole } = testRender(<LoginComponent />);
     await waitFor(() => getAllByRole('link'));
     const links: HTMLElement[] = getAllByRole('link');
     expect(getByText('Create Account')).toBeDefined();
     expect(links[0].getAttribute('href')).toEqual(
       'https://accounts.tacc.utexas.edu/register'
     );
-    expect(getByText('Reset Password')).toBeDefined();
+    expect(getByText('Account Help')).toBeDefined();
     expect(links[1].getAttribute('href')).toEqual(
+      'https://accounts.tacc.utexas.edu/login_support'
+    );
+    expect(getByText('Forgot Password')).toBeDefined();
+    expect(links[2].getAttribute('href')).toEqual(
       'https://accounts.tacc.utexas.edu/forgot_password'
     );
-    expect(getByText('Account Help')).toBeDefined();
-    expect(links[2].getAttribute('href')).toEqual('/about/help/');
+    expect(getByText('Recover Username')).toBeDefined();
+    expect(links[3].getAttribute('href')).toEqual(
+      'https://accounts.tacc.utexas.edu/forgot_username'
+    );
   });
 });

libs/tup-components/src/auth/LoginComponent/LoginComponent.tsx

@@ -52,18 +52,32 @@ const CreateAccountLink = () => (
 );
 
 const AccountHelpLink = () => (
-  <a href="/about/help/" target="_blank" rel="noreferrer">
+  <a
+    href="https://accounts.tacc.utexas.edu/login_support"
+    target="_blank"
+    rel="noreferrer"
+  >
     Account Help
   </a>
 );
 
-const ResetPasswordLink = () => (
+const ForgotPasswordLink = () => (
   <a
     href="https://accounts.tacc.utexas.edu/forgot_password"
     target="_blank"
     rel="noreferrer"
   >
-    Reset Password
+    Forgot Password
+  </a>
+);
+
+const ForgotUsernameLink = () => (
+  <a
+    href="https://accounts.tacc.utexas.edu/forgot_username"
+    target="_blank"
+    rel="noreferrer"
+  >
+    Recover Username
   </a>
 );
 
@@ -145,8 +159,10 @@ const LoginComponent: React.FC<LoginProps> = ({ className }) => {
       </Formik>
       <div className="c-form__nav">
         <p>Having trouble logging in?</p>
-        <ResetPasswordLink />
+        {/* CAUTION: Do not exceed three links. If more needed, ask design. */}
         <AccountHelpLink />
+        <ForgotPasswordLink />
+        <ForgotUsernameLink />
       </div>
     </div>
   );