Merge pull request #371 from auth0/fix/update-user-mfa-component

fix(core,react): update user mfa component with latest feedback

Author: NaveenChand755

AGENTS.md

@@ -388,7 +388,7 @@ The following components are exported from `@auth0/universal-components-react`:
 
 | Component                 | Export Name                                              |
 | ------------------------- | -------------------------------------------------------- |
-| MFA Management            | `UserMFAMgmt`, `UserMFAMgmtView`                         |
+| MFA Management            | `UserMFAManagement`, `UserMFAManagementView`             |
 | SSO Provider Edit         | `SsoProviderEdit`, `SsoProviderEditView`                 |
 | SSO Provider Create       | `SsoProviderCreate`, `SsoProviderCreateView`             |
 | SSO Provider Table        | `SsoProviderTable`, `SsoProviderTableView`               |

docs-site/public/img/my-account/UserMFAManagement.png

@@ -13,7 +13,7 @@ import SsoProviderCreateDocs from './pages/SsoProviderCreateDocs';
 import SsoProviderEditDocs from './pages/SsoProviderEditDocs';
 import SsoProviderTableDocs from './pages/SsoProviderTableDocs';
 import Styling from './pages/Styling';
-import UserMFAMgmtDocs from './pages/UserMFAMgmtDocs';
+import UserMFAManagementDocs from './pages/UserMFAManagementDocs';
 
 function AppContent() {
   return (
@@ -23,7 +23,7 @@ function AppContent() {
         <Route path="/getting-started" element={<GettingStarted />} />
         <Route path="/styling" element={<Styling />} />
         <Route path="/my-account" element={<MyAccountIntroduction />} />
-        <Route path="/my-account/user-mfa-management" element={<UserMFAMgmtDocs />} />
+        <Route path="/my-account/user-mfa-management" element={<UserMFAManagementDocs />} />
         <Route path="/my-organization" element={<MyOrganizationIntroduction />} />
         <Route
           path="/my-organization/organization-details-edit"

docs-site/public/img/my-account/UserMFAMgmt.png

@@ -81,7 +81,7 @@ export default function Layout({ children }: LayoutProps) {
       color: 'text-blue-500',
       items: [
         { name: 'Overview', href: '/my-account' },
-        { name: 'UserMFAMgmt', href: '/my-account/user-mfa-management' },
+        { name: 'UserMFAManagement', href: '/my-account/user-mfa-management' },
       ],
     },
     {

docs-site/src/App.tsx

@@ -48,7 +48,7 @@ export default function MyAccountIntroduction() {
             <div className="flex items-start justify-between">
               <div className="flex-1">
                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                  UserMFAMgmt{' '}
+                  UserMFAManagement{' '}
                   <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-3">
                     Available
                   </span>
@@ -265,7 +265,7 @@ VITE_AUTH0_CLIENT_ID=your-spa-client-id`}
                 href="/my-account/user-mfa-management"
                 className="inline-flex items-center px-4 py-2 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-lg font-medium transition-colors"
               >
-                Explore UserMFAMgmt
+                Explore UserMFAManagement
                 <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
                     strokeLinecap="round"