From 772fcc6b19b70a09960424fb10d2cff97b6106e2 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 19 Jul 2023 09:31:48 -0500
Subject: [PATCH 01/92] refactor: move link to to docs (TUP-535:4,5)

---
 libs/tup-components/src/accounts/ManageAccountMfa.tsx | 9 ---------
 libs/tup-components/src/mfa/MfaHeader.tsx             | 9 +++++++--
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/libs/tup-components/src/accounts/ManageAccountMfa.tsx b/libs/tup-components/src/accounts/ManageAccountMfa.tsx
index 06977e934..a2524a272 100644
--- a/libs/tup-components/src/accounts/ManageAccountMfa.tsx
+++ b/libs/tup-components/src/accounts/ManageAccountMfa.tsx
@@ -120,15 +120,6 @@ const MfaUnpair: React.FC<{ pairing: MfaTokenResponse }> = ({ pairing }) => {
 const MfaSectionHeader: React.FC = () => (
   <div className={styles['tap-header']}>
     <strong>MFA Pairing</strong>
-    <div style={{ float: 'right' }}>
-      <a
-        target="_blank"
-        rel="noreferrer"
-        href="https://docs.tacc.utexas.edu/basics/mfa/"
-      >
-        <strong>MFA Documentation</strong>
-      </a>
-    </div>
   </div>
 );
 
diff --git a/libs/tup-components/src/mfa/MfaHeader.tsx b/libs/tup-components/src/mfa/MfaHeader.tsx
index 883cc41fb..6d71428f5 100644
--- a/libs/tup-components/src/mfa/MfaHeader.tsx
+++ b/libs/tup-components/src/mfa/MfaHeader.tsx
@@ -1,4 +1,3 @@
-import { Link } from 'react-router-dom';
 import styles from './Mfa.module.css';
 import TicketCreateModal from '../tickets/TicketCreateModal';
 
@@ -8,7 +7,13 @@ const MfaHeader: React.FC = () => {
       <div>Multifactor Authentication Pairing</div>
       <div>
         <TicketCreateModal display="link">Get Help</TicketCreateModal> |{' '}
-        <Link to="/account">Exit Pairing Process</Link>
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="https://docs.tacc.utexas.edu/basics/mfa/"
+        >
+          MFA Documentation
+        </a>
       </div>
     </div>
   );

From f958384a019636826657fd0b77e3d0ea90fefa77 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 19 Jul 2023 19:44:31 -0500
Subject: [PATCH 02/92] refactor!: prepare for c-nav--piped (TUP-535:3)

The pipe i slost, but will return when core-styles.base.css is v2.12.1.

Currently, this requires TACC/Core-CMS to load TACC/Core-Styles v2.12.1.

Maybe (later), Portal should use diff version than CMS.

BREAKING CHANGE: This removes the pipe.
---
 libs/tup-components/src/mfa/MfaHeader.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaHeader.tsx b/libs/tup-components/src/mfa/MfaHeader.tsx
index 6d71428f5..77e795c9d 100644
--- a/libs/tup-components/src/mfa/MfaHeader.tsx
+++ b/libs/tup-components/src/mfa/MfaHeader.tsx
@@ -5,8 +5,8 @@ const MfaHeader: React.FC = () => {
   return (
     <div className={styles['mfa-header']}>
       <div>Multifactor Authentication Pairing</div>
-      <div>
-        <TicketCreateModal display="link">Get Help</TicketCreateModal> |{' '}
+      <nav className="c-nav c-nav--no-list c-nav--piped">
+        <TicketCreateModal display="link">Get Help</TicketCreateModal>
         <a
           target="_blank"
           rel="noreferrer"
@@ -14,7 +14,7 @@ const MfaHeader: React.FC = () => {
         >
           MFA Documentation
         </a>
-      </div>
+      </nav>
     </div>
   );
 };

From bbce029664c9bfaf5ffc275dabdecfe07a02a542 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 19 Jul 2023 21:15:30 -0500
Subject: [PATCH 03/92] refactor: change 5m msg, get help link (TUP-535:6)

- Change text of the "5 minutes" message.
- Add either link to trigger modal open or link to open modal.*

* This prevents two modals being hidden into the makup.
---
 libs/core-components/src/lib/Button/Button.tsx    |  3 +++
 .../tup-components/src/mfa/MfaValidationPanel.tsx | 15 +++++++++++++--
 .../TicketCreateModal/TicketCreateModal.tsx       |  2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx
index 2670ccf57..b64f47a28 100644
--- a/libs/core-components/src/lib/Button/Button.tsx
+++ b/libs/core-components/src/lib/Button/Button.tsx
@@ -39,6 +39,7 @@ type ButtonTypeOtherSize = {
 
 type ButtonProps = React.PropsWithChildren<{
   className?: string;
+  id?: string;
   iconNameBefore?: string;
   iconNameAfter?: string;
   dataTestid?: string;
@@ -54,6 +55,7 @@ const Button: React.FC<ButtonProps> = ({
   className,
   iconNameBefore,
   iconNameAfter,
+  id,
   type = 'secondary',
   size = '',
   dataTestid,
@@ -74,6 +76,7 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
+      id={id}
       className={`
         ${styles['root']}
         c-button
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index e8c0b720a..75935af15 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useMfaVerify } from '@tacc/tup-hooks';
 import { Button, SectionMessage } from '@tacc/core-components';
+import TicketCreateModal from '../tickets/TicketCreateModal';
 import styles from './Mfa.module.css';
 
 const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
@@ -13,6 +14,12 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
     mutate({ password: tokenValue, type: tokenType });
   };
 
+  const ticketCreateModalButton = document.getElementById('TicketCreateModal');
+  const hasTicketCreateModal = Boolean( ticketCreateModalButton );
+  const openTicketCreateModal = () => {
+    ticketCreateModalButton?.click()
+  };
+
   const pairingMessage = {
     totp: '2. Enter the token shown in the app to continue the pairing.',
     sms: '2. Enter the token sent to your phone number.',
@@ -37,8 +44,12 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
       </form>
       {tokenType === 'sms' && (
         <span>
-          If you do not receive a text message within 5 minutes, please contact
-          the helpdesk by clicking "Get Help" above.
+          Didn't receive a message within 5 minutes?
+          {hasTicketCreateModal ? (
+            <Button type="link" onClick={() => openTicketCreateModal()}>Get help.</Button>
+          ) : (
+            <TicketCreateModal display="link">Get Help</TicketCreateModal>
+          )}
         </span>
       )}
       {error && (
diff --git a/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx b/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx
index 5d887a995..dc66918cf 100644
--- a/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx
+++ b/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx
@@ -22,7 +22,7 @@ const TicketCreateModal: React.FC<
 
   return (
     <>
-      <Button type={display} onClick={() => toggle()}>
+      <Button type={display} onClick={() => toggle()} id="TicketCreateModal">
         {children}
       </Button>
       <Modal

From bb92b8c9e3727416e9e5a231064292182bcaa5e5 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 19 Jul 2023 21:16:10 -0500
Subject: [PATCH 04/92] refactor: change qr error to reuse a help modal

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index beba23b79..3b5e9d228 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -6,6 +6,13 @@ import styles from './Mfa.module.css';
 
 const MfaQRPanel: React.FC = () => {
   const { mutate, isLoading, data, isError } = useMfaPairTotp();
+
+  const ticketCreateModalButton = document.getElementById('TicketCreateModal');
+  const hasTicketCreateModal = Boolean( ticketCreateModalButton );
+  const openTicketCreateModal = () => {
+    ticketCreateModalButton?.click()
+  };
+
   return (
     <div>
       <div>
@@ -55,9 +62,13 @@ const MfaQRPanel: React.FC = () => {
           <div className={styles['qr-code-error']}>
             There was an error generating your QR code. If this error persists,
             please{' '}
-            <TicketCreateModal display="link">
-              submit a ticket
-            </TicketCreateModal>{' '}
+            {hasTicketCreateModal ? (
+              <Button type="link" onClick={() => openTicketCreateModal()}>submit a ticket</Button>
+            ) : (
+              <TicketCreateModal display="link">
+                submit a ticket
+              </TicketCreateModal>
+            )}{' '}
             and TACC User Services will assist you.
           </div>
         </SectionMessage>

From fa9aa7cd904d5a376c0adaa4dd1fd8cf7b11ec85 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 19 Jul 2023 21:19:52 -0500
Subject: [PATCH 05/92] style: npx nx format:write

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx         | 8 +++++---
 libs/tup-components/src/mfa/MfaValidationPanel.tsx | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 3b5e9d228..85de36ae0 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -8,9 +8,9 @@ const MfaQRPanel: React.FC = () => {
   const { mutate, isLoading, data, isError } = useMfaPairTotp();
 
   const ticketCreateModalButton = document.getElementById('TicketCreateModal');
-  const hasTicketCreateModal = Boolean( ticketCreateModalButton );
+  const hasTicketCreateModal = Boolean(ticketCreateModalButton);
   const openTicketCreateModal = () => {
-    ticketCreateModalButton?.click()
+    ticketCreateModalButton?.click();
   };
 
   return (
@@ -63,7 +63,9 @@ const MfaQRPanel: React.FC = () => {
             There was an error generating your QR code. If this error persists,
             please{' '}
             {hasTicketCreateModal ? (
-              <Button type="link" onClick={() => openTicketCreateModal()}>submit a ticket</Button>
+              <Button type="link" onClick={() => openTicketCreateModal()}>
+                submit a ticket
+              </Button>
             ) : (
               <TicketCreateModal display="link">
                 submit a ticket
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index 75935af15..e2b84c5d3 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -15,9 +15,9 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
   };
 
   const ticketCreateModalButton = document.getElementById('TicketCreateModal');
-  const hasTicketCreateModal = Boolean( ticketCreateModalButton );
+  const hasTicketCreateModal = Boolean(ticketCreateModalButton);
   const openTicketCreateModal = () => {
-    ticketCreateModalButton?.click()
+    ticketCreateModalButton?.click();
   };
 
   const pairingMessage = {
@@ -46,7 +46,9 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
         <span>
           Didn't receive a message within 5 minutes?
           {hasTicketCreateModal ? (
-            <Button type="link" onClick={() => openTicketCreateModal()}>Get help.</Button>
+            <Button type="link" onClick={() => openTicketCreateModal()}>
+              Get help.
+            </Button>
           ) : (
             <TicketCreateModal display="link">Get Help</TicketCreateModal>
           )}

From 0ec0fd2e964698fea8f78a889fdc73977f16604b Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 11:41:24 -0500
Subject: [PATCH 06/92] refactor: simplify `qr-code-box` markup and styles

---
 libs/tup-components/src/mfa/Mfa.module.css | 21 +++++------------
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 26 ++++++++++------------
 2 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 55b142564..a552fa9cb 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -42,23 +42,14 @@
     text-overflow: none;
 }
 
-.qr-code-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.qr-code-box > div {
-    display: flex;
+.qr-code-box > * {
+    --border-width: var(--global-border-width--xx-thick);
+
     width: 200px;
     height: 200px;
-    border: 7px solid #D8D8D8;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    justify-content: center;
-}
-.qr-code-box > img {
-    width: 100%;
-    height: 100%;
+    outline: var(--border-width) solid #D8D8D8;
+    margin-block: 20px;
+    margin-inline: var(--border-width);
 }
 .qr-code-error {
     max-width: 200px;
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 85de36ae0..1d149dc29 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -27,20 +27,18 @@ const MfaQRPanel: React.FC = () => {
         and scan the following QR code:
       </div>
       <div className={styles['qr-code-box']}>
-        <div>
-          {!data && !isLoading && (
-            <Button
-              className={styles['qr-button']}
-              onClick={() => mutate(null)}
-            >
-              Click to Generate QR Code
-            </Button>
-          )}
-          {!data && isLoading && <LoadingSpinner />}
-          {data && (
-            <img src={data.googleurl.img} alt="Google MFA QR Code"></img>
-          )}
-        </div>
+        {!data && !isLoading && (
+          <Button
+            className={styles['qr-button']}
+            onClick={() => mutate(null)}
+          >
+            Click to Generate QR Code
+          </Button>
+        )}
+        {!data && isLoading && <LoadingSpinner />}
+        {data && (
+          <img src={data.googleurl.img} alt="Google MFA QR Code"></img>
+        )}
       </div>
       {data && (
         <div>

From 6116bcda06c182a6d36b028c4d6608bff7f20abf Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 12:16:34 -0500
Subject: [PATCH 07/92] refactor: use lists for mfa panels

---
 libs/tup-components/src/mfa/Mfa.module.css      | 17 +++++++++++++----
 libs/tup-components/src/mfa/MfaPairingView.tsx  | 16 ++++++++++------
 libs/tup-components/src/mfa/MfaQRPanel.tsx      |  6 +++---
 libs/tup-components/src/mfa/MfaSmsPanel.tsx     |  6 +++---
 .../src/mfa/MfaValidationPanel.tsx              |  4 ++--
 5 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index a552fa9cb..355d365f6 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -3,14 +3,23 @@
     display: flex;
     flex-wrap: wrap;
     padding: var(--global-space--section);
-    gap: 20px;
+    gap: var(--global-space--section-left);
 }
-.pairing-container > div {
-    max-width: 375px;
+ol.pairing-container {
+    margin-bottom: 0; /* overwrite core-styles.base.css */
 }
 
 .pairing-separator {
-    border-left: 2px solid #D8D8D8
+    border-left: var(--global-border-width--normal) solid var(--global-color-primary--light);
+}
+li.pairing-separator {
+    list-style-type: none;
+}
+
+/* To add space between "2." and separator */
+.pairing-separator + li {
+    /* This assumes `list-style-position: outside` (browser default) */
+    margin-left: 1.25em;
 }
 
 .mfa-type-selection {
diff --git a/libs/tup-components/src/mfa/MfaPairingView.tsx b/libs/tup-components/src/mfa/MfaPairingView.tsx
index b8e814767..ddbc52212 100644
--- a/libs/tup-components/src/mfa/MfaPairingView.tsx
+++ b/libs/tup-components/src/mfa/MfaPairingView.tsx
@@ -6,12 +6,16 @@ import styles from './Mfa.module.css';
 
 const MfaPairingLayout: React.FC<{ method: 'sms' | 'totp' }> = ({ method }) => {
   return (
-    <div className={styles['pairing-container']}>
-      {method === 'totp' && <MfaQRPanel />}
-      {method === 'sms' && <MfaSmsPanel />}
-      <div className={styles['pairing-separator']} />
-      <MfaValidationPanel tokenType={method} />
-    </div>
+    <ol className={styles['pairing-container']}>
+      <li>
+        {method === 'totp' && <MfaQRPanel />}
+        {method === 'sms' && <MfaSmsPanel />}
+      </li>
+      <li aria-hidden className={styles['pairing-separator']} />
+      <li value="2">
+        <MfaValidationPanel tokenType={method} />
+      </li>
+    </ol>
   );
 };
 
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 1d149dc29..4751561cc 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -14,9 +14,9 @@ const MfaQRPanel: React.FC = () => {
   };
 
   return (
-    <div>
+    <>
       <div>
-        1. Open an approved{' '}
+        Open an approved{' '}
         <a
           href="https://docs.tacc.utexas.edu/basics/mfa/#mfaapps"
           target="_blank"
@@ -73,7 +73,7 @@ const MfaQRPanel: React.FC = () => {
           </div>
         </SectionMessage>
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/libs/tup-components/src/mfa/MfaSmsPanel.tsx b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
index b91a9cb56..9e9112ab5 100644
--- a/libs/tup-components/src/mfa/MfaSmsPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
@@ -12,8 +12,8 @@ const MfaSmsPanel: React.FC = () => {
     smsMutation.mutate({ phoneNumber });
   };
   return (
-    <div>
-      <span>1. Enter your phone number:</span>
+    <>
+      <span>Enter your phone number:</span>
       <form onSubmit={(e) => onSubmit(e)} className={styles['mfa-form']}>
         <label htmlFor="mfa-phone-number" hidden>
           Enter your Phone Number:
@@ -44,7 +44,7 @@ const MfaSmsPanel: React.FC = () => {
           </div>
         </SectionMessage>
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index e2b84c5d3..49acdf027 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -21,8 +21,8 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
   };
 
   const pairingMessage = {
-    totp: '2. Enter the token shown in the app to continue the pairing.',
-    sms: '2. Enter the token sent to your phone number.',
+    totp: 'Enter the token shown in the app to continue the pairing.',
+    sms: 'Enter the token sent to your phone number.',
   };
 
   return (

From d2ba1308ff6c2c1b144bdb9dec3fae872f126ffe Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 16:00:21 -0500
Subject: [PATCH 08/92] fix: missing space before "Get help." link

---
 libs/tup-components/src/mfa/MfaValidationPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index 49acdf027..aa1976618 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -44,7 +44,7 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
       </form>
       {tokenType === 'sms' && (
         <span>
-          Didn't receive a message within 5 minutes?
+          Didn't receive a message within 5 minutes?{' '}
           {hasTicketCreateModal ? (
             <Button type="link" onClick={() => openTicketCreateModal()}>
               Get help.

From 37dcb12af3d3b6788d7e1e219c412446d544b973 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 16:29:32 -0500
Subject: [PATCH 09/92] refactor: simpler messages (TUP-535:2.1.1+2.1.2)

- use one tag and one class
- remove extra markup
- refactor panel layout to support new message position
---
 libs/tup-components/src/mfa/Mfa.module.css    | 51 +++++++++++++++----
 libs/tup-components/src/mfa/MfaQRPanel.tsx    | 36 ++++++-------
 libs/tup-components/src/mfa/MfaSmsPanel.tsx   | 15 +++---
 .../src/mfa/MfaValidationPanel.tsx            | 16 +++---
 4 files changed, 69 insertions(+), 49 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 355d365f6..51e2bebf8 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -1,7 +1,8 @@
+@import url('@tacc/core-styles/src/lib/_imports/tools/media-queries.css');
+
 /* Layout styles */
 .pairing-container {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
     padding: var(--global-space--section);
     gap: var(--global-space--section-left);
 }
@@ -9,6 +10,10 @@ ol.pairing-container {
     margin-bottom: 0; /* overwrite core-styles.base.css */
 }
 
+.pairing-container > *:not(.pairing-separator) {
+    min-width: 200px;
+}
+
 .pairing-separator {
     border-left: var(--global-border-width--normal) solid var(--global-color-primary--light);
 }
@@ -60,10 +65,42 @@ li.pairing-separator {
     margin-block: 20px;
     margin-inline: var(--border-width);
 }
-.qr-code-error {
-    max-width: 200px;
+
+
+/* Wide */
+@media screen and (--medium-and-above) {
+    .pairing-container {
+        /* To layout items on one left-aligned row */
+        grid-auto-flow: column;
+        justify-content: start;
+
+        /* To support `position: absolute` child */
+        position: relative;
+        width: max-content; /* to not let wide child change parent width */
+    }
+    .qr-code-message {
+        /* To position message beneath both paring steps */
+        position: absolute;
+        top: 100%;
+
+        /* To constrain width within parent given 100% would exceed parent */
+        max-width: calc(
+            100%
+            - var(--global-space--section-left)
+            - var(--global-space--section-right)
+        );
+
+        /* To horizontally center content (not text) */
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        width: max-content;
+    }
 }
 
+
+
 .mfa-form {
     padding-top: 10px;
     padding-bottom: 10px;
@@ -73,12 +110,6 @@ li.pairing-separator {
     padding-top: 20px;
 }
 
-.verify-error-message {
-    width: fit-content;
-    height: fit-content;
-    padding-top: 15px;
-}
-
 
 /* Success view */
 .mfa-success-container {
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 4751561cc..4ae127094 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -41,11 +41,8 @@ const MfaQRPanel: React.FC = () => {
         )}
       </div>
       {data && (
-        <div>
-          If your mobile device does not have a camera capable of scanning QR
-          codes, the following text code can be used:
-          <br />
-          <code>{data.otpkey.value_b32}</code> &nbsp;(
+        <p className={styles['qr-code-message']}>
+          Can't scan QR code? <code>data.otpkey.value_b32</code> &nbsp;(
           <Button
             type="link"
             onClick={() => navigator.clipboard.writeText(data.otpkey.value_b32)}
@@ -53,24 +50,21 @@ const MfaQRPanel: React.FC = () => {
             copy to clipboard
           </Button>
           )
-        </div>
+        </p>
       )}
       {!data && isError && (
-        <SectionMessage type="error">
-          <div className={styles['qr-code-error']}>
-            There was an error generating your QR code. If this error persists,
-            please{' '}
-            {hasTicketCreateModal ? (
-              <Button type="link" onClick={() => openTicketCreateModal()}>
-                submit a ticket
-              </Button>
-            ) : (
-              <TicketCreateModal display="link">
-                submit a ticket
-              </TicketCreateModal>
-            )}{' '}
-            and TACC User Services will assist you.
-          </div>
+        <SectionMessage type="error" className={styles['qr-code-message']}>
+          Unable to display QR code. If this error persists,
+          please{' '}
+          {hasTicketCreateModal ? (
+            <Button type="link" onClick={() => openTicketCreateModal()}>
+              submit a ticket
+            </Button>
+          ) : (
+            <TicketCreateModal display="link">
+              submit a ticket
+            </TicketCreateModal>
+          )}{' '}
         </SectionMessage>
       )}
     </>
diff --git a/libs/tup-components/src/mfa/MfaSmsPanel.tsx b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
index 9e9112ab5..ae21b9f34 100644
--- a/libs/tup-components/src/mfa/MfaSmsPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
@@ -33,15 +33,12 @@ const MfaSmsPanel: React.FC = () => {
         </div>
       </form>
       {smsMutation.isError && (
-        <SectionMessage type="error">
-          <div className={styles['qr-code-error']}>
-            There was an error generating your SMS pairing. If this error
-            persists, please{' '}
-            <TicketCreateModal display="link">
-              submit a ticket
-            </TicketCreateModal>{' '}
-            and TACC User Services will assist you.
-          </div>
+        <SectionMessage type="error" className={styles['qr-code-message']}>
+          Unable to pair via SMS. If this error
+          persists, please{' '}
+          <TicketCreateModal display="link">
+            submit a ticket
+          </TicketCreateModal>
         </SectionMessage>
       )}
     </>
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index aa1976618..393e562bd 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -26,7 +26,7 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
   };
 
   return (
-    <div style={{ flex: '1 1 200px' }}>
+    <>
       {pairingMessage[tokenType]}
       <form onSubmit={(e) => onSubmit(e)} className={styles['mfa-form']}>
         <label htmlFor="confirm-pairing" hidden>
@@ -43,7 +43,7 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
         </div>
       </form>
       {tokenType === 'sms' && (
-        <span>
+        <p className={styles['qr-code-message']}>
           Didn't receive a message within 5 minutes?{' '}
           {hasTicketCreateModal ? (
             <Button type="link" onClick={() => openTicketCreateModal()}>
@@ -52,16 +52,14 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
           ) : (
             <TicketCreateModal display="link">Get Help</TicketCreateModal>
           )}
-        </span>
+        </p>
       )}
       {error && (
-        <div className={styles['verify-error-message']}>
-          <SectionMessage type="error" scope="section">
-            Error validating MFA token: {error.message}
-          </SectionMessage>
-        </div>
+        <SectionMessage type="error" scope="section" className={styles['qr-code-message']}>
+          Error validating MFA token: error.message
+        </SectionMessage>
       )}
-    </div>
+    </>
   );
 };
 

From 4e4ad515b4242af2eea2c81f0092b875cf3e7f99 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 16:33:31 -0500
Subject: [PATCH 10/92] refactor: let modal manage duplicate instances

- remove conditional modal opening code
- do not say "please" in messages
---
 libs/tup-components/src/mfa/MfaQRPanel.tsx    | 22 ++++---------------
 libs/tup-components/src/mfa/MfaSmsPanel.tsx   |  2 +-
 .../src/mfa/MfaValidationPanel.tsx            | 14 +-----------
 3 files changed, 6 insertions(+), 32 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 4ae127094..ba0c34a24 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -6,13 +6,6 @@ import styles from './Mfa.module.css';
 
 const MfaQRPanel: React.FC = () => {
   const { mutate, isLoading, data, isError } = useMfaPairTotp();
-
-  const ticketCreateModalButton = document.getElementById('TicketCreateModal');
-  const hasTicketCreateModal = Boolean(ticketCreateModalButton);
-  const openTicketCreateModal = () => {
-    ticketCreateModalButton?.click();
-  };
-
   return (
     <>
       <div>
@@ -54,17 +47,10 @@ const MfaQRPanel: React.FC = () => {
       )}
       {!data && isError && (
         <SectionMessage type="error" className={styles['qr-code-message']}>
-          Unable to display QR code. If this error persists,
-          please{' '}
-          {hasTicketCreateModal ? (
-            <Button type="link" onClick={() => openTicketCreateModal()}>
-              submit a ticket
-            </Button>
-          ) : (
-            <TicketCreateModal display="link">
-              submit a ticket
-            </TicketCreateModal>
-          )}{' '}
+          Unable to display QR code. If this error persists,{' '}
+          <TicketCreateModal display="link">
+            submit a ticket
+          </TicketCreateModal>
         </SectionMessage>
       )}
     </>
diff --git a/libs/tup-components/src/mfa/MfaSmsPanel.tsx b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
index ae21b9f34..2eb0834d2 100644
--- a/libs/tup-components/src/mfa/MfaSmsPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
@@ -35,7 +35,7 @@ const MfaSmsPanel: React.FC = () => {
       {smsMutation.isError && (
         <SectionMessage type="error" className={styles['qr-code-message']}>
           Unable to pair via SMS. If this error
-          persists, please{' '}
+          persists,{' '}
           <TicketCreateModal display="link">
             submit a ticket
           </TicketCreateModal>
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index 393e562bd..f48972e17 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -14,12 +14,6 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
     mutate({ password: tokenValue, type: tokenType });
   };
 
-  const ticketCreateModalButton = document.getElementById('TicketCreateModal');
-  const hasTicketCreateModal = Boolean(ticketCreateModalButton);
-  const openTicketCreateModal = () => {
-    ticketCreateModalButton?.click();
-  };
-
   const pairingMessage = {
     totp: 'Enter the token shown in the app to continue the pairing.',
     sms: 'Enter the token sent to your phone number.',
@@ -45,13 +39,7 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
       {tokenType === 'sms' && (
         <p className={styles['qr-code-message']}>
           Didn't receive a message within 5 minutes?{' '}
-          {hasTicketCreateModal ? (
-            <Button type="link" onClick={() => openTicketCreateModal()}>
-              Get help.
-            </Button>
-          ) : (
-            <TicketCreateModal display="link">Get Help</TicketCreateModal>
-          )}
+          <TicketCreateModal display="link">Get Help</TicketCreateModal>
         </p>
       )}
       {error && (

From 1d5ca09b387d9c3bee2eb2511210ca5a7633999f Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 16:48:22 -0500
Subject: [PATCH 11/92] fix: restore code that I had made text for testing

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index ba0c34a24..a22240ca0 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -35,7 +35,7 @@ const MfaQRPanel: React.FC = () => {
       </div>
       {data && (
         <p className={styles['qr-code-message']}>
-          Can't scan QR code? <code>data.otpkey.value_b32</code> &nbsp;(
+          Can't scan QR code? <code>{data.otpkey.value_b32}</code> &nbsp;(
           <Button
             type="link"
             onClick={() => navigator.clipboard.writeText(data.otpkey.value_b32)}

From 59709fd3fa73cd930e4b9ad5f86fdbe8e5605064 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 16:48:50 -0500
Subject: [PATCH 12/92] chore: remove now-unnecessary id form markup

---
 .../src/tickets/TicketCreateModal/TicketCreateModal.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx b/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx
index dc66918cf..5d887a995 100644
--- a/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx
+++ b/libs/tup-components/src/tickets/TicketCreateModal/TicketCreateModal.tsx
@@ -22,7 +22,7 @@ const TicketCreateModal: React.FC<
 
   return (
     <>
-      <Button type={display} onClick={() => toggle()} id="TicketCreateModal">
+      <Button type={display} onClick={() => toggle()}>
         {children}
       </Button>
       <Modal

From 0b50542119ffcbe140e1fa13e022c8e3c9e3a1fb Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 16:58:49 -0500
Subject: [PATCH 13/92] feat: new message if QR code alt. is unavilable

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index a22240ca0..47552c8f5 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -33,7 +33,7 @@ const MfaQRPanel: React.FC = () => {
           <img src={data.googleurl.img} alt="Google MFA QR Code"></img>
         )}
       </div>
-      {data && (
+      {data && data.otpkey && (
         <p className={styles['qr-code-message']}>
           Can't scan QR code? <code>{data.otpkey.value_b32}</code> &nbsp;(
           <Button
@@ -45,6 +45,15 @@ const MfaQRPanel: React.FC = () => {
           )
         </p>
       )}
+      {data && !data.otpkey && (
+        <p className={styles['qr-code-message']}>
+          Can't scan QR code?{' '}
+          <TicketCreateModal display="link">
+            submit a ticket
+          </TicketCreateModal>
+          .
+        </p>
+      )}
       {!data && isError && (
         <SectionMessage type="error" className={styles['qr-code-message']}>
           Unable to display QR code. If this error persists,{' '}

From 2d76c1a6accf02915c837d77895378a62fb9e539 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 17:01:25 -0500
Subject: [PATCH 14/92] =?UTF-8?q?fix:=20add=20periods=20to=20end=20of=20se?=
 =?UTF-8?q?ntences=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx  | 1 +
 libs/tup-components/src/mfa/MfaSmsPanel.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 47552c8f5..1ad9ffa77 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -60,6 +60,7 @@ const MfaQRPanel: React.FC = () => {
           <TicketCreateModal display="link">
             submit a ticket
           </TicketCreateModal>
+          .
         </SectionMessage>
       )}
     </>
diff --git a/libs/tup-components/src/mfa/MfaSmsPanel.tsx b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
index 2eb0834d2..2845fab44 100644
--- a/libs/tup-components/src/mfa/MfaSmsPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
@@ -39,6 +39,7 @@ const MfaSmsPanel: React.FC = () => {
           <TicketCreateModal display="link">
             submit a ticket
           </TicketCreateModal>
+          .
         </SectionMessage>
       )}
     </>

From 874445d7b02fc0233b8151c7e627d771cc63cec1 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 17:03:03 -0500
Subject: [PATCH 15/92] chore: remove now-unnecessary id from props

---
 libs/core-components/src/lib/Button/Button.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx
index 1dfc48592..28bad33a6 100644
--- a/libs/core-components/src/lib/Button/Button.tsx
+++ b/libs/core-components/src/lib/Button/Button.tsx
@@ -39,7 +39,6 @@ type ButtonTypeOtherSize = {
 
 type ButtonProps = React.PropsWithChildren<{
   className?: string;
-  id?: string;
   iconNameBefore?: string;
   iconNameAfter?: string;
   dataTestid?: string;
@@ -55,7 +54,6 @@ const Button: React.FC<ButtonProps> = ({
   className,
   iconNameBefore,
   iconNameAfter,
-  id,
   type = 'secondary',
   size = '',
   dataTestid,

From ef3ea722088248fbeb3a24bc0fe91b514a478e0c Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 17:03:03 -0500
Subject: [PATCH 16/92] chore: remove now-unnecessary id from props

---
 libs/core-components/src/lib/Button/Button.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx
index 1dfc48592..374219e93 100644
--- a/libs/core-components/src/lib/Button/Button.tsx
+++ b/libs/core-components/src/lib/Button/Button.tsx
@@ -39,7 +39,6 @@ type ButtonTypeOtherSize = {
 
 type ButtonProps = React.PropsWithChildren<{
   className?: string;
-  id?: string;
   iconNameBefore?: string;
   iconNameAfter?: string;
   dataTestid?: string;
@@ -55,7 +54,6 @@ const Button: React.FC<ButtonProps> = ({
   className,
   iconNameBefore,
   iconNameAfter,
-  id,
   type = 'secondary',
   size = '',
   dataTestid,
@@ -76,7 +74,6 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
-      id={id}
       className={`
         ${styles['root']}
         c-button

From fc49944284dd6314e72b60b079572fe95cdac9ed Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 17:18:19 -0500
Subject: [PATCH 17/92] fix: load v2.13 c-nav component

---
 apps/tup-ui/src/main.global.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index 927aa28ff..f4ba8120c 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -1,3 +1,8 @@
+/* To use new c-nav component not yet in TACC/Core-CMS core-styles.base.css */
+/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.13.0 */
+/* CAVEAT: Duplicates older, unchanged, global c-nav styles */
+@import url("https://unpkg.com/@tacc/core-styles@2.13.0/dist/components/c-nav.css");
+
 /* To overwrite @tacc/core-styles CEPv2 spacing */
 :root {
   /* TACC/Core-Styles/blob/823b7b9/src/lib/_imports/settings/space.css */

From cdf6a2e0f898a5b909939d7db30f8860f43824b8 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 20 Jul 2023 17:19:10 -0500
Subject: [PATCH 18/92] chore: improve a comment

---
 apps/tup-ui/src/main.global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index f4ba8120c..883648de7 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -1,5 +1,5 @@
 /* To use new c-nav component not yet in TACC/Core-CMS core-styles.base.css */
-/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.13.0 */
+/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.13+ */
 /* CAVEAT: Duplicates older, unchanged, global c-nav styles */
 @import url("https://unpkg.com/@tacc/core-styles@2.13.0/dist/components/c-nav.css");
 

From 670758409678568bbdc0dcbe3cffbe5693b3f072 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 21 Jul 2023 10:33:50 -0500
Subject: [PATCH 19/92] style: npx nx format:write

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx    | 19 ++++---------------
 libs/tup-components/src/mfa/MfaSmsPanel.tsx   |  8 ++------
 .../src/mfa/MfaValidationPanel.tsx            |  6 +++++-
 3 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 1ad9ffa77..00684fb07 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -21,17 +21,12 @@ const MfaQRPanel: React.FC = () => {
       </div>
       <div className={styles['qr-code-box']}>
         {!data && !isLoading && (
-          <Button
-            className={styles['qr-button']}
-            onClick={() => mutate(null)}
-          >
+          <Button className={styles['qr-button']} onClick={() => mutate(null)}>
             Click to Generate QR Code
           </Button>
         )}
         {!data && isLoading && <LoadingSpinner />}
-        {data && (
-          <img src={data.googleurl.img} alt="Google MFA QR Code"></img>
-        )}
+        {data && <img src={data.googleurl.img} alt="Google MFA QR Code"></img>}
       </div>
       {data && data.otpkey && (
         <p className={styles['qr-code-message']}>
@@ -48,19 +43,13 @@ const MfaQRPanel: React.FC = () => {
       {data && !data.otpkey && (
         <p className={styles['qr-code-message']}>
           Can't scan QR code?{' '}
-          <TicketCreateModal display="link">
-            submit a ticket
-          </TicketCreateModal>
-          .
+          <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
         </p>
       )}
       {!data && isError && (
         <SectionMessage type="error" className={styles['qr-code-message']}>
           Unable to display QR code. If this error persists,{' '}
-          <TicketCreateModal display="link">
-            submit a ticket
-          </TicketCreateModal>
-          .
+          <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
         </SectionMessage>
       )}
     </>
diff --git a/libs/tup-components/src/mfa/MfaSmsPanel.tsx b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
index 2845fab44..776d861c9 100644
--- a/libs/tup-components/src/mfa/MfaSmsPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
@@ -34,12 +34,8 @@ const MfaSmsPanel: React.FC = () => {
       </form>
       {smsMutation.isError && (
         <SectionMessage type="error" className={styles['qr-code-message']}>
-          Unable to pair via SMS. If this error
-          persists,{' '}
-          <TicketCreateModal display="link">
-            submit a ticket
-          </TicketCreateModal>
-          .
+          Unable to pair via SMS. If this error persists,{' '}
+          <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
         </SectionMessage>
       )}
     </>
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index f48972e17..5486f3c5f 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -43,7 +43,11 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
         </p>
       )}
       {error && (
-        <SectionMessage type="error" scope="section" className={styles['qr-code-message']}>
+        <SectionMessage
+          type="error"
+          scope="section"
+          className={styles['qr-code-message']}
+        >
           Error validating MFA token: error.message
         </SectionMessage>
       )}

From eb77b11305cbaa7f0a17fe1199d2ae6c31272036 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 21 Jul 2023 11:24:53 -0500
Subject: [PATCH 20/92] fix: bad grammar in error message

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 00684fb07..2f6cc68c1 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -43,7 +43,7 @@ const MfaQRPanel: React.FC = () => {
       {data && !data.otpkey && (
         <p className={styles['qr-code-message']}>
           Can't scan QR code?{' '}
-          <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
+          <TicketCreateModal display="link">Submit a ticket.</TicketCreateModal>
         </p>
       )}
       {!data && isError && (

From 2ecd7f5fb450b95b33dca8adc4694c8a97042e82 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 21 Jul 2023 11:26:30 -0500
Subject: [PATCH 21/92] fix: bad grammar, remove please

---
 libs/tup-components/src/accounts/ManageAccountMfa.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/libs/tup-components/src/accounts/ManageAccountMfa.tsx b/libs/tup-components/src/accounts/ManageAccountMfa.tsx
index a2524a272..d37c41345 100644
--- a/libs/tup-components/src/accounts/ManageAccountMfa.tsx
+++ b/libs/tup-components/src/accounts/ManageAccountMfa.tsx
@@ -135,8 +135,7 @@ export const AccountMfa: React.FC = () => {
         <MfaSectionHeader />
         <SectionMessage type="error">
           There was an error retrieving your multifactor authentication status.
-          Your account may be in a non-valid state. if this error persists
-          please{' '}
+          Your account may be in a non-valid state. If this error persists,{' '}
           <TicketCreateModal display="link">submit a ticket</TicketCreateModal>{' '}
           with this information and TACC User Services will assist you.
         </SectionMessage>

From 1866868be57c58334ff89ee20874a42122c390f8 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 21 Jul 2023 15:32:53 -0500
Subject: [PATCH 22/92] feat: TextCopyField.jsx to .tsx, and enable it

---
 libs/core-components/src/index.ts             |  1 +
 .../src/lib/TextCopyField/TextCopyField.jsx   | 91 -------------------
 .../TextCopyField/TextCopyField.module.css    |  8 +-
 .../src/lib/TextCopyField/TextCopyField.tsx   | 77 ++++++++++++++++
 4 files changed, 80 insertions(+), 97 deletions(-)
 delete mode 100644 libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
 create mode 100644 libs/core-components/src/lib/TextCopyField/TextCopyField.tsx

diff --git a/libs/core-components/src/index.ts b/libs/core-components/src/index.ts
index 599a3d804..4b41f5841 100644
--- a/libs/core-components/src/index.ts
+++ b/libs/core-components/src/index.ts
@@ -11,6 +11,7 @@ export { default as Paginator } from './lib/Paginator';
 export { default as Pill } from './lib/Pill';
 export { default as DropdownSelector } from './lib/DropdownSelector';
 export { default as ShowMore } from './lib/ShowMore';
+export { default as TextCopyField } from './lib/TextCopyField';
 export { default as SectionTableWrapper } from './lib/SectionTableWrapper';
 export { default as InfiniteScrollTable } from './lib/InfiniteScrollTable';
 export { default as Sidebar } from './lib/Sidebar';
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
deleted file mode 100644
index 6022c5198..000000000
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import PropTypes from 'prop-types';
-
-import Button from '../Button';
-
-import styles from './TextCopyField.module.css';
-
-const TextCopyField = ({ value, placeholder, buttonWrapper }) => {
-  const transitionDuration = 0.15; // second(s)
-  const stateDuration = 1; // second(s)
-  const stateTimeout = transitionDuration + stateDuration; // second(s)
-
-  const [isCopied, setIsCopied] = useState(false);
-
-  const onCopy = useCallback(() => {
-    setIsCopied(true);
-
-    const timeout = setTimeout(() => {
-      setIsCopied(false);
-      clearTimeout(timeout);
-    }, stateTimeout * 1000);
-  }, [setIsCopied, stateTimeout]);
-  const isEmpty = !value || value.length === 0;
-  const onChange = (event) => {
-    // Swallow keyboard events on the Input control, but
-    // still allow selecting the text. readOnly property of
-    // Input is not adequate for this purpose because it
-    // prevents text selection
-    event.preventDefault();
-  };
-
-  const ButtonWrapper = buttonWrapper;
-  const CopyButton = (
-    <CopyToClipboard text={value}>
-      <Button
-        className={`${styles['copy-button']} ${
-          isCopied ? styles['is-copied'] : ''
-        }`}
-        // RFE: Avoid manual JS ↔ CSS sync of transition duration by using:
-        //      - `data-attribute` and `attr()` (pending browser support)
-        //      - PostCSS and JSON variables (pending greater need for this)
-        style={{ '--transition-duration': `${transitionDuration}s` }}
-        onClick={onCopy}
-        disabled={isEmpty}
-        iconNameBefore={isCopied ? 'approved-reverse' : 'link'}
-        type="button"
-      >
-        Copy
-      </Button>
-    </CopyToClipboard>
-  );
-  const CopyField = (
-    <input
-      type="text"
-      onChange={onChange}
-      value={value}
-      className={`form-control ${styles.input}`}
-      placeholder={placeholder}
-      data-testid="input"
-      readOnly
-    />
-  );
-
-  return (
-    <>
-      {ButtonWrapper ? (
-        <ButtonWrapper>
-          <CopyButton />
-        </ButtonWrapper>
-      ) : (
-        <CopyButton />
-      )}
-      <CopyField />
-    </>
-  );
-};
-
-TextCopyField.propTypes = {
-  buttonWrapper: PropTypes.node,
-  placeholder: PropTypes.string,
-  value: PropTypes.string,
-};
-
-TextCopyField.defaultProps = {
-  buttonWrapper: undefined,
-  placeholder: '',
-  value: '',
-};
-
-export default TextCopyField;
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css b/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css
index c0ad01b05..87667f65d 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css
@@ -1,12 +1,8 @@
 @import url('@tacc/core-styles/dist/settings/color--portal.css');
 
-.input {
-  /* composes: input from '@tacc/core-styles/dist/components/...form.css'; */
-}
-
 .copy-button {
-  /* So JavaScript can set this (JavaScript also needs the value) */
-  --transition-duration: 0;
+  /* WARNING: Must match JavaScript `transitionDuration` */
+  --transition-duration: 0.15;
 
   transition: color var(--transition-duration),
     background-color var(--transition-duration);
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
new file mode 100644
index 000000000..6118b70cf
--- /dev/null
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -0,0 +1,77 @@
+import React, { useCallback, useState } from 'react';
+
+import Button from '../Button';
+
+import styles from './TextCopyField.module.css';
+
+type TextCopyFieldProps = {
+  value: string,
+  placeholder?: string,
+  ButtonWrapper?: React.FC<React.PropsWithChildren>,
+};
+
+const TextCopyField: React.FC<TextCopyFieldProps> = ({ value, placeholder, ButtonWrapper })=> {
+  /* WARNING: Must match CSS `--transition-duration` */
+  const transitionDuration = 0.15; // second(s)
+  const stateDuration = 1; // second(s)
+  const stateTimeout = transitionDuration + stateDuration; // second(s)
+
+  const [isCopied, setIsCopied] = useState(false);
+
+  const onCopy = useCallback(() => {
+    navigator.clipboard.writeText(value);
+    setIsCopied(true);
+
+    const timeout = setTimeout(() => {
+      setIsCopied(false);
+      clearTimeout(timeout);
+    }, stateTimeout * 1000);
+  }, [value, setIsCopied, stateTimeout]);
+  const isEmpty = !value || value.length === 0;
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    // Swallow keyboard events on the Input control, but
+    // still allow selecting the text. readOnly property of
+    // Input is not adequate for this purpose because it
+    // prevents text selection
+    event.preventDefault();
+  };
+
+  const CopyButton = () => {return (
+    <Button
+      className={`${styles['copy-button']} ${
+        isCopied ? styles['is-copied'] : ''
+      }`}
+      onClick={onCopy}
+      disabled={isEmpty}
+      iconNameBefore={isCopied ? 'approved-reverse' : 'link'}
+    >
+      Copy
+    </Button>
+  )};
+  const CopyField = () => {return (
+    <input
+      type="text"
+      onChange={onChange}
+      value={value}
+      className={styles['input']}
+      placeholder={placeholder}
+      data-testid="input"
+      readOnly
+    />
+  )};
+
+  return (
+    <>
+      {ButtonWrapper ? (
+        <ButtonWrapper>
+          <CopyButton />
+        </ButtonWrapper>
+      ) : (
+        <CopyButton />
+      )}
+      <CopyField />
+    </>
+  );
+};
+
+export default TextCopyField;

From 28ef6ad8db1a2534f2491916b2abf2b9095a95ac Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 21 Jul 2023 15:34:07 -0500
Subject: [PATCH 23/92] feat: TextCopyModal

---
 libs/core-components/src/index.ts             |  1 +
 .../src/lib/TextCopyModal/TextCopyModal.tsx   | 67 +++++++++++++++++++
 .../src/lib/TextCopyModal/index.ts            |  1 +
 3 files changed, 69 insertions(+)
 create mode 100644 libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
 create mode 100644 libs/core-components/src/lib/TextCopyModal/index.ts

diff --git a/libs/core-components/src/index.ts b/libs/core-components/src/index.ts
index 4b41f5841..047524da1 100644
--- a/libs/core-components/src/index.ts
+++ b/libs/core-components/src/index.ts
@@ -12,6 +12,7 @@ export { default as Pill } from './lib/Pill';
 export { default as DropdownSelector } from './lib/DropdownSelector';
 export { default as ShowMore } from './lib/ShowMore';
 export { default as TextCopyField } from './lib/TextCopyField';
+export { default as TextCopyModal } from './lib/TextCopyModal';
 export { default as SectionTableWrapper } from './lib/SectionTableWrapper';
 export { default as InfiniteScrollTable } from './lib/InfiniteScrollTable';
 export { default as Sidebar } from './lib/Sidebar';
diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
new file mode 100644
index 000000000..fc5cf103b
--- /dev/null
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Formik } from 'formik';
+import { FieldWrapperFormik as FieldWrapper } from '@tacc/core-wrappers';
+import { Button, TextCopyField } from '@tacc/core-components';
+
+const TextCopyModal: React.FC<
+  React.PropsWithChildren<{
+    display: 'secondary' | 'link';
+    title: string;
+    text: string;
+    hint?: React.ReactNode;
+  }>
+> = ({ children, display, title, text, hint }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const closeBtn = (
+    <button className="close" onClick={toggle} type="button">
+      &times;
+    </button>
+  );
+
+  const ButtonWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
+    return <div className="input-group-prepend">{children}</div>;
+  };
+
+  return (
+    <>
+      <Button type={display} onClick={() => toggle()}>
+        {children}
+      </Button>
+      <Modal
+        isOpen={isOpen}
+        toggle={toggle}
+        size="lg"
+        className="modal-dialog-centered"
+      >
+        <ModalHeader
+          toggle={toggle}
+          close={closeBtn}
+        >
+          {title}
+        </ModalHeader>
+        <ModalBody>
+          <Formik>
+            <FieldWrapper
+              name='text'
+              label='Code'
+              description={hint}
+              className="s-affixed-input-wrapper s-affixed-input-wrapper__prepend"
+            >
+              <TextCopyField
+                value={text}
+                // ButtonWrapper={ButtonWrapper}
+              />
+            </FieldWrapper>
+          </Formik>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default TextCopyModal;
diff --git a/libs/core-components/src/lib/TextCopyModal/index.ts b/libs/core-components/src/lib/TextCopyModal/index.ts
new file mode 100644
index 000000000..d89575528
--- /dev/null
+++ b/libs/core-components/src/lib/TextCopyModal/index.ts
@@ -0,0 +1 @@
+export { default } from './TextCopyModal';

From f75372022c19a61c73d96280039642a3d77196d6 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 21 Jul 2023 15:35:59 -0500
Subject: [PATCH 24/92] fix: FieldWrapper, opt. req. & let desc. be React

---
 libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
index 796466c69..dc5c430c1 100644
--- a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
@@ -4,8 +4,8 @@ import './FieldWrapper.css';
 
 export type FieldWrapperProps = {
   label: string;
-  required: boolean;
-  description: string;
+  required?: boolean;
+  description: React.ReactNode;
   error?: string;
   children?: React.ReactNode;
 };

From fa7a9109f14daa4119dc848c97d9347e817b65c6 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 21 Jul 2023 15:36:31 -0500
Subject: [PATCH 25/92] fix: FieldWrapperFormik, let desc. be React

---
 .../src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index 577231874..a402cf386 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -6,7 +6,7 @@ export type FieldWrapperProps = {
   name: string;
   label: string;
   required?: boolean;
-  description?: string;
+  description?: React.ReactNode;
 };
 const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
   name,

From e3e45be325a234be79823f4206d0a3ceda0ef526 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 21 Jul 2023 15:36:49 -0500
Subject: [PATCH 26/92] feat: text copy modal (TUP-535:2.1.3)

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 39 ++++++++++++++++------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 2f6cc68c1..2a9648362 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 import { useMfaPairTotp } from '@tacc/tup-hooks';
-import { Button, LoadingSpinner, SectionMessage } from '@tacc/core-components';
+import {
+  Button,
+  LoadingSpinner,
+  SectionMessage,
+  TextCopyModal,
+} from '@tacc/core-components';
 import { TicketCreateModal } from '../tickets';
 import styles from './Mfa.module.css';
 
@@ -28,19 +33,33 @@ const MfaQRPanel: React.FC = () => {
         {!data && isLoading && <LoadingSpinner />}
         {data && <img src={data.googleurl.img} alt="Google MFA QR Code"></img>}
       </div>
-      {data && data.otpkey && (
+      {(
+      // {data && data.otpkey && (
         <p className={styles['qr-code-message']}>
-          Can't scan QR code? <code>{data.otpkey.value_b32}</code> &nbsp;(
-          <Button
-            type="link"
-            onClick={() => navigator.clipboard.writeText(data.otpkey.value_b32)}
+          Can't scan QR code?{' '}
+          <TextCopyModal
+            display="link"
+            title="Alternative Verification Code"
+            text="data.otpkey.value_b32"
+            hint={
+              <>
+                Enter this code into an approved{' '}
+                <a
+                  href="https://docs.tacc.utexas.edu/basics/mfa/#mfaapps"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  MFA pairing app
+                </a>
+                .
+              </>
+            }
           >
-            copy to clipboard
-          </Button>
-          )
+            View Alternative Verification Code
+          </TextCopyModal>
         </p>
       )}
-      {data && !data.otpkey && (
+      {false && data && !data.otpkey && (
         <p className={styles['qr-code-message']}>
           Can't scan QR code?{' '}
           <TicketCreateModal display="link">Submit a ticket.</TicketCreateModal>

From d4e1bd0a14b8ba186098044fdd06c740c4346b35 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Fri, 21 Jul 2023 15:53:28 -0500
Subject: [PATCH 27/92] chore: uninstall react-copy-to-clipboard

---
 package-lock.json | 48 -----------------------------------------------
 package.json      |  1 -
 2 files changed, 49 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 55f8812ae..11312d189 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "js-cookie": "^3.0.1",
         "lodash": "^4.17.21",
         "react": "18.2.0",
-        "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "18.2.0",
         "react-dropzone": "^14.2.3",
         "react-resize-detector": "^7.1.2",
@@ -9278,14 +9277,6 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
-    "node_modules/copy-to-clipboard": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
-      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
-      "dependencies": {
-        "toggle-selection": "^1.0.6"
-      }
-    },
     "node_modules/copy-webpack-plugin": {
       "version": "10.2.4",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz",
@@ -21194,18 +21185,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-copy-to-clipboard": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
-      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
-      "dependencies": {
-        "copy-to-clipboard": "^3.3.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": "^15.3.0 || 16 || 17 || 18"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -23824,11 +23803,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/toggle-selection": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
-      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
-    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -32357,14 +32331,6 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
-    "copy-to-clipboard": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
-      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
-      "requires": {
-        "toggle-selection": "^1.0.6"
-      }
-    },
     "copy-webpack-plugin": {
       "version": "10.2.4",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz",
@@ -41129,15 +41095,6 @@
         "loose-envify": "^1.1.0"
       }
     },
-    "react-copy-to-clipboard": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
-      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
-      "requires": {
-        "copy-to-clipboard": "^3.3.1",
-        "prop-types": "^15.8.1"
-      }
-    },
     "react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -43143,11 +43100,6 @@
         "is-number": "^7.0.0"
       }
     },
-    "toggle-selection": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
-      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
-    },
     "toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
diff --git a/package.json b/package.json
index e74ae04c3..b23b258aa 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "react": "18.2.0",
-    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-resize-detector": "^7.1.2",

From 6152efaf21488d4a5d8efcdb8a8bd3ea0a62213c Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 13:26:35 -0500
Subject: [PATCH 28/92] feat: install @tacc/core-styles 2.14.0

---
 apps/tup-ui/src/main.global.css |  2 +-
 package-lock.json               | 71 ++++++++++++++++-----------------
 package.json                    |  2 +-
 3 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index 883648de7..15e72dfbb 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -1,7 +1,7 @@
 /* To use new c-nav component not yet in TACC/Core-CMS core-styles.base.css */
 /* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.13+ */
 /* CAVEAT: Duplicates older, unchanged, global c-nav styles */
-@import url("https://unpkg.com/@tacc/core-styles@2.13.0/dist/components/c-nav.css");
+@import url("https://unpkg.com/@tacc/core-styles@2.14.0/dist/components/c-nav.css");
 
 /* To overwrite @tacc/core-styles CEPv2 spacing */
 :root {
diff --git a/package-lock.json b/package-lock.json
index 11312d189..444453ae8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,7 +41,7 @@
         "@nrwl/vite": "^15.6.3",
         "@nrwl/web": "15.6.3",
         "@nrwl/workspace": "15.6.3",
-        "@tacc/core-styles": "^2.6.2",
+        "@tacc/core-styles": "^2.14.0",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "13.4.0",
         "@testing-library/user-event": "^14.4.3",
@@ -5703,9 +5703,9 @@
       }
     },
     "node_modules/@tacc/core-styles": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.6.2.tgz",
-      "integrity": "sha512-0JjPjbcmSvYg7z2zRWIq3Yhj2I0L8fz+6L66AV8HVQUJ/7fDG1vC34mGR0q+l36kFT3KYCTA2+XOyOhxnc/C3w==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.14.0.tgz",
+      "integrity": "sha512-AXJIF9tOdUsiGdOehNntbN3OeuycKlE/cUjJCnG65kWkmryEUhcytSUZF29Xd7xXCvmNwr6qlCOSVNU39POlhA==",
       "dev": true,
       "bin": {
         "core-styles": "src/cli.js"
@@ -5723,7 +5723,6 @@
         "postcss": "^8.4.18",
         "postcss-banner": "^4.0.1",
         "postcss-cli": "^10.0.0",
-        "postcss-env-function": "^4.0.6",
         "postcss-extend": "^1.0.5",
         "postcss-import": "^15.0.0",
         "postcss-preset-env": "^7.8.3",
@@ -19463,9 +19462,9 @@
       }
     },
     "node_modules/postcss-cli/node_modules/fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -19480,15 +19479,15 @@
       }
     },
     "node_modules/postcss-cli/node_modules/globby": {
-      "version": "13.1.3",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
-      "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
       "dev": true,
       "peer": true,
       "dependencies": {
         "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.11",
-        "ignore": "^5.2.0",
+        "fast-glob": "^3.3.0",
+        "ignore": "^5.2.4",
         "merge2": "^1.4.1",
         "slash": "^4.0.0"
       },
@@ -19543,9 +19542,9 @@
       }
     },
     "node_modules/postcss-cli/node_modules/slash": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-5.0.0.tgz",
-      "integrity": "sha512-n6KkmvKS0623igEVj3FF0OZs1gYYJ0o0Hj939yc1fyxl2xt+xYpLnzJB6xBSqOfV9ZFLEWodBBN/heZJahuIJQ==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
       "dev": true,
       "peer": true,
       "engines": {
@@ -19556,9 +19555,9 @@
       }
     },
     "node_modules/postcss-cli/node_modules/yaml": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz",
-      "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
       "dev": true,
       "peer": true,
       "engines": {
@@ -29562,9 +29561,9 @@
       }
     },
     "@tacc/core-styles": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.6.2.tgz",
-      "integrity": "sha512-0JjPjbcmSvYg7z2zRWIq3Yhj2I0L8fz+6L66AV8HVQUJ/7fDG1vC34mGR0q+l36kFT3KYCTA2+XOyOhxnc/C3w==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.14.0.tgz",
+      "integrity": "sha512-AXJIF9tOdUsiGdOehNntbN3OeuycKlE/cUjJCnG65kWkmryEUhcytSUZF29Xd7xXCvmNwr6qlCOSVNU39POlhA==",
       "dev": true,
       "requires": {}
     },
@@ -39978,9 +39977,9 @@
       },
       "dependencies": {
         "fast-glob": {
-          "version": "3.2.12",
-          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-          "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+          "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
           "dev": true,
           "peer": true,
           "requires": {
@@ -39992,15 +39991,15 @@
           }
         },
         "globby": {
-          "version": "13.1.3",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
-          "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
+          "version": "13.2.2",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+          "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
           "dev": true,
           "peer": true,
           "requires": {
             "dir-glob": "^3.0.1",
-            "fast-glob": "^3.2.11",
-            "ignore": "^5.2.0",
+            "fast-glob": "^3.3.0",
+            "ignore": "^5.2.4",
             "merge2": "^1.4.1",
             "slash": "^4.0.0"
           },
@@ -40026,16 +40025,16 @@
           }
         },
         "slash": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-5.0.0.tgz",
-          "integrity": "sha512-n6KkmvKS0623igEVj3FF0OZs1gYYJ0o0Hj939yc1fyxl2xt+xYpLnzJB6xBSqOfV9ZFLEWodBBN/heZJahuIJQ==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+          "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
           "dev": true,
           "peer": true
         },
         "yaml": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.1.tgz",
-          "integrity": "sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==",
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+          "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
           "dev": true,
           "peer": true
         }
diff --git a/package.json b/package.json
index b23b258aa..5c8416604 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@nrwl/vite": "^15.6.3",
     "@nrwl/web": "15.6.3",
     "@nrwl/workspace": "15.6.3",
-    "@tacc/core-styles": "^2.6.2",
+    "@tacc/core-styles": "^2.14.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "^14.4.3",

From 48efbdfa41302b891d4dd63721c438ac6f7d7e7e Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 14:46:32 -0500
Subject: [PATCH 29/92] refactor: FieldWrapper mirror FeildWrapperFormik

Make FieldWrapper look like FeildWrapperFormik.

Lets FieldWrapper be used independent of Formik.
---
 .../src/lib/FieldWrapper/FieldWrapper.css     | 14 ------
 .../FieldWrapper.module.css}                  |  0
 .../src/lib/FieldWrapper/FieldWrapper.tsx     | 47 +++++++++----------
 .../FieldWrapperFormik/FieldWrapperFormik.tsx |  8 +++-
 4 files changed, 29 insertions(+), 40 deletions(-)
 delete mode 100644 libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.css
 rename libs/core-wrappers/src/lib/{FieldWrapperFormik/FieldWrapperFormik.module.css => FieldWrapper/FieldWrapper.module.css} (100%)

diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.css b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.css
deleted file mode 100644
index 75e38538f..000000000
--- a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.form-field__label {
-  font-weight: bold;
-}
-
-.form-field__help {
-  font-style: italic;
-  font-weight: 400;
-}
-
-.form-field__validation-error {
-  font-size: 0.8rem;
-  color: #eb6e6e;
-  padding-top: 5px;
-}
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.module.css b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css
similarity index 100%
rename from libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.module.css
rename to libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css
diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
index dc5c430c1..2758528ea 100644
--- a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
@@ -1,45 +1,44 @@
 import React from 'react';
-import { FormGroup, Label, FormText, Badge } from 'reactstrap';
-import './FieldWrapper.css';
+import { Badge } from 'reactstrap';
+
+import styles from './FieldWrapper.module.css';
 
 export type FieldWrapperProps = {
+  name?: string;
   label: string;
   required?: boolean;
-  description: React.ReactNode;
+  className?: string;
+  description?: React.ReactNode;
   error?: string;
-  children?: React.ReactNode;
 };
-const FieldWrapper: React.FC<FieldWrapperProps> = ({
+const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
+  name,
   label,
   required,
   description,
   children,
+  className,
   error,
 }) => (
-  <FormGroup>
-    <Label
-      className="form-field__label"
-      size="sm"
-      style={{ display: 'flex', alignItems: 'center' }}
-    >
-      {label}{' '}
+    <div className={`c-form__field ${required ? 'has-required' : ''} ${className}`}>
+    <label htmlFor={name} className={styles['label']}>
+      {label}
       {required ? (
-        <Badge color="danger" style={{ marginLeft: '10px' }}>
-          Required
+        <Badge color="danger">
+          <span className={styles['required-badge']}>Required</span>
         </Badge>
       ) : null}
-    </Label>
+    </label>
     {children}
-    {error ? (
-      <div className="form-field__validation-error">{error}</div>
-    ) : (
-      description && (
-        <FormText className="form-field__help" color="muted">
-          {description}
-        </FormText>
-      )
+    {error && (
+      <ul className="c-form__errors">
+        <li className={styles['error-text']}>{error}</li>
+      </ul>
     )}
-  </FormGroup>
+    <div className="c-form__help">
+      {description}
+    </div>
+  </div>
 );
 
 export default FieldWrapper;
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index a402cf386..1d712464e 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import { ErrorMessage } from 'formik';
 import { Badge } from 'reactstrap';
-import styles from './FieldWrapperFormik.module.css';
+
+import styles from '../FieldWrapper/FieldWrapper.module.css';
+
 export type FieldWrapperProps = {
   name: string;
   label: string;
   required?: boolean;
+  className?: string;
   description?: React.ReactNode;
 };
 const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
@@ -13,10 +16,11 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
   label,
   required,
   description,
+  className,
   children,
 }) => {
   return (
-    <div className={`c-form__field ${required ? 'has-required' : ''}`}>
+    <div className={`c-form__field ${required ? 'has-required' : ''} ${className}`}>
       <label htmlFor={name} className={styles['label']}>
         {label}
         {required && (

From dd6c8e3ec110b693eca436fa4b98bc0a71bca28e Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 14:48:42 -0500
Subject: [PATCH 30/92] feat: style text copy modal (TUP-535:2.1.3)

---
 apps/tup-ui/src/main.global.css                 |  4 ++++
 .../src/lib/TextCopyField/TextCopyField.tsx     |  9 ++++++---
 .../lib/TextCopyModal/TextCopyModal.module.css  |  3 +++
 .../src/lib/TextCopyModal/TextCopyModal.tsx     | 17 +++++++++--------
 4 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 libs/core-components/src/lib/TextCopyModal/TextCopyModal.module.css

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index 15e72dfbb..e1650f166 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -3,6 +3,10 @@
 /* CAVEAT: Duplicates older, unchanged, global c-nav styles */
 @import url("https://unpkg.com/@tacc/core-styles@2.14.0/dist/components/c-nav.css");
 
+/* To use s-affixed-input-wrapper which had been unused outside TACC/Core-CMS */
+/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.14+ */
+@import url("@tacc/core-styles/dist/trumps/s-affixed-input-wrapper.css");
+
 /* To overwrite @tacc/core-styles CEPv2 spacing */
 :root {
   /* TACC/Core-Styles/blob/823b7b9/src/lib/_imports/settings/space.css */
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
index 6118b70cf..a87c7acff 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -7,10 +7,12 @@ import styles from './TextCopyField.module.css';
 type TextCopyFieldProps = {
   value: string,
   placeholder?: string,
+  className?: string,
+  buttonClassName?: string,
   ButtonWrapper?: React.FC<React.PropsWithChildren>,
 };
 
-const TextCopyField: React.FC<TextCopyFieldProps> = ({ value, placeholder, ButtonWrapper })=> {
+const TextCopyField: React.FC<TextCopyFieldProps> = ({ value, placeholder, className, buttonClassName, ButtonWrapper })=> {
   /* WARNING: Must match CSS `--transition-duration` */
   const transitionDuration = 0.15; // second(s)
   const stateDuration = 1; // second(s)
@@ -40,7 +42,8 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({ value, placeholder, Butto
     <Button
       className={`${styles['copy-button']} ${
         isCopied ? styles['is-copied'] : ''
-      }`}
+      } ${buttonClassName}`}
+      size="small"
       onClick={onCopy}
       disabled={isEmpty}
       iconNameBefore={isCopied ? 'approved-reverse' : 'link'}
@@ -53,7 +56,7 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({ value, placeholder, Butto
       type="text"
       onChange={onChange}
       value={value}
-      className={styles['input']}
+      className={className}
       placeholder={placeholder}
       data-testid="input"
       readOnly
diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.module.css b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.module.css
new file mode 100644
index 000000000..2a30e4004
--- /dev/null
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.module.css
@@ -0,0 +1,3 @@
+.modal-body {
+  padding: calc(var(--global-space--section-gap) / 2);
+}
diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
index fc5cf103b..b0184bb8d 100644
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
-import { Formik } from 'formik';
-import { FieldWrapperFormik as FieldWrapper } from '@tacc/core-wrappers';
+import { FieldWrapper } from '@tacc/core-wrappers';
 import { Button, TextCopyField } from '@tacc/core-components';
 
+import styles from './TextCopyModal.module.css';
+
 const TextCopyModal: React.FC<
   React.PropsWithChildren<{
     display: 'secondary' | 'link';
@@ -35,7 +36,7 @@ const TextCopyModal: React.FC<
       <Modal
         isOpen={isOpen}
         toggle={toggle}
-        size="lg"
+        size="md"
         className="modal-dialog-centered"
       >
         <ModalHeader
@@ -44,20 +45,20 @@ const TextCopyModal: React.FC<
         >
           {title}
         </ModalHeader>
-        <ModalBody>
-          <Formik>
+        <ModalBody className={styles['modal-body']}>
+          <form>
             <FieldWrapper
               name='text'
               label='Code'
               description={hint}
-              className="s-affixed-input-wrapper s-affixed-input-wrapper__prepend"
+              className="s-affixed-input-wrapper s-affixed-input-wrapper--prepend s-affixed-input-wrapper--full-width"
             >
               <TextCopyField
                 value={text}
-                // ButtonWrapper={ButtonWrapper}
+                buttonClassName="s-affixed-input-wrapper__prepend"
               />
             </FieldWrapper>
-          </Formik>
+          </form>
         </ModalBody>
       </Modal>
     </>

From 0cf3f6e0027bdac772cd7d71b18e4c52a6fd7f47 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 15:20:20 -0500
Subject: [PATCH 31/92] npx nx format:write

---
 .../src/lib/TextCopyField/TextCopyField.tsx   | 70 +++++++++++--------
 .../src/lib/TextCopyModal/TextCopyModal.tsx   |  9 +--
 .../src/lib/FieldWrapper/FieldWrapper.tsx     |  8 +--
 .../FieldWrapperFormik/FieldWrapperFormik.tsx |  4 +-
 libs/tup-components/src/mfa/MfaQRPanel.tsx    |  6 +-
 5 files changed, 53 insertions(+), 44 deletions(-)

diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
index a87c7acff..20c2ac293 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -5,14 +5,20 @@ import Button from '../Button';
 import styles from './TextCopyField.module.css';
 
 type TextCopyFieldProps = {
-  value: string,
-  placeholder?: string,
-  className?: string,
-  buttonClassName?: string,
-  ButtonWrapper?: React.FC<React.PropsWithChildren>,
+  value: string;
+  placeholder?: string;
+  className?: string;
+  buttonClassName?: string;
+  ButtonWrapper?: React.FC<React.PropsWithChildren>;
 };
 
-const TextCopyField: React.FC<TextCopyFieldProps> = ({ value, placeholder, className, buttonClassName, ButtonWrapper })=> {
+const TextCopyField: React.FC<TextCopyFieldProps> = ({
+  value,
+  placeholder,
+  className,
+  buttonClassName,
+  ButtonWrapper,
+}) => {
   /* WARNING: Must match CSS `--transition-duration` */
   const transitionDuration = 0.15; // second(s)
   const stateDuration = 1; // second(s)
@@ -38,30 +44,34 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({ value, placeholder, class
     event.preventDefault();
   };
 
-  const CopyButton = () => {return (
-    <Button
-      className={`${styles['copy-button']} ${
-        isCopied ? styles['is-copied'] : ''
-      } ${buttonClassName}`}
-      size="small"
-      onClick={onCopy}
-      disabled={isEmpty}
-      iconNameBefore={isCopied ? 'approved-reverse' : 'link'}
-    >
-      Copy
-    </Button>
-  )};
-  const CopyField = () => {return (
-    <input
-      type="text"
-      onChange={onChange}
-      value={value}
-      className={className}
-      placeholder={placeholder}
-      data-testid="input"
-      readOnly
-    />
-  )};
+  const CopyButton = () => {
+    return (
+      <Button
+        className={`${styles['copy-button']} ${
+          isCopied ? styles['is-copied'] : ''
+        } ${buttonClassName}`}
+        size="small"
+        onClick={onCopy}
+        disabled={isEmpty}
+        iconNameBefore={isCopied ? 'approved-reverse' : 'link'}
+      >
+        Copy
+      </Button>
+    );
+  };
+  const CopyField = () => {
+    return (
+      <input
+        type="text"
+        onChange={onChange}
+        value={value}
+        className={className}
+        placeholder={placeholder}
+        data-testid="input"
+        readOnly
+      />
+    );
+  };
 
   return (
     <>
diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
index b0184bb8d..8bfb8dfc4 100644
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
@@ -39,17 +39,14 @@ const TextCopyModal: React.FC<
         size="md"
         className="modal-dialog-centered"
       >
-        <ModalHeader
-          toggle={toggle}
-          close={closeBtn}
-        >
+        <ModalHeader toggle={toggle} close={closeBtn}>
           {title}
         </ModalHeader>
         <ModalBody className={styles['modal-body']}>
           <form>
             <FieldWrapper
-              name='text'
-              label='Code'
+              name="text"
+              label="Code"
               description={hint}
               className="s-affixed-input-wrapper s-affixed-input-wrapper--prepend s-affixed-input-wrapper--full-width"
             >
diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
index 2758528ea..fc443aada 100644
--- a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
@@ -20,7 +20,9 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
   className,
   error,
 }) => (
-    <div className={`c-form__field ${required ? 'has-required' : ''} ${className}`}>
+  <div
+    className={`c-form__field ${required ? 'has-required' : ''} ${className}`}
+  >
     <label htmlFor={name} className={styles['label']}>
       {label}
       {required ? (
@@ -35,9 +37,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
         <li className={styles['error-text']}>{error}</li>
       </ul>
     )}
-    <div className="c-form__help">
-      {description}
-    </div>
+    <div className="c-form__help">{description}</div>
   </div>
 );
 
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index 1d712464e..4869c2101 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -20,7 +20,9 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
   children,
 }) => {
   return (
-    <div className={`c-form__field ${required ? 'has-required' : ''} ${className}`}>
+    <div
+      className={`c-form__field ${required ? 'has-required' : ''} ${className}`}
+    >
       <label htmlFor={name} className={styles['label']}>
         {label}
         {required && (
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 2a9648362..1df3626fb 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -33,8 +33,8 @@ const MfaQRPanel: React.FC = () => {
         {!data && isLoading && <LoadingSpinner />}
         {data && <img src={data.googleurl.img} alt="Google MFA QR Code"></img>}
       </div>
-      {(
-      // {data && data.otpkey && (
+      {
+        // {data && data.otpkey && (
         <p className={styles['qr-code-message']}>
           Can't scan QR code?{' '}
           <TextCopyModal
@@ -58,7 +58,7 @@ const MfaQRPanel: React.FC = () => {
             View Alternative Verification Code
           </TextCopyModal>
         </p>
-      )}
+      }
       {false && data && !data.otpkey && (
         <p className={styles['qr-code-message']}>
           Can't scan QR code?{' '}

From caafb1048eebe8682122c6a17180963ae7f338a1 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 15:21:54 -0500
Subject: [PATCH 32/92] fix: qr code box was not 200px until image loaded

---
 libs/tup-components/src/mfa/Mfa.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 51e2bebf8..cc7ad75ae 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -65,6 +65,10 @@ li.pairing-separator {
     margin-block: 20px;
     margin-inline: var(--border-width);
 }
+/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles#204 */
+.qr-code-box > button {
+    width: 200px !important; /* overwrite Core-Styles, which is too specific */
+}
 
 
 /* Wide */

From bcf682ad0aed79f9292ff0e18f08a22f5a4947a5 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 15:23:01 -0500
Subject: [PATCH 33/92] fix: remove test logic for msg. about qr alt. code

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 1df3626fb..d9df70635 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -33,8 +33,7 @@ const MfaQRPanel: React.FC = () => {
         {!data && isLoading && <LoadingSpinner />}
         {data && <img src={data.googleurl.img} alt="Google MFA QR Code"></img>}
       </div>
-      {
-        // {data && data.otpkey && (
+      {data && data.otpkey && (
         <p className={styles['qr-code-message']}>
           Can't scan QR code?{' '}
           <TextCopyModal
@@ -58,8 +57,8 @@ const MfaQRPanel: React.FC = () => {
             View Alternative Verification Code
           </TextCopyModal>
         </p>
-      }
-      {false && data && !data.otpkey && (
+      )}
+      {data && !data.otpkey && (
         <p className={styles['qr-code-message']}>
           Can't scan QR code?{' '}
           <TicketCreateModal display="link">Submit a ticket.</TicketCreateModal>

From 6b8d8623071320857c7a8ae8181dd720270ddd87 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 15:23:54 -0500
Subject: [PATCH 34/92] fix: pass qr alt. verification code

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index d9df70635..5f8a4d910 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -39,7 +39,7 @@ const MfaQRPanel: React.FC = () => {
           <TextCopyModal
             display="link"
             title="Alternative Verification Code"
-            text="data.otpkey.value_b32"
+            text={data.otpkey.value_b32}
             hint={
               <>
                 Enter this code into an approved{' '}

From e3ef9ae8d1b01876d03da6b84b1ead3cbdaf4c22 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 16:44:41 -0500
Subject: [PATCH 35/92] feat: allow markup in label e.g. <a>

---
 libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx      | 4 ++--
 .../src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx         | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
index fc443aada..53f07232e 100644
--- a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
@@ -5,11 +5,11 @@ import styles from './FieldWrapper.module.css';
 
 export type FieldWrapperProps = {
   name?: string;
-  label: string;
+  label: React.ReactNode;
   required?: boolean;
   className?: string;
   description?: React.ReactNode;
-  error?: string;
+  error?: React.ReactNode;
 };
 const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
   name,
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index 4869c2101..3a45254a7 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -6,7 +6,7 @@ import styles from '../FieldWrapper/FieldWrapper.module.css';
 
 export type FieldWrapperProps = {
   name: string;
-  label: string;
+  label: React.ReactNode;
   required?: boolean;
   className?: string;
   description?: React.ReactNode;

From 26722e09d9a55bb200ef0621f6f4b2a4e4a0200a Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 16:54:47 -0500
Subject: [PATCH 36/92] fix: markup in label should not be spaced by flex

---
 .../src/lib/FieldWrapper/FieldWrapper.module.css       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css
index 5a7a98a66..20ffbd530 100644
--- a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css
+++ b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css
@@ -1,9 +1,15 @@
-.label {
+/* TODO: Replace this CSS with markup using Core-Styles classes:
+         - `has-required`
+         - `c-form__star`
+         And test on all forms.
+*/
+/* To only use flex layout as necessary */
+/* WARNING: If label has an <a> tag, that <a> tag has spaces (from flex) */
+.label:has(.required-badge) {
     display: flex;
     flex-direction: row;
     gap: 1rem;
 }
-
 .required-badge {
     color: white;
     font-weight: var(--medium);

From 51f76421d21e6b017d5ab09f753c03f2312676fa Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 16:55:13 -0500
Subject: [PATCH 37/92] fix: let core-styles style form error text

---
 .../src/lib/FieldWrapper/FieldWrapper.module.css             | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css
index 20ffbd530..641703485 100644
--- a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css
+++ b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css
@@ -14,8 +14,3 @@
     color: white;
     font-weight: var(--medium);
 }
-
-.error-text {
-    font-style: italic;
-    color: #eb6e6e
-}

From ec61a3d2be08918a8e93dfdc0bddc5375181a868 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 16:57:23 -0500
Subject: [PATCH 38/92] fix: use FieldWrapper consistently and correctly

Prevents form error messages overlapping qr code messages*.

* These should be called mfa messages. Expect a commit/fix.
---
 libs/tup-components/src/mfa/Mfa.module.css    | 15 ++--
 libs/tup-components/src/mfa/MfaQRPanel.tsx    | 71 ++++++++++++-------
 libs/tup-components/src/mfa/MfaSmsPanel.tsx   | 48 ++++++-------
 .../tup-components/src/mfa/MfaSuccessView.tsx |  8 +--
 .../src/mfa/MfaValidationPanel.tsx            | 37 ++++------
 5 files changed, 97 insertions(+), 82 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index cc7ad75ae..646698a94 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -11,7 +11,8 @@ ol.pairing-container {
 }
 
 .pairing-container > *:not(.pairing-separator) {
-    min-width: 200px;
+    min-width: 210px;
+    max-width: 375px;
 }
 
 .pairing-separator {
@@ -109,9 +110,12 @@ li.pairing-separator {
     padding-top: 10px;
     padding-bottom: 10px;
 }
-
-.submit-button {
-    padding-top: 20px;
+.mfa-form input {
+    /* To prevent input field from stretching */
+    /* FAQ: Input field stretched when long error message */
+    /* HELP: Can this be fixed in Core Styles? */
+    /* WARNING: This would cause bug: shrink login form field width */
+    width: fit-content;
 }
 
 
@@ -121,8 +125,7 @@ li.pairing-separator {
     height: fit-content;
     padding: var(--global-space--section)
 }
-
-.mfa-return-button {
+.mfa-success-container button {
     margin-top: 50px;
     font-size: 1.1rem;
 }
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 5f8a4d910..d1296565e 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -6,6 +6,7 @@ import {
   SectionMessage,
   TextCopyModal,
 } from '@tacc/core-components';
+import { FieldWrapper } from '@tacc/core-wrappers';
 import { TicketCreateModal } from '../tickets';
 import styles from './Mfa.module.css';
 
@@ -13,26 +14,52 @@ const MfaQRPanel: React.FC = () => {
   const { mutate, isLoading, data, isError } = useMfaPairTotp();
   return (
     <>
-      <div>
-        Open an approved{' '}
-        <a
-          href="https://docs.tacc.utexas.edu/basics/mfa/#mfaapps"
-          target="_blank"
-          rel="noreferrer"
+      <form className={styles['mfa-form']}>
+        <FieldWrapper
+          name="mfa-phone-number"
+          label={
+            <>
+              Open an approved{' '}
+              <a
+                href="https://docs.tacc.utexas.edu/basics/mfa/#mfaapps"
+                target="_blank"
+                rel="noreferrer"
+              >
+                MFA pairing app
+              </a>{' '}
+              and scan the following QR code:
+            </>
+          }
+          error={
+            !data &&
+            isError && (
+              <>
+                Unable to display QR code. If this error persists,{' '}
+                <TicketCreateModal display="link">
+                  submit a ticket
+                </TicketCreateModal>
+                .
+              </>
+            )
+          }
         >
-          MFA pairing app
-        </a>{' '}
-        and scan the following QR code:
-      </div>
-      <div className={styles['qr-code-box']}>
-        {!data && !isLoading && (
-          <Button className={styles['qr-button']} onClick={() => mutate(null)}>
-            Click to Generate QR Code
-          </Button>
-        )}
-        {!data && isLoading && <LoadingSpinner />}
-        {data && <img src={data.googleurl.img} alt="Google MFA QR Code"></img>}
-      </div>
+          <div className={styles['qr-code-box']}>
+            {!data && !isLoading && (
+              <Button
+                id=""
+                className={styles['qr-button']}
+                onClick={() => mutate(null)}
+              >
+                Click to Generate QR Code
+              </Button>
+            )}
+            {!data && isLoading && <LoadingSpinner />}
+            {data && (
+              <img src={data.googleurl.img} alt="Google MFA QR Code"></img>
+            )}
+          </div>
+        </FieldWrapper>
+      </form>
       {data && data.otpkey && (
         <p className={styles['qr-code-message']}>
           Can't scan QR code?{' '}
@@ -64,12 +91,6 @@ const MfaQRPanel: React.FC = () => {
           <TicketCreateModal display="link">Submit a ticket.</TicketCreateModal>
         </p>
       )}
-      {!data && isError && (
-        <SectionMessage type="error" className={styles['qr-code-message']}>
-          Unable to display QR code. If this error persists,{' '}
-          <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
-        </SectionMessage>
-      )}
     </>
   );
 };
diff --git a/libs/tup-components/src/mfa/MfaSmsPanel.tsx b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
index 776d861c9..5ef667244 100644
--- a/libs/tup-components/src/mfa/MfaSmsPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useMfaPairSms } from '@tacc/tup-hooks';
-import { Button, SectionMessage } from '@tacc/core-components';
+import { Button } from '@tacc/core-components';
+import { FieldWrapper } from '@tacc/core-wrappers';
 import styles from './Mfa.module.css';
 import { TicketCreateModal } from '../tickets';
 
@@ -12,33 +13,32 @@ const MfaSmsPanel: React.FC = () => {
     smsMutation.mutate({ phoneNumber });
   };
   return (
-    <>
-      <span>Enter your phone number:</span>
-      <form onSubmit={(e) => onSubmit(e)} className={styles['mfa-form']}>
-        <label htmlFor="mfa-phone-number" hidden>
-          Enter your Phone Number:
-        </label>
+    <form onSubmit={(e) => onSubmit(e)} className={styles['mfa-form']}>
+      <FieldWrapper
+        name="mfa-phone-number"
+        label="Enter your Phone Number:"
+        error={
+          smsMutation.isError && (
+            <>
+              Unable to pair via SMS. If this error persists,{' '}
+              <TicketCreateModal display="link">
+                submit a ticket
+              </TicketCreateModal>
+              .
+            </>
+          )
+        }
+      >
         <input
+          required
           id="mfa-phone-number"
           onChange={(e) => setPhoneNumber(e.target.value)}
         />
-        <div className={styles['submit-button']}>
-          <Button
-            type="primary"
-            attr="submit"
-            isLoading={smsMutation.isLoading}
-          >
-            Send Token
-          </Button>
-        </div>
-      </form>
-      {smsMutation.isError && (
-        <SectionMessage type="error" className={styles['qr-code-message']}>
-          Unable to pair via SMS. If this error persists,{' '}
-          <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
-        </SectionMessage>
-      )}
-    </>
+      </FieldWrapper>
+      <Button type="primary" attr="submit" isLoading={smsMutation.isLoading}>
+        Send Token
+      </Button>
+    </form>
   );
 };
 
diff --git a/libs/tup-components/src/mfa/MfaSuccessView.tsx b/libs/tup-components/src/mfa/MfaSuccessView.tsx
index a5fc67a8e..b72bedb91 100644
--- a/libs/tup-components/src/mfa/MfaSuccessView.tsx
+++ b/libs/tup-components/src/mfa/MfaSuccessView.tsx
@@ -10,11 +10,9 @@ const MfaSuccessView: React.FC = () => {
       <SectionMessage type="success" scope="section">
         Pairing Successful
       </SectionMessage>
-      <div className={styles['mfa-return-button']}>
-        <Button type="primary" onClick={() => navigate('/')}>
-          Return to Dashboard
-        </Button>
-      </div>
+      <Button type="primary" onClick={() => navigate('/')}>
+        Return to Dashboard
+      </Button>
     </div>
   );
 };
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index 5486f3c5f..fcf033316 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useMfaVerify } from '@tacc/tup-hooks';
-import { Button, SectionMessage } from '@tacc/core-components';
+import { Button } from '@tacc/core-components';
+import { FieldWrapper } from '@tacc/core-wrappers';
 import TicketCreateModal from '../tickets/TicketCreateModal';
 import styles from './Mfa.module.css';
 
@@ -21,20 +22,21 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
 
   return (
     <>
-      {pairingMessage[tokenType]}
       <form onSubmit={(e) => onSubmit(e)} className={styles['mfa-form']}>
-        <label htmlFor="confirm-pairing" hidden>
+        <FieldWrapper
+          name="confirm-pairing"
+          label={pairingMessage[tokenType]}
+          error={error && `Error validating MFA token: "${error.message}"`}
+        >
+          <input
+            required
+            id="confirm-pairing"
+            onChange={(e) => setTokenValue(e.target.value)}
+          ></input>
+        </FieldWrapper>
+        <Button type="primary" attr="submit" isLoading={isLoading}>
           Confirm Pairing
-        </label>
-        <input
-          id="confirm-pairing"
-          onChange={(e) => setTokenValue(e.target.value)}
-        ></input>
-        <div className={styles['submit-button']}>
-          <Button type="primary" attr="submit" isLoading={isLoading}>
-            Confirm Pairing
-          </Button>
-        </div>
+        </Button>
       </form>
       {tokenType === 'sms' && (
         <p className={styles['qr-code-message']}>
@@ -42,15 +44,6 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
           <TicketCreateModal display="link">Get Help</TicketCreateModal>
         </p>
       )}
-      {error && (
-        <SectionMessage
-          type="error"
-          scope="section"
-          className={styles['qr-code-message']}
-        >
-          Error validating MFA token: error.message
-        </SectionMessage>
-      )}
     </>
   );
 };

From 7d401abf96d994f634148f4a5fd19dc49ea91337 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 16:57:52 -0500
Subject: [PATCH 39/92] chore: rename `qr-code-message` to `mfa-message`

---
 libs/tup-components/src/mfa/Mfa.module.css         | 2 +-
 libs/tup-components/src/mfa/MfaQRPanel.tsx         | 4 ++--
 libs/tup-components/src/mfa/MfaValidationPanel.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 646698a94..d2ca76a15 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -83,7 +83,7 @@ li.pairing-separator {
         position: relative;
         width: max-content; /* to not let wide child change parent width */
     }
-    .qr-code-message {
+    .mfa-message {
         /* To position message beneath both paring steps */
         position: absolute;
         top: 100%;
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index d1296565e..2d0d780ce 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -61,7 +61,7 @@ const MfaQRPanel: React.FC = () => {
         </FieldWrapper>
       </form>
       {data && data.otpkey && (
-        <p className={styles['qr-code-message']}>
+        <p className={styles['mfa-message']}>
           Can't scan QR code?{' '}
           <TextCopyModal
             display="link"
@@ -86,7 +86,7 @@ const MfaQRPanel: React.FC = () => {
         </p>
       )}
       {data && !data.otpkey && (
-        <p className={styles['qr-code-message']}>
+        <p className={styles['mfa-message']}>
           Can't scan QR code?{' '}
           <TicketCreateModal display="link">Submit a ticket.</TicketCreateModal>
         </p>
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index fcf033316..e9e9866a5 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -39,7 +39,7 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
         </Button>
       </form>
       {tokenType === 'sms' && (
-        <p className={styles['qr-code-message']}>
+        <p className={styles['mfa-message']}>
           Didn't receive a message within 5 minutes?{' '}
           <TicketCreateModal display="link">Get Help</TicketCreateModal>
         </p>

From ce524d646488d35c1f8748d14589ffdf7ed34a70 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 17:29:16 -0500
Subject: [PATCH 40/92] chore: remove unused `ButtonWrapper`

---
 libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
index 8bfb8dfc4..c66e1d1e2 100644
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
@@ -24,10 +24,6 @@ const TextCopyModal: React.FC<
     </button>
   );
 
-  const ButtonWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
-    return <div className="input-group-prepend">{children}</div>;
-  };
-
   return (
     <>
       <Button type={display} onClick={() => toggle()}>

From 17a3d0de321bb1883c1892d0c5400ac39212f6c7 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 17:34:17 -0500
Subject: [PATCH 41/92] chore: load sibling core-components from rel. path

---
 libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
index c66e1d1e2..2fc6b2b2b 100644
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { FieldWrapper } from '@tacc/core-wrappers';
-import { Button, TextCopyField } from '@tacc/core-components';
+import { Button, TextCopyField } from '../../';
 
 import styles from './TextCopyModal.module.css';
 

From cfb2977612b12078861397b08cc7e06429c65844 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 18:03:40 -0500
Subject: [PATCH 42/92] chore: remove unused `SectionMessage` import

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 2d0d780ce..a757aed66 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -3,7 +3,6 @@ import { useMfaPairTotp } from '@tacc/tup-hooks';
 import {
   Button,
   LoadingSpinner,
-  SectionMessage,
   TextCopyModal,
 } from '@tacc/core-components';
 import { FieldWrapper } from '@tacc/core-wrappers';

From 1b7aad9c04de2588138fbbe2b3e6447236803a26 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 18:10:42 -0500
Subject: [PATCH 43/92] fix: resolve "circular dependency"

I.E. Moved FieldWrapper to core-components.

Error: https://github.com/TACC/tup-ui/actions/runs/5650505534/job/15306952950?pr=270

Docs: https://nx.dev/recipes/other/resolve-circular-dependencies
---
 libs/core-components/src/index.ts                               | 1 +
 .../src/lib/FieldWrapper/FieldWrapper.module.css                | 0
 .../src/lib/FieldWrapper/FieldWrapper.tsx                       | 0
 .../src/lib/FieldWrapper/index.ts                               | 0
 libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx    | 2 +-
 libs/core-wrappers/src/index.ts                                 | 1 -
 6 files changed, 2 insertions(+), 2 deletions(-)
 rename libs/{core-wrappers => core-components}/src/lib/FieldWrapper/FieldWrapper.module.css (100%)
 rename libs/{core-wrappers => core-components}/src/lib/FieldWrapper/FieldWrapper.tsx (100%)
 rename libs/{core-wrappers => core-components}/src/lib/FieldWrapper/index.ts (100%)

diff --git a/libs/core-components/src/index.ts b/libs/core-components/src/index.ts
index 047524da1..c29a722a5 100644
--- a/libs/core-components/src/index.ts
+++ b/libs/core-components/src/index.ts
@@ -6,6 +6,7 @@ export { default as InlineMessage } from './lib/InlineMessage';
 export { default as SectionMessage } from './lib/SectionMessage';
 export { default as LoadingSpinner } from './lib/LoadingSpinner';
 export { default as DescriptionList } from './lib/DescriptionList';
+export { default as FieldWrapper } from './lib/FieldWrapper';
 export { default as Message } from './lib/Message';
 export { default as Paginator } from './lib/Paginator';
 export { default as Pill } from './lib/Pill';
diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.module.css
similarity index 100%
rename from libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.module.css
rename to libs/core-components/src/lib/FieldWrapper/FieldWrapper.module.css
diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
similarity index 100%
rename from libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
rename to libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
diff --git a/libs/core-wrappers/src/lib/FieldWrapper/index.ts b/libs/core-components/src/lib/FieldWrapper/index.ts
similarity index 100%
rename from libs/core-wrappers/src/lib/FieldWrapper/index.ts
rename to libs/core-components/src/lib/FieldWrapper/index.ts
diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
index 2fc6b2b2b..ef7d7c9ad 100644
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
-import { FieldWrapper } from '@tacc/core-wrappers';
+import { FieldWrapper } from '@tacc/core-components';
 import { Button, TextCopyField } from '../../';
 
 import styles from './TextCopyModal.module.css';
diff --git a/libs/core-wrappers/src/index.ts b/libs/core-wrappers/src/index.ts
index 765d4fc22..a525b0f18 100644
--- a/libs/core-wrappers/src/index.ts
+++ b/libs/core-wrappers/src/index.ts
@@ -4,7 +4,6 @@ export { default as QueryWrapper } from './lib/QueryWrapper';
 export { default as SubmitWrapper } from './lib/SubmitWrapper';
 export { default as Wizard, useWizard, WizardNavigation } from './lib/Wizard';
 export type WizardStep<T> = WizardStepType<T>;
-export { default as FieldWrapper } from './lib/FieldWrapper';
 export {
   FieldWrapperFormik,
   FormikInput,

From e306285c64f9aa2e5156005b2bba6c29f0a1370d Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 18:13:17 -0500
Subject: [PATCH 44/92] nx format:write

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index a757aed66..84f7c4f9c 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 import { useMfaPairTotp } from '@tacc/tup-hooks';
-import {
-  Button,
-  LoadingSpinner,
-  TextCopyModal,
-} from '@tacc/core-components';
+import { Button, LoadingSpinner, TextCopyModal } from '@tacc/core-components';
 import { FieldWrapper } from '@tacc/core-wrappers';
 import { TicketCreateModal } from '../tickets';
 import styles from './Mfa.module.css';

From ee0466517485bb62ad0e09c6cfc50fd81704e6f4 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 18:16:27 -0500
Subject: [PATCH 45/92] fix: loose ends after "circular dependency" fix

---
 .../src/lib/TextCopyModal/TextCopyModal.tsx               | 3 +--
 libs/tup-components/src/mfa/MfaQRPanel.tsx                | 8 ++++++--
 libs/tup-components/src/mfa/MfaSmsPanel.tsx               | 3 +--
 libs/tup-components/src/mfa/MfaValidationPanel.tsx        | 3 +--
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
index ef7d7c9ad..3bf59be6d 100644
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
-import { FieldWrapper } from '@tacc/core-components';
-import { Button, TextCopyField } from '../../';
+import { Button, FieldWrapper, TextCopyField } from '../../';
 
 import styles from './TextCopyModal.module.css';
 
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 84f7c4f9c..f216fe8bc 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import { useMfaPairTotp } from '@tacc/tup-hooks';
-import { Button, LoadingSpinner, TextCopyModal } from '@tacc/core-components';
-import { FieldWrapper } from '@tacc/core-wrappers';
+import {
+  Button,
+  FieldWrapper,
+  LoadingSpinner,
+  TextCopyModal,
+} from '@tacc/core-components';
 import { TicketCreateModal } from '../tickets';
 import styles from './Mfa.module.css';
 
diff --git a/libs/tup-components/src/mfa/MfaSmsPanel.tsx b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
index 5ef667244..2c8096620 100644
--- a/libs/tup-components/src/mfa/MfaSmsPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useMfaPairSms } from '@tacc/tup-hooks';
-import { Button } from '@tacc/core-components';
-import { FieldWrapper } from '@tacc/core-wrappers';
+import { Button, FieldWrapper } from '@tacc/core-components';
 import styles from './Mfa.module.css';
 import { TicketCreateModal } from '../tickets';
 
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index e9e9866a5..862608595 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useMfaVerify } from '@tacc/tup-hooks';
-import { Button } from '@tacc/core-components';
-import { FieldWrapper } from '@tacc/core-wrappers';
+import { Button, FieldWrapper } from '@tacc/core-components';
 import TicketCreateModal from '../tickets/TicketCreateModal';
 import styles from './Mfa.module.css';
 

From 864279a1cd21b2ed4b97bfe0b1446fed7d07a062 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 18:55:01 -0500
Subject: [PATCH 46/92] fix: fieldwrapper css duplication too confusing

---
 apps/tup-ui/src/main.global.css                  | 13 +++++++++++++
 .../src/lib/FieldWrapper/FieldWrapper.module.css | 16 ----------------
 .../src/lib/FieldWrapper/FieldWrapper.tsx        |  8 +++-----
 .../FieldWrapperFormik/FieldWrapperFormik.tsx    |  8 +++-----
 4 files changed, 19 insertions(+), 26 deletions(-)
 delete mode 100644 libs/core-components/src/lib/FieldWrapper/FieldWrapper.module.css

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index e1650f166..89a1a88eb 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -63,3 +63,16 @@ h3 {
 table {
   width: 100%;
 }
+
+/* Forms */
+/* TODO: Remove this after making it moot:
+         - either use c-form__star instead of <Badge> (like CMS)
+         - or add c-form__badge into TACC/Core-Styles
+*/
+.has-required .badge {
+  color: white;
+  font-weight: var(--medium);
+
+  margin-left: 0.5em;
+  vertical-align: top;
+}
diff --git a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.module.css b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.module.css
deleted file mode 100644
index 641703485..000000000
--- a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/* TODO: Replace this CSS with markup using Core-Styles classes:
-         - `has-required`
-         - `c-form__star`
-         And test on all forms.
-*/
-/* To only use flex layout as necessary */
-/* WARNING: If label has an <a> tag, that <a> tag has spaces (from flex) */
-.label:has(.required-badge) {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-}
-.required-badge {
-    color: white;
-    font-weight: var(--medium);
-}
diff --git a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
index 53f07232e..fb3b00c2e 100644
--- a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
+++ b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Badge } from 'reactstrap';
 
-import styles from './FieldWrapper.module.css';
-
 export type FieldWrapperProps = {
   name?: string;
   label: React.ReactNode;
@@ -23,18 +21,18 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
   <div
     className={`c-form__field ${required ? 'has-required' : ''} ${className}`}
   >
-    <label htmlFor={name} className={styles['label']}>
+    <label htmlFor={name}>
       {label}
       {required ? (
         <Badge color="danger">
-          <span className={styles['required-badge']}>Required</span>
+          <span>Required</span>
         </Badge>
       ) : null}
     </label>
     {children}
     {error && (
       <ul className="c-form__errors">
-        <li className={styles['error-text']}>{error}</li>
+        <li>{error}</li>
       </ul>
     )}
     <div className="c-form__help">{description}</div>
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index 3a45254a7..e763f557a 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { ErrorMessage } from 'formik';
 import { Badge } from 'reactstrap';
 
-import styles from '../FieldWrapper/FieldWrapper.module.css';
-
 export type FieldWrapperProps = {
   name: string;
   label: React.ReactNode;
@@ -23,11 +21,11 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
     <div
       className={`c-form__field ${required ? 'has-required' : ''} ${className}`}
     >
-      <label htmlFor={name} className={styles['label']}>
+      <label htmlFor={name}>
         {label}
         {required && (
           <Badge color="danger">
-            <span className={styles['required-badge']}>Required</span>
+            <span>Required</span>
           </Badge>
         )}
       </label>
@@ -36,7 +34,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
         {(msg) => {
           return (
             <ul className="c-form__errors">
-              <li className={styles['error-text']}>{msg}</li>
+              <li>{msg}</li>
             </ul>
           );
         }}

From 06bf9697e98dbc43a5f2ecaa85ddeb31d924a5b8 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 19:23:19 -0500
Subject: [PATCH 47/92] chore: remove excess `<span>` tag

---
 libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx    | 4 +---
 .../src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx         | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
index fb3b00c2e..a67b7b338 100644
--- a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
+++ b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
@@ -24,9 +24,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
     <label htmlFor={name}>
       {label}
       {required ? (
-        <Badge color="danger">
-          <span>Required</span>
-        </Badge>
+        <Badge color="danger">Required</Badge>
       ) : null}
     </label>
     {children}
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index e763f557a..b4348b5f7 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -24,9 +24,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
       <label htmlFor={name}>
         {label}
         {required && (
-          <Badge color="danger">
-            <span>Required</span>
-          </Badge>
+          <Badge color="danger">Required</Badge>
         )}
       </label>
       {children}

From a49e17f79c0851e0963de9c7ffac964ecbfbf03e Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 19:52:50 -0500
Subject: [PATCH 48/92] chore: no field wrapper desc unless desc exists

---
 libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx      | 2 +-
 .../src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
index a67b7b338..1bfa80af7 100644
--- a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
+++ b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
@@ -33,7 +33,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
         <li>{error}</li>
       </ul>
     )}
-    <div className="c-form__help">{description}</div>
+    {description && (<div className="c-form__help">{description}</div>)}
   </div>
 );
 
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index b4348b5f7..133640009 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -37,7 +37,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
           );
         }}
       </ErrorMessage>
-      <div className="c-form__help">{description}</div>
+      {description && (<div className="c-form__help">{description}</div>)}
     </div>
   );
 };

From c4fdd8733dbf491cd9566e871759a07fd7a9bc35 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Mon, 24 Jul 2023 20:23:13 -0500
Subject: [PATCH 49/92] npx nx format:write

---
 libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx  | 6 ++----
 .../src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx       | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
index 1bfa80af7..f486c5bda 100644
--- a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
+++ b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
@@ -23,9 +23,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
   >
     <label htmlFor={name}>
       {label}
-      {required ? (
-        <Badge color="danger">Required</Badge>
-      ) : null}
+      {required ? <Badge color="danger">Required</Badge> : null}
     </label>
     {children}
     {error && (
@@ -33,7 +31,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
         <li>{error}</li>
       </ul>
     )}
-    {description && (<div className="c-form__help">{description}</div>)}
+    {description && <div className="c-form__help">{description}</div>}
   </div>
 );
 
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index 133640009..6188aaec2 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -23,9 +23,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
     >
       <label htmlFor={name}>
         {label}
-        {required && (
-          <Badge color="danger">Required</Badge>
-        )}
+        {required && <Badge color="danger">Required</Badge>}
       </label>
       {children}
       <ErrorMessage name={name}>
@@ -37,7 +35,7 @@ const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
           );
         }}
       </ErrorMessage>
-      {description && (<div className="c-form__help">{description}</div>)}
+      {description && <div className="c-form__help">{description}</div>}
     </div>
   );
 };

From 74ed6a749860d2984f6c46e2bf8bd26ad7a5412b Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 25 Jul 2023 10:28:24 -0500
Subject: [PATCH 50/92] fix: grammar error from design

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index f216fe8bc..746b169e7 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -80,7 +80,7 @@ const MfaQRPanel: React.FC = () => {
               </>
             }
           >
-            View Alternative Verification Code
+            View alternative verification code.
           </TextCopyModal>
         </p>
       )}

From 83e10bf8e85410d869279c5dff889f1b55b79df8 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 10:11:17 -0500
Subject: [PATCH 51/92] chore: use installed @core-styles, not CDN

---
 apps/tup-ui/src/main.global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index 89a1a88eb..1f61c10d6 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -1,7 +1,7 @@
 /* To use new c-nav component not yet in TACC/Core-CMS core-styles.base.css */
 /* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.13+ */
 /* CAVEAT: Duplicates older, unchanged, global c-nav styles */
-@import url("https://unpkg.com/@tacc/core-styles@2.14.0/dist/components/c-nav.css");
+@import url("@tacc/core-styles/dist/components/c-nav.css");
 
 /* To use s-affixed-input-wrapper which had been unused outside TACC/Core-CMS */
 /* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.14+ */

From cfe9d9273f744451370ac930fa8ee96eec780992 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 10:28:36 -0500
Subject: [PATCH 52/92] refactor: simplify TextCopyField (no CopyField)

---
 .../src/lib/TextCopyField/TextCopyField.tsx   | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
index 20c2ac293..566e061fc 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -59,19 +59,6 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
       </Button>
     );
   };
-  const CopyField = () => {
-    return (
-      <input
-        type="text"
-        onChange={onChange}
-        value={value}
-        className={className}
-        placeholder={placeholder}
-        data-testid="input"
-        readOnly
-      />
-    );
-  };
 
   return (
     <>
@@ -82,7 +69,15 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
       ) : (
         <CopyButton />
       )}
-      <CopyField />
+      <input
+        type="text"
+        onChange={onChange}
+        value={value}
+        className={className}
+        placeholder={placeholder}
+        data-testid="input"
+        readOnly
+      />
     </>
   );
 };

From 529b3e80479e19f1798a8632ecb73f97902e2d8a Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 10:29:48 -0500
Subject: [PATCH 53/92] refactor: simplify TextCopyField (no ButtonWrapper)

---
 .../src/lib/TextCopyField/TextCopyField.tsx    | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
index 566e061fc..f7ab5b33b 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -9,7 +9,6 @@ type TextCopyFieldProps = {
   placeholder?: string;
   className?: string;
   buttonClassName?: string;
-  ButtonWrapper?: React.FC<React.PropsWithChildren>;
 };
 
 const TextCopyField: React.FC<TextCopyFieldProps> = ({
@@ -17,7 +16,6 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
   placeholder,
   className,
   buttonClassName,
-  ButtonWrapper,
 }) => {
   /* WARNING: Must match CSS `--transition-duration` */
   const transitionDuration = 0.15; // second(s)
@@ -44,8 +42,8 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
     event.preventDefault();
   };
 
-  const CopyButton = () => {
-    return (
+  return (
+    <>
       <Button
         className={`${styles['copy-button']} ${
           isCopied ? styles['is-copied'] : ''
@@ -57,18 +55,6 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
       >
         Copy
       </Button>
-    );
-  };
-
-  return (
-    <>
-      {ButtonWrapper ? (
-        <ButtonWrapper>
-          <CopyButton />
-        </ButtonWrapper>
-      ) : (
-        <CopyButton />
-      )}
       <input
         type="text"
         onChange={onChange}

From 962d715b68ca6e7ea771d5b879b78b67acdc16e5 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 10:46:15 -0500
Subject: [PATCH 54/92] =?UTF-8?q?refactor:=20TextCopyModal=20hint=20?=
 =?UTF-8?q?=E2=86=92=20<TextCopyModalHint>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 29 ++++++++++++----------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 746b169e7..ec0ecc99a 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -11,6 +11,21 @@ import styles from './Mfa.module.css';
 
 const MfaQRPanel: React.FC = () => {
   const { mutate, isLoading, data, isError } = useMfaPairTotp();
+
+  const TextCopyModalHint = () => (
+    <>
+      Enter this code into an approved{' '}
+      <a
+        href="https://docs.tacc.utexas.edu/basics/mfa/#mfaapps"
+        target="_blank"
+        rel="noreferrer"
+      >
+        MFA pairing app
+      </a>
+      .
+    </>
+  )
+
   return (
     <>
       <form className={styles['mfa-form']}>
@@ -66,19 +81,7 @@ const MfaQRPanel: React.FC = () => {
             display="link"
             title="Alternative Verification Code"
             text={data.otpkey.value_b32}
-            hint={
-              <>
-                Enter this code into an approved{' '}
-                <a
-                  href="https://docs.tacc.utexas.edu/basics/mfa/#mfaapps"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  MFA pairing app
-                </a>
-                .
-              </>
-            }
+            hint={<TextCopyModalHint />}
           >
             View alternative verification code.
           </TextCopyModal>

From 03ba9a2b67767352f458fc3f539ac0f384ee2873 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 10:50:58 -0500
Subject: [PATCH 55/92] feat: support and add id attr to <Button>

---
 libs/core-components/src/lib/Button/Button.tsx | 3 +++
 libs/tup-components/src/mfa/MfaQRPanel.tsx     | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx
index 374219e93..45ada8fce 100644
--- a/libs/core-components/src/lib/Button/Button.tsx
+++ b/libs/core-components/src/lib/Button/Button.tsx
@@ -41,6 +41,7 @@ type ButtonProps = React.PropsWithChildren<{
   className?: string;
   iconNameBefore?: string;
   iconNameAfter?: string;
+  id?: string;
   dataTestid?: string;
   disabled?: boolean;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
@@ -54,6 +55,7 @@ const Button: React.FC<ButtonProps> = ({
   className,
   iconNameBefore,
   iconNameAfter,
+  id,
   type = 'secondary',
   size = '',
   dataTestid,
@@ -74,6 +76,7 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
+      {...( id ? { id } : {} )}
       className={`
         ${styles['root']}
         c-button
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index ec0ecc99a..dfa81757e 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -30,7 +30,7 @@ const MfaQRPanel: React.FC = () => {
     <>
       <form className={styles['mfa-form']}>
         <FieldWrapper
-          name="mfa-phone-number"
+          name="mfa-qr-code"
           label={
             <>
               Open an approved{' '}
@@ -60,7 +60,7 @@ const MfaQRPanel: React.FC = () => {
           <div className={styles['qr-code-box']}>
             {!data && !isLoading && (
               <Button
-                id=""
+                id="mfa-qr-code"
                 className={styles['qr-button']}
                 onClick={() => mutate(null)}
               >

From b561e942256f7b843f744065507f82037a645fa8 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 10:54:00 -0500
Subject: [PATCH 56/92] npx nx format:write

---
 libs/core-components/src/lib/Button/Button.tsx | 2 +-
 libs/tup-components/src/mfa/MfaQRPanel.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx
index 45ada8fce..477fe7149 100644
--- a/libs/core-components/src/lib/Button/Button.tsx
+++ b/libs/core-components/src/lib/Button/Button.tsx
@@ -76,7 +76,7 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
-      {...( id ? { id } : {} )}
+      {...(id ? { id } : {})}
       className={`
         ${styles['root']}
         c-button
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index dfa81757e..7d7b03a8f 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -24,7 +24,7 @@ const MfaQRPanel: React.FC = () => {
       </a>
       .
     </>
-  )
+  );
 
   return (
     <>

From 538b72c02c5c0aba9c57397dfa466a3a340f7a1f Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 11:55:04 -0500
Subject: [PATCH 57/92] fix: qr code should resize w/ browser base font

---
 libs/tup-components/src/mfa/Mfa.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index d2ca76a15..478a17058 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -52,7 +52,7 @@ li.pairing-separator {
 
 /* TOTP pairing styles */
 .qr-button {
-    width: 200px;
+    width: 16rem;
     white-space: normal;
     text-overflow: none;
 }
@@ -60,15 +60,15 @@ li.pairing-separator {
 .qr-code-box > * {
     --border-width: var(--global-border-width--xx-thick);
 
-    width: 200px;
-    height: 200px;
+    width: 16rem;
+    height: 16rem;
     outline: var(--border-width) solid #D8D8D8;
     margin-block: 20px;
     margin-inline: var(--border-width);
 }
 /* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles#204 */
 .qr-code-box > button {
-    width: 200px !important; /* overwrite Core-Styles, which is too specific */
+    width: 16rem !important; /* overwrite Core-Styles, which is too specific */
 }
 
 

From 03779be9372902ab62b596f7847df36958721d5d Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 11:56:16 -0500
Subject: [PATCH 58/92] refactor: simplify qr code styles

---
 libs/tup-components/src/mfa/Mfa.module.css | 13 ++++++-------
 libs/tup-components/src/mfa/MfaQRPanel.tsx |  1 -
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 478a17058..3c7fbd511 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -51,12 +51,6 @@ li.pairing-separator {
 
 
 /* TOTP pairing styles */
-.qr-button {
-    width: 16rem;
-    white-space: normal;
-    text-overflow: none;
-}
-
 .qr-code-box > * {
     --border-width: var(--global-border-width--xx-thick);
 
@@ -66,9 +60,14 @@ li.pairing-separator {
     margin-block: 20px;
     margin-inline: var(--border-width);
 }
+.qr-code-box > button {
+    /* To overwrite c-button */
+    white-space: normal;
+    text-overflow: initial;
+}
 /* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles#204 */
 .qr-code-box > button {
-    width: 16rem !important; /* overwrite Core-Styles, which is too specific */
+    width: 16rem !important; /* overwrite c-button, which is too specific */
 }
 
 
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 7d7b03a8f..edb0be2e5 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -61,7 +61,6 @@ const MfaQRPanel: React.FC = () => {
             {!data && !isLoading && (
               <Button
                 id="mfa-qr-code"
-                className={styles['qr-button']}
                 onClick={() => mutate(null)}
               >
                 Click to Generate QR Code

From ff0727ac33fa177439fc873e466ec4bee1e972ff Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 11:56:56 -0500
Subject: [PATCH 59/92] refactor: use variable for qr code size

---
 libs/tup-components/src/mfa/Mfa.module.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 3c7fbd511..fece4ebd6 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -53,9 +53,10 @@ li.pairing-separator {
 /* TOTP pairing styles */
 .qr-code-box > * {
     --border-width: var(--global-border-width--xx-thick);
+    --qr-code-size: 16rem;
 
-    width: 16rem;
-    height: 16rem;
+    width: var(--qr-code-size);
+    height: var(--qr-code-size);
     outline: var(--border-width) solid #D8D8D8;
     margin-block: 20px;
     margin-inline: var(--border-width);
@@ -67,7 +68,7 @@ li.pairing-separator {
 }
 /* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles#204 */
 .qr-code-box > button {
-    width: 16rem !important; /* overwrite c-button, which is too specific */
+    width: var(--qr-code-size) !important; /* overwrite c-button, which is too specific */
 }
 
 

From 165d16b6a4b4746bdedf54e112e35af1ac1ce9ed Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 11:57:27 -0500
Subject: [PATCH 60/92] fix: increase qr coe size back to 200px not 160px

---
 libs/tup-components/src/mfa/Mfa.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index fece4ebd6..de0ff8237 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -53,7 +53,7 @@ li.pairing-separator {
 /* TOTP pairing styles */
 .qr-code-box > * {
     --border-width: var(--global-border-width--xx-thick);
-    --qr-code-size: 16rem;
+    --qr-code-size: 20rem;
 
     width: var(--qr-code-size);
     height: var(--qr-code-size);

From f2f325da3247d1fca38d2fd607d714f442f8a63e Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 12:07:55 -0500
Subject: [PATCH 61/92] fix(a11y): status msg box needs role before msg

https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22

> Check that the container destined to hold the status message has a role attribute with a value of status before the status message occurs.
---
 libs/tup-components/src/mfa/MfaQRPanel.tsx    | 47 ++++++++++---------
 .../src/mfa/MfaValidationPanel.tsx            | 14 +++---
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index edb0be2e5..0128f9fe3 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -59,10 +59,7 @@ const MfaQRPanel: React.FC = () => {
         >
           <div className={styles['qr-code-box']}>
             {!data && !isLoading && (
-              <Button
-                id="mfa-qr-code"
-                onClick={() => mutate(null)}
-              >
+              <Button id="mfa-qr-code" onClick={() => mutate(null)}>
                 Click to Generate QR Code
               </Button>
             )}
@@ -73,25 +70,29 @@ const MfaQRPanel: React.FC = () => {
           </div>
         </FieldWrapper>
       </form>
-      {data && data.otpkey && (
-        <p className={styles['mfa-message']}>
-          Can't scan QR code?{' '}
-          <TextCopyModal
-            display="link"
-            title="Alternative Verification Code"
-            text={data.otpkey.value_b32}
-            hint={<TextCopyModalHint />}
-          >
-            View alternative verification code.
-          </TextCopyModal>
-        </p>
-      )}
-      {data && !data.otpkey && (
-        <p className={styles['mfa-message']}>
-          Can't scan QR code?{' '}
-          <TicketCreateModal display="link">Submit a ticket.</TicketCreateModal>
-        </p>
-      )}
+      <p className={styles['mfa-message']} role="status">
+        {data && data.otpkey && (
+          <>
+            Can't scan QR code?{' '}
+            <TextCopyModal
+              display="link"
+              title="Alternative Verification Code"
+              text={data.otpkey.value_b32}
+              hint={<TextCopyModalHint />}
+            >
+              View alternative verification code.
+            </TextCopyModal>
+          </>
+        )}
+        {data && !data.otpkey && (
+          <>
+            Can't scan QR code?{' '}
+            <TicketCreateModal display="link">
+              Submit a ticket.
+            </TicketCreateModal>
+          </>
+        )}
+      </p>
     </>
   );
 };
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index 862608595..a593bca2b 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -37,12 +37,14 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
           Confirm Pairing
         </Button>
       </form>
-      {tokenType === 'sms' && (
-        <p className={styles['mfa-message']}>
-          Didn't receive a message within 5 minutes?{' '}
-          <TicketCreateModal display="link">Get Help</TicketCreateModal>
-        </p>
-      )}
+      <p className={styles['mfa-message']} role="status">
+        {tokenType === 'sms' && (
+          <>
+            Didn't receive a message within 5 minutes?{' '}
+            <TicketCreateModal display="link">Get Help</TicketCreateModal>
+          </>
+        )}
+      </p>
     </>
   );
 };

From 7613a4f168a7b9e2eef3e425560e3b2f999800ca Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 14:49:08 -0500
Subject: [PATCH 62/92] fix(a11y): no use <label> text for <button> text

I.e. let screen reader read the button text.
---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 0128f9fe3..7c9be4190 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -30,7 +30,6 @@ const MfaQRPanel: React.FC = () => {
     <>
       <form className={styles['mfa-form']}>
         <FieldWrapper
-          name="mfa-qr-code"
           label={
             <>
               Open an approved{' '}
@@ -59,7 +58,7 @@ const MfaQRPanel: React.FC = () => {
         >
           <div className={styles['qr-code-box']}>
             {!data && !isLoading && (
-              <Button id="mfa-qr-code" onClick={() => mutate(null)}>
+              <Button onClick={() => mutate(null)}>
                 Click to Generate QR Code
               </Button>
             )}

From ff7d271ad2a8aae48e0bc5f394d0a436f2788408 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 14:51:44 -0500
Subject: [PATCH 63/92] Revert "fix(a11y): status msg box needs role before
 msg"

This reverts commit f2f325da3247d1fca38d2fd607d714f442f8a63e.
---
 libs/tup-components/src/mfa/MfaQRPanel.tsx    | 42 +++++++++----------
 .../src/mfa/MfaValidationPanel.tsx            | 14 +++----
 2 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 7c9be4190..550a89639 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -69,29 +69,25 @@ const MfaQRPanel: React.FC = () => {
           </div>
         </FieldWrapper>
       </form>
-      <p className={styles['mfa-message']} role="status">
-        {data && data.otpkey && (
-          <>
-            Can't scan QR code?{' '}
-            <TextCopyModal
-              display="link"
-              title="Alternative Verification Code"
-              text={data.otpkey.value_b32}
-              hint={<TextCopyModalHint />}
-            >
-              View alternative verification code.
-            </TextCopyModal>
-          </>
-        )}
-        {data && !data.otpkey && (
-          <>
-            Can't scan QR code?{' '}
-            <TicketCreateModal display="link">
-              Submit a ticket.
-            </TicketCreateModal>
-          </>
-        )}
-      </p>
+      {data && data.otpkey && (
+        <p className={styles['mfa-message']}>
+          Can't scan QR code?{' '}
+          <TextCopyModal
+            display="link"
+            title="Alternative Verification Code"
+            text={data.otpkey.value_b32}
+            hint={<TextCopyModalHint />}
+          >
+            View alternative verification code.
+          </TextCopyModal>
+        </p>
+      )}
+      {data && !data.otpkey && (
+        <p className={styles['mfa-message']}>
+          Can't scan QR code?{' '}
+          <TicketCreateModal display="link">Submit a ticket.</TicketCreateModal>
+        </p>
+      )}
     </>
   );
 };
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index a593bca2b..862608595 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -37,14 +37,12 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
           Confirm Pairing
         </Button>
       </form>
-      <p className={styles['mfa-message']} role="status">
-        {tokenType === 'sms' && (
-          <>
-            Didn't receive a message within 5 minutes?{' '}
-            <TicketCreateModal display="link">Get Help</TicketCreateModal>
-          </>
-        )}
-      </p>
+      {tokenType === 'sms' && (
+        <p className={styles['mfa-message']}>
+          Didn't receive a message within 5 minutes?{' '}
+          <TicketCreateModal display="link">Get Help</TicketCreateModal>
+        </p>
+      )}
     </>
   );
 };

From 457a5d9bfbae9e0aba967fafcbbd2e0358e53f9e Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 15:38:15 -0500
Subject: [PATCH 64/92] fix: add and pass id to TextCopyField

---
 libs/core-components/src/lib/TextCopyField/TextCopyField.tsx | 3 +++
 libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx | 1 +
 2 files changed, 4 insertions(+)

diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
index f7ab5b33b..3d433a5e8 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -8,6 +8,7 @@ type TextCopyFieldProps = {
   value: string;
   placeholder?: string;
   className?: string;
+  id?: string,
   buttonClassName?: string;
 };
 
@@ -15,6 +16,7 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
   value,
   placeholder,
   className,
+  id,
   buttonClassName,
 }) => {
   /* WARNING: Must match CSS `--transition-duration` */
@@ -56,6 +58,7 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
         Copy
       </Button>
       <input
+        {...( id ? { id } : {} )}
         type="text"
         onChange={onChange}
         value={value}
diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
index 3bf59be6d..9b1800455 100644
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
@@ -46,6 +46,7 @@ const TextCopyModal: React.FC<
               className="s-affixed-input-wrapper s-affixed-input-wrapper--prepend s-affixed-input-wrapper--full-width"
             >
               <TextCopyField
+                id="text"
                 value={text}
                 buttonClassName="s-affixed-input-wrapper__prepend"
               />

From 97bf0bc14bde1ff419d67fa7d9ce696a9ccede4c Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 15:39:17 -0500
Subject: [PATCH 65/92] feat(a11y): title text for qr code img

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 550a89639..ac793f422 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -64,7 +64,7 @@ const MfaQRPanel: React.FC = () => {
             )}
             {!data && isLoading && <LoadingSpinner />}
             {data && (
-              <img src={data.googleurl.img} alt="Google MFA QR Code"></img>
+              <img src={data.googleurl.img} alt="Google MFA QR Code" title="Scan to use. Or read further for alternative."></img>
             )}
           </div>
         </FieldWrapper>

From d9aab1ce46d9836ab684283e56ec4a572d797e72 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 16:20:32 -0500
Subject: [PATCH 66/92] npx nx format:write

---
 libs/core-components/src/lib/TextCopyField/TextCopyField.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
index 3d433a5e8..a439c7d47 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -8,7 +8,7 @@ type TextCopyFieldProps = {
   value: string;
   placeholder?: string;
   className?: string;
-  id?: string,
+  id?: string;
   buttonClassName?: string;
 };
 
@@ -58,7 +58,7 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
         Copy
       </Button>
       <input
-        {...( id ? { id } : {} )}
+        {...(id ? { id } : {})}
         type="text"
         onChange={onChange}
         value={value}

From 9d1479ffd150632cdf0c947329d1c1f748786e08 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 17:27:42 -0500
Subject: [PATCH 67/92] feat: allow custom `tagName` for `<Message>`

---
 libs/core-components/src/lib/Message/Message.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/libs/core-components/src/lib/Message/Message.jsx b/libs/core-components/src/lib/Message/Message.jsx
index 1a0c8d259..0f466880d 100644
--- a/libs/core-components/src/lib/Message/Message.jsx
+++ b/libs/core-components/src/lib/Message/Message.jsx
@@ -87,13 +87,14 @@ const Message = ({
   onDismiss,
   canDismiss,
   isVisible,
+  tagName,
   scope,
   type,
 }) => {
   const typeMap = TYPE_MAP[type];
   const scopeMap = SCOPE_MAP[scope || DEFAULT_SCOPE];
   const { iconName, iconText, className: typeClassName } = typeMap;
-  const { role, tagName, className: scopeClassName } = scopeMap;
+  const { role, tagName: autoTagName, className: scopeClassName } = scopeMap;
 
   const hasDismissSupport = scope === 'section';
 
@@ -137,7 +138,7 @@ const Message = ({
       // Avoid manually syncing Reactstrap <Fade>'s default props
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...fadeProps}
-      tag={tagName}
+      tag={tagName || autoTagName}
       className={`${className} ${containerStyleNames}`}
       role={role}
       in={isVisible}
@@ -186,6 +187,8 @@ Message.propTypes = {
   onDismiss: PropTypes.func,
   /** How to place the message within the layout */
   scope: PropTypes.oneOf(SCOPES), // RFE: Require scope; change all instances
+  /** Message HTML tag (overwrites tag based on scope) */
+  tagName: PropTypes.string,
   /** Message type or severity */
   type: PropTypes.oneOf(TYPES).isRequired,
 };

From 58faf33ed904782ba14919cf2f5b0432d45f691c Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 17:28:48 -0500
Subject: [PATCH 68/92] chore: describe FieldWrapperFormik global css

---
 apps/tup-ui/src/main.global.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index 1f61c10d6..58f22edfc 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -65,10 +65,12 @@ table {
 }
 
 /* Forms */
+/* To style "Required" flag on field */
 /* TODO: Remove this after making it moot:
          - either use c-form__star instead of <Badge> (like CMS)
          - or add c-form__badge into TACC/Core-Styles
 */
+/* FAQ: Used by FieldWrapperFormik */
 .has-required .badge {
   color: white;
   font-weight: var(--medium);

From 7c1e2da30c5bc90fd1e6ee50ae93f2cc78c15fe1 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 17:30:47 -0500
Subject: [PATCH 69/92] refactor: replace FieldWrapper w/ upcoming s-form

Core-Styles will add s-form.

Allows Portals to create well-styled forms w/out copious class names.
---
 apps/tup-ui/src/main.global.css               |  5 ++
 .../src/main.global.for-core-styles.css       | 31 ++++++++
 .../src/lib/TextCopyModal/TextCopyModal.tsx   | 25 +++---
 libs/tup-components/src/mfa/MfaQRPanel.tsx    | 77 +++++++++----------
 libs/tup-components/src/mfa/MfaSmsPanel.tsx   | 32 ++++----
 .../src/mfa/MfaValidationPanel.tsx            | 23 +++---
 6 files changed, 109 insertions(+), 84 deletions(-)

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index 58f22edfc..52384a10d 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -65,6 +65,11 @@ table {
 }
 
 /* Forms */
+/* To hide icon of a Message that is used as a form error */
+/* FAQ: Used by MfaValidationPanel, MfaSmsPanel */
+.s-form input + [role="status"] > .icon {
+  display: none;
+}
 /* To style "Required" flag on field */
 /* TODO: Remove this after making it moot:
          - either use c-form__star instead of <Badge> (like CMS)
diff --git a/apps/tup-ui/src/main.global.for-core-styles.css b/apps/tup-ui/src/main.global.for-core-styles.css
index dddb52c6f..6d84d9f9b 100644
--- a/apps/tup-ui/src/main.global.for-core-styles.css
+++ b/apps/tup-ui/src/main.global.for-core-styles.css
@@ -41,3 +41,34 @@ hr {
   margin-right: 0.25ch;
   text-transform: none;
 }
+
+/* TODO: Remove this after:
+         0. CEP v2 colors are removed from Core-Styles settings/color--portal */
+:root {
+  --global-color-danger--normal: #dc393b;
+}
+
+/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles with `s-form` */
+/* To mimic `c-form__field` layout */
+.s-form > div > label + input {
+  display: block;
+}
+.s-form > div + button {
+  display: block;
+  margin-top: 2rem; /* to mimic c-form__field margin-bottom */
+}
+/* To mimic `c-form__help` */
+.s-form small {
+  display: block;
+  font-size: var(--global-font-size--small);
+  font-style: italic;
+}
+.s-form :not(ul,label) + small {
+  margin-top: 0.3em;
+}
+.s-form small > :not(details, a, samp) {
+  font-style: initial;
+}
+.s-affixed-input-wrapper.s-form small {
+  grid-area: help;
+}
diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
index 9b1800455..b1fd6b985 100644
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
+++ b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
-import { Button, FieldWrapper, TextCopyField } from '../../';
+import { Button, TextCopyField } from '../../';
 
 import styles from './TextCopyModal.module.css';
 
@@ -38,20 +38,15 @@ const TextCopyModal: React.FC<
           {title}
         </ModalHeader>
         <ModalBody className={styles['modal-body']}>
-          <form>
-            <FieldWrapper
-              name="text"
-              label="Code"
-              description={hint}
-              className="s-affixed-input-wrapper s-affixed-input-wrapper--prepend s-affixed-input-wrapper--full-width"
-            >
-              <TextCopyField
-                id="text"
-                value={text}
-                buttonClassName="s-affixed-input-wrapper__prepend"
-              />
-            </FieldWrapper>
-          </form>
+          <div className="s-affixed-input-wrapper s-affixed-input-wrapper--prepend s-affixed-input-wrapper--full-width s-form">
+            <label htmlFor="text">Code</label>
+            <TextCopyField
+              id="text"
+              value={text}
+              buttonClassName="s-affixed-input-wrapper__prepend"
+            />
+            <small>{hint}</small>
+          </div>
         </ModalBody>
       </Modal>
     </>
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index ac793f422..77afa84b3 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useMfaPairTotp } from '@tacc/tup-hooks';
 import {
   Button,
-  FieldWrapper,
+  InlineMessage,
   LoadingSpinner,
   TextCopyModal,
 } from '@tacc/core-components';
@@ -28,47 +28,40 @@ const MfaQRPanel: React.FC = () => {
 
   return (
     <>
-      <form className={styles['mfa-form']}>
-        <FieldWrapper
-          label={
-            <>
-              Open an approved{' '}
-              <a
-                href="https://docs.tacc.utexas.edu/basics/mfa/#mfaapps"
-                target="_blank"
-                rel="noreferrer"
-              >
-                MFA pairing app
-              </a>{' '}
-              and scan the following QR code:
-            </>
-          }
-          error={
-            !data &&
-            isError && (
-              <>
-                Unable to display QR code. If this error persists,{' '}
-                <TicketCreateModal display="link">
-                  submit a ticket
-                </TicketCreateModal>
-                .
-              </>
-            )
-          }
-        >
-          <div className={styles['qr-code-box']}>
-            {!data && !isLoading && (
-              <Button onClick={() => mutate(null)}>
-                Click to Generate QR Code
-              </Button>
-            )}
-            {!data && isLoading && <LoadingSpinner />}
-            {data && (
-              <img src={data.googleurl.img} alt="Google MFA QR Code" title="Scan to use. Or read further for alternative."></img>
-            )}
-          </div>
-        </FieldWrapper>
-      </form>
+      <div className={`${styles['mfa-form']} s-form`}>
+        <label>
+          Open an approved{' '}
+          <a
+            href="https://docs.tacc.utexas.edu/basics/mfa/#mfaapps"
+            target="_blank"
+            rel="noreferrer"
+          >
+            MFA pairing app
+          </a>{' '}
+          and scan the following QR code:
+        </label>
+        <div className={styles['qr-code-box']}>
+          {!data && !isLoading && (
+            <Button onClick={() => mutate(null)}>
+              Click to Generate QR Code
+            </Button>
+          )}
+          {!data && isLoading && <LoadingSpinner />}
+          {data && (
+            <img
+              src={data.googleurl.img}
+              alt="Google MFA QR Code"
+              title="Scan to use. Or read further for alternative."
+            ></img>
+          )}
+        </div>
+      </div>
+      {!data && isError && (
+        <InlineMessage type="error" className={styles['mfa-message']}>
+          Unable to display QR code. If this error persists,{' '}
+          <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
+        </InlineMessage>
+      )}
       {data && data.otpkey && (
         <p className={styles['mfa-message']}>
           Can't scan QR code?{' '}
diff --git a/libs/tup-components/src/mfa/MfaSmsPanel.tsx b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
index 2c8096620..eceab149e 100644
--- a/libs/tup-components/src/mfa/MfaSmsPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useMfaPairSms } from '@tacc/tup-hooks';
-import { Button, FieldWrapper } from '@tacc/core-components';
+import { Button, InlineMessage } from '@tacc/core-components';
 import styles from './Mfa.module.css';
 import { TicketCreateModal } from '../tickets';
 
@@ -12,28 +12,24 @@ const MfaSmsPanel: React.FC = () => {
     smsMutation.mutate({ phoneNumber });
   };
   return (
-    <form onSubmit={(e) => onSubmit(e)} className={styles['mfa-form']}>
-      <FieldWrapper
-        name="mfa-phone-number"
-        label="Enter your Phone Number:"
-        error={
-          smsMutation.isError && (
-            <>
-              Unable to pair via SMS. If this error persists,{' '}
-              <TicketCreateModal display="link">
-                submit a ticket
-              </TicketCreateModal>
-              .
-            </>
-          )
-        }
-      >
+    <form
+      onSubmit={(e) => onSubmit(e)}
+      className={`${styles['mfa-form']} s-form`}
+    >
+      <div>
+        <label htmlFor="mfa-phone-number">Enter your Phone Number:</label>
         <input
           required
           id="mfa-phone-number"
           onChange={(e) => setPhoneNumber(e.target.value)}
         />
-      </FieldWrapper>
+        {smsMutation.isError && (
+          <InlineMessage type="error" tagName="small">
+            Unable to pair via SMS. If this error persists,{' '}
+            <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
+          </InlineMessage>
+        )}
+      </div>
       <Button type="primary" attr="submit" isLoading={smsMutation.isLoading}>
         Send Token
       </Button>
diff --git a/libs/tup-components/src/mfa/MfaValidationPanel.tsx b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
index 862608595..d9c6eea52 100644
--- a/libs/tup-components/src/mfa/MfaValidationPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaValidationPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useMfaVerify } from '@tacc/tup-hooks';
-import { Button, FieldWrapper } from '@tacc/core-components';
+import { Button, InlineMessage } from '@tacc/core-components';
 import TicketCreateModal from '../tickets/TicketCreateModal';
 import styles from './Mfa.module.css';
 
@@ -21,18 +21,23 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
 
   return (
     <>
-      <form onSubmit={(e) => onSubmit(e)} className={styles['mfa-form']}>
-        <FieldWrapper
-          name="confirm-pairing"
-          label={pairingMessage[tokenType]}
-          error={error && `Error validating MFA token: "${error.message}"`}
-        >
+      <form
+        onSubmit={(e) => onSubmit(e)}
+        className={`${styles['mfa-form']} s-form`}
+      >
+        <div>
+          <label htmlFor="confirm-pairing">{pairingMessage[tokenType]}</label>
           <input
             required
             id="confirm-pairing"
             onChange={(e) => setTokenValue(e.target.value)}
-          ></input>
-        </FieldWrapper>
+          />
+          {error && (
+            <InlineMessage type="error" tagName="small">
+              Error validating MFA token: "{error.message}"
+            </InlineMessage>
+          )}
+        </div>
         <Button type="primary" attr="submit" isLoading={isLoading}>
           Confirm Pairing
         </Button>

From ae380db86ccf77b301dd9d680507bbcda1d73d3d Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 17:32:00 -0500
Subject: [PATCH 70/92] chore: remove FieldWrapper (not Formik)

---
 libs/core-components/src/index.ts             |  1 -
 .../src/lib/FieldWrapper/FieldWrapper.tsx     | 38 -------------------
 .../src/lib/FieldWrapper/index.ts             |  4 --
 3 files changed, 43 deletions(-)
 delete mode 100644 libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
 delete mode 100644 libs/core-components/src/lib/FieldWrapper/index.ts

diff --git a/libs/core-components/src/index.ts b/libs/core-components/src/index.ts
index c29a722a5..047524da1 100644
--- a/libs/core-components/src/index.ts
+++ b/libs/core-components/src/index.ts
@@ -6,7 +6,6 @@ export { default as InlineMessage } from './lib/InlineMessage';
 export { default as SectionMessage } from './lib/SectionMessage';
 export { default as LoadingSpinner } from './lib/LoadingSpinner';
 export { default as DescriptionList } from './lib/DescriptionList';
-export { default as FieldWrapper } from './lib/FieldWrapper';
 export { default as Message } from './lib/Message';
 export { default as Paginator } from './lib/Paginator';
 export { default as Pill } from './lib/Pill';
diff --git a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
deleted file mode 100644
index f486c5bda..000000000
--- a/libs/core-components/src/lib/FieldWrapper/FieldWrapper.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { Badge } from 'reactstrap';
-
-export type FieldWrapperProps = {
-  name?: string;
-  label: React.ReactNode;
-  required?: boolean;
-  className?: string;
-  description?: React.ReactNode;
-  error?: React.ReactNode;
-};
-const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
-  name,
-  label,
-  required,
-  description,
-  children,
-  className,
-  error,
-}) => (
-  <div
-    className={`c-form__field ${required ? 'has-required' : ''} ${className}`}
-  >
-    <label htmlFor={name}>
-      {label}
-      {required ? <Badge color="danger">Required</Badge> : null}
-    </label>
-    {children}
-    {error && (
-      <ul className="c-form__errors">
-        <li>{error}</li>
-      </ul>
-    )}
-    {description && <div className="c-form__help">{description}</div>}
-  </div>
-);
-
-export default FieldWrapper;
diff --git a/libs/core-components/src/lib/FieldWrapper/index.ts b/libs/core-components/src/lib/FieldWrapper/index.ts
deleted file mode 100644
index 38fa2cdcb..000000000
--- a/libs/core-components/src/lib/FieldWrapper/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { default as FieldWrapper } from './FieldWrapper';
-export type { FieldWrapperProps } from './FieldWrapper';
-
-export default FieldWrapper;

From 58e15e9265651e9f2433a95381758c9fa4b5136d Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 17:37:13 -0500
Subject: [PATCH 71/92] refactor:return feild wrap CSS to comp. as global

Return FieldWrapperFormik CSS back to component, but as global.
---
 apps/tup-ui/src/main.global.css                     | 13 -------------
 .../FieldWrapperFormik.global.css                   | 12 ++++++++++++
 .../lib/FieldWrapperFormik/FieldWrapperFormik.tsx   |  1 +
 3 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index 52384a10d..2eda1e4f3 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -70,16 +70,3 @@ table {
 .s-form input + [role="status"] > .icon {
   display: none;
 }
-/* To style "Required" flag on field */
-/* TODO: Remove this after making it moot:
-         - either use c-form__star instead of <Badge> (like CMS)
-         - or add c-form__badge into TACC/Core-Styles
-*/
-/* FAQ: Used by FieldWrapperFormik */
-.has-required .badge {
-  color: white;
-  font-weight: var(--medium);
-
-  margin-left: 0.5em;
-  vertical-align: top;
-}
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css
new file mode 100644
index 000000000..bf29a4f42
--- /dev/null
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css
@@ -0,0 +1,12 @@
+/* To style "Required" flag on field */
+/* TODO: Remove this after making it moot:
+         - either use c-form__star instead of <Badge> (like CMS)
+         - or add c-form__badge into TACC/Core-Styles
+*/
+.c-form__field.has-required .badge {
+  color: white;
+  font-weight: var(--medium);
+
+  margin-left: 0.5em;
+  vertical-align: top;
+}
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index 6188aaec2..7e4596a78 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ErrorMessage } from 'formik';
 import { Badge } from 'reactstrap';
+import './FieldWrapperFormik.global.css';
 
 export type FieldWrapperProps = {
   name: string;

From 0ab4bbabc1a186db6ee3131fea4b33ccdcf5ffbb Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 26 Jul 2023 17:37:31 -0500
Subject: [PATCH 72/92] npx nx format:write

---
 libs/tup-components/src/mfa/MfaSmsPanel.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaSmsPanel.tsx b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
index eceab149e..9c1ad0a91 100644
--- a/libs/tup-components/src/mfa/MfaSmsPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaSmsPanel.tsx
@@ -26,7 +26,10 @@ const MfaSmsPanel: React.FC = () => {
         {smsMutation.isError && (
           <InlineMessage type="error" tagName="small">
             Unable to pair via SMS. If this error persists,{' '}
-            <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
+            <TicketCreateModal display="link">
+              submit a ticket
+            </TicketCreateModal>
+            .
           </InlineMessage>
         )}
       </div>

From 482362015de7b4ee6eba6f3085a821afd5f32186 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 27 Jul 2023 13:25:43 -0500
Subject: [PATCH 73/92] refactor: simpler id assignment

---
 libs/core-components/src/lib/Button/Button.tsx               | 2 +-
 libs/core-components/src/lib/TextCopyField/TextCopyField.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx
index 477fe7149..41b833057 100644
--- a/libs/core-components/src/lib/Button/Button.tsx
+++ b/libs/core-components/src/lib/Button/Button.tsx
@@ -76,7 +76,7 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
-      {...(id ? { id } : {})}
+      id={id}
       className={`
         ${styles['root']}
         c-button
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
index a439c7d47..58b712f06 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -58,7 +58,7 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
         Copy
       </Button>
       <input
-        {...(id ? { id } : {})}
+        id={id}
         type="text"
         onChange={onChange}
         value={value}

From 3e28e3b2962259258c8c635f3c6e503171fe19a4 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 27 Jul 2023 13:35:26 -0500
Subject: [PATCH 74/92] fix: static mfa panel width so mfa-msg is centered

---
 libs/tup-components/src/mfa/Mfa.module.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index de0ff8237..66501613c 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -11,8 +11,7 @@ ol.pairing-container {
 }
 
 .pairing-container > *:not(.pairing-separator) {
-    min-width: 210px;
-    max-width: 375px;
+    width: 365px; /* FAQ: static width, so .mfa-message is centered */
 }
 
 .pairing-separator {

From 74e5aaed80243938ec8ea8affa069f0941c9d177 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 27 Jul 2023 14:21:21 -0500
Subject: [PATCH 75/92] refactor: no modal for text copty

---
 libs/tup-components/src/mfa/Mfa.module.css |  6 ++++
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 39 ++++++++--------------
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 66501613c..7c750dd5f 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -69,6 +69,12 @@ li.pairing-separator {
 .qr-code-box > button {
     width: var(--qr-code-size) !important; /* overwrite c-button, which is too specific */
 }
+label.qr-code-alt-label {
+    font-weight: normal; /* to overwrite core-styles */
+}
+.s-affixed-input-wrapper {
+    display: inline-grid; /* to overwrite core-styles */
+}
 
 
 /* Wide */
diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 77afa84b3..212e1dca6 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -4,7 +4,7 @@ import {
   Button,
   InlineMessage,
   LoadingSpinner,
-  TextCopyModal,
+  TextCopyField,
 } from '@tacc/core-components';
 import { TicketCreateModal } from '../tickets';
 import styles from './Mfa.module.css';
@@ -12,20 +12,6 @@ import styles from './Mfa.module.css';
 const MfaQRPanel: React.FC = () => {
   const { mutate, isLoading, data, isError } = useMfaPairTotp();
 
-  const TextCopyModalHint = () => (
-    <>
-      Enter this code into an approved{' '}
-      <a
-        href="https://docs.tacc.utexas.edu/basics/mfa/#mfaapps"
-        target="_blank"
-        rel="noreferrer"
-      >
-        MFA pairing app
-      </a>
-      .
-    </>
-  );
-
   return (
     <>
       <div className={`${styles['mfa-form']} s-form`}>
@@ -62,20 +48,23 @@ const MfaQRPanel: React.FC = () => {
           <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
         </InlineMessage>
       )}
-      {data && data.otpkey && (
+      {true && (
         <p className={styles['mfa-message']}>
           Can't scan QR code?{' '}
-          <TextCopyModal
-            display="link"
-            title="Alternative Verification Code"
-            text={data.otpkey.value_b32}
-            hint={<TextCopyModalHint />}
-          >
-            View alternative verification code.
-          </TextCopyModal>
+          <label htmlFor="text" className={styles['qr-code-alt-label']}>
+            Enter this one-time password into an MFA app:
+          </label>
+          <div className="s-affixed-input-wrapper s-affixed-input-wrapper--prepend s-affixed-input-wrapper--full-width">
+            <TextCopyField
+              id="text"
+              value="data.otpkey.value_b32"
+              buttonClassName="s-affixed-input-wrapper__prepend"
+              firstElement="input"
+            />
+          </div>
         </p>
       )}
-      {data && !data.otpkey && (
+      {false && (
         <p className={styles['mfa-message']}>
           Can't scan QR code?{' '}
           <TicketCreateModal display="link">Submit a ticket.</TicketCreateModal>

From d60583da90c233b9eeea8e906806d9228f71fdeb Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 27 Jul 2023 14:34:36 -0500
Subject: [PATCH 76/92] fix: restore accientally deleted conditions

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index 212e1dca6..e65250cf9 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -48,7 +48,7 @@ const MfaQRPanel: React.FC = () => {
           <TicketCreateModal display="link">submit a ticket</TicketCreateModal>.
         </InlineMessage>
       )}
-      {true && (
+      {data && data.otpkey && (
         <p className={styles['mfa-message']}>
           Can't scan QR code?{' '}
           <label htmlFor="text" className={styles['qr-code-alt-label']}>
@@ -64,7 +64,7 @@ const MfaQRPanel: React.FC = () => {
           </div>
         </p>
       )}
-      {false && (
+      {data && !data.otpkey && (
         <p className={styles['mfa-message']}>
           Can't scan QR code?{' '}
           <TicketCreateModal display="link">Submit a ticket.</TicketCreateModal>

From eabd2bfb2bd30f0df935ac011161d4bbbec5e857 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 27 Jul 2023 14:58:52 -0500
Subject: [PATCH 77/92] chore: remove component changes moved to PR #277

https://github.com/TACC/tup-ui/pull/277
---
 libs/core-components/src/index.ts             |  2 -
 .../src/lib/TextCopyField/TextCopyField.jsx   | 92 +++++++++++++++++++
 .../TextCopyField/TextCopyField.module.css    |  8 +-
 .../src/lib/TextCopyField/TextCopyField.tsx   | 74 ---------------
 .../TextCopyModal/TextCopyModal.module.css    |  3 -
 .../src/lib/TextCopyModal/TextCopyModal.tsx   | 56 -----------
 .../src/lib/TextCopyModal/index.ts            |  1 -
 7 files changed, 98 insertions(+), 138 deletions(-)
 create mode 100644 libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
 delete mode 100644 libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
 delete mode 100644 libs/core-components/src/lib/TextCopyModal/TextCopyModal.module.css
 delete mode 100644 libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
 delete mode 100644 libs/core-components/src/lib/TextCopyModal/index.ts

diff --git a/libs/core-components/src/index.ts b/libs/core-components/src/index.ts
index 047524da1..599a3d804 100644
--- a/libs/core-components/src/index.ts
+++ b/libs/core-components/src/index.ts
@@ -11,8 +11,6 @@ export { default as Paginator } from './lib/Paginator';
 export { default as Pill } from './lib/Pill';
 export { default as DropdownSelector } from './lib/DropdownSelector';
 export { default as ShowMore } from './lib/ShowMore';
-export { default as TextCopyField } from './lib/TextCopyField';
-export { default as TextCopyModal } from './lib/TextCopyModal';
 export { default as SectionTableWrapper } from './lib/SectionTableWrapper';
 export { default as InfiniteScrollTable } from './lib/InfiniteScrollTable';
 export { default as Sidebar } from './lib/Sidebar';
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
new file mode 100644
index 000000000..175307a7a
--- /dev/null
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
@@ -0,0 +1,92 @@
+
+import React, { useCallback, useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import PropTypes from 'prop-types';
+
+import Button from '../Button';
+
+import styles from './TextCopyField.module.css';
+
+const TextCopyField = ({ value, placeholder, buttonWrapper }) => {
+  const transitionDuration = 0.15; // second(s)
+  const stateDuration = 1; // second(s)
+  const stateTimeout = transitionDuration + stateDuration; // second(s)
+
+  const [isCopied, setIsCopied] = useState(false);
+
+  const onCopy = useCallback(() => {
+    setIsCopied(true);
+
+    const timeout = setTimeout(() => {
+      setIsCopied(false);
+      clearTimeout(timeout);
+    }, stateTimeout * 1000);
+  }, [setIsCopied, stateTimeout]);
+  const isEmpty = !value || value.length === 0;
+  const onChange = (event) => {
+    // Swallow keyboard events on the Input control, but
+    // still allow selecting the text. readOnly property of
+    // Input is not adequate for this purpose because it
+    // prevents text selection
+    event.preventDefault();
+  };
+
+  const ButtonWrapper = buttonWrapper;
+  const CopyButton = (
+    <CopyToClipboard text={value}>
+      <Button
+        className={`${styles['copy-button']} ${
+          isCopied ? styles['is-copied'] : ''
+        }`}
+        // RFE: Avoid manual JS ↔ CSS sync of transition duration by using:
+        //      - `data-attribute` and `attr()` (pending browser support)
+        //      - PostCSS and JSON variables (pending greater need for this)
+        style={{ '--transition-duration': `${transitionDuration}s` }}
+        onClick={onCopy}
+        disabled={isEmpty}
+        iconNameBefore={isCopied ? 'approved-reverse' : 'link'}
+        type="button"
+      >
+        Copy
+      </Button>
+    </CopyToClipboard>
+  );
+  const CopyField = (
+    <input
+      type="text"
+      onChange={onChange}
+      value={value}
+      className={`form-control ${styles.input}`}
+      placeholder={placeholder}
+      data-testid="input"
+      readOnly
+    />
+  );
+
+  return (
+    <>
+      {ButtonWrapper ? (
+        <ButtonWrapper>
+          <CopyButton />
+        </ButtonWrapper>
+      ) : (
+        <CopyButton />
+      )}
+      <CopyField />
+    </>
+  );
+};
+
+TextCopyField.propTypes = {
+  buttonWrapper: PropTypes.node,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+};
+
+TextCopyField.defaultProps = {
+  buttonWrapper: undefined,
+  placeholder: '',
+  value: '',
+};
+
+export default TextCopyField;
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css b/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css
index 87667f65d..c0ad01b05 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css
@@ -1,8 +1,12 @@
 @import url('@tacc/core-styles/dist/settings/color--portal.css');
 
+.input {
+  /* composes: input from '@tacc/core-styles/dist/components/...form.css'; */
+}
+
 .copy-button {
-  /* WARNING: Must match JavaScript `transitionDuration` */
-  --transition-duration: 0.15;
+  /* So JavaScript can set this (JavaScript also needs the value) */
+  --transition-duration: 0;
 
   transition: color var(--transition-duration),
     background-color var(--transition-duration);
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
deleted file mode 100644
index 58b712f06..000000000
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { useCallback, useState } from 'react';
-
-import Button from '../Button';
-
-import styles from './TextCopyField.module.css';
-
-type TextCopyFieldProps = {
-  value: string;
-  placeholder?: string;
-  className?: string;
-  id?: string;
-  buttonClassName?: string;
-};
-
-const TextCopyField: React.FC<TextCopyFieldProps> = ({
-  value,
-  placeholder,
-  className,
-  id,
-  buttonClassName,
-}) => {
-  /* WARNING: Must match CSS `--transition-duration` */
-  const transitionDuration = 0.15; // second(s)
-  const stateDuration = 1; // second(s)
-  const stateTimeout = transitionDuration + stateDuration; // second(s)
-
-  const [isCopied, setIsCopied] = useState(false);
-
-  const onCopy = useCallback(() => {
-    navigator.clipboard.writeText(value);
-    setIsCopied(true);
-
-    const timeout = setTimeout(() => {
-      setIsCopied(false);
-      clearTimeout(timeout);
-    }, stateTimeout * 1000);
-  }, [value, setIsCopied, stateTimeout]);
-  const isEmpty = !value || value.length === 0;
-  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    // Swallow keyboard events on the Input control, but
-    // still allow selecting the text. readOnly property of
-    // Input is not adequate for this purpose because it
-    // prevents text selection
-    event.preventDefault();
-  };
-
-  return (
-    <>
-      <Button
-        className={`${styles['copy-button']} ${
-          isCopied ? styles['is-copied'] : ''
-        } ${buttonClassName}`}
-        size="small"
-        onClick={onCopy}
-        disabled={isEmpty}
-        iconNameBefore={isCopied ? 'approved-reverse' : 'link'}
-      >
-        Copy
-      </Button>
-      <input
-        id={id}
-        type="text"
-        onChange={onChange}
-        value={value}
-        className={className}
-        placeholder={placeholder}
-        data-testid="input"
-        readOnly
-      />
-    </>
-  );
-};
-
-export default TextCopyField;
diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.module.css b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.module.css
deleted file mode 100644
index 2a30e4004..000000000
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.modal-body {
-  padding: calc(var(--global-space--section-gap) / 2);
-}
diff --git a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx b/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
deleted file mode 100644
index b1fd6b985..000000000
--- a/libs/core-components/src/lib/TextCopyModal/TextCopyModal.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useState } from 'react';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
-import { Button, TextCopyField } from '../../';
-
-import styles from './TextCopyModal.module.css';
-
-const TextCopyModal: React.FC<
-  React.PropsWithChildren<{
-    display: 'secondary' | 'link';
-    title: string;
-    text: string;
-    hint?: React.ReactNode;
-  }>
-> = ({ children, display, title, text, hint }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const toggle = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const closeBtn = (
-    <button className="close" onClick={toggle} type="button">
-      &times;
-    </button>
-  );
-
-  return (
-    <>
-      <Button type={display} onClick={() => toggle()}>
-        {children}
-      </Button>
-      <Modal
-        isOpen={isOpen}
-        toggle={toggle}
-        size="md"
-        className="modal-dialog-centered"
-      >
-        <ModalHeader toggle={toggle} close={closeBtn}>
-          {title}
-        </ModalHeader>
-        <ModalBody className={styles['modal-body']}>
-          <div className="s-affixed-input-wrapper s-affixed-input-wrapper--prepend s-affixed-input-wrapper--full-width s-form">
-            <label htmlFor="text">Code</label>
-            <TextCopyField
-              id="text"
-              value={text}
-              buttonClassName="s-affixed-input-wrapper__prepend"
-            />
-            <small>{hint}</small>
-          </div>
-        </ModalBody>
-      </Modal>
-    </>
-  );
-};
-
-export default TextCopyModal;
diff --git a/libs/core-components/src/lib/TextCopyModal/index.ts b/libs/core-components/src/lib/TextCopyModal/index.ts
deleted file mode 100644
index d89575528..000000000
--- a/libs/core-components/src/lib/TextCopyModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './TextCopyModal';

From b6e1cb16001871c9ace969da980cd4aae63d8af8 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 27 Jul 2023 15:00:48 -0500
Subject: [PATCH 78/92] chore: remove component changes moved to PR #276

https://github.com/TACC/tup-ui/pull/276
---
 libs/core-wrappers/src/index.ts               |  1 +
 .../src/lib/FieldWrapper/FieldWrapper.css     | 14 ++++++
 .../src/lib/FieldWrapper/FieldWrapper.tsx     | 45 +++++++++++++++++++
 .../src/lib/FieldWrapper/index.ts             |  4 ++
 .../FieldWrapperFormik.global.css             | 12 -----
 .../FieldWrapperFormik.module.css             | 15 +++++++
 .../FieldWrapperFormik/FieldWrapperFormik.tsx | 25 +++++------
 7 files changed, 91 insertions(+), 25 deletions(-)
 create mode 100644 libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.css
 create mode 100644 libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
 create mode 100644 libs/core-wrappers/src/lib/FieldWrapper/index.ts
 delete mode 100644 libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css
 create mode 100644 libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.module.css

diff --git a/libs/core-wrappers/src/index.ts b/libs/core-wrappers/src/index.ts
index a525b0f18..765d4fc22 100644
--- a/libs/core-wrappers/src/index.ts
+++ b/libs/core-wrappers/src/index.ts
@@ -4,6 +4,7 @@ export { default as QueryWrapper } from './lib/QueryWrapper';
 export { default as SubmitWrapper } from './lib/SubmitWrapper';
 export { default as Wizard, useWizard, WizardNavigation } from './lib/Wizard';
 export type WizardStep<T> = WizardStepType<T>;
+export { default as FieldWrapper } from './lib/FieldWrapper';
 export {
   FieldWrapperFormik,
   FormikInput,
diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.css b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.css
new file mode 100644
index 000000000..75e38538f
--- /dev/null
+++ b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.css
@@ -0,0 +1,14 @@
+.form-field__label {
+  font-weight: bold;
+}
+
+.form-field__help {
+  font-style: italic;
+  font-weight: 400;
+}
+
+.form-field__validation-error {
+  font-size: 0.8rem;
+  color: #eb6e6e;
+  padding-top: 5px;
+}
diff --git a/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
new file mode 100644
index 000000000..796466c69
--- /dev/null
+++ b/libs/core-wrappers/src/lib/FieldWrapper/FieldWrapper.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { FormGroup, Label, FormText, Badge } from 'reactstrap';
+import './FieldWrapper.css';
+
+export type FieldWrapperProps = {
+  label: string;
+  required: boolean;
+  description: string;
+  error?: string;
+  children?: React.ReactNode;
+};
+const FieldWrapper: React.FC<FieldWrapperProps> = ({
+  label,
+  required,
+  description,
+  children,
+  error,
+}) => (
+  <FormGroup>
+    <Label
+      className="form-field__label"
+      size="sm"
+      style={{ display: 'flex', alignItems: 'center' }}
+    >
+      {label}{' '}
+      {required ? (
+        <Badge color="danger" style={{ marginLeft: '10px' }}>
+          Required
+        </Badge>
+      ) : null}
+    </Label>
+    {children}
+    {error ? (
+      <div className="form-field__validation-error">{error}</div>
+    ) : (
+      description && (
+        <FormText className="form-field__help" color="muted">
+          {description}
+        </FormText>
+      )
+    )}
+  </FormGroup>
+);
+
+export default FieldWrapper;
diff --git a/libs/core-wrappers/src/lib/FieldWrapper/index.ts b/libs/core-wrappers/src/lib/FieldWrapper/index.ts
new file mode 100644
index 000000000..38fa2cdcb
--- /dev/null
+++ b/libs/core-wrappers/src/lib/FieldWrapper/index.ts
@@ -0,0 +1,4 @@
+import { default as FieldWrapper } from './FieldWrapper';
+export type { FieldWrapperProps } from './FieldWrapper';
+
+export default FieldWrapper;
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css
deleted file mode 100644
index bf29a4f42..000000000
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.global.css
+++ /dev/null
@@ -1,12 +0,0 @@
-/* To style "Required" flag on field */
-/* TODO: Remove this after making it moot:
-         - either use c-form__star instead of <Badge> (like CMS)
-         - or add c-form__badge into TACC/Core-Styles
-*/
-.c-form__field.has-required .badge {
-  color: white;
-  font-weight: var(--medium);
-
-  margin-left: 0.5em;
-  vertical-align: top;
-}
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.module.css b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.module.css
new file mode 100644
index 000000000..5a7a98a66
--- /dev/null
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.module.css
@@ -0,0 +1,15 @@
+.label {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.required-badge {
+    color: white;
+    font-weight: var(--medium);
+}
+
+.error-text {
+    font-style: italic;
+    color: #eb6e6e
+}
diff --git a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
index 7e4596a78..577231874 100644
--- a/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
+++ b/libs/core-wrappers/src/lib/FieldWrapperFormik/FieldWrapperFormik.tsx
@@ -1,42 +1,41 @@
 import React from 'react';
 import { ErrorMessage } from 'formik';
 import { Badge } from 'reactstrap';
-import './FieldWrapperFormik.global.css';
-
+import styles from './FieldWrapperFormik.module.css';
 export type FieldWrapperProps = {
   name: string;
-  label: React.ReactNode;
+  label: string;
   required?: boolean;
-  className?: string;
-  description?: React.ReactNode;
+  description?: string;
 };
 const FieldWrapper: React.FC<React.PropsWithChildren<FieldWrapperProps>> = ({
   name,
   label,
   required,
   description,
-  className,
   children,
 }) => {
   return (
-    <div
-      className={`c-form__field ${required ? 'has-required' : ''} ${className}`}
-    >
-      <label htmlFor={name}>
+    <div className={`c-form__field ${required ? 'has-required' : ''}`}>
+      <label htmlFor={name} className={styles['label']}>
         {label}
-        {required && <Badge color="danger">Required</Badge>}
+        {required && (
+          <Badge color="danger">
+            <span className={styles['required-badge']}>Required</span>
+          </Badge>
+        )}
       </label>
       {children}
       <ErrorMessage name={name}>
         {(msg) => {
           return (
             <ul className="c-form__errors">
-              <li>{msg}</li>
+              <li className={styles['error-text']}>{msg}</li>
             </ul>
           );
         }}
       </ErrorMessage>
-      {description && <div className="c-form__help">{description}</div>}
+      <div className="c-form__help">{description}</div>
     </div>
   );
 };

From 97c6db10a5a1fc3888c79dd398a73b2dbfd2c89e Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 27 Jul 2023 15:01:50 -0500
Subject: [PATCH 79/92] chore: remove stray changes

---
 libs/core-components/src/lib/TextCopyField/TextCopyField.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
index 175307a7a..6022c5198 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
@@ -1,4 +1,3 @@
-
 import React, { useCallback, useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import PropTypes from 'prop-types';

From 04e6c6de479e93080e0cf8b46c57af69c3ef44c3 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 27 Jul 2023 15:08:25 -0500
Subject: [PATCH 80/92] fix: restore TypeScript TextCopyModal

---
 libs/core-components/src/index.ts             |  1 +
 .../src/lib/TextCopyField/TextCopyField.jsx   | 91 -------------------
 .../TextCopyField/TextCopyField.module.css    |  8 +-
 .../src/lib/TextCopyField/TextCopyField.tsx   | 74 +++++++++++++++
 4 files changed, 77 insertions(+), 97 deletions(-)
 delete mode 100644 libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
 create mode 100644 libs/core-components/src/lib/TextCopyField/TextCopyField.tsx

diff --git a/libs/core-components/src/index.ts b/libs/core-components/src/index.ts
index 599a3d804..10c8cfafe 100644
--- a/libs/core-components/src/index.ts
+++ b/libs/core-components/src/index.ts
@@ -16,4 +16,5 @@ export { default as InfiniteScrollTable } from './lib/InfiniteScrollTable';
 export { default as Sidebar } from './lib/Sidebar';
 export { default as HistoryBadge } from './lib/HistoryBadge';
 export { default as Collapse } from './lib/Collapse';
+export { default as TextCopyField } from './lib/TextCopyField';
 export * from './lib/Form';
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
deleted file mode 100644
index 6022c5198..000000000
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import PropTypes from 'prop-types';
-
-import Button from '../Button';
-
-import styles from './TextCopyField.module.css';
-
-const TextCopyField = ({ value, placeholder, buttonWrapper }) => {
-  const transitionDuration = 0.15; // second(s)
-  const stateDuration = 1; // second(s)
-  const stateTimeout = transitionDuration + stateDuration; // second(s)
-
-  const [isCopied, setIsCopied] = useState(false);
-
-  const onCopy = useCallback(() => {
-    setIsCopied(true);
-
-    const timeout = setTimeout(() => {
-      setIsCopied(false);
-      clearTimeout(timeout);
-    }, stateTimeout * 1000);
-  }, [setIsCopied, stateTimeout]);
-  const isEmpty = !value || value.length === 0;
-  const onChange = (event) => {
-    // Swallow keyboard events on the Input control, but
-    // still allow selecting the text. readOnly property of
-    // Input is not adequate for this purpose because it
-    // prevents text selection
-    event.preventDefault();
-  };
-
-  const ButtonWrapper = buttonWrapper;
-  const CopyButton = (
-    <CopyToClipboard text={value}>
-      <Button
-        className={`${styles['copy-button']} ${
-          isCopied ? styles['is-copied'] : ''
-        }`}
-        // RFE: Avoid manual JS ↔ CSS sync of transition duration by using:
-        //      - `data-attribute` and `attr()` (pending browser support)
-        //      - PostCSS and JSON variables (pending greater need for this)
-        style={{ '--transition-duration': `${transitionDuration}s` }}
-        onClick={onCopy}
-        disabled={isEmpty}
-        iconNameBefore={isCopied ? 'approved-reverse' : 'link'}
-        type="button"
-      >
-        Copy
-      </Button>
-    </CopyToClipboard>
-  );
-  const CopyField = (
-    <input
-      type="text"
-      onChange={onChange}
-      value={value}
-      className={`form-control ${styles.input}`}
-      placeholder={placeholder}
-      data-testid="input"
-      readOnly
-    />
-  );
-
-  return (
-    <>
-      {ButtonWrapper ? (
-        <ButtonWrapper>
-          <CopyButton />
-        </ButtonWrapper>
-      ) : (
-        <CopyButton />
-      )}
-      <CopyField />
-    </>
-  );
-};
-
-TextCopyField.propTypes = {
-  buttonWrapper: PropTypes.node,
-  placeholder: PropTypes.string,
-  value: PropTypes.string,
-};
-
-TextCopyField.defaultProps = {
-  buttonWrapper: undefined,
-  placeholder: '',
-  value: '',
-};
-
-export default TextCopyField;
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css b/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css
index c0ad01b05..87667f65d 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.module.css
@@ -1,12 +1,8 @@
 @import url('@tacc/core-styles/dist/settings/color--portal.css');
 
-.input {
-  /* composes: input from '@tacc/core-styles/dist/components/...form.css'; */
-}
-
 .copy-button {
-  /* So JavaScript can set this (JavaScript also needs the value) */
-  --transition-duration: 0;
+  /* WARNING: Must match JavaScript `transitionDuration` */
+  --transition-duration: 0.15;
 
   transition: color var(--transition-duration),
     background-color var(--transition-duration);
diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
new file mode 100644
index 000000000..58b712f06
--- /dev/null
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -0,0 +1,74 @@
+import React, { useCallback, useState } from 'react';
+
+import Button from '../Button';
+
+import styles from './TextCopyField.module.css';
+
+type TextCopyFieldProps = {
+  value: string;
+  placeholder?: string;
+  className?: string;
+  id?: string;
+  buttonClassName?: string;
+};
+
+const TextCopyField: React.FC<TextCopyFieldProps> = ({
+  value,
+  placeholder,
+  className,
+  id,
+  buttonClassName,
+}) => {
+  /* WARNING: Must match CSS `--transition-duration` */
+  const transitionDuration = 0.15; // second(s)
+  const stateDuration = 1; // second(s)
+  const stateTimeout = transitionDuration + stateDuration; // second(s)
+
+  const [isCopied, setIsCopied] = useState(false);
+
+  const onCopy = useCallback(() => {
+    navigator.clipboard.writeText(value);
+    setIsCopied(true);
+
+    const timeout = setTimeout(() => {
+      setIsCopied(false);
+      clearTimeout(timeout);
+    }, stateTimeout * 1000);
+  }, [value, setIsCopied, stateTimeout]);
+  const isEmpty = !value || value.length === 0;
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    // Swallow keyboard events on the Input control, but
+    // still allow selecting the text. readOnly property of
+    // Input is not adequate for this purpose because it
+    // prevents text selection
+    event.preventDefault();
+  };
+
+  return (
+    <>
+      <Button
+        className={`${styles['copy-button']} ${
+          isCopied ? styles['is-copied'] : ''
+        } ${buttonClassName}`}
+        size="small"
+        onClick={onCopy}
+        disabled={isEmpty}
+        iconNameBefore={isCopied ? 'approved-reverse' : 'link'}
+      >
+        Copy
+      </Button>
+      <input
+        id={id}
+        type="text"
+        onChange={onChange}
+        value={value}
+        className={className}
+        placeholder={placeholder}
+        data-testid="input"
+        readOnly
+      />
+    </>
+  );
+};
+
+export default TextCopyField;

From aafcd92d3e094b40f94251bbf398d7e0078a4f88 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Thu, 27 Jul 2023 15:36:46 -0500
Subject: [PATCH 81/92] fix: data.otpkey as var not text

---
 libs/tup-components/src/mfa/MfaQRPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/MfaQRPanel.tsx b/libs/tup-components/src/mfa/MfaQRPanel.tsx
index e65250cf9..e286a5c24 100644
--- a/libs/tup-components/src/mfa/MfaQRPanel.tsx
+++ b/libs/tup-components/src/mfa/MfaQRPanel.tsx
@@ -57,7 +57,7 @@ const MfaQRPanel: React.FC = () => {
           <div className="s-affixed-input-wrapper s-affixed-input-wrapper--prepend s-affixed-input-wrapper--full-width">
             <TextCopyField
               id="text"
-              value="data.otpkey.value_b32"
+              value={data.otpkey.value_b32}
               buttonClassName="s-affixed-input-wrapper__prepend"
               firstElement="input"
             />

From 34d1b8e317a5faa4b02f02eebc2e28afc3cab443 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 27 Jul 2023 17:10:31 -0500
Subject: [PATCH 82/92] fix: disable read-only fields, just to be safe

---
 libs/core-components/src/lib/TextCopyField/TextCopyField.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
index 58b712f06..cd4fd9de6 100644
--- a/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
+++ b/libs/core-components/src/lib/TextCopyField/TextCopyField.tsx
@@ -65,6 +65,7 @@ const TextCopyField: React.FC<TextCopyFieldProps> = ({
         className={className}
         placeholder={placeholder}
         data-testid="input"
+        disabled
         readOnly
       />
     </>

From 429ee9e6f236570a964abe451b6d6ced5646ea70 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 31 Jul 2023 17:16:12 -0500
Subject: [PATCH 83/92] refactor: use core-styles v2.15, not form.cms.css
 (#279)

---
 apps/tup-ui/src/main.global.css               |  5 ++++
 .../src/main.global.for-core-styles.css       | 25 -------------------
 .../LoginComponent/LoginComponent.module.css  |  7 +-----
 package-lock.json                             | 14 +++++------
 package.json                                  |  2 +-
 5 files changed, 14 insertions(+), 39 deletions(-)

diff --git a/apps/tup-ui/src/main.global.css b/apps/tup-ui/src/main.global.css
index 2eda1e4f3..920048111 100644
--- a/apps/tup-ui/src/main.global.css
+++ b/apps/tup-ui/src/main.global.css
@@ -7,6 +7,11 @@
 /* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.14+ */
 @import url("@tacc/core-styles/dist/trumps/s-affixed-input-wrapper.css");
 
+/* To use new form styles in core-styles.base.css */
+/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles v2.15+ */
+@import url("@tacc/core-styles/dist/elements/form.css");
+@import url("@tacc/core-styles/dist/trumps/s-form.css");
+
 /* To overwrite @tacc/core-styles CEPv2 spacing */
 :root {
   /* TACC/Core-Styles/blob/823b7b9/src/lib/_imports/settings/space.css */
diff --git a/apps/tup-ui/src/main.global.for-core-styles.css b/apps/tup-ui/src/main.global.for-core-styles.css
index 6d84d9f9b..e022907af 100644
--- a/apps/tup-ui/src/main.global.for-core-styles.css
+++ b/apps/tup-ui/src/main.global.for-core-styles.css
@@ -47,28 +47,3 @@ hr {
 :root {
   --global-color-danger--normal: #dc393b;
 }
-
-/* TODO: Remove when TACC/Core-CMS loads TACC/Core-Styles with `s-form` */
-/* To mimic `c-form__field` layout */
-.s-form > div > label + input {
-  display: block;
-}
-.s-form > div + button {
-  display: block;
-  margin-top: 2rem; /* to mimic c-form__field margin-bottom */
-}
-/* To mimic `c-form__help` */
-.s-form small {
-  display: block;
-  font-size: var(--global-font-size--small);
-  font-style: italic;
-}
-.s-form :not(ul,label) + small {
-  margin-top: 0.3em;
-}
-.s-form small > :not(details, a, samp) {
-  font-style: initial;
-}
-.s-affixed-input-wrapper.s-form small {
-  grid-area: help;
-}
diff --git a/libs/tup-components/src/auth/LoginComponent/LoginComponent.module.css b/libs/tup-components/src/auth/LoginComponent/LoginComponent.module.css
index fc04abf23..2a28a6916 100644
--- a/libs/tup-components/src/auth/LoginComponent/LoginComponent.module.css
+++ b/libs/tup-components/src/auth/LoginComponent/LoginComponent.module.css
@@ -1,6 +1,3 @@
-/* So login form is built off CMS styles */
-@import url('@tacc/core-styles/dist/elements/form.cms.css') layer(base);
-
 /* CONTAINER */
 
 .root {
@@ -54,10 +51,8 @@
   display: none;
 }
 .field {
-  max-width: unset; /* undo forms.cms.css `input...` */
-
   /* To use larger field inputs, always (not just coarse pointer devices) */
-  padding: 12px 12px; /* mimic forms.cms.css `@media (pointer: coarse)` */
+  padding: 12px 12px; /* mimic Core Styles forms.css @media (pointer: coarse) */
 }
 
 
diff --git a/package-lock.json b/package-lock.json
index 444453ae8..02bb3fabc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,7 +41,7 @@
         "@nrwl/vite": "^15.6.3",
         "@nrwl/web": "15.6.3",
         "@nrwl/workspace": "15.6.3",
-        "@tacc/core-styles": "^2.14.0",
+        "@tacc/core-styles": "^2.15.0",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "13.4.0",
         "@testing-library/user-event": "^14.4.3",
@@ -5703,9 +5703,9 @@
       }
     },
     "node_modules/@tacc/core-styles": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.14.0.tgz",
-      "integrity": "sha512-AXJIF9tOdUsiGdOehNntbN3OeuycKlE/cUjJCnG65kWkmryEUhcytSUZF29Xd7xXCvmNwr6qlCOSVNU39POlhA==",
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.15.0.tgz",
+      "integrity": "sha512-zm9wNFemDLZpKPFfF2D0pVQqsbrNJMdf8T5VrEBm9cHA2c3fMFB7uV8RpKc4xrWVshYK7Z9pqqMw8WFrtL2zZQ==",
       "dev": true,
       "bin": {
         "core-styles": "src/cli.js"
@@ -29561,9 +29561,9 @@
       }
     },
     "@tacc/core-styles": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.14.0.tgz",
-      "integrity": "sha512-AXJIF9tOdUsiGdOehNntbN3OeuycKlE/cUjJCnG65kWkmryEUhcytSUZF29Xd7xXCvmNwr6qlCOSVNU39POlhA==",
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.15.0.tgz",
+      "integrity": "sha512-zm9wNFemDLZpKPFfF2D0pVQqsbrNJMdf8T5VrEBm9cHA2c3fMFB7uV8RpKc4xrWVshYK7Z9pqqMw8WFrtL2zZQ==",
       "dev": true,
       "requires": {}
     },
diff --git a/package.json b/package.json
index 5c8416604..67fe86abc 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@nrwl/vite": "^15.6.3",
     "@nrwl/web": "15.6.3",
     "@nrwl/workspace": "15.6.3",
-    "@tacc/core-styles": "^2.14.0",
+    "@tacc/core-styles": "^2.15.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "^14.4.3",

From 8bb29248b59d4647578c24d15d1b246c3548a030 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 2 Aug 2023 10:41:53 -0500
Subject: [PATCH 84/92] fix: alt. qr otp label as block instead of inline

Part of the message for QR code alternative OTP was moved to new line.
---
 libs/tup-components/src/mfa/Mfa.module.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 7c750dd5f..56170a754 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -70,7 +70,9 @@ li.pairing-separator {
     width: var(--qr-code-size) !important; /* overwrite c-button, which is too specific */
 }
 label.qr-code-alt-label {
-    font-weight: normal; /* to overwrite core-styles */
+    /* To overwrite core-styles */
+    font-weight: normal;
+    display: inline-block;
 }
 .s-affixed-input-wrapper {
     display: inline-grid; /* to overwrite core-styles */

From 9827d1025ca030731fa9a6fe1a05a5bfbf0bfd7e Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 2 Aug 2023 10:45:33 -0500
Subject: [PATCH 85/92] fix: add space between mfa msg and section bottom

If section short enough to scroll, MFA message touches section bottom.
---
 libs/tup-components/src/mfa/Mfa.module.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 56170a754..f89539feb 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -108,6 +108,9 @@ label.qr-code-alt-label {
         margin-left: auto;
         margin-right: auto;
         width: max-content;
+
+        /* To add space between message and bottom of section when it scrolls */
+        padding-bottom: 2rem;
     }
 }
 

From 90e26bc1351f0cca7f283a4be8e42b71b5209f69 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 2 Aug 2023 11:06:41 -0500
Subject: [PATCH 86/92] fix: QR loading div was higher than button and img

---
 libs/tup-components/src/mfa/Mfa.module.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index f89539feb..95f9b933f 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -60,6 +60,9 @@ li.pairing-separator {
     margin-block: 20px;
     margin-inline: var(--border-width);
 }
+.qr-code-box > div:global(.loading-icon) {
+    display: inline-flex; /* so space above matches button and img */
+}
 .qr-code-box > button {
     /* To overwrite c-button */
     white-space: normal;

From 44c09e748619c3fef1ab9bd6561d3234ba023551 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 2 Aug 2023 11:29:16 -0500
Subject: [PATCH 87/92] fix: darker danger color was not taking effect

The need for !important is likely caused by:
https://github.com/vitejs/vite/issues/4448

Possible solution:
https://github.com/vitejs/vite/issues/4448#issuecomment-1494239225
---
 apps/tup-ui/src/main.global.for-core-styles.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/tup-ui/src/main.global.for-core-styles.css b/apps/tup-ui/src/main.global.for-core-styles.css
index e022907af..7b80b3251 100644
--- a/apps/tup-ui/src/main.global.for-core-styles.css
+++ b/apps/tup-ui/src/main.global.for-core-styles.css
@@ -45,5 +45,6 @@ hr {
 /* TODO: Remove this after:
          0. CEP v2 colors are removed from Core-Styles settings/color--portal */
 :root {
-  --global-color-danger--normal: #dc393b;
+  /* FAQ: The `!important` is only necessary for dev (and thus prod) server */
+  --global-color-danger--normal: #dc393b !important;
 }

From e0c82ad86b0e6b6712d347d4ec0fd66a1f02ac38 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 2 Aug 2023 11:44:47 -0500
Subject: [PATCH 88/92] fix: core-styles v2.16.2

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 02bb3fabc..2f99c232d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,7 +41,7 @@
         "@nrwl/vite": "^15.6.3",
         "@nrwl/web": "15.6.3",
         "@nrwl/workspace": "15.6.3",
-        "@tacc/core-styles": "^2.15.0",
+        "@tacc/core-styles": "^2.16.2",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "13.4.0",
         "@testing-library/user-event": "^14.4.3",
@@ -5703,9 +5703,9 @@
       }
     },
     "node_modules/@tacc/core-styles": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.15.0.tgz",
-      "integrity": "sha512-zm9wNFemDLZpKPFfF2D0pVQqsbrNJMdf8T5VrEBm9cHA2c3fMFB7uV8RpKc4xrWVshYK7Z9pqqMw8WFrtL2zZQ==",
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.16.2.tgz",
+      "integrity": "sha512-fRT1Fd6BVgT+ar+9FfE4FWAIRO+cpk4I8PGflTK4/yxbFwAMgFRvy+mH7UcZElGzX29kYYiQI1tQ9aYo5InYsA==",
       "dev": true,
       "bin": {
         "core-styles": "src/cli.js"
@@ -29561,9 +29561,9 @@
       }
     },
     "@tacc/core-styles": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.15.0.tgz",
-      "integrity": "sha512-zm9wNFemDLZpKPFfF2D0pVQqsbrNJMdf8T5VrEBm9cHA2c3fMFB7uV8RpKc4xrWVshYK7Z9pqqMw8WFrtL2zZQ==",
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/@tacc/core-styles/-/core-styles-2.16.2.tgz",
+      "integrity": "sha512-fRT1Fd6BVgT+ar+9FfE4FWAIRO+cpk4I8PGflTK4/yxbFwAMgFRvy+mH7UcZElGzX29kYYiQI1tQ9aYo5InYsA==",
       "dev": true,
       "requires": {}
     },
diff --git a/package.json b/package.json
index 67fe86abc..3a0c28b3e 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "@nrwl/vite": "^15.6.3",
     "@nrwl/web": "15.6.3",
     "@nrwl/workspace": "15.6.3",
-    "@tacc/core-styles": "^2.15.0",
+    "@tacc/core-styles": "^2.16.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "^14.4.3",

From 6f4816ab02b836a2e5c4c606f93361dfe391fe77 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 2 Aug 2023 12:23:36 -0500
Subject: [PATCH 89/92] fix: remove (now?) unnecessary <br />

The label is display block, so <br /> is not needed to make new line.
---
 libs/tup-components/src/accounts/ManageAccountMfa.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/tup-components/src/accounts/ManageAccountMfa.tsx b/libs/tup-components/src/accounts/ManageAccountMfa.tsx
index d37c41345..ca75a959c 100644
--- a/libs/tup-components/src/accounts/ManageAccountMfa.tsx
+++ b/libs/tup-components/src/accounts/ManageAccountMfa.tsx
@@ -73,7 +73,6 @@ const MfaUnpair: React.FC<{ pairing: MfaTokenResponse }> = ({ pairing }) => {
             )}
             <p>
               <label htmlFor="current-mfa-token">Enter MFA Token:&nbsp;</label>
-              <br />
               <input
                 value={currentToken}
                 autoComplete="off"

From bc24bffdf9f46a95b0e4140eb7c2c75bb997d014 Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 2 Aug 2023 12:31:47 -0500
Subject: [PATCH 90/92] fix: match action spacing, drop related deviations

1. Match spacing between action or action box.
2. Remove deviant font size on an aciton.
---
 libs/tup-components/src/mfa/Mfa.module.css | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 95f9b933f..40e3069be 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -30,11 +30,11 @@ li.pairing-separator {
 .mfa-type-selection {
     display: flex;
     gap: 20px;
-    margin-top: 30px;
+    margin-top: 30px; /* match .mfa-success-container button */
 }
 
 .mfa-type-container {
-    padding-top: var(--global-space--section-top);
+    padding: var(--global-space--section);
 }
 
 .mfa-header {
@@ -135,10 +135,8 @@ label.qr-code-alt-label {
 /* Success view */
 .mfa-success-container {
     width: fit-content;
-    height: fit-content;
-    padding: var(--global-space--section)
+    padding: var(--global-space--section);
 }
 .mfa-success-container button {
-    margin-top: 50px;
-    font-size: 1.1rem;
+    margin-top: 30px; /* match .mfa-type-selection */
 }

From 03331510125edf69586c31d3987e914463fb1c8a Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 2 Aug 2023 13:19:25 -0500
Subject: [PATCH 91/92] refactor: use SectionHeader / less duplicate code

---
 apps/tup-ui/src/pages/Mfa/Mfa.tsx          |  4 ++--
 libs/tup-components/src/mfa/Mfa.module.css | 20 ++------------------
 libs/tup-components/src/mfa/MfaHeader.tsx  | 13 ++++++++-----
 3 files changed, 12 insertions(+), 25 deletions(-)

diff --git a/apps/tup-ui/src/pages/Mfa/Mfa.tsx b/apps/tup-ui/src/pages/Mfa/Mfa.tsx
index 5da884f54..b126ab1d5 100644
--- a/apps/tup-ui/src/pages/Mfa/Mfa.tsx
+++ b/apps/tup-ui/src/pages/Mfa/Mfa.tsx
@@ -6,13 +6,13 @@ import { Outlet } from 'react-router-dom';
 const Mfa: React.FC = () => {
   return (
     <RequireAuth>
-      <div className={styles['mfa-layout']}>
+      <section className={styles['mfa-layout']}>
         <MfaHeader />
         {/* Default to a "success" view if user has a verified token */}
         <MfaWrapper>
           <Outlet />
         </MfaWrapper>
-      </div>
+      </section>
     </RequireAuth>
   );
 };
diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css
index 40e3069be..a91a11fd1 100644
--- a/libs/tup-components/src/mfa/Mfa.module.css
+++ b/libs/tup-components/src/mfa/Mfa.module.css
@@ -3,7 +3,8 @@
 /* Layout styles */
 .pairing-container {
     display: grid;
-    padding: var(--global-space--section);
+    padding-inline: var(--global-space--section-left);
+    padding-bottom: var(--global-space--section-bottom);
     gap: var(--global-space--section-left);
 }
 ol.pairing-container {
@@ -33,22 +34,6 @@ li.pairing-separator {
     margin-top: 30px; /* match .mfa-success-container button */
 }
 
-.mfa-type-container {
-    padding: var(--global-space--section);
-}
-
-.mfa-header {
-    display: flex;
-    justify-content: space-between;
-    border-bottom: 1px solid black;
-    padding: 10px;
-
-}
-.mfa-header > div:first-child {
-    font-size: 2rem;
-}
-
-
 /* TOTP pairing styles */
 .qr-code-box > * {
     --border-width: var(--global-border-width--xx-thick);
@@ -135,7 +120,6 @@ label.qr-code-alt-label {
 /* Success view */
 .mfa-success-container {
     width: fit-content;
-    padding: var(--global-space--section);
 }
 .mfa-success-container button {
     margin-top: 30px; /* match .mfa-type-selection */
diff --git a/libs/tup-components/src/mfa/MfaHeader.tsx b/libs/tup-components/src/mfa/MfaHeader.tsx
index 77e795c9d..035460c79 100644
--- a/libs/tup-components/src/mfa/MfaHeader.tsx
+++ b/libs/tup-components/src/mfa/MfaHeader.tsx
@@ -1,10 +1,8 @@
-import styles from './Mfa.module.css';
+import { SectionHeader } from '@tacc/core-components';
 import TicketCreateModal from '../tickets/TicketCreateModal';
 
 const MfaHeader: React.FC = () => {
-  return (
-    <div className={styles['mfa-header']}>
-      <div>Multifactor Authentication Pairing</div>
+  const Actions = (
       <nav className="c-nav c-nav--no-list c-nav--piped">
         <TicketCreateModal display="link">Get Help</TicketCreateModal>
         <a
@@ -15,7 +13,12 @@ const MfaHeader: React.FC = () => {
           MFA Documentation
         </a>
       </nav>
-    </div>
+  );
+
+  return (
+    <SectionHeader actions={Actions}>
+      Multifactor Authentication Pairing
+    </SectionHeader>
   );
 };
 

From e88f365c5cc1a834785aa25da8a5b8e4769aadfa Mon Sep 17 00:00:00 2001
From: Wesley Bomar <wbomar@tacc.utexas.edu>
Date: Wed, 2 Aug 2023 14:01:38 -0500
Subject: [PATCH 92/92] chore: nx format:write

---
 libs/tup-components/src/mfa/MfaHeader.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/libs/tup-components/src/mfa/MfaHeader.tsx b/libs/tup-components/src/mfa/MfaHeader.tsx
index 035460c79..83acd5e4b 100644
--- a/libs/tup-components/src/mfa/MfaHeader.tsx
+++ b/libs/tup-components/src/mfa/MfaHeader.tsx
@@ -3,16 +3,16 @@ import TicketCreateModal from '../tickets/TicketCreateModal';
 
 const MfaHeader: React.FC = () => {
   const Actions = (
-      <nav className="c-nav c-nav--no-list c-nav--piped">
-        <TicketCreateModal display="link">Get Help</TicketCreateModal>
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://docs.tacc.utexas.edu/basics/mfa/"
-        >
-          MFA Documentation
-        </a>
-      </nav>
+    <nav className="c-nav c-nav--no-list c-nav--piped">
+      <TicketCreateModal display="link">Get Help</TicketCreateModal>
+      <a
+        target="_blank"
+        rel="noreferrer"
+        href="https://docs.tacc.utexas.edu/basics/mfa/"
+      >
+        MFA Documentation
+      </a>
+    </nav>
   );
 
   return (