Add MFA status indicator to service and developer token tables

Display 2FA status (Y/N/?) with hover tooltip across all token types,
not just login sessions. Refactored MfaStatusIndicator to use text
labels instead of icons for clearer status display.

Author: dauglyon

src/features/account/LogInSessions.tsx

@@ -19,34 +19,21 @@ import { Loader } from '../../common/components';
 import { useAppSelector } from '../../common/hooks';
 import { useLogout } from '../login/LogIn';
 
-const MfaStatusIndicator: FC<{ mfa: 'USED' | 'NOT_USED' | 'UNKNOWN' }> = ({
-  mfa,
-}) => {
-  if (mfa === 'USED') {
-    return (
-      <Tooltip title="MFA used">
-        <span>
-          <FontAwesomeIcon icon={faCheck} style={{ color: 'green' }} />
-        </span>
-      </Tooltip>
-    );
-  } else if (mfa === 'NOT_USED') {
-    return (
-      <Tooltip title="Single factor">
-        <span>
-          <FontAwesomeIcon icon={faX} style={{ color: 'red' }} />
-        </span>
-      </Tooltip>
-    );
-  } else {
-    return (
-      <Tooltip title="MFA status unknown">
-        <span>
-          <FontAwesomeIcon icon={faX} style={{ color: 'grey' }} />
-        </span>
-      </Tooltip>
-    );
-  }
+export const MfaStatusIndicator: FC<{
+  mfa: 'USED' | 'NOT_USED' | 'UNKNOWN';
+}> = ({ mfa }) => {
+  const config = {
+    USED: { label: 'Y', tooltip: 'MFA used', color: 'green' },
+    NOT_USED: { label: 'N', tooltip: 'Single factor', color: 'red' },
+    UNKNOWN: { label: '?', tooltip: 'MFA status unknown', color: 'grey' },
+  }[mfa];
+  return (
+    <Tooltip title={config.tooltip}>
+      <span style={{ color: config.color, fontWeight: 'bold' }}>
+        {config.label}
+      </span>
+    </Tooltip>
+  );
 };
 
 /**

src/features/account/ManageTokens.tsx

@@ -26,6 +26,7 @@ import { Loader } from '../../common/components';
 import { LabelValueTable } from '../../common/components/LabelValueTable';
 import { useAppSelector } from '../../common/hooks';
 import { useLogout } from '../login/LogIn';
+import { MfaStatusIndicator } from './LogInSessions';
 
 /**
  * Content for the Log In Sessions tab in the Account page
@@ -136,6 +137,7 @@ export const ManageTokens: FC<{
                 <TableCell>Created</TableCell>
                 <TableCell>Expires</TableCell>
                 <TableCell>Name</TableCell>
+                <TableCell>MFA</TableCell>
                 <TableCell></TableCell>
               </TableRow>
             </TableHead>
@@ -149,6 +151,9 @@ export const ManageTokens: FC<{
                     {new Date(token.expires ?? 0).toLocaleString()}
                   </TableCell>
                   <TableCell>{token.name}</TableCell>
+                  <TableCell>
+                    {token.mfa && <MfaStatusIndicator mfa={token.mfa} />}
+                  </TableCell>
                   <TableCell>
                     <RevokeButton tokenId={token.id} />
                   </TableCell>