From 192b7542d849c9cfad508c2e4606d122655df80c Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Fri, 15 Oct 2021 23:38:03 +0300 Subject: [PATCH 1/5] convert UserEditPage to react --- .../dashboard/users/CheckBoxListItem.tsx | 14 +- .../users/LnkEditUserPreferences.tsx | 30 + .../dashboard/users/SelectElement.tsx | 38 ++ .../users/SelectSyncPlayAccessElement.tsx | 35 ++ .../dashboard/users/TabLinkElement.tsx | 36 ++ src/components/pages/NewUserPage.tsx | 2 + src/components/pages/UserEditPage.tsx | 554 ++++++++++++++++++ src/controllers/dashboard/users/useredit.html | 191 ------ src/controllers/dashboard/users/useredit.js | 196 ------- src/scripts/routes.js | 2 +- 10 files changed, 705 insertions(+), 393 deletions(-) create mode 100644 src/components/dashboard/users/LnkEditUserPreferences.tsx create mode 100644 src/components/dashboard/users/SelectElement.tsx create mode 100644 src/components/dashboard/users/SelectSyncPlayAccessElement.tsx create mode 100644 src/components/dashboard/users/TabLinkElement.tsx create mode 100644 src/components/pages/UserEditPage.tsx delete mode 100644 src/controllers/dashboard/users/useredit.js diff --git a/src/components/dashboard/users/CheckBoxListItem.tsx b/src/components/dashboard/users/CheckBoxListItem.tsx index f6282f3635..d51bd9835f 100644 --- a/src/components/dashboard/users/CheckBoxListItem.tsx +++ b/src/components/dashboard/users/CheckBoxListItem.tsx @@ -4,27 +4,31 @@ type IProps = { className?: string; Name?: string; Id?: string; + AppName?: string; + checkedAttribute?: string; } -const createCheckBoxElement = ({className, Name, Id}) => ({ +const createCheckBoxElement = ({className, Name, Id, AppName, checkedAttribute}) => ({ __html: `` }); -const CheckBoxListItem: FunctionComponent = ({className, Name, Id}: IProps) => { +const CheckBoxListItem: FunctionComponent = ({className, Name, Id, AppName, checkedAttribute}: IProps) => { return (
); diff --git a/src/components/dashboard/users/LnkEditUserPreferences.tsx b/src/components/dashboard/users/LnkEditUserPreferences.tsx new file mode 100644 index 0000000000..1d60adac41 --- /dev/null +++ b/src/components/dashboard/users/LnkEditUserPreferences.tsx @@ -0,0 +1,30 @@ +import React, { FunctionComponent } from 'react'; +import globalize from '../../../scripts/globalize'; + +type IProps = { + title?: string; + className?: string; +} + +const createLinkElement = ({ className, title }) => ({ + __html: ` + ${title} + ` +}); + +const LnkEditUserPreferences: FunctionComponent = ({ className, title }: IProps) => { + return ( +
+ ); +}; + +export default LnkEditUserPreferences; diff --git a/src/components/dashboard/users/SelectElement.tsx b/src/components/dashboard/users/SelectElement.tsx new file mode 100644 index 0000000000..a3fe1a5aa4 --- /dev/null +++ b/src/components/dashboard/users/SelectElement.tsx @@ -0,0 +1,38 @@ +import React, { FunctionComponent } from 'react'; +import globalize from '../../../scripts/globalize'; + +const createSelectElement = ({ className, label, option }) => ({ + __html: `` +}); + +type IProps = { + className?: string; + label?: string; + currentProviderId: string; + providers: any +} + +const SelectElement: FunctionComponent = ({ className, label, currentProviderId, providers }: IProps) => { + const renderOption = providers.map((provider) => { + const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : ''; + return ''; + }); + + return ( +
+ ); +}; + +export default SelectElement; diff --git a/src/components/dashboard/users/SelectSyncPlayAccessElement.tsx b/src/components/dashboard/users/SelectSyncPlayAccessElement.tsx new file mode 100644 index 0000000000..3ea02fa670 --- /dev/null +++ b/src/components/dashboard/users/SelectSyncPlayAccessElement.tsx @@ -0,0 +1,35 @@ +import React, { FunctionComponent } from 'react'; +import globalize from '../../../scripts/globalize'; + +const createSelectElement = ({ className, id, label }) => ({ + __html: `` +}); + +type IProps = { + className?: string; + id?: string; + label?: string +} + +const SelectSyncPlayAccessElement: FunctionComponent = ({ className, id, label }: IProps) => { + return ( +
+ ); +}; + +export default SelectSyncPlayAccessElement; diff --git a/src/components/dashboard/users/TabLinkElement.tsx b/src/components/dashboard/users/TabLinkElement.tsx new file mode 100644 index 0000000000..279473b777 --- /dev/null +++ b/src/components/dashboard/users/TabLinkElement.tsx @@ -0,0 +1,36 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable jsx-a11y/no-static-element-interactions */ +import React, { FunctionComponent } from 'react'; +import globalize from '../../../scripts/globalize'; + +type IProps = { + tabTitle?: string; + activeTab?: boolean; + onClick() +} + +const createLinkElement = ({ className, tabTitle }) => ({ + __html: ` + ${tabTitle} + ` +}); + +const TabLinkElement: FunctionComponent = ({ tabTitle, onClick, ...restactiveTab }: IProps) => { + return ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events +
+ ); +}; + +export default TabLinkElement; diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx index 9cf73e8b2f..96275908ff 100644 --- a/src/components/pages/NewUserPage.tsx +++ b/src/components/pages/NewUserPage.tsx @@ -191,6 +191,7 @@ const NewUserPage: FunctionComponent = () => { className='chkFolder' Id={Item.Id} Name={Item.Name} + checkedAttribute='' /> ))}
@@ -219,6 +220,7 @@ const NewUserPage: FunctionComponent = () => { className='chkChannel' Id={Item.Id} Name={Item.Name} + checkedAttribute='' /> ))}
diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx new file mode 100644 index 0000000000..84500c8688 --- /dev/null +++ b/src/components/pages/UserEditPage.tsx @@ -0,0 +1,554 @@ +import React, { FunctionComponent, useEffect, useState, useRef } from 'react'; +import Dashboard from '../../scripts/clientUtils'; +import globalize from '../../scripts/globalize'; +import LibraryMenu from '../../scripts/libraryMenu'; +import { appRouter } from '../appRouter'; +import ButtonElement from '../dashboard/users/ButtonElement'; +import CheckBoxElement from '../dashboard/users/CheckBoxElement'; +import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; +import InputElement from '../dashboard/users/InputElement'; +import LnkEditUserPreferences from '../dashboard/users/LnkEditUserPreferences'; +import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement'; +import SelectElement from '../dashboard/users/SelectElement'; +import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement'; +import TabLinkElement from '../dashboard/users/TabLinkElement'; +import loading from '../loading/loading'; +import toast from '../toast/toast'; + +type ItemsArr = { + Name?: string; + Id?: string; + checkedAttribute: string +} + +const UserEditPage: FunctionComponent = () => { + const [ userName, setUserName ] = useState(''); + const [ deleteFoldersAccess, setDeleteFoldersAccess ] = useState([]); + const [ authProviders, setAuthProviders ] = useState([]); + const [ passwordResetProviders, setPasswordResetProviders ] = useState([]); + + const [ authenticationProviderId, setAuthenticationProviderId ] = useState(''); + const [ passwordResetProviderId, setPasswordResetProviderId ] = useState(''); + + const element = useRef(null); + + useEffect(() => { + const getUser = () => { + const userId = appRouter.param('userId'); + return window.ApiClient.getUser(userId); + }; + + const loadData = () => { + loading.show(); + getUser().then(function (user) { + loadUser(user); + }); + }; + + loadData(); + + const loadAuthProviders = (user, providers) => { + const fldSelectLoginProvider = element?.current?.querySelector('.fldSelectLoginProvider'); + providers.length > 1 ? fldSelectLoginProvider.classList.remove('hide') : fldSelectLoginProvider.classList.add('hide'); + + setAuthProviders(providers); + + const currentProviderId = user.Policy.AuthenticationProviderId; + setAuthenticationProviderId(currentProviderId); + }; + + const loadPasswordResetProviders = (user, providers) => { + const fldSelectPasswordResetProvider = element?.current?.querySelector('.fldSelectPasswordResetProvider'); + providers.length > 1 ? fldSelectPasswordResetProvider.classList.remove('hide') : fldSelectPasswordResetProvider.classList.add('hide'); + + setPasswordResetProviders(providers); + + const currentProviderId = user.Policy.PasswordResetProviderId; + setPasswordResetProviderId(currentProviderId); + }; + + const loadDeleteFolders = (user, mediaFolders) => { + window.ApiClient.getJSON(window.ApiClient.getUrl('Channels', { + SupportsMediaDeletion: true + })).then(function (channelsResult) { + let isChecked; + let checkedAttribute; + const itemsArr: ItemsArr[] = []; + + for (const folder of mediaFolders) { + isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1; + checkedAttribute = isChecked ? ' checked="checked"' : ''; + itemsArr.push({ + Id: folder.Id, + Name: folder.Name, + checkedAttribute: checkedAttribute + }); + } + + for (const folder of channelsResult.Items) { + isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1; + checkedAttribute = isChecked ? ' checked="checked"' : ''; + itemsArr.push({ + Id: folder.Id, + Name: folder.Name, + checkedAttribute: checkedAttribute + }); + } + + setDeleteFoldersAccess(itemsArr); + + const chkEnableDeleteAllFolders = element.current.querySelector('.chkEnableDeleteAllFolders'); + chkEnableDeleteAllFolders.checked = user.Policy.EnableContentDeletion; + triggerChange(chkEnableDeleteAllFolders); + }); + }; + + const triggerChange = (select) => { + const evt = document.createEvent('HTMLEvents'); + evt.initEvent('change', false, true); + select.dispatchEvent(evt); + }; + + const loadUser = (user) => { + window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) { + loadAuthProviders(user, providers); + }); + window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/PasswordResetProviders')).then(function (providers) { + loadPasswordResetProviders(user, providers); + }); + window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', { + IsHidden: false + })).then(function (folders) { + loadDeleteFolders(user, folders.Items); + }); + + const disabledUserBanner = element?.current?.querySelector('.disabledUserBanner'); + user.Policy.IsDisabled ? disabledUserBanner.classList.remove('hide') : disabledUserBanner.classList.add('hide'); + + const txtUserName = element?.current?.querySelector('#txtUserName'); + txtUserName.disabled = ''; + txtUserName.removeAttribute('disabled'); + + const lnkEditUserPreferences = element?.current?.querySelector('.lnkEditUserPreferences'); + lnkEditUserPreferences.setAttribute('href', 'mypreferencesmenu.html?userId=' + user.Id); + LibraryMenu.setTitle(user.Name); + setUserName(user.Name); + element.current.querySelector('#txtUserName').value = user.Name; + element.current.querySelector('.chkIsAdmin').checked = user.Policy.IsAdministrator; + element.current.querySelector('.chkDisabled').checked = user.Policy.IsDisabled; + element.current.querySelector('.chkIsHidden').checked = user.Policy.IsHidden; + element.current.querySelector('.chkRemoteControlSharedDevices').checked = user.Policy.EnableSharedDeviceControl; + element.current.querySelector('.chkEnableRemoteControlOtherUsers').checked = user.Policy.EnableRemoteControlOfOtherUsers; + element.current.querySelector('.chkEnableDownloading').checked = user.Policy.EnableContentDownloading; + element.current.querySelector('.chkManageLiveTv').checked = user.Policy.EnableLiveTvManagement; + element.current.querySelector('.chkEnableLiveTvAccess').checked = user.Policy.EnableLiveTvAccess; + element.current.querySelector('.chkEnableMediaPlayback').checked = user.Policy.EnableMediaPlayback; + element.current.querySelector('.chkEnableAudioPlaybackTranscoding').checked = user.Policy.EnableAudioPlaybackTranscoding; + element.current.querySelector('.chkEnableVideoPlaybackTranscoding').checked = user.Policy.EnableVideoPlaybackTranscoding; + element.current.querySelector('.chkEnableVideoPlaybackRemuxing').checked = user.Policy.EnablePlaybackRemuxing; + element.current.querySelector('.chkForceRemoteSourceTranscoding').checked = user.Policy.ForceRemoteSourceTranscoding; + element.current.querySelector('.chkRemoteAccess').checked = user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess; + element.current.querySelector('#txtRemoteClientBitrateLimit').value = user.Policy.RemoteClientBitrateLimit / 1e6 || ''; + element.current.querySelector('#txtLoginAttemptsBeforeLockout').value = user.Policy.LoginAttemptsBeforeLockout || '0'; + element.current.querySelector('#txtMaxActiveSessions').value = user.Policy.MaxActiveSessions || '0'; + if (window.ApiClient.isMinServerVersion('10.6.0')) { + element.current.querySelector('#selectSyncPlayAccess').value = user.Policy.SyncPlayAccess; + } + loading.hide(); + }; + + function onSaveComplete() { + Dashboard.navigate('userprofiles.html'); + loading.hide(); + toast(globalize.translate('SettingsSaved')); + } + + const saveUser = (user) => { + user.Name = element?.current?.querySelector('#txtUserName').value; + user.Policy.IsAdministrator = element?.current?.querySelector('.chkIsAdmin').checked; + user.Policy.IsHidden = element?.current?.querySelector('.chkIsHidden').checked; + user.Policy.IsDisabled = element?.current?.querySelector('.chkDisabled').checked; + user.Policy.EnableRemoteControlOfOtherUsers = element?.current?.querySelector('.chkEnableRemoteControlOtherUsers').checked; + user.Policy.EnableLiveTvManagement = element?.current?.querySelector('.chkManageLiveTv').checked; + user.Policy.EnableLiveTvAccess = element?.current?.querySelector('.chkEnableLiveTvAccess').checked; + user.Policy.EnableSharedDeviceControl = element?.current?.querySelector('.chkRemoteControlSharedDevices').checked; + user.Policy.EnableMediaPlayback = element?.current?.querySelector('.chkEnableMediaPlayback').checked; + user.Policy.EnableAudioPlaybackTranscoding = element?.current?.querySelector('.chkEnableAudioPlaybackTranscoding').checked; + user.Policy.EnableVideoPlaybackTranscoding = element?.current?.querySelector('.chkEnableVideoPlaybackTranscoding').checked; + user.Policy.EnablePlaybackRemuxing = element?.current?.querySelector('.chkEnableVideoPlaybackRemuxing').checked; + user.Policy.ForceRemoteSourceTranscoding = element?.current?.querySelector('.chkForceRemoteSourceTranscoding').checked; + user.Policy.EnableContentDownloading = element?.current?.querySelector('.chkEnableDownloading').checked; + user.Policy.EnableRemoteAccess = element?.current?.querySelector('.chkRemoteAccess').checked; + user.Policy.RemoteClientBitrateLimit = Math.floor(1e6 * parseFloat(element?.current?.querySelector('#txtRemoteClientBitrateLimit').value || '0')); + user.Policy.LoginAttemptsBeforeLockout = parseInt(element?.current?.querySelector('#txtLoginAttemptsBeforeLockout').value || '0'); + user.Policy.MaxActiveSessions = parseInt(element?.current?.querySelector('#txtMaxActiveSessions').value || '0'); + user.Policy.AuthenticationProviderId = element?.current?.querySelector('.selectLoginProvider').value; + user.Policy.PasswordResetProviderId = element?.current?.querySelector('.selectPasswordResetProvider').value; + user.Policy.EnableContentDeletion = element?.current?.querySelector('.chkEnableDeleteAllFolders').checked; + user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : Array.prototype.filter.call(element?.current?.querySelectorAll('.chkFolder'), function (c) { + return c.checked; + }).map(function (c) { + return c.getAttribute('data-id'); + }); + if (window.ApiClient.isMinServerVersion('10.6.0')) { + user.Policy.SyncPlayAccess = element?.current?.querySelector('#selectSyncPlayAccess').value; + } + window.ApiClient.updateUser(user).then(function () { + window.ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () { + onSaveComplete(); + }); + }); + }; + + const onSubmit = (e) => { + loading.show(); + getUser().then(function (result) { + saveUser(result); + }); + e.preventDefault(); + e.stopPropagation(); + return false; + }; + + element?.current?.querySelector('.chkEnableDeleteAllFolders').addEventListener('change', function (this: HTMLInputElement) { + if (this.checked) { + element?.current?.querySelector('.deleteAccessListContainer').classList.add('hide'); + } else { + element?.current?.querySelector('.deleteAccessListContainer').classList.remove('hide'); + } + }); + + window.ApiClient.getServerConfiguration().then(function (config) { + const fldRemoteAccess = element?.current?.querySelector('.fldRemoteAccess'); + config.EnableRemoteAccess ? fldRemoteAccess.classList.remove('hide') : fldRemoteAccess.classList.add('hide'); + }); + + element?.current?.querySelector('.editUserProfileForm').addEventListener('submit', onSubmit); + + element?.current?.querySelector('.button-cancel').addEventListener('click', function() { + window.history.back(); + }); + }, []); + + return ( +
+
+
+
+

+ {userName} +

+ +
+
+
+ Dashboard.navigate('useredit.html', true)} + /> + Dashboard.navigate('userlibraryaccess.html', true)} + /> + Dashboard.navigate('userparentalcontrol.html', true)} + /> + Dashboard.navigate('userpassword.html', true)} + /> +
+
+ +
+
+
+
+
+ {globalize.translate('HeaderThisUserIsCurrentlyDisabled')} +
+
+ {globalize.translate('MessageReenableUser')} +
+
+
+
+ +
+
+ +
+ {globalize.translate('AuthProviderHelp')} +
+
+
+ +
+ {globalize.translate('PasswordResetProviderHelp')} +
+
+
+ +
+ {globalize.translate('AllowRemoteAccessHelp')} +
+
+ +
+

