mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #3076 from grafixeyehero/Refactoring-duplicate-code
Refactoring duplicate code
This commit is contained in:
Bill Thornton
GitHub
commit
a52cb0d6c7
8 changed files with 218 additions and 248 deletions
41
src/components/dashboard/users/AccessContainer.tsx
Normal file
41
src/components/dashboard/users/AccessContainer.tsx
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import React, { FunctionComponent } from 'react';
|
||||||
|
import globalize from '../../../scripts/globalize';
|
||||||
|
import CheckBoxElement from './CheckBoxElement';
|
||||||
|
|
||||||
|
type IProps = {
|
||||||
|
containerClassName?: string;
|
||||||
|
headerTitle?: string;
|
||||||
|
checkBoxClassName?: string;
|
||||||
|
checkBoxTitle?: string;
|
||||||
|
listContainerClassName?: string;
|
||||||
|
accessClassName?: string;
|
||||||
|
listTitle?: string;
|
||||||
|
description?: string;
|
||||||
|
children?: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
const AccessContainer: FunctionComponent<IProps> = ({containerClassName, headerTitle, checkBoxClassName, checkBoxTitle, listContainerClassName, accessClassName, listTitle, description, children }: IProps) => {
|
||||||
|
return (
|
||||||
|
<div className={containerClassName}>
|
||||||
|
<h2>{globalize.translate(headerTitle)}</h2>
|
||||||
|
<CheckBoxElement labelClassName='checkboxContainer' type='checkbox' className={checkBoxClassName} title={checkBoxTitle} />
|
||||||
|
<div className={listContainerClassName}>
|
||||||
|
<div className={accessClassName}>
|
||||||
|
<h3 className='checkboxListLabel'>
|
||||||
|
{globalize.translate(listTitle)}
|
||||||
|
</h3>
|
||||||
|
<div className='checkboxList paperList' style={{
|
||||||
|
padding: '.5em 1em'
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='fieldDescription'>
|
||||||
|
{globalize.translate(description)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AccessContainer;
|
||||||
35
src/components/dashboard/users/SectionTitleContainer.tsx
Normal file
35
src/components/dashboard/users/SectionTitleContainer.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import React, { FunctionComponent } from 'react';
|
||||||
|
import SectionTitleButtonElement from './SectionTitleButtonElement';
|
||||||
|
import SectionTitleLinkElement from './SectionTitleLinkElement';
|
||||||
|
|
||||||
|
type IProps = {
|
||||||
|
title: string;
|
||||||
|
isBtnVisible?: boolean;
|
||||||
|
titleLink?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SectionTitleContainer: FunctionComponent<IProps> = ({title, isBtnVisible = false, titleLink}: IProps) => {
|
||||||
|
return (
|
||||||
|
<div className='verticalSection'>
|
||||||
|
<div className='sectionTitleContainer flex align-items-center'>
|
||||||
|
<h2 className='sectionTitle'>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{isBtnVisible && <SectionTitleButtonElement
|
||||||
|
className='fab btnAddUser submit sectionTitleButton'
|
||||||
|
title='ButtonAddUser'
|
||||||
|
icon='add'
|
||||||
|
/>}
|
||||||
|
|
||||||
|
<SectionTitleLinkElement
|
||||||
|
className='raised button-alt headerHelpButton'
|
||||||
|
title='Help'
|
||||||
|
url={titleLink}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SectionTitleContainer;
|
||||||
|
|
@ -4,12 +4,11 @@ import Dashboard from '../../utils/dashboard';
|
||||||
import globalize from '../../scripts/globalize';
|
import globalize from '../../scripts/globalize';
|
||||||
import loading from '../loading/loading';
|
import loading from '../loading/loading';
|
||||||
import toast from '../toast/toast';
|
import toast from '../toast/toast';
|
||||||
|
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
|
||||||
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
|
|
||||||
import InputElement from '../dashboard/users/InputElement';
|
import InputElement from '../dashboard/users/InputElement';
|
||||||
import CheckBoxElement from '../dashboard/users/CheckBoxElement';
|
|
||||||
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
||||||
import ButtonElement from '../dashboard/users/ButtonElement';
|
import ButtonElement from '../dashboard/users/ButtonElement';
|
||||||
|
import AccessContainer from '../dashboard/users/AccessContainer';
|
||||||
|
|
||||||
type userInput = {
|
type userInput = {
|
||||||
Name?: string;
|
Name?: string;
|
||||||
|
|
@ -178,18 +177,10 @@ const NewUserPage: FunctionComponent = () => {
|
||||||
return (
|
return (
|
||||||
<div ref={element}>
|
<div ref={element}>
|
||||||
<div className='content-primary'>
|
<div className='content-primary'>
|
||||||
<div className='verticalSection'>
|
<SectionTitleContainer
|
||||||
<div className='sectionTitleContainer flex align-items-center'>
|
title={globalize.translate('HeaderAddUser')}
|
||||||
<h2 className='sectionTitle'>
|
titleLink='https://docs.jellyfin.org/general/server/users/'
|
||||||
{globalize.translate('ButtonAddUser')}
|
|
||||||
</h2>
|
|
||||||
<SectionTitleLinkElement
|
|
||||||
className='raised button-alt headerHelpButton'
|
|
||||||
title='Help'
|
|
||||||
url='https://docs.jellyfin.org/general/server/users/'
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<form className='newUserProfileForm'>
|
<form className='newUserProfileForm'>
|
||||||
<div className='inputContainer'>
|
<div className='inputContainer'>
|
||||||
<InputElement
|
<InputElement
|
||||||
|
|
@ -206,20 +197,16 @@ const NewUserPage: FunctionComponent = () => {
|
||||||
label='LabelPassword'
|
label='LabelPassword'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<AccessContainer
|
||||||
<div className='folderAccessContainer'>
|
containerClassName='folderAccessContainer'
|
||||||
<h2>{globalize.translate('HeaderLibraryAccess')}</h2>
|
headerTitle='HeaderLibraryAccess'
|
||||||
<CheckBoxElement
|
checkBoxClassName='chkEnableAllFolders'
|
||||||
type='checkbox'
|
checkBoxTitle='OptionEnableAccessToAllLibraries'
|
||||||
className='chkEnableAllFolders'
|
listContainerClassName='folderAccessListContainer'
|
||||||
title='OptionEnableAccessToAllLibraries'
|
accessClassName='folderAccess'
|
||||||
/>
|
listTitle='HeaderLibraries'
|
||||||
<div className='folderAccessListContainer'>
|
description='LibraryAccessHelp'
|
||||||
<div className='folderAccess'>
|
>
|
||||||
<h3 className='checkboxListLabel'>
|
|
||||||
{globalize.translate('HeaderLibraries')}
|
|
||||||
</h3>
|
|
||||||
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
|
|
||||||
{mediaFoldersItems.map(Item => (
|
{mediaFoldersItems.map(Item => (
|
||||||
<CheckBoxListItem
|
<CheckBoxListItem
|
||||||
key={Item.Id}
|
key={Item.Id}
|
||||||
|
|
@ -229,26 +216,18 @@ const NewUserPage: FunctionComponent = () => {
|
||||||
checkedAttribute=''
|
checkedAttribute=''
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</AccessContainer>
|
||||||
</div>
|
|
||||||
<div className='fieldDescription'>
|
<AccessContainer
|
||||||
{globalize.translate('LibraryAccessHelp')}
|
containerClassName='channelAccessContainer verticalSection-extrabottompadding hide'
|
||||||
</div>
|
headerTitle='HeaderChannelAccess'
|
||||||
</div>
|
checkBoxClassName='chkEnableAllChannels'
|
||||||
</div>
|
checkBoxTitle='OptionEnableAccessToAllChannels'
|
||||||
<div className='channelAccessContainer verticalSection-extrabottompadding hide'>
|
listContainerClassName='channelAccessListContainer'
|
||||||
<h2>{globalize.translate('HeaderChannelAccess')}</h2>
|
accessClassName='channelAccess'
|
||||||
<CheckBoxElement
|
listTitle='Channels'
|
||||||
type='checkbox'
|
description='ChannelAccessHelp'
|
||||||
className='chkEnableAllChannels'
|
>
|
||||||
title='OptionEnableAccessToAllChannels'
|
|
||||||
/>
|
|
||||||
<div className='channelAccessListContainer'>
|
|
||||||
<div className='channelAccess'>
|
|
||||||
<h3 className='checkboxListLabel'>
|
|
||||||
{globalize.translate('Channels')}
|
|
||||||
</h3>
|
|
||||||
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
|
|
||||||
{channelsItems.map(Item => (
|
{channelsItems.map(Item => (
|
||||||
<CheckBoxListItem
|
<CheckBoxListItem
|
||||||
key={Item.Id}
|
key={Item.Id}
|
||||||
|
|
@ -258,13 +237,7 @@ const NewUserPage: FunctionComponent = () => {
|
||||||
checkedAttribute=''
|
checkedAttribute=''
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</AccessContainer>
|
||||||
</div>
|
|
||||||
<div className='fieldDescription'>
|
|
||||||
{globalize.translate('ChannelAccessHelp')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<ButtonElement
|
<ButtonElement
|
||||||
type='submit'
|
type='submit'
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ import CheckBoxElement from '../dashboard/users/CheckBoxElement';
|
||||||
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
||||||
import InputElement from '../dashboard/users/InputElement';
|
import InputElement from '../dashboard/users/InputElement';
|
||||||
import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences';
|
import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences';
|
||||||
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
|
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
|
||||||
import SelectElement from '../dashboard/users/SelectElement';
|
import SelectElement from '../dashboard/users/SelectElement';
|
||||||
import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement';
|
import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement';
|
||||||
import SectionTabs from '../dashboard/users/SectionTabs';
|
import SectionTabs from '../dashboard/users/SectionTabs';
|
||||||
|
|
@ -278,18 +278,10 @@ const UserEditPage: FunctionComponent = () => {
|
||||||
return (
|
return (
|
||||||
<div ref={element}>
|
<div ref={element}>
|
||||||
<div className='content-primary'>
|
<div className='content-primary'>
|
||||||
<div className='verticalSection'>
|
<SectionTitleContainer
|
||||||
<div className='sectionTitleContainer flex align-items-center'>
|
title={userName}
|
||||||
<h2 className='sectionTitle username'>
|
titleLink='https://docs.jellyfin.org/general/server/users/'
|
||||||
{userName}
|
|
||||||
</h2>
|
|
||||||
<SectionTitleLinkElement
|
|
||||||
className='raised button-alt headerHelpButton'
|
|
||||||
title='Help'
|
|
||||||
url='https://docs.jellyfin.org/general/server/users/'
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<SectionTabs activeTab='useredit'/>
|
<SectionTabs activeTab='useredit'/>
|
||||||
<div
|
<div
|
||||||
className='lnkEditUserPreferencesContainer'
|
className='lnkEditUserPreferencesContainer'
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,12 @@ import loading from '../loading/loading';
|
||||||
import libraryMenu from '../../scripts/libraryMenu';
|
import libraryMenu from '../../scripts/libraryMenu';
|
||||||
import globalize from '../../scripts/globalize';
|
import globalize from '../../scripts/globalize';
|
||||||
import toast from '../toast/toast';
|
import toast from '../toast/toast';
|
||||||
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
|
|
||||||
import SectionTabs from '../dashboard/users/SectionTabs';
|
import SectionTabs from '../dashboard/users/SectionTabs';
|
||||||
import CheckBoxElement from '../dashboard/users/CheckBoxElement';
|
|
||||||
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
||||||
import ButtonElement from '../dashboard/users/ButtonElement';
|
import ButtonElement from '../dashboard/users/ButtonElement';
|
||||||
import { getParameterByName } from '../../utils/url';
|
import { getParameterByName } from '../../utils/url';
|
||||||
|
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
|
||||||
|
import AccessContainer from '../dashboard/users/AccessContainer';
|
||||||
|
|
||||||
type ItemsArr = {
|
type ItemsArr = {
|
||||||
Name?: string;
|
Name?: string;
|
||||||
|
|
@ -228,36 +228,23 @@ const UserLibraryAccessPage: FunctionComponent = () => {
|
||||||
return (
|
return (
|
||||||
<div ref={element}>
|
<div ref={element}>
|
||||||
<div className='content-primary'>
|
<div className='content-primary'>
|
||||||
<div className='verticalSection'>
|
<SectionTitleContainer
|
||||||
<div className='sectionTitleContainer flex align-items-center'>
|
title={userName}
|
||||||
<h2 className='sectionTitle username'>
|
titleLink='https://docs.jellyfin.org/general/server/users/'
|
||||||
{userName}
|
|
||||||
</h2>
|
|
||||||
<SectionTitleLinkElement
|
|
||||||
className='raised button-alt headerHelpButton'
|
|
||||||
title='Help'
|
|
||||||
url='https://docs.jellyfin.org/general/server/users/'
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<SectionTabs activeTab='userlibraryaccess'/>
|
<SectionTabs activeTab='userlibraryaccess'/>
|
||||||
<form className='userLibraryAccessForm'>
|
<form className='userLibraryAccessForm'>
|
||||||
<div className='folderAccessContainer'>
|
<AccessContainer
|
||||||
<h2>{globalize.translate('HeaderLibraryAccess')}</h2>
|
containerClassName='folderAccessContainer'
|
||||||
<CheckBoxElement
|
headerTitle='HeaderLibraryAccess'
|
||||||
labelClassName='checkboxContainer'
|
checkBoxClassName='chkEnableAllFolders'
|
||||||
type='checkbox'
|
checkBoxTitle='OptionEnableAccessToAllLibraries'
|
||||||
className='chkEnableAllFolders'
|
listContainerClassName='folderAccessListContainer'
|
||||||
title='OptionEnableAccessToAllLibraries'
|
accessClassName='folderAccess'
|
||||||
/>
|
listTitle='HeaderLibraries'
|
||||||
<div className='folderAccessListContainer'>
|
description='LibraryAccessHelp'
|
||||||
<div className='folderAccess'>
|
>
|
||||||
<h3 className='checkboxListLabel'>
|
{mediaFoldersItems.map(Item => (
|
||||||
{globalize.translate('HeaderLibraries')}
|
|
||||||
</h3>
|
|
||||||
<div className='checkboxList paperList checkboxList-paperList'>
|
|
||||||
{mediaFoldersItems.map(Item => {
|
|
||||||
return (
|
|
||||||
<CheckBoxListItem
|
<CheckBoxListItem
|
||||||
key={Item.Id}
|
key={Item.Id}
|
||||||
className='chkFolder'
|
className='chkFolder'
|
||||||
|
|
@ -265,29 +252,19 @@ const UserLibraryAccessPage: FunctionComponent = () => {
|
||||||
Name={Item.Name}
|
Name={Item.Name}
|
||||||
checkedAttribute={Item.checkedAttribute}
|
checkedAttribute={Item.checkedAttribute}
|
||||||
/>
|
/>
|
||||||
);
|
))}
|
||||||
})}
|
</AccessContainer>
|
||||||
</div>
|
|
||||||
</div>
|
<AccessContainer
|
||||||
<div className='fieldDescription'>
|
containerClassName='channelAccessContainer hide'
|
||||||
{globalize.translate('LibraryAccessHelp')}
|
headerTitle='HeaderChannelAccess'
|
||||||
</div>
|
checkBoxClassName='chkEnableAllChannels'
|
||||||
</div>
|
checkBoxTitle='OptionEnableAccessToAllChannels'
|
||||||
</div>
|
listContainerClassName='channelAccessListContainer'
|
||||||
<div className='channelAccessContainer hide'>
|
accessClassName='channelAccess'
|
||||||
<h2>{globalize.translate('HeaderChannelAccess')}</h2>
|
listTitle='Channels'
|
||||||
<CheckBoxElement
|
description='ChannelAccessHelp'
|
||||||
labelClassName='checkboxContainer'
|
>
|
||||||
type='checkbox'
|
|
||||||
className='chkEnableAllChannels'
|
|
||||||
title='OptionEnableAccessToAllChannels'
|
|
||||||
/>
|
|
||||||
<div className='channelAccessListContainer'>
|
|
||||||
<div className='channelAccess'>
|
|
||||||
<h3 className='checkboxListLabel'>
|
|
||||||
{globalize.translate('Channels')}
|
|
||||||
</h3>
|
|
||||||
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
|
|
||||||
{channelsItems.map(Item => (
|
{channelsItems.map(Item => (
|
||||||
<CheckBoxListItem
|
<CheckBoxListItem
|
||||||
key={Item.Id}
|
key={Item.Id}
|
||||||
|
|
@ -297,28 +274,18 @@ const UserLibraryAccessPage: FunctionComponent = () => {
|
||||||
checkedAttribute={Item.checkedAttribute}
|
checkedAttribute={Item.checkedAttribute}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</AccessContainer>
|
||||||
</div>
|
|
||||||
<div className='fieldDescription'>
|
<AccessContainer
|
||||||
{globalize.translate('ChannelAccessHelp')}
|
containerClassName='deviceAccessContainer hide'
|
||||||
</div>
|
headerTitle='HeaderDeviceAccess'
|
||||||
</div>
|
checkBoxClassName='chkEnableAllDevices'
|
||||||
</div>
|
checkBoxTitle='OptionEnableAccessFromAllDevices'
|
||||||
<br />
|
listContainerClassName='deviceAccessListContainer'
|
||||||
<div className='deviceAccessContainer hide'>
|
accessClassName='deviceAccess'
|
||||||
<h2>{globalize.translate('HeaderDeviceAccess')}</h2>
|
listTitle='HeaderDevices'
|
||||||
<CheckBoxElement
|
description='DeviceAccessHelp'
|
||||||
labelClassName='checkboxContainer'
|
>
|
||||||
type='checkbox'
|
|
||||||
className='chkEnableAllDevices'
|
|
||||||
title='OptionEnableAccessFromAllDevices'
|
|
||||||
/>
|
|
||||||
<div className='deviceAccessListContainer'>
|
|
||||||
<div className='deviceAccess'>
|
|
||||||
<h3 className='checkboxListLabel'>
|
|
||||||
{globalize.translate('HeaderDevices')}
|
|
||||||
</h3>
|
|
||||||
<div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
|
|
||||||
{devicesItems.map(Item => (
|
{devicesItems.map(Item => (
|
||||||
<CheckBoxListItem
|
<CheckBoxListItem
|
||||||
key={Item.Id}
|
key={Item.Id}
|
||||||
|
|
@ -329,14 +296,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
|
||||||
checkedAttribute={Item.checkedAttribute}
|
checkedAttribute={Item.checkedAttribute}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</AccessContainer>
|
||||||
</div>
|
|
||||||
<div className='fieldDescription'>
|
|
||||||
{globalize.translate('DeviceAccessHelp')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
</div>
|
|
||||||
<br />
|
<br />
|
||||||
<div>
|
<div>
|
||||||
<ButtonElement
|
<ButtonElement
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import BlockedTagList from '../dashboard/users/BlockedTagList';
|
||||||
import ButtonElement from '../dashboard/users/ButtonElement';
|
import ButtonElement from '../dashboard/users/ButtonElement';
|
||||||
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
|
||||||
import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
|
import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
|
||||||
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
|
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
|
||||||
import SelectMaxParentalRating from '../dashboard/users/SelectMaxParentalRating';
|
import SelectMaxParentalRating from '../dashboard/users/SelectMaxParentalRating';
|
||||||
import SectionTabs from '../dashboard/users/SectionTabs';
|
import SectionTabs from '../dashboard/users/SectionTabs';
|
||||||
import loading from '../loading/loading';
|
import loading from '../loading/loading';
|
||||||
|
|
@ -319,18 +319,10 @@ const UserParentalControl: FunctionComponent = () => {
|
||||||
return (
|
return (
|
||||||
<div ref={element}>
|
<div ref={element}>
|
||||||
<div className='content-primary'>
|
<div className='content-primary'>
|
||||||
<div className='verticalSection'>
|
<SectionTitleContainer
|
||||||
<div className='sectionTitleContainer flex align-items-center'>
|
title={userName}
|
||||||
<h2 className='sectionTitle username'>
|
titleLink='https://docs.jellyfin.org/general/server/users/'
|
||||||
{userName}
|
|
||||||
</h2>
|
|
||||||
<SectionTitleLinkElement
|
|
||||||
className='raised button-alt headerHelpButton'
|
|
||||||
title='Help'
|
|
||||||
url='https://docs.jellyfin.org/general/server/users/'
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<SectionTabs activeTab='userparentalcontrol'/>
|
<SectionTabs activeTab='userparentalcontrol'/>
|
||||||
<form className='userParentalControlForm'>
|
<form className='userParentalControlForm'>
|
||||||
<div className='selectContainer'>
|
<div className='selectContainer'>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
|
import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
|
||||||
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
|
|
||||||
import SectionTabs from '../dashboard/users/SectionTabs';
|
import SectionTabs from '../dashboard/users/SectionTabs';
|
||||||
import UserPasswordForm from '../dashboard/users/UserPasswordForm';
|
import UserPasswordForm from '../dashboard/users/UserPasswordForm';
|
||||||
import { getParameterByName } from '../../utils/url';
|
import { getParameterByName } from '../../utils/url';
|
||||||
|
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
|
||||||
|
|
||||||
const UserPasswordPage: FunctionComponent = () => {
|
const UserPasswordPage: FunctionComponent = () => {
|
||||||
const userId = getParameterByName('userId');
|
const userId = getParameterByName('userId');
|
||||||
|
|
@ -23,18 +23,10 @@ const UserPasswordPage: FunctionComponent = () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className='content-primary'>
|
<div className='content-primary'>
|
||||||
<div className='verticalSection'>
|
<SectionTitleContainer
|
||||||
<div className='sectionTitleContainer flex align-items-center'>
|
title={userName}
|
||||||
<h2 className='sectionTitle username'>
|
titleLink='https://docs.jellyfin.org/general/server/users/'
|
||||||
{userName}
|
|
||||||
</h2>
|
|
||||||
<SectionTitleLinkElement
|
|
||||||
className='raised button-alt headerHelpButton'
|
|
||||||
title='Help'
|
|
||||||
url='https://docs.jellyfin.org/general/server/users/'
|
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<SectionTabs activeTab='userpassword'/>
|
<SectionTabs activeTab='userpassword'/>
|
||||||
<div className='readOnlyContent'>
|
<div className='readOnlyContent'>
|
||||||
<UserPasswordForm
|
<UserPasswordForm
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,7 @@ import loading from '../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 '../dashboard/users/UserCardBox';
|
||||||
import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
|
import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
|
||||||
import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
|
|
||||||
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';
|
||||||
|
|
@ -133,25 +132,12 @@ const UserProfilesPage: FunctionComponent = () => {
|
||||||
return (
|
return (
|
||||||
<div ref={element}>
|
<div ref={element}>
|
||||||
<div className='content-primary'>
|
<div className='content-primary'>
|
||||||
<div className='verticalSection verticalSection-extrabottompadding'>
|
<SectionTitleContainer
|
||||||
<div
|
title={globalize.translate('HeaderUsers')}
|
||||||
className='sectionTitleContainer sectionTitleContainer-cards'
|
isBtnVisible={true}
|
||||||
style={{display: 'flex', alignItems: 'center', paddingBottom: '1em'}}
|
titleLink='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
|
||||||
>
|
|
||||||
<h2 className='sectionTitle sectionTitle-cards'>
|
|
||||||
{globalize.translate('HeaderUsers')}
|
|
||||||
</h2>
|
|
||||||
<SectionTitleButtonElement
|
|
||||||
className='fab btnAddUser submit sectionTitleButton'
|
|
||||||
title='ButtonAddUser'
|
|
||||||
icon='add'
|
|
||||||
/>
|
/>
|
||||||
<SectionTitleLinkElement
|
|
||||||
className='raised button-alt headerHelpButton'
|
|
||||||
title='Help'
|
|
||||||
url='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='localUsers itemsContainer vertical-wrap'>
|
<div className='localUsers itemsContainer vertical-wrap'>
|
||||||
{users.map(user => {
|
{users.map(user => {
|
||||||
return <UserCardBox key={user.Id} user={user} />;
|
return <UserCardBox key={user.Id} user={user} />;
|
||||||
|
|
@ -159,7 +145,6 @@ const UserProfilesPage: FunctionComponent = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue