Add permissions checking to the settings page

This commit is contained in:
Dane Everitt 2020-03-29 22:05:30 -07:00
parent 3df134b558
commit 79095b526c
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
1 changed files with 42 additions and 37 deletions

View File

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