migrate User Profile Page

src/components/Page.tsx

@@ -6,6 +6,7 @@ type PageProps = {
     id: string, // id is required for libraryMenu
     title?: string,
     isBackButtonEnabled?: boolean,
+    isMenuButtonEnabled?: boolean,
     isNowPlayingBarEnabled?: boolean,
     isThemeMediaSupported?: boolean
 };
@@ -20,6 +21,7 @@ const Page: FunctionComponent<PageProps & HTMLAttributes<HTMLDivElement>> = ({
     className = '',
     title,
     isBackButtonEnabled = true,
+    isMenuButtonEnabled = false,
     isNowPlayingBarEnabled = true,
     isThemeMediaSupported = false
 }) => {
@@ -60,6 +62,7 @@ const Page: FunctionComponent<PageProps & HTMLAttributes<HTMLDivElement>> = ({
             className={`page ${className}`}
             data-title={title}
             data-backbutton={`${isBackButtonEnabled}`}
+            data-menubutton={`${isMenuButtonEnabled}`}
         >
             {children}
         </div>

src/components/dashboard/users/UserPasswordForm.tsx

@@ -40,11 +40,11 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
                 let showLocalAccessSection = false;
 
                 if (user.HasConfiguredPassword) {
-                    (page.querySelector('.btnResetPassword') as HTMLDivElement).classList.remove('hide');
+                    (page.querySelector('#btnResetPassword') as HTMLDivElement).classList.remove('hide');
                     (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.remove('hide');
                     showLocalAccessSection = true;
                 } else {
-                    (page.querySelector('.btnResetPassword') as HTMLDivElement).classList.add('hide');
+                    (page.querySelector('#btnResetPassword') as HTMLDivElement).classList.add('hide');
                     (page.querySelector('#fldCurrentPassword') as HTMLDivElement).classList.add('hide');
                 }
 
@@ -65,11 +65,11 @@ const UserPasswordForm: FunctionComponent<IProps> = ({userId}: IProps) => {
 
                 if (user.HasConfiguredEasyPassword) {
                     txtEasyPassword.placeholder = '******';
-                    (page.querySelector('.btnResetEasyPassword') as HTMLDivElement).classList.remove('hide');
+                    (page.querySelector('#btnResetEasyPassword') as HTMLDivElement).classList.remove('hide');
                 } else {
                     txtEasyPassword.removeAttribute('placeholder');
                     txtEasyPassword.placeholder = '';
-                    (page.querySelector('.btnResetEasyPassword') as HTMLDivElement).classList.add('hide');
+                    (page.querySelector('#btnResetEasyPassword') as HTMLDivElement).classList.add('hide');
                 }
 
                 const chkEnableLocalEasyPassword = page.querySelector('.chkEnableLocalEasyPassword') as HTMLInputElement;

src/controllers/user/profile/index.html

@@ -1,3 +0,0 @@
-<div id="userProfilePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage" data-title="${Profile}" data-menubutton="false">
-
-</div>

src/routes/UserPasswordPage.tsx

@@ -4,17 +4,20 @@ import UserPasswordForm from '../components/dashboard/users/UserPasswordForm';
 import { getParameterByName } from '../utils/url';
 import SectionTitleContainer from '../components/dashboard/elements/SectionTitleContainer';
 import Page from '../components/Page';
+import loading from '../components/loading/loading';
 
 const UserPasswordPage: FunctionComponent = () => {
     const userId = getParameterByName('userId');
     const [ userName, setUserName ] = useState('');
 
     const loadUser = useCallback(() => {
+        loading.show();
         window.ApiClient.getUser(userId).then(function (user) {
             if (!user.Name) {
                 throw new Error('Unexpected null user.Name');
             }
             setUserName(user.Name);
+            loading.hide();
         });
     }, [userId]);
     useEffect(() => {

src/routes/UserProfilePage.tsx

@@ -1,21 +1,20 @@
 import { ImageType, UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import React, { FunctionComponent, useEffect, useState, useRef, useCallback } from 'react';
 
-import Dashboard from '../../utils/dashboard';
+import Dashboard from '../utils/dashboard';
-import globalize from '../../scripts/globalize';
+import globalize from '../scripts/globalize';
-import LibraryMenu from '../../scripts/libraryMenu';
+import LibraryMenu from '../scripts/libraryMenu';
-import { appHost } from '../apphost';
+import { appHost } from '../components/apphost';
-import confirm from '../confirm/confirm';
+import confirm from '../components/confirm/confirm';
-import ButtonElement from '../dashboard/elements/ButtonElement';
+import ButtonElement from '../components/dashboard/elements/ButtonElement';
-import UserPasswordForm from '../dashboard/users/UserPasswordForm';
+import UserPasswordForm from '../components/dashboard/users/UserPasswordForm';
-import loading from '../loading/loading';
+import loading from '../components/loading/loading';
-import toast from '../toast/toast';
+import toast from '../components/toast/toast';
+import { getParameterByName } from '../utils/url';
+import Page from '../components/Page';
 
-type IProps = {
+const UserProfilePage: FunctionComponent = () => {
-    userId: string;
+    const userId = getParameterByName('userId');
-}
-
-const UserProfilePage: FunctionComponent<IProps> = ({userId}: IProps) => {
     const [ userName, setUserName ] = useState('');
 
     const element = useRef<HTMLDivElement>(null);
@@ -145,13 +144,18 @@ const UserProfilePage: FunctionComponent<IProps> = ({userId}: IProps) => {
     }, [reloadUser, userId]);
 
     return (
-        <div ref={element}>
+        <Page
-            <div className='padded-left padded-right padded-bottom-page'>
+            id='userProfilePage'
+            title={globalize.translate('Profile')}
+            className='mainAnimatedPage libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage'
+        >
+            <div ref={element} className='padded-left padded-right padded-bottom-page'>
                 <div
                     className='readOnlyContent'
                     style={{margin: '0 auto', marginBottom: '1.8em', padding: '0 1em', display: 'flex', flexDirection: 'row', alignItems: 'center'}}
                 >
                     <div
+                        className='imagePlaceHolder'
                         style={{position: 'relative', display: 'inline-block', maxWidth: 200 }}
                     >
                         <input
@@ -188,7 +192,8 @@ const UserProfilePage: FunctionComponent<IProps> = ({userId}: IProps) => {
                     userId={userId}
                 />
             </div>
-        </div>
+        </Page>
+
     );
 };
 

src/routes/index.tsx

@@ -8,6 +8,7 @@ import UserEditPage from './UserEditPage';
 import UserLibraryAccessPage from './UserLibraryAccessPage';
 import UserParentalControl from './UserParentalControl';
 import UserPasswordPage from './UserPasswordPage';
+import UserProfilePage from './UserProfilePage';
 import UserProfilesPage from './UserProfilesPage';
 
 const AppRoutes = () => (
@@ -69,6 +70,14 @@ const AppRoutes = () => (
                     </ConnectionRequired>
                 }
             />
+            <Route
+                path='myprofile.html'
+                element={
+                    <ConnectionRequired>
+                        <UserProfilePage />
+                    </ConnectionRequired>
+                }
+            />
             {/* Suppress warnings for unhandled routes */}
             <Route path='*' element={null} />
         </Route>

src/scripts/routes.js

@@ -77,13 +77,6 @@ import { appRouter } from '../components/appRouter';
         controller: 'user/menu/index'
     });
 
-    defineRoute({
-        alias: '/myprofile.html',
-        path: 'user/profile/index.html',
-        autoFocus: false,
-        pageComponent: 'UserProfilePage'
-    });
-
     defineRoute({
         alias: '/mypreferencescontrols.html',
         path: 'user/controls/index.html',