+ {globalize.translate('HeaderFeatureAccess')} +

+
+ + +
+
+
+

+ {globalize.translate('HeaderPlayback')} +

+
+ + + + + +
+
+ {globalize.translate('OptionAllowMediaPlaybackTranscodingHelp')} +
+
+
+
+
+ +
+ {globalize.translate('LabelRemoteClientBitrateLimitHelp')} +
+
+ {globalize.translate('LabelUserRemoteClientBitrateLimitHelp')} +
+
+
+
+
+ +
+ {globalize.translate('SyncPlayAccessHelp')} +
+
+
+
+

{globalize.translate('HeaderAllowMediaDeletionFrom')}

+ +
+
+

+ {globalize.translate('DeleteFoldersAccess')} +

+
+ {deleteFoldersAccess.map(Item => ( + + ))} +
+
+
+ {globalize.translate('DeleteFoldersAccessHelp')} +
+
+
+
+

+ {globalize.translate('HeaderRemoteControl')} +

+
+ + +
+
+ {globalize.translate('OptionAllowRemoteSharedDevicesHelp')} +
+
+

+ {globalize.translate('Other')} +

+
+ +
+ {globalize.translate('OptionAllowContentDownloadHelp')} +
+
+
+ +
+ {globalize.translate('OptionDisableUserHelp')} +
+
+
+ +
+ {globalize.translate('OptionHideUserFromLoginHelp')} +
+
+
+
+
+ +
+ {globalize.translate('OptionLoginAttemptsBeforeLockout')} +
+
+ {globalize.translate('OptionLoginAttemptsBeforeLockoutHelp')} +
+
+
+
+
+
+ +
+ {globalize.translate('OptionMaxActiveSessions')} +
+
+ {globalize.translate('OptionMaxActiveSessionsHelp')} +
+
+
+
+
+ + +
+ +
+
+ ); +}; + +export default UserEditPage; diff --git a/src/controllers/dashboard/users/useredit.html b/src/controllers/dashboard/users/useredit.html index 83fa6dced7..e4b6afd33e 100644 --- a/src/controllers/dashboard/users/useredit.html +++ b/src/controllers/dashboard/users/useredit.html @@ -1,194 +1,3 @@
-
-
- -
-
-

