feat: tup-712 login form new help link

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

@@ -27,7 +27,7 @@ describe('LoginComponent', () => {
       value: { replace: mockNavigate },
     });
     const { getByLabelText, getByRole } = testRender(<LoginComponent />);
-    const username = getByLabelText(/User Name/);
+    const username = getByLabelText(/Username/);
     const password = getByLabelText(/Password/);
     const submit = getByRole('button');
     await act(async () => {
@@ -50,7 +50,7 @@ describe('LoginComponent', () => {
     const { getByLabelText, getByRole, getAllByText } = testRender(
       <LoginComponent />
     );
-    const username = getByLabelText(/User Name/);
+    const username = getByLabelText(/Username/);
     const password = getByLabelText(/Password/);
     const submit = getByRole('button');
     await act(async () => {
@@ -79,7 +79,7 @@ describe('LoginComponent', () => {
     const { getByLabelText, getByRole, getAllByText } = testRender(
       <LoginComponent />
     );
-    const username = getByLabelText(/User Name/);
+    const username = getByLabelText(/Username/);
     const password = getByLabelText(/Password/);
     const submit = getByRole('button');
     await act(async () => {
@@ -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>
 );
 
@@ -118,7 +132,7 @@ const LoginComponent: React.FC<LoginProps> = ({ className }) => {
           <LoginError status={status} isError={isError} />
           <FormikInput
             name="username"
-            label="User Name"
+            label="Username"
             type="text"
             autoComplete="username"
             required
@@ -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>
   );