diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx index d487bfc8f..ffdad1208 100644 --- a/resources/scripts/components/server/settings/SettingsContainer.tsx +++ b/resources/scripts/components/server/settings/SettingsContainer.tsx @@ -6,6 +6,7 @@ import { ApplicationStore } from '@/state'; import { UserData } from '@/state/user'; import RenameServerBox from '@/components/server/settings/RenameServerBox'; import FlashMessageRender from '@/components/FlashMessageRender'; +import Can from '@/components/elements/Can'; export default () => { const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!); @@ -15,46 +16,50 @@ export default () => { <div className={'my-10 mb-6'}> <FlashMessageRender byKey={'settings'} className={'mb-4'}/> <div className={'md:flex'}> - <TitledGreyBox title={'SFTP Details'} className={'w-full md:flex-1 md:mr-6'}> - <div> - <label className={'input-dark-label'}>Server Address</label> - <input - type={'text'} - className={'input-dark'} - value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`} - readOnly={true} - /> - </div> - <div className={'mt-6'}> - <label className={'input-dark-label'}>Username</label> - <input - type={'text'} - className={'input-dark'} - value={`${user.username}.${server.id}`} - readOnly={true} - /> - </div> - <div className={'mt-6 flex items-center'}> - <div className={'flex-1'}> - <div className={'border-l-4 border-cyan-500 p-3'}> - <p className={'text-xs text-neutral-200'}> - Your SFTP password is the same as the password you use to access this panel. - </p> + <Can action={'file.sftp'}> + <TitledGreyBox title={'SFTP Details'} className={'w-full md:flex-1 md:max-w-1/2 md:mr-6'}> + <div> + <label className={'input-dark-label'}>Server Address</label> + <input + type={'text'} + className={'input-dark'} + value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`} + readOnly={true} + /> + </div> + <div className={'mt-6'}> + <label className={'input-dark-label'}>Username</label> + <input + type={'text'} + className={'input-dark'} + value={`${user.username}.${server.id}`} + readOnly={true} + /> + </div> + <div className={'mt-6 flex items-center'}> + <div className={'flex-1'}> + <div className={'border-l-4 border-cyan-500 p-3'}> + <p className={'text-xs text-neutral-200'}> + Your SFTP password is the same as the password you use to access this panel. + </p> + </div> + </div> + <div className={'ml-4'}> + <a + href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`} + className={'btn btn-sm btn-secondary'} + > + Launch SFTP + </a> </div> </div> - <div className={'ml-4'}> - <a - href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`} - className={'btn btn-sm btn-secondary'} - > - Launch SFTP - </a> - </div> + </TitledGreyBox> + </Can> + <Can action={'settings.rename'}> + <div className={'w-full mt-6 md:flex-1 md:max-w-1/2 md:mt-0'}> + <RenameServerBox/> </div> - </TitledGreyBox> - <div className={'w-full mt-6 md:flex-1 md:mt-0'}> - <RenameServerBox/> - </div> + </Can> </div> </div> );