misc_pterodactyl-panel/resources/scripts/components/server/settings/SettingsContainer.tsx

78 lines
3.7 KiB
TypeScript
Raw Normal View History

2019-12-07 23:58:37 +00:00
import React from 'react';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { ServerContext } from '@/state/server';
import { useStoreState } from 'easy-peasy';
import RenameServerBox from '@/components/server/settings/RenameServerBox';
import FlashMessageRender from '@/components/FlashMessageRender';
import Can from '@/components/elements/Can';
import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox';
2020-07-04 22:58:14 +00:00
import tw from 'twin.macro';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
2020-07-05 01:46:09 +00:00
import { LinkButton } from '@/components/elements/Button';
2020-08-26 04:39:00 +00:00
import ServerContentBlock from '@/components/elements/ServerContentBlock';
2019-12-07 23:58:37 +00:00
export default () => {
2020-08-26 04:39:00 +00:00
const username = useStoreState(state => state.user.data!.username);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const sftpIp = ServerContext.useStoreState(state => state.server.data!.sftpDetails.ip);
const sftpPort = ServerContext.useStoreState(state => state.server.data!.sftpDetails.port);
2019-12-07 23:58:37 +00:00
return (
2020-08-26 04:39:00 +00:00
<ServerContentBlock title={'Settings'}>
2020-07-04 22:58:14 +00:00
<FlashMessageRender byKey={'settings'} css={tw`mb-4`}/>
<div css={tw`md:flex`}>
2020-07-09 04:42:37 +00:00
<div css={tw`w-full md:flex-1 md:mr-10`}>
<Can action={'file.sftp'}>
<TitledGreyBox title={'SFTP Details'} css={tw`mb-6 md:mb-10`}>
<div>
2020-07-04 22:58:14 +00:00
<Label>Server Address</Label>
<Input
type={'text'}
2020-08-26 04:39:00 +00:00
value={`sftp://${sftpIp}:${sftpPort}`}
2020-07-04 22:58:14 +00:00
readOnly
/>
</div>
2020-07-04 22:58:14 +00:00
<div css={tw`mt-6`}>
<Label>Username</Label>
<Input
type={'text'}
2020-08-26 04:39:00 +00:00
value={`${username}.${id}`}
2020-07-04 22:58:14 +00:00
readOnly
/>
</div>
2020-07-04 22:58:14 +00:00
<div css={tw`mt-6 flex items-center`}>
<div css={tw`flex-1`}>
<div css={tw`border-l-4 border-cyan-500 p-3`}>
<p css={tw`text-xs text-neutral-200`}>
Your SFTP password is the same as the password you use to access this panel.
</p>
</div>
</div>
2020-07-04 22:58:14 +00:00
<div css={tw`ml-4`}>
<LinkButton
isSecondary
2020-08-26 04:39:00 +00:00
href={`sftp://${username}.${id}@${sftpIp}:${sftpPort}`}
>
Launch SFTP
2020-07-04 22:58:14 +00:00
</LinkButton>
</div>
</div>
</TitledGreyBox>
2020-07-09 04:42:37 +00:00
</Can>
</div>
<div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
<Can action={'settings.rename'}>
2020-07-04 22:58:14 +00:00
<div css={tw`mb-6 md:mb-10`}>
<RenameServerBox/>
</div>
</Can>
<Can action={'settings.reinstall'}>
<ReinstallServerBox/>
</Can>
</div>
</div>
2020-08-26 04:39:00 +00:00
</ServerContentBlock>
2019-12-07 23:58:37 +00:00
);
};