migrate User Profiles Page

src/routes/UserProfilesPage.tsx

@@ -1,17 +1,18 @@
 import { UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import React, {FunctionComponent, useEffect, useState, useRef} from 'react';
-import Dashboard from '../../utils/dashboard';
+import Dashboard from '../utils/dashboard';
-import globalize from '../../scripts/globalize';
+import globalize from '../scripts/globalize';
-import loading from '../loading/loading';
+import loading from '../components/loading/loading';
-import dom from '../../scripts/dom';
+import dom from '../scripts/dom';
-import confirm from '../../components/confirm/confirm';
+import confirm from '../components/confirm/confirm';
-import UserCardBox from '../dashboard/users/UserCardBox';
+import UserCardBox from '../components/dashboard/users/UserCardBox';
-import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
+import SectionTitleContainer from '../components/dashboard/elements/SectionTitleContainer';
-import '../../elements/emby-button/emby-button';
+import '../elements/emby-button/emby-button';
-import '../../elements/emby-button/paper-icon-button-light';
+import '../elements/emby-button/paper-icon-button-light';
-import '../../components/cardbuilder/card.scss';
+import '../components/cardbuilder/card.scss';
-import '../../components/indicators/indicators.scss';
+import '../components/indicators/indicators.scss';
-import '../../assets/css/flexstyles.scss';
+import '../assets/css/flexstyles.scss';
+import Page from '../components/Page';
 
 type MenuEntry = {
     name?: string;
@@ -74,7 +75,7 @@ const UserProfilesPage: FunctionComponent = () => {
                 icon: 'delete'
             });
 
-            import('../../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
+            import('../components/actionSheet/actionSheet').then(({default: actionsheet}) => {
                 actionsheet.show({
                     items: menuItems,
                     positionTo: card,
@@ -130,8 +131,11 @@ const UserProfilesPage: FunctionComponent = () => {
     }, []);
 
     return (
-        <div ref={element}>
+        <Page
-            <div className='content-primary'>
+            id='userProfilesPage'
+            className='mainAnimatedPage type-interior userProfilesPage fullWidthContent'
+        >
+            <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer
                         title={globalize.translate('HeaderUsers')}
@@ -150,7 +154,8 @@ const UserProfilesPage: FunctionComponent = () => {
                     })}
                 </div>
             </div>
-        </div>
+        </Page>
+
     );
 };
 

src/routes/index.tsx

@@ -4,6 +4,7 @@ import { Route, Routes } from 'react-router-dom';
 import ConnectionRequired from '../components/ConnectionRequired';
 import NewUserPage from './NewUserPage';
 import SearchPage from './search';
+import UserProfilesPage from './UserProfilesPage';
 
 const AppRoutes = () => (
     <Routes>
@@ -24,6 +25,14 @@ const AppRoutes = () => (
                     </ConnectionRequired>
                 }
             />
+            <Route
+                path='userprofiles.html'
+                element={
+                    <ConnectionRequired>
+                        <UserProfilesPage />
+                    </ConnectionRequired>
+                }
+            />
             {/* Suppress warnings for unhandled routes */}
             <Route path='*' element={null} />
         </Route>

src/scripts/routes.js

@@ -460,14 +460,6 @@ import { appRouter } from '../components/appRouter';
         pageComponent: 'UserPasswordPage'
     });
 
-    defineRoute({
-        alias: '/userprofiles.html',
-        path: 'dashboard/users/userprofiles.html',
-        autoFocus: false,
-        roles: 'admin',
-        pageComponent: 'UserProfilesPage'
-    });
-
     defineRoute({
         alias: '/wizardremoteaccess.html',
         path: 'wizard/remote/index.html',