- ${Help} -
-
- - -

- ${ButtonEditOtherUserPreferences} -

-
- - -
- -
- -
- -
${AuthProviderHelp}
-
- -
- -
${PasswordResetProviderHelp}
-
- -
- -
${AllowRemoteAccessHelp}
-
- -
-

${HeaderFeatureAccess}

-
- - -
-
-
-

${HeaderPlayback}

-
- - - - - -
-
${OptionAllowMediaPlaybackTranscodingHelp}
-
-
-
-
- -
${LabelRemoteClientBitrateLimitHelp}
-
${LabelUserRemoteClientBitrateLimitHelp}
-
-
-
-
- -
${SyncPlayAccessHelp}
-
-
-
-

${HeaderAllowMediaDeletionFrom}

-
- -
-
-
-
-
-

${HeaderRemoteControl}

-
- - - -
-
${OptionAllowRemoteSharedDevicesHelp}
-
-

${Other}

-
- -
${OptionAllowContentDownloadHelp}
-
-
- -
${OptionDisableUserHelp}
-
-
- -
${OptionHideUserFromLoginHelp}
-
-
-
-
- -
${OptionLoginAttemptsBeforeLockout}
-
${OptionLoginAttemptsBeforeLockoutHelp}
-
-
-
-
-
- -
${OptionMaxActiveSessions}
-
${OptionMaxActiveSessionsHelp}
-
-
-
-
- - - -
-
-
-
diff --git a/src/controllers/dashboard/users/useredit.js b/src/controllers/dashboard/users/useredit.js deleted file mode 100644 index c45f0c9af3..0000000000 --- a/src/controllers/dashboard/users/useredit.js +++ /dev/null @@ -1,196 +0,0 @@ -import 'jquery'; -import loading from '../../../components/loading/loading'; -import libraryMenu from '../../../scripts/libraryMenu'; -import globalize from '../../../scripts/globalize'; -import Dashboard from '../../../scripts/clientUtils'; -import toast from '../../../components/toast/toast'; - -/* eslint-disable indent */ - - function loadDeleteFolders(page, user, mediaFolders) { - ApiClient.getJSON(ApiClient.getUrl('Channels', { - SupportsMediaDeletion: true - })).then(function (channelsResult) { - let isChecked; - let checkedAttribute; - let html = ''; - - for (const folder of mediaFolders) { - isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1; - checkedAttribute = isChecked ? ' checked="checked"' : ''; - html += ''; - } - - for (const folder of channelsResult.Items) { - isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1; - checkedAttribute = isChecked ? ' checked="checked"' : ''; - html += ''; - } - - $('.deleteAccess', page).html(html).trigger('create'); - $('#chkEnableDeleteAllFolders', page).prop('checked', user.Policy.EnableContentDeletion); - }); - } - - function loadAuthProviders(page, user, providers) { - if (providers.length > 1) { - page.querySelector('.fldSelectLoginProvider').classList.remove('hide'); - } else { - page.querySelector('.fldSelectLoginProvider').classList.add('hide'); - } - - const currentProviderId = user.Policy.AuthenticationProviderId; - page.querySelector('.selectLoginProvider').innerHTML = providers.map(function (provider) { - const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : ''; - return ''; - }); - } - - function loadPasswordResetProviders(page, user, providers) { - if (providers.length > 1) { - page.querySelector('.fldSelectPasswordResetProvider').classList.remove('hide'); - } else { - page.querySelector('.fldSelectPasswordResetProvider').classList.add('hide'); - } - - const currentProviderId = user.Policy.PasswordResetProviderId; - page.querySelector('.selectPasswordResetProvider').innerHTML = providers.map(function (provider) { - const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : ''; - return ''; - }); - } - - function loadUser(page, user) { - ApiClient.getJSON(ApiClient.getUrl('Auth/Providers')).then(function (providers) { - loadAuthProviders(page, user, providers); - }); - ApiClient.getJSON(ApiClient.getUrl('Auth/PasswordResetProviders')).then(function (providers) { - loadPasswordResetProviders(page, user, providers); - }); - ApiClient.getJSON(ApiClient.getUrl('Library/MediaFolders', { - IsHidden: false - })).then(function (folders) { - loadDeleteFolders(page, user, folders.Items); - }); - - if (user.Policy.IsDisabled) { - $('.disabledUserBanner', page).show(); - } else { - $('.disabledUserBanner', page).hide(); - } - - $('#txtUserName', page).prop('disabled', '').removeAttr('disabled'); - $('#fldConnectInfo', page).show(); - $('.lnkEditUserPreferences', page).attr('href', 'mypreferencesmenu.html?userId=' + user.Id); - libraryMenu.setTitle(user.Name); - page.querySelector('.username').innerHTML = user.Name; - $('#txtUserName', page).val(user.Name); - $('#chkIsAdmin', page).prop('checked', user.Policy.IsAdministrator); - $('#chkDisabled', page).prop('checked', user.Policy.IsDisabled); - $('#chkIsHidden', page).prop('checked', user.Policy.IsHidden); - $('#chkRemoteControlSharedDevices', page).prop('checked', user.Policy.EnableSharedDeviceControl); - $('#chkEnableRemoteControlOtherUsers', page).prop('checked', user.Policy.EnableRemoteControlOfOtherUsers); - $('#chkEnableDownloading', page).prop('checked', user.Policy.EnableContentDownloading); - $('#chkManageLiveTv', page).prop('checked', user.Policy.EnableLiveTvManagement); - $('#chkEnableLiveTvAccess', page).prop('checked', user.Policy.EnableLiveTvAccess); - $('#chkEnableMediaPlayback', page).prop('checked', user.Policy.EnableMediaPlayback); - $('#chkEnableAudioPlaybackTranscoding', page).prop('checked', user.Policy.EnableAudioPlaybackTranscoding); - $('#chkEnableVideoPlaybackTranscoding', page).prop('checked', user.Policy.EnableVideoPlaybackTranscoding); - $('#chkEnableVideoPlaybackRemuxing', page).prop('checked', user.Policy.EnablePlaybackRemuxing); - $('#chkForceRemoteSourceTranscoding', page).prop('checked', user.Policy.ForceRemoteSourceTranscoding); - $('#chkRemoteAccess', page).prop('checked', user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess); - $('#txtRemoteClientBitrateLimit', page).val(user.Policy.RemoteClientBitrateLimit / 1e6 || ''); - $('#txtLoginAttemptsBeforeLockout', page).val(user.Policy.LoginAttemptsBeforeLockout || '0'); - $('#txtMaxActiveSessions', page).val(user.Policy.MaxActiveSessions || '0'); - if (ApiClient.isMinServerVersion('10.6.0')) { - $('#selectSyncPlayAccess').val(user.Policy.SyncPlayAccess); - } - loading.hide(); - } - - function onSaveComplete() { - Dashboard.navigate('userprofiles.html'); - loading.hide(); - toast(globalize.translate('SettingsSaved')); - } - - function saveUser(user, page) { - user.Name = $('#txtUserName', page).val(); - user.Policy.IsAdministrator = $('#chkIsAdmin', page).is(':checked'); - user.Policy.IsHidden = $('#chkIsHidden', page).is(':checked'); - user.Policy.IsDisabled = $('#chkDisabled', page).is(':checked'); - user.Policy.EnableRemoteControlOfOtherUsers = $('#chkEnableRemoteControlOtherUsers', page).is(':checked'); - user.Policy.EnableLiveTvManagement = $('#chkManageLiveTv', page).is(':checked'); - user.Policy.EnableLiveTvAccess = $('#chkEnableLiveTvAccess', page).is(':checked'); - user.Policy.EnableSharedDeviceControl = $('#chkRemoteControlSharedDevices', page).is(':checked'); - user.Policy.EnableMediaPlayback = $('#chkEnableMediaPlayback', page).is(':checked'); - user.Policy.EnableAudioPlaybackTranscoding = $('#chkEnableAudioPlaybackTranscoding', page).is(':checked'); - user.Policy.EnableVideoPlaybackTranscoding = $('#chkEnableVideoPlaybackTranscoding', page).is(':checked'); - user.Policy.EnablePlaybackRemuxing = $('#chkEnableVideoPlaybackRemuxing', page).is(':checked'); - user.Policy.ForceRemoteSourceTranscoding = $('#chkForceRemoteSourceTranscoding', page).is(':checked'); - user.Policy.EnableContentDownloading = $('#chkEnableDownloading', page).is(':checked'); - user.Policy.EnableRemoteAccess = $('#chkRemoteAccess', page).is(':checked'); - user.Policy.RemoteClientBitrateLimit = parseInt(1e6 * parseFloat($('#txtRemoteClientBitrateLimit', page).val() || '0')); - user.Policy.LoginAttemptsBeforeLockout = parseInt($('#txtLoginAttemptsBeforeLockout', page).val() || '0'); - user.Policy.MaxActiveSessions = parseInt($('#txtMaxActiveSessions', page).val() || '0'); - user.Policy.AuthenticationProviderId = page.querySelector('.selectLoginProvider').value; - user.Policy.PasswordResetProviderId = page.querySelector('.selectPasswordResetProvider').value; - user.Policy.EnableContentDeletion = $('#chkEnableDeleteAllFolders', page).is(':checked'); - user.Policy.EnableContentDeletionFromFolders = user.Policy.EnableContentDeletion ? [] : $('.chkFolder', page).get().filter(function (c) { - return c.checked; - }).map(function (c) { - return c.getAttribute('data-id'); - }); - if (ApiClient.isMinServerVersion('10.6.0')) { - user.Policy.SyncPlayAccess = page.querySelector('#selectSyncPlayAccess').value; - } - ApiClient.updateUser(user).then(function () { - ApiClient.updateUserPolicy(user.Id, user.Policy).then(function () { - onSaveComplete(); - }); - }); - } - - function onSubmit() { - const page = $(this).parents('.page')[0]; - loading.show(); - getUser().then(function (result) { - saveUser(result, page); - }); - return false; - } - - function getUser() { - const userId = getParameterByName('userId'); - return ApiClient.getUser(userId); - } - - function loadData(page) { - loading.show(); - getUser().then(function (user) { - loadUser(page, user); - }); - } - - $(document).on('pageinit', '#editUserPage', function () { - $('.editUserProfileForm').off('submit', onSubmit).on('submit', onSubmit); - const page = this; - $('#chkEnableDeleteAllFolders', this).on('change', function () { - if (this.checked) { - $('.deleteAccess', page).hide(); - } else { - $('.deleteAccess', page).show(); - } - }); - ApiClient.getServerConfiguration().then(function (config) { - if (config.EnableRemoteAccess) { - page.querySelector('.fldRemoteAccess').classList.remove('hide'); - } else { - page.querySelector('.fldRemoteAccess').classList.add('hide'); - } - }); - }).on('pagebeforeshow', '#editUserPage', function () { - loadData(this); - }); - -/* eslint-enable indent */ diff --git a/src/scripts/routes.js b/src/scripts/routes.js index 68b47cc75c..92453ff5bc 100644 --- a/src/scripts/routes.js +++ b/src/scripts/routes.js @@ -440,7 +440,7 @@ import { appRouter } from '../components/appRouter'; path: 'dashboard/users/useredit.html', autoFocus: false, roles: 'admin', - controller: 'dashboard/users/useredit' + pageComponent: 'UserEditPage' }); defineRoute({ From aaa69d92fe2d33508d057a359cc6ac421e2265b5 Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Sat, 13 Nov 2021 21:05:37 +0300 Subject: [PATCH 2/5] useCallback hook --- src/components/pages/UserEditPage.tsx | 232 +++++++++++++------------- 1 file changed, 116 insertions(+), 116 deletions(-) diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx index 84500c8688..14662e1c34 100644 --- a/src/components/pages/UserEditPage.tsx +++ b/src/components/pages/UserEditPage.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, useEffect, useState, useRef } from 'react'; +import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react'; import Dashboard from '../../scripts/clientUtils'; import globalize from '../../scripts/globalize'; import LibraryMenu from '../../scripts/libraryMenu'; @@ -32,130 +32,130 @@ const UserEditPage: FunctionComponent = () => { const element = useRef(null); - useEffect(() => { - const getUser = () => { - const userId = appRouter.param('userId'); - return window.ApiClient.getUser(userId); - }; + const triggerChange = (select) => { + const evt = document.createEvent('HTMLEvents'); + evt.initEvent('change', false, true); + select.dispatchEvent(evt); + }; - const loadData = () => { - loading.show(); - getUser().then(function (user) { - loadUser(user); - }); - }; + const getUser = () => { + const userId = appRouter.param('userId'); + return window.ApiClient.getUser(userId); + }; - loadData(); + const loadAuthProviders = useCallback((user, providers) => { + const fldSelectLoginProvider = element?.current?.querySelector('.fldSelectLoginProvider'); + providers.length > 1 ? fldSelectLoginProvider.classList.remove('hide') : fldSelectLoginProvider.classList.add('hide'); - const loadAuthProviders = (user, providers) => { - const fldSelectLoginProvider = element?.current?.querySelector('.fldSelectLoginProvider'); - providers.length > 1 ? fldSelectLoginProvider.classList.remove('hide') : fldSelectLoginProvider.classList.add('hide'); + setAuthProviders(providers); - setAuthProviders(providers); + const currentProviderId = user.Policy.AuthenticationProviderId; + setAuthenticationProviderId(currentProviderId); + }, []); - const currentProviderId = user.Policy.AuthenticationProviderId; - setAuthenticationProviderId(currentProviderId); - }; + const loadPasswordResetProviders = useCallback((user, providers) => { + const fldSelectPasswordResetProvider = element?.current?.querySelector('.fldSelectPasswordResetProvider'); + providers.length > 1 ? fldSelectPasswordResetProvider.classList.remove('hide') : fldSelectPasswordResetProvider.classList.add('hide'); - const loadPasswordResetProviders = (user, providers) => { - const fldSelectPasswordResetProvider = element?.current?.querySelector('.fldSelectPasswordResetProvider'); - providers.length > 1 ? fldSelectPasswordResetProvider.classList.remove('hide') : fldSelectPasswordResetProvider.classList.add('hide'); + setPasswordResetProviders(providers); - setPasswordResetProviders(providers); + const currentProviderId = user.Policy.PasswordResetProviderId; + setPasswordResetProviderId(currentProviderId); + }, []); - const currentProviderId = user.Policy.PasswordResetProviderId; - setPasswordResetProviderId(currentProviderId); - }; + const loadDeleteFolders = useCallback((user, mediaFolders) => { + window.ApiClient.getJSON(window.ApiClient.getUrl('Channels', { + SupportsMediaDeletion: true + })).then(function (channelsResult) { + let isChecked; + let checkedAttribute; + const itemsArr: ItemsArr[] = []; - const loadDeleteFolders = (user, mediaFolders) => { - window.ApiClient.getJSON(window.ApiClient.getUrl('Channels', { - SupportsMediaDeletion: true - })).then(function (channelsResult) { - let isChecked; - let checkedAttribute; - const itemsArr: ItemsArr[] = []; - - for (const folder of mediaFolders) { - isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1; - checkedAttribute = isChecked ? ' checked="checked"' : ''; - itemsArr.push({ - Id: folder.Id, - Name: folder.Name, - checkedAttribute: checkedAttribute - }); - } - - for (const folder of channelsResult.Items) { - isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1; - checkedAttribute = isChecked ? ' checked="checked"' : ''; - itemsArr.push({ - Id: folder.Id, - Name: folder.Name, - checkedAttribute: checkedAttribute - }); - } - - setDeleteFoldersAccess(itemsArr); - - const chkEnableDeleteAllFolders = element.current.querySelector('.chkEnableDeleteAllFolders'); - chkEnableDeleteAllFolders.checked = user.Policy.EnableContentDeletion; - triggerChange(chkEnableDeleteAllFolders); - }); - }; - - const triggerChange = (select) => { - const evt = document.createEvent('HTMLEvents'); - evt.initEvent('change', false, true); - select.dispatchEvent(evt); - }; - - const loadUser = (user) => { - window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) { - loadAuthProviders(user, providers); - }); - window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/PasswordResetProviders')).then(function (providers) { - loadPasswordResetProviders(user, providers); - }); - window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', { - IsHidden: false - })).then(function (folders) { - loadDeleteFolders(user, folders.Items); - }); - - const disabledUserBanner = element?.current?.querySelector('.disabledUserBanner'); - user.Policy.IsDisabled ? disabledUserBanner.classList.remove('hide') : disabledUserBanner.classList.add('hide'); - - const txtUserName = element?.current?.querySelector('#txtUserName'); - txtUserName.disabled = ''; - txtUserName.removeAttribute('disabled'); - - const lnkEditUserPreferences = element?.current?.querySelector('.lnkEditUserPreferences'); - lnkEditUserPreferences.setAttribute('href', 'mypreferencesmenu.html?userId=' + user.Id); - LibraryMenu.setTitle(user.Name); - setUserName(user.Name); - element.current.querySelector('#txtUserName').value = user.Name; - element.current.querySelector('.chkIsAdmin').checked = user.Policy.IsAdministrator; - element.current.querySelector('.chkDisabled').checked = user.Policy.IsDisabled; - element.current.querySelector('.chkIsHidden').checked = user.Policy.IsHidden; - element.current.querySelector('.chkRemoteControlSharedDevices').checked = user.Policy.EnableSharedDeviceControl; - element.current.querySelector('.chkEnableRemoteControlOtherUsers').checked = user.Policy.EnableRemoteControlOfOtherUsers; - element.current.querySelector('.chkEnableDownloading').checked = user.Policy.EnableContentDownloading; - element.current.querySelector('.chkManageLiveTv').checked = user.Policy.EnableLiveTvManagement; - element.current.querySelector('.chkEnableLiveTvAccess').checked = user.Policy.EnableLiveTvAccess; - element.current.querySelector('.chkEnableMediaPlayback').checked = user.Policy.EnableMediaPlayback; - element.current.querySelector('.chkEnableAudioPlaybackTranscoding').checked = user.Policy.EnableAudioPlaybackTranscoding; - element.current.querySelector('.chkEnableVideoPlaybackTranscoding').checked = user.Policy.EnableVideoPlaybackTranscoding; - element.current.querySelector('.chkEnableVideoPlaybackRemuxing').checked = user.Policy.EnablePlaybackRemuxing; - element.current.querySelector('.chkForceRemoteSourceTranscoding').checked = user.Policy.ForceRemoteSourceTranscoding; - element.current.querySelector('.chkRemoteAccess').checked = user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess; - element.current.querySelector('#txtRemoteClientBitrateLimit').value = user.Policy.RemoteClientBitrateLimit / 1e6 || ''; - element.current.querySelector('#txtLoginAttemptsBeforeLockout').value = user.Policy.LoginAttemptsBeforeLockout || '0'; - element.current.querySelector('#txtMaxActiveSessions').value = user.Policy.MaxActiveSessions || '0'; - if (window.ApiClient.isMinServerVersion('10.6.0')) { - element.current.querySelector('#selectSyncPlayAccess').value = user.Policy.SyncPlayAccess; + for (const folder of mediaFolders) { + isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1; + checkedAttribute = isChecked ? ' checked="checked"' : ''; + itemsArr.push({ + Id: folder.Id, + Name: folder.Name, + checkedAttribute: checkedAttribute + }); } - loading.hide(); - }; + + for (const folder of channelsResult.Items) { + isChecked = user.Policy.EnableContentDeletion || user.Policy.EnableContentDeletionFromFolders.indexOf(folder.Id) != -1; + checkedAttribute = isChecked ? ' checked="checked"' : ''; + itemsArr.push({ + Id: folder.Id, + Name: folder.Name, + checkedAttribute: checkedAttribute + }); + } + + setDeleteFoldersAccess(itemsArr); + + const chkEnableDeleteAllFolders = element.current.querySelector('.chkEnableDeleteAllFolders'); + chkEnableDeleteAllFolders.checked = user.Policy.EnableContentDeletion; + triggerChange(chkEnableDeleteAllFolders); + }); + }, []); + + const loadUser = useCallback((user) => { + window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/Providers')).then(function (providers) { + loadAuthProviders(user, providers); + }); + window.ApiClient.getJSON(window.ApiClient.getUrl('Auth/PasswordResetProviders')).then(function (providers) { + loadPasswordResetProviders(user, providers); + }); + window.ApiClient.getJSON(window.ApiClient.getUrl('Library/MediaFolders', { + IsHidden: false + })).then(function (folders) { + loadDeleteFolders(user, folders.Items); + }); + + const disabledUserBanner = element?.current?.querySelector('.disabledUserBanner'); + user.Policy.IsDisabled ? disabledUserBanner.classList.remove('hide') : disabledUserBanner.classList.add('hide'); + + const txtUserName = element?.current?.querySelector('#txtUserName'); + txtUserName.disabled = ''; + txtUserName.removeAttribute('disabled'); + + const lnkEditUserPreferences = element?.current?.querySelector('.lnkEditUserPreferences'); + lnkEditUserPreferences.setAttribute('href', 'mypreferencesmenu.html?userId=' + user.Id); + LibraryMenu.setTitle(user.Name); + setUserName(user.Name); + element.current.querySelector('#txtUserName').value = user.Name; + element.current.querySelector('.chkIsAdmin').checked = user.Policy.IsAdministrator; + element.current.querySelector('.chkDisabled').checked = user.Policy.IsDisabled; + element.current.querySelector('.chkIsHidden').checked = user.Policy.IsHidden; + element.current.querySelector('.chkRemoteControlSharedDevices').checked = user.Policy.EnableSharedDeviceControl; + element.current.querySelector('.chkEnableRemoteControlOtherUsers').checked = user.Policy.EnableRemoteControlOfOtherUsers; + element.current.querySelector('.chkEnableDownloading').checked = user.Policy.EnableContentDownloading; + element.current.querySelector('.chkManageLiveTv').checked = user.Policy.EnableLiveTvManagement; + element.current.querySelector('.chkEnableLiveTvAccess').checked = user.Policy.EnableLiveTvAccess; + element.current.querySelector('.chkEnableMediaPlayback').checked = user.Policy.EnableMediaPlayback; + element.current.querySelector('.chkEnableAudioPlaybackTranscoding').checked = user.Policy.EnableAudioPlaybackTranscoding; + element.current.querySelector('.chkEnableVideoPlaybackTranscoding').checked = user.Policy.EnableVideoPlaybackTranscoding; + element.current.querySelector('.chkEnableVideoPlaybackRemuxing').checked = user.Policy.EnablePlaybackRemuxing; + element.current.querySelector('.chkForceRemoteSourceTranscoding').checked = user.Policy.ForceRemoteSourceTranscoding; + element.current.querySelector('.chkRemoteAccess').checked = user.Policy.EnableRemoteAccess == null || user.Policy.EnableRemoteAccess; + element.current.querySelector('#txtRemoteClientBitrateLimit').value = user.Policy.RemoteClientBitrateLimit / 1e6 || ''; + element.current.querySelector('#txtLoginAttemptsBeforeLockout').value = user.Policy.LoginAttemptsBeforeLockout || '0'; + element.current.querySelector('#txtMaxActiveSessions').value = user.Policy.MaxActiveSessions || '0'; + if (window.ApiClient.isMinServerVersion('10.6.0')) { + element.current.querySelector('#selectSyncPlayAccess').value = user.Policy.SyncPlayAccess; + } + loading.hide(); + }, [loadAuthProviders, loadPasswordResetProviders, loadDeleteFolders ]); + + const loadData = useCallback(() => { + loading.show(); + getUser().then(function (user) { + loadUser(user); + }); + }, [loadUser]); + + useEffect(() => { + loadData(); function onSaveComplete() { Dashboard.navigate('userprofiles.html'); @@ -228,7 +228,7 @@ const UserEditPage: FunctionComponent = () => { element?.current?.querySelector('.button-cancel').addEventListener('click', function() { window.history.back(); }); - }, []); + }, [loadData]); return (
From 3c32e871ab39ebc261c90cc31e3fdcb29377ad8e Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Sat, 20 Nov 2021 16:15:42 +0300 Subject: [PATCH 3/5] apply suggestions --- ...EditUserPreferences.tsx => LinkEditUserPreferences.tsx} | 4 ++-- src/components/dashboard/users/SelectElement.tsx | 7 ++++++- src/components/pages/UserEditPage.tsx | 4 ++-- 3 files changed, 10 insertions(+), 5 deletions(-) rename src/components/dashboard/users/{LnkEditUserPreferences.tsx => LinkEditUserPreferences.tsx} (80%) diff --git a/src/components/dashboard/users/LnkEditUserPreferences.tsx b/src/components/dashboard/users/LinkEditUserPreferences.tsx similarity index 80% rename from src/components/dashboard/users/LnkEditUserPreferences.tsx rename to src/components/dashboard/users/LinkEditUserPreferences.tsx index 1d60adac41..4318b78639 100644 --- a/src/components/dashboard/users/LnkEditUserPreferences.tsx +++ b/src/components/dashboard/users/LinkEditUserPreferences.tsx @@ -16,7 +16,7 @@ const createLinkElement = ({ className, title }) => ({ ` }); -const LnkEditUserPreferences: FunctionComponent = ({ className, title }: IProps) => { +const LinkEditUserPreferences: FunctionComponent = ({ className, title }: IProps) => { return (
= ({ className, title }: ); }; -export default LnkEditUserPreferences; +export default LinkEditUserPreferences; diff --git a/src/components/dashboard/users/SelectElement.tsx b/src/components/dashboard/users/SelectElement.tsx index a3fe1a5aa4..ab42a11fd3 100644 --- a/src/components/dashboard/users/SelectElement.tsx +++ b/src/components/dashboard/users/SelectElement.tsx @@ -11,11 +11,16 @@ const createSelectElement = ({ className, label, option }) => ({ ` }); +type ProvidersArr = { + Name?: string; + Id?: string; +} + type IProps = { className?: string; label?: string; currentProviderId: string; - providers: any + providers: ProvidersArr[] } const SelectElement: FunctionComponent = ({ className, label, currentProviderId, providers }: IProps) => { diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx index 14662e1c34..c49e1f46ef 100644 --- a/src/components/pages/UserEditPage.tsx +++ b/src/components/pages/UserEditPage.tsx @@ -7,7 +7,7 @@ import ButtonElement from '../dashboard/users/ButtonElement'; import CheckBoxElement from '../dashboard/users/CheckBoxElement'; import CheckBoxListItem from '../dashboard/users/CheckBoxListItem'; import InputElement from '../dashboard/users/InputElement'; -import LnkEditUserPreferences from '../dashboard/users/LnkEditUserPreferences'; +import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences'; import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement'; import SelectElement from '../dashboard/users/SelectElement'; import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement'; @@ -274,7 +274,7 @@ const UserEditPage: FunctionComponent = () => { className='lnkEditUserPreferencesContainer' style={{paddingBottom: '1em'}} > - From b22a9ed6324ca45d15817d525d030223c6c2be28 Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Sun, 2 Jan 2022 02:40:11 +0300 Subject: [PATCH 4/5] apply suggestions --- .../dashboard/users/CheckBoxElement.tsx | 9 ++- .../dashboard/users/SectionTabs.tsx | 52 +++++++++++++ .../dashboard/users/TabLinkElement.tsx | 36 --------- src/components/pages/UserEditPage.tsx | 78 ++++++------------- src/elements/emby-checkbox/emby-checkbox.scss | 5 ++ 5 files changed, 88 insertions(+), 92 deletions(-) create mode 100644 src/components/dashboard/users/SectionTabs.tsx delete mode 100644 src/components/dashboard/users/TabLinkElement.tsx diff --git a/src/components/dashboard/users/CheckBoxElement.tsx b/src/components/dashboard/users/CheckBoxElement.tsx index aaa5c63f51..f1c90e4e2c 100644 --- a/src/components/dashboard/users/CheckBoxElement.tsx +++ b/src/components/dashboard/users/CheckBoxElement.tsx @@ -1,8 +1,8 @@ import React, { FunctionComponent } from 'react'; import globalize from '../../../scripts/globalize'; -const createCheckBoxElement = ({ type, className, title }) => ({ - __html: `
-
-

{globalize.translate('HeaderAllowMediaDeletionFrom')}

- -
+
+

+ {globalize.translate('HeaderAllowMediaDeletionFrom')} +

+
+
-

- {globalize.translate('DeleteFoldersAccess')} -

-
- {deleteFoldersAccess.map(Item => ( - - ))} -
-
-
- {globalize.translate('DeleteFoldersAccessHelp')} + {deleteFoldersAccess.map(Item => ( + + ))}
diff --git a/src/elements/emby-checkbox/emby-checkbox.scss b/src/elements/emby-checkbox/emby-checkbox.scss index b33a216140..d2b6aa3901 100644 --- a/src/elements/emby-checkbox/emby-checkbox.scss +++ b/src/elements/emby-checkbox/emby-checkbox.scss @@ -108,6 +108,11 @@ width: 12em; } +.checkboxList > .sectioncheckbox > .emby-checkbox-label { + display: flex; + margin: 0.5em 0; +} + .checkboxList-paperList { padding: 1em !important; } From ffb40c125d4108835688173e539135ffaf2b0ad1 Mon Sep 17 00:00:00 2001 From: grafixeyehero <32230989+grafixeyehero@users.noreply.github.com> Date: Sun, 2 Jan 2022 04:40:31 +0300 Subject: [PATCH 5/5] apply suggestions Fix Spacing for checkbox lists --- src/components/dashboard/users/CheckBoxListItem.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/dashboard/users/CheckBoxListItem.tsx b/src/components/dashboard/users/CheckBoxListItem.tsx index d51bd9835f..af15769e47 100644 --- a/src/components/dashboard/users/CheckBoxListItem.tsx +++ b/src/components/dashboard/users/CheckBoxListItem.tsx @@ -23,6 +23,7 @@ const createCheckBoxElement = ({className, Name, Id, AppName, checkedAttribute}) const CheckBoxListItem: FunctionComponent = ({className, Name, Id, AppName, checkedAttribute}: IProps) => { return (