migrate User Password Page

src/routes/UserPasswordPage.tsx

@@ -0,0 +1,48 @@
+import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
+import SectionTabs from '../components/dashboard/users/SectionTabs';
+import UserPasswordForm from '../components/dashboard/users/UserPasswordForm';
+import { getParameterByName } from '../utils/url';
+import SectionTitleContainer from '../components/dashboard/elements/SectionTitleContainer';
+import Page from '../components/Page';
+
+const UserPasswordPage: FunctionComponent = () => {
+    const userId = getParameterByName('userId');
+    const [ userName, setUserName ] = useState('');
+
+    const loadUser = useCallback(() => {
+        window.ApiClient.getUser(userId).then(function (user) {
+            if (!user.Name) {
+                throw new Error('Unexpected null user.Name');
+            }
+            setUserName(user.Name);
+        });
+    }, [userId]);
+    useEffect(() => {
+        loadUser();
+    }, [loadUser]);
+
+    return (
+        <Page
+            id='userPasswordPage'
+            className='mainAnimatedPage type-interior userPasswordPage'
+        >
+            <div className='content-primary'>
+                <div className='verticalSection'>
+                    <SectionTitleContainer
+                        title={userName}
+                        url='https://docs.jellyfin.org/general/server/users/'
+                    />
+                </div>
+                <SectionTabs activeTab='userpassword'/>
+                <div className='readOnlyContent'>
+                    <UserPasswordForm
+                        userId={userId}
+                    />
+                </div>
+            </div>
+        </Page>
+
+    );
+};
+
+export default UserPasswordPage;

src/routes/index.tsx

@@ -7,6 +7,7 @@ import SearchPage from './search';
 import UserEditPage from './UserEditPage';
 import UserLibraryAccessPage from './UserLibraryAccessPage';
 import UserParentalControl from './UserParentalControl';
+import UserPasswordPage from './UserPasswordPage';
 import UserProfilesPage from './UserProfilesPage';
 
 const AppRoutes = () => (
@@ -60,6 +61,14 @@ const AppRoutes = () => (
                     </ConnectionRequired>
                 }
             />
+            <Route
+                path='userpassword.html'
+                element={
+                    <ConnectionRequired>
+                        <UserPasswordPage />
+                    </ConnectionRequired>
+                }
+            />
             {/* Suppress warnings for unhandled routes */}
             <Route path='*' element={null} />
         </Route>