MFA pairing UI/accessibility tweaks - design changes

apps/tup-ui/src/main.global.css

@@ -1,3 +1,17 @@
+/* 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("@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+ */
+@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 */
@@ -54,3 +68,10 @@ h3 {
 table {
   width: 100%;
 }
+
+/* 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;
+}

apps/tup-ui/src/main.global.for-core-styles.css

@@ -41,3 +41,9 @@ 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;
+}

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';

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

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,
 };

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);

libs/core-components/src/lib/TextCopyField/TextCopyField.tsx

@@ -0,0 +1,75 @@
+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"
+        disabled
+        readOnly
+      />
+    </>
+  );
+};
+
+export default TextCopyField;

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>
 );
 
@@ -144,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>

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) */
 }