jellyfish-web/src/routes/UserPasswordPage.tsx

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;