Skip to content

Commit d27bda1

Browse files
DaneEverittDaneEveritt
committed
Get settings page in working order
1 parent 1e163aa commit d27bda1

File tree

5 files changed

+80
-60
lines changed

5 files changed

+80
-60
lines changed

‎resources/scripts/components/elements/Button.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,10 @@ interface Props {
1010
isSecondary?: boolean;
1111
}
1212

13-
const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
14-
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
13+
const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
14+
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`};
1515
16-
${props => props.isSecondary && css<Props>`
17-
${tw`border border-neutral-600 bg-transparent text-neutral-200`};
18-
19-
&:hover:not(:disabled) {
20-
${tw`border-neutral-500 text-neutral-100`};
21-
${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
22-
${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
23-
}
24-
`};
25-
26-
${props => (!props.color || props.color === 'primary') && css<Props>`
16+
${props => ((!props.isSecondary && !props.color) || props.color === 'primary') && css<Props>`
2717
${props => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
2818
2919
&:hover:not(:disabled) {
@@ -32,15 +22,15 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
3222
`};
3323
3424
${props => props.color === 'grey' && css`
35-
${tw`border border-neutral-600 bg-neutral-500 text-neutral-50`};
25+
${tw`border-neutral-600 bg-neutral-500 text-neutral-50`};
3626
3727
&:hover:not(:disabled) {
3828
${tw`bg-neutral-600 border-neutral-700`};
3929
}
4030
`};
4131
4232
${props => props.color === 'green' && css<Props>`
43-
${tw`border border-green-600 bg-green-500 text-green-50`};
33+
${tw`border-green-600 bg-green-500 text-green-50`};
4434
4535
&:hover:not(:disabled) {
4636
${tw`bg-green-600 border-green-700`};
@@ -54,7 +44,7 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
5444
`};
5545
5646
${props => props.color === 'red' && css<Props>`
57-
${tw`border border-red-600 bg-red-500 text-red-50`};
47+
${tw`border-red-600 bg-red-500 text-red-50`};
5848
5949
&:hover:not(:disabled) {
6050
${tw`bg-red-600 border-red-700`};
@@ -72,13 +62,23 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
7262
${props => props.size === 'large' && tw`p-4 text-sm`};
7363
${props => props.size === 'xlarge' && tw`p-4 w-full`};
7464
65+
${props => props.isSecondary && css<Props>`
66+
${tw`border-neutral-600 bg-transparent text-neutral-200`};
67+
68+
&:hover:not(:disabled) {
69+
${tw`border-neutral-500 text-neutral-100`};
70+
${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
71+
${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
72+
}
73+
`};
74+
7575
&:disabled { opacity: 0.55; cursor: default }
7676
`;
7777

7878
type ComponentProps = Omit<JSX.IntrinsicElements['button'], 'ref' | keyof Props> & Props;
7979

8080
const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
81-
<StyledButton {...props}>
81+
<ButtonStyle {...props}>
8282
{isLoading &&
8383
<div css={tw`flex absolute justify-center items-center w-full h-full left-0 top-0`}>
8484
<Spinner size={'small'}/>
@@ -87,7 +87,12 @@ const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) =>
8787
<span css={isLoading ? tw`text-transparent` : undefined}>
8888
{children}
8989
</span>
90-
</StyledButton>
90+
</ButtonStyle>
9191
);
9292

93+
type LinkProps = Omit<JSX.IntrinsicElements['a'], 'ref' | keyof Props> & Props;
94+
95+
const LinkButton: React.FC<LinkProps> = props => <ButtonStyle as={'a'} {...props}/>;
96+
97+
export { LinkButton, ButtonStyle };
9398
export default Button;

‎resources/scripts/components/server/WebsocketHandler.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import getWebsocketToken from '@/api/server/getWebsocketToken';
55
import ContentContainer from '@/components/elements/ContentContainer';
66
import { CSSTransition } from 'react-transition-group';
77
import Spinner from '@/components/elements/Spinner';
8+
import tw from 'twin.macro';
89

910
export default () => {
1011
const server = ServerContext.useStoreState(state => state.server.data);
@@ -67,10 +68,10 @@ export default () => {
6768
return (
6869
error ?
6970
<CSSTransition timeout={250} in={true} appear={true} classNames={'fade'}>
70-
<div className={'bg-red-500 py-2'}>
71-
<ContentContainer className={'flex items-center justify-center'}>
71+
<div css={tw`bg-red-500 py-2`}>
72+
<ContentContainer css={tw`flex items-center justify-center`}>
7273
<Spinner size={'small'}/>
73-
<p className={'ml-2 text-sm text-red-100'}>
74+
<p css={tw`ml-2 text-sm text-red-100`}>
7475
We&apos;re having some trouble connecting to your server, please wait...
7576
</p>
7677
</ContentContainer>

‎resources/scripts/components/server/settings/ReinstallServerBox.tsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { useState } from 'react';
22
import { ServerContext } from '@/state/server';
3-
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
43
import TitledGreyBox from '@/components/elements/TitledGreyBox';
54
import ConfirmationModal from '@/components/elements/ConfirmationModal';
65
import reinstallServer from '@/api/server/reinstallServer';
76
import { Actions, useStoreActions } from 'easy-peasy';
87
import { ApplicationStore } from '@/state';
98
import { httpErrorToHuman } from '@/api/http';
9+
import tw from 'twin.macro';
10+
import Button from '@/components/elements/Button';
1011

1112
export default () => {
1213
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
@@ -19,7 +20,11 @@ export default () => {
1920
setIsSubmitting(true);
2021
reinstallServer(uuid)
2122
.then(() => {
22-
addFlash({ key: 'settings', type: 'success', message: 'Your server has begun the reinstallation process.' });
23+
addFlash({
24+
key: 'settings',
25+
type: 'success',
26+
message: 'Your server has begun the reinstallation process.',
27+
});
2328
})
2429
.catch(error => {
2530
console.error(error);
@@ -30,10 +35,10 @@ export default () => {
3035
setIsSubmitting(false);
3136
setModalVisible(false);
3237
});
33-
}
38+
};
3439

3540
return (
36-
<TitledGreyBox title={'Reinstall Server'} className={'relative'}>
41+
<TitledGreyBox title={'Reinstall Server'} css={tw`relative`}>
3742
<ConfirmationModal
3843
title={'Confirm server reinstallation'}
3944
buttonText={'Yes, reinstall server'}
@@ -42,21 +47,26 @@ export default () => {
4247
visible={modalVisible}
4348
onDismissed={() => setModalVisible(false)}
4449
>
45-
Your server will be stopped and some files may be deleted or modified during this process, are you sure you wish to continue?
50+
Your server will be stopped and some files may be deleted or modified during this process, are you sure
51+
you wish to continue?
4652
</ConfirmationModal>
47-
<p className={'text-sm'}>
53+
<p css={tw`text-sm`}>
4854
Reinstalling your server will stop it, and then re-run the installation script that initially
49-
set it up. <strong className={'font-bold'}>Some files may be deleted or modified during this process,
50-
please back up your data before continuing.</strong>
55+
set it up.&nbsp;
56+
<strong css={tw`font-medium`}>
57+
Some files may be deleted or modified during this process, please back up your data before
58+
continuing.
59+
</strong>
5160
</p>
52-
<div className={'mt-6 text-right'}>
53-
<button
61+
<div css={tw`mt-6 text-right`}>
62+
<Button
5463
type={'button'}
55-
className={'btn btn-sm btn-secondary btn-red'}
64+
color={'red'}
65+
isSecondary
5666
onClick={() => setModalVisible(true)}
5767
>
5868
Reinstall Server
59-
</button>
69+
</Button>
6070
</div>
6171
</TitledGreyBox>
6272
);

‎resources/scripts/components/server/settings/RenameServerBox.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { object, string } from 'yup';
99
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
1010
import { ApplicationStore } from '@/state';
1111
import { httpErrorToHuman } from '@/api/http';
12+
import Button from '@/components/elements/Button';
13+
import tw from 'twin.macro';
1214

1315
interface Values {
1416
name: string;
@@ -18,19 +20,19 @@ const RenameServerBox = () => {
1820
const { isSubmitting } = useFormikContext<Values>();
1921

2022
return (
21-
<TitledGreyBox title={'Change Server Name'} className={'relative'}>
23+
<TitledGreyBox title={'Change Server Name'} css={tw`relative`}>
2224
<SpinnerOverlay visible={isSubmitting}/>
23-
<Form className={'mb-0'}>
25+
<Form css={tw`mb-0`}>
2426
<Field
2527
id={'name'}
2628
name={'name'}
2729
label={'Server Name'}
2830
type={'text'}
2931
/>
30-
<div className={'mt-6 text-right'}>
31-
<button type={'submit'} className={'btn btn-sm btn-primary'}>
32+
<div css={tw`mt-6 text-right`}>
33+
<Button type={'submit'}>
3234
Save
33-
</button>
35+
</Button>
3436
</div>
3537
</Form>
3638
</TitledGreyBox>

‎resources/scripts/components/server/settings/SettingsContainer.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,59 +9,61 @@ import FlashMessageRender from '@/components/FlashMessageRender';
99
import Can from '@/components/elements/Can';
1010
import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox';
1111
import PageContentBlock from '@/components/elements/PageContentBlock';
12+
import tw from 'twin.macro';
13+
import Input from '@/components/elements/Input';
14+
import Label from '@/components/elements/Label';
15+
import Button, { LinkButton } from '@/components/elements/Button';
1216

1317
export default () => {
1418
const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
1519
const server = ServerContext.useStoreState(state => state.server.data!);
1620

1721
return (
1822
<PageContentBlock>
19-
<FlashMessageRender byKey={'settings'} className={'mb-4'}/>
20-
<div className={'md:flex'}>
23+
<FlashMessageRender byKey={'settings'} css={tw`mb-4`}/>
24+
<div css={tw`md:flex`}>
2125
<Can action={'file.sftp'}>
22-
<div className={'w-full md:flex-1 md:max-w-1/2 md:mr-10'}>
26+
<div css={tw`w-full md:flex-1 md:mr-10`}>
2327
<TitledGreyBox title={'SFTP Details'}>
2428
<div>
25-
<label className={'input-dark-label'}>Server Address</label>
26-
<input
29+
<Label>Server Address</Label>
30+
<Input
2731
type={'text'}
28-
className={'input-dark'}
2932
value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`}
30-
readOnly={true}
33+
readOnly
3134
/>
3235
</div>
33-
<div className={'mt-6'}>
34-
<label className={'input-dark-label'}>Username</label>
35-
<input
36+
<div css={tw`mt-6`}>
37+
<Label>Username</Label>
38+
<Input
3639
type={'text'}
37-
className={'input-dark'}
3840
value={`${user.username}.${server.id}`}
39-
readOnly={true}
41+
readOnly
4042
/>
4143
</div>
42-
<div className={'mt-6 flex items-center'}>
43-
<div className={'flex-1'}>
44-
<div className={'border-l-4 border-cyan-500 p-3'}>
45-
<p className={'text-xs text-neutral-200'}>
44+
<div css={tw`mt-6 flex items-center`}>
45+
<div css={tw`flex-1`}>
46+
<div css={tw`border-l-4 border-cyan-500 p-3`}>
47+
<p css={tw`text-xs text-neutral-200`}>
4648
Your SFTP password is the same as the password you use to access this panel.
4749
</p>
4850
</div>
4951
</div>
50-
<div className={'ml-4'}>
51-
<a
52+
<div css={tw`ml-4`}>
53+
<LinkButton
54+
isSecondary
5255
href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`}
53-
className={'btn btn-sm btn-secondary'}
5456
>
5557
Launch SFTP
56-
</a>
58+
</LinkButton>
5759
</div>
5860
</div>
5961
</TitledGreyBox>
6062
</div>
6163
</Can>
62-
<div className={'w-full mt-6 md:flex-1 md:max-w-1/2 md:mt-0'}>
64+
<div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
6365
<Can action={'settings.rename'}>
64-
<div className={'mb-6 md:mb-10'}>
66+
<div css={tw`mb-6 md:mb-10`}>
6567
<RenameServerBox/>
6668
</div>
6769
</Can>

0 commit comments

Comments
 (0)