Alex/Pterodactyl-Panel
1
1
Fork 1
mirror of https://github.com/pterodactyl/panel.git synced 2024-11-22 00:52:43 +01:00
Code Issues Releases Wiki Activity

Apply new eslint rules; default to prettier for styling

Browse Source
This commit is contained in:
DaneEveritt 2022-06-26 15:13:52 -04:00
parent f22cce8881
commit dc84af9937
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
218 changed files with 3876 additions and 3564 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
.eslintrc.js Normal file
View File

@ -0,0 +1,57 @@
const prettier = {
singleQuote: true,
jsxSingleQuote: true,
printWidth: 120,
};
/** @type {import('eslint').Linter.Config} */
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 6,
ecmaFeatures: {
jsx: true,
},
project: './tsconfig.json',
tsconfigRootDir: './',
},
settings: {
react: {
pragma: 'React',
version: 'detect',
},
linkComponents: [
{name: 'Link', linkAttribute: 'to'},
{name: 'NavLink', linkAttribute: 'to'},
],
},
env: {
browser: true,
es6: true,
},
plugins: [
'react',
'react-hooks',
'prettier',
'@typescript-eslint',
],
extends: [
// 'standard',
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:jest-dom/recommended',
],
rules: {
eqeqeq: 'error',
'prettier/prettier': ['error', prettier],
// This setup is required to avoid a spam of errors when running eslint about React being
// used before it is defined.
//
// @see https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use
'no-use-before-define': 0,
'@typescript-eslint/no-use-before-define': 'warn',
'@typescript-eslint/no-unused-vars': ['warn', {argsIgnorePattern: '^_', varsIgnorePattern: '^_'}],
'@typescript-eslint/ban-ts-comment': ['error', {'ts-expect-error': 'allow-with-description'}],
}
};

2
.eslintrc.yml
View File

@ -53,8 +53,6 @@ rules:
multiline-ternary: 0
"react-hooks/rules-of-hooks":
- error
"react-hooks/exhaustive-deps": 0
"@typescript-eslint/explicit-function-return-type": 0
"@typescript-eslint/explicit-member-accessibility": 0
"@typescript-eslint/ban-ts-ignore": 0
"@typescript-eslint/no-explicit-any": 0

16
package.json
View File

@ -99,14 +99,17 @@
"babel-plugin-styled-components": "^2.0.7",
"cross-env": "^7.0.2",
"css-loader": "^5.2.7",
"eslint": "^7.27.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.23.3",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jest-dom": "^4.0.2",
"eslint-plugin-n": "^15.2.3",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"fork-ts-checker-webpack-plugin": "^6.2.10",
"identity-obj-proxy": "^3.0.0",
"jest": "^28.1.1",
@ -115,6 +118,7 @@
"postcss-loader": "^4.0.0",
"postcss-nesting": "^10.1.8",
"postcss-preset-env": "^7.7.1",
"prettier": "^2.7.1",
"redux-devtools-extension": "^2.13.8",
"source-map-loader": "^1.1.3",
"style-loader": "^2.0.0",

6
resources/scripts/TransitionRouter.tsx
View File

@ -7,7 +7,7 @@ import tw from 'twin.macro';
const StyledSwitchTransition = styled(SwitchTransition)`
${tw`relative`};
& section {
${tw`absolute w-full top-0 left-0`};
}
@ -19,9 +19,7 @@ const TransitionRouter: React.FC = ({ children }) => {
render={({ location }) => (
<StyledSwitchTransition>
<Fade timeout={150} key={location.pathname + location.search} in appear unmountOnExit>
<section>
{children}
</section>
<section>{children}</section>
</Fade>
</StyledSwitchTransition>
)}

29
resources/scripts/api/account/activity.ts
View File

@ -8,19 +8,26 @@ import useFilteredObject from '@/plugins/useFilteredObject';
export type ActivityLogFilters = QueryBuilderParams<'ip' | 'event', 'timestamp'>;
const useActivityLogs = (filters?: ActivityLogFilters, config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
const key = useUserSWRContentKey([ 'account', 'activity', JSON.stringify(useFilteredObject(filters || {})) ]);
const useActivityLogs = (
filters?: ActivityLogFilters,
config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>
): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
const key = useUserSWRContentKey(['account', 'activity', JSON.stringify(useFilteredObject(filters || {}))]);
return useSWR<PaginatedResult<ActivityLog>>(key, async () => {
const { data } = await http.get('/api/client/account/activity', {
params: {
...withQueryBuilderParams(filters),
include: [ 'actor' ],
},
});
return useSWR<PaginatedResult<ActivityLog>>(
key,
async () => {
const { data } = await http.get('/api/client/account/activity', {
params: {
...withQueryBuilderParams(filters),
include: ['actor'],
},
});
return toPaginatedSet(data, Transformers.toActivityLog);
}, { revalidateOnMount: false, ...(config || {}) });
return toPaginatedSet(data, Transformers.toActivityLog);
},
{ revalidateOnMount: false, ...(config || {}) }
);
};
export { useActivityLogs };

12
resources/scripts/api/account/createApiKey.ts
View File

@ -7,11 +7,13 @@ export default (description: string, allowedIps: string): Promise<ApiKey & { sec
description,
allowed_ips: allowedIps.length > 0 ? allowedIps.split('\n') : [],
})
.then(({ data }) => resolve({
...rawDataToApiKey(data.attributes),
// eslint-disable-next-line camelcase
secretToken: data.meta?.secret_token ?? '',
}))
.then(({ data }) =>
resolve({
...rawDataToApiKey(data.attributes),
// eslint-disable-next-line camelcase
secretToken: data.meta?.secret_token ?? '',
})
)
.catch(reject);
});
};

18
resources/scripts/api/account/ssh-keys.ts
View File

@ -5,15 +5,19 @@ import { SSHKey, Transformers } from '@definitions/user';
import { AxiosError } from 'axios';
const useSSHKeys = (config?: ConfigInterface<SSHKey[], AxiosError>) => {
const key = useUserSWRContentKey([ 'account', 'ssh-keys' ]);
const key = useUserSWRContentKey(['account', 'ssh-keys']);
return useSWR(key, async () => {
const { data } = await http.get('/api/client/account/ssh-keys');
return useSWR(
key,
async () => {
const { data } = await http.get('/api/client/account/ssh-keys');
return (data as FractalResponseList).data.map((datum: any) => {
return Transformers.toSSHKey(datum.attributes);
});
}, { revalidateOnMount: false, ...(config || {}) });
return (data as FractalResponseList).data.map((datum: any) => {
return Transformers.toSSHKey(datum.attributes);
});
},
{ revalidateOnMount: false, ...(config || {}) }
);
};
const createSSHKey = async (name: string, publicKey: string): Promise<SSHKey> => {

14
resources/scripts/api/auth/login.ts
View File

@ -15,12 +15,14 @@ export interface LoginData {
export default ({ username, password, recaptchaData }: LoginData): Promise<LoginResponse> => {
return new Promise((resolve, reject) => {
http.get('/sanctum/csrf-cookie')
.then(() => http.post('/auth/login', {
user: username,
password,
'g-recaptcha-response': recaptchaData,
}))
.then(response => {
.then(() =>
http.post('/auth/login', {
user: username,
password,
'g-recaptcha-response': recaptchaData,
})
)
.then((response) => {
if (!(response.data instanceof Object)) {
return reject(new Error('An error occurred while processing the login request.'));
}

12
resources/scripts/api/auth/loginCheckpoint.ts
View File

@ -6,12 +6,14 @@ export default (token: string, code: string, recoveryToken?: string): Promise<Lo
http.post('/auth/login/checkpoint', {
confirmation_token: token,
authentication_code: code,
recovery_token: (recoveryToken && recoveryToken.length > 0) ? recoveryToken : undefined,
recovery_token: recoveryToken && recoveryToken.length > 0 ? recoveryToken : undefined,
})
.then(response => resolve({
complete: response.data.data.complete,
intended: response.data.data.intended || undefined,
}))
.then((response) =>
resolve({
complete: response.data.data.complete,
intended: response.data.data.intended || undefined,
})
)
.catch(reject);
});
};

10
resources/scripts/api/auth/performPasswordReset.ts
View File

@ -19,10 +19,12 @@ export default (email: string, data: Data): Promise<PasswordResetResponse> => {
password: data.password,
password_confirmation: data.passwordConfirmation,
})
.then(response => resolve({
redirectTo: response.data.redirect_to,
sendToLogin: response.data.send_to_login,
}))
.then((response) =>
resolve({
redirectTo: response.data.redirect_to,
sendToLogin: response.data.send_to_login,
})
)
.catch(reject);
});
};

2
resources/scripts/api/auth/requestPasswordResetEmail.ts
View File

@ -3,7 +3,7 @@ import http from '@/api/http';
export default (email: string, recaptchaData?: string): Promise<string> => {
return new Promise((resolve, reject) => {
http.post('/auth/password', { email, 'g-recaptcha-response': recaptchaData })
.then(response => resolve(response.data.status || ''))
.then((response) => resolve(response.data.status || ''))
.catch(reject);
});
};

22
resources/scripts/api/definitions/helpers.ts
View File

@ -12,9 +12,21 @@ type TransformerFunc<T> = (callback: FractalResponseData) => T;
const isList = (data: FractalResponseList | FractalResponseData): data is FractalResponseList => data.object === 'list';
function transform<T, M>(data: null | undefined, transformer: TransformerFunc<T>, missing?: M): M;
function transform<T, M>(data: FractalResponseData | null | undefined, transformer: TransformerFunc<T>, missing?: M): T | M;
function transform<T, M>(data: FractalResponseList | FractalPaginatedResponse | null | undefined, transformer: TransformerFunc<T>, missing?: M): T[] | M;
function transform<T> (data: FractalResponseData | FractalResponseList | FractalPaginatedResponse | null | undefined, transformer: TransformerFunc<T>, missing = undefined) {
function transform<T, M>(
data: FractalResponseData | null | undefined,
transformer: TransformerFunc<T>,
missing?: M
): T | M;
function transform<T, M>(
data: FractalResponseList | FractalPaginatedResponse | null | undefined,
transformer: TransformerFunc<T>,
missing?: M
): T[] | M;
function transform<T>(
data: FractalResponseData | FractalResponseList | FractalPaginatedResponse | null | undefined,
transformer: TransformerFunc<T>,
missing = undefined
) {
if (data === undefined || data === null) {
return missing;
}
@ -30,9 +42,9 @@ function transform<T> (data: FractalResponseData | FractalResponseList | Fractal
return transformer(data);
}
function toPaginatedSet<T extends TransformerFunc<Model>> (
function toPaginatedSet<T extends TransformerFunc<Model>>(
response: FractalPaginatedResponse,
transformer: T,
transformer: T
): PaginatedResult<ReturnType<T>> {
return {
items: transform(response, transformer) as ReturnType<T>[],

2
resources/scripts/api/definitions/index.d.ts vendored
View File

@ -22,7 +22,7 @@ interface ModelWithRelationships extends Model {
*/
type WithLoaded<M extends ModelWithRelationships, R extends keyof M['relationships']> = M & {
relationships: MarkRequired<M['relationships'], R>;
}
};
/**
* Helper type that allows you to infer the type of an object by giving

4
resources/scripts/api/definitions/user/models.d.ts vendored
View File

@ -9,7 +9,7 @@ interface User extends Model {
twoFactorEnabled: boolean;
createdAt: Date;
permissions: SubuserPermission[];
can (permission: SubuserPermission): boolean;
can(permission: SubuserPermission): boolean;
}
interface SSHKey extends Model {
@ -30,5 +30,5 @@ interface ActivityLog extends Model<'actor'> {
timestamp: Date;
relationships: {
actor: User | null;
}
};
}

11
resources/scripts/api/definitions/user/transformers.ts
View File

@ -10,7 +10,7 @@ export default class Transformers {
fingerprint: data.fingerprint,
createdAt: new Date(data.created_at),
};
}
};
static toUser = ({ attributes }: FractalResponseData): Models.User => {
return {
@ -21,11 +21,11 @@ export default class Transformers {
twoFactorEnabled: attributes['2fa_enabled'],
permissions: attributes.permissions || [],
createdAt: new Date(attributes.created_at),
can (permission): boolean {
can(permission): boolean {
return this.permissions.includes(permission);
},
};
}
};
static toActivityLog = ({ attributes }: FractalResponseData): Models.ActivityLog => {
const { actor } = attributes.relationships || {};
@ -43,8 +43,7 @@ export default class Transformers {
actor: transform(actor as FractalResponseData, this.toUser, null),
},
};
}
};
}
export class MetaTransformers {
}
export class MetaTransformers {}

10
resources/scripts/api/getServers.ts
View File

@ -15,10 +15,12 @@ export default ({ query, ...params }: QueryParams): Promise<PaginatedResult<Serv
...params,
},
})
.then(({ data }) => resolve({
items: (data.data || []).map((datum: any) => rawDataToServerObject(datum)),
pagination: getPaginationSet(data.meta.pagination),
}))
.then(({ data }) =>
resolve({
items: (data.data || []).map((datum: any) => rawDataToServerObject(datum)),
pagination: getPaginationSet(data.meta.pagination),
})
)
.catch(reject);
});
};

31
resources/scripts/api/http.ts
View File

@ -11,7 +11,7 @@ const http: AxiosInstance = axios.create({
},
});
http.interceptors.request.use(req => {
http.interceptors.request.use((req) => {
if (!req.url?.endsWith('/resources')) {
store.getActions().progress.startContinuous();
}
@ -19,17 +19,20 @@ http.interceptors.request.use(req => {
return req;
});
http.interceptors.response.use(resp => {
if (!resp.request?.url?.endsWith('/resources')) {
http.interceptors.response.use(
(resp) => {
if (!resp.request?.url?.endsWith('/resources')) {
store.getActions().progress.setComplete();
}
return resp;
},
(error) => {
store.getActions().progress.setComplete();
throw error;
}
return resp;
}, error => {
store.getActions().progress.setComplete();
throw error;
});
);
export default http;
@ -37,7 +40,7 @@ export default http;
* Converts an error into a human readable response. Mostly just a generic helper to
* make sure we display the message from the server back to the user if we can.
*/
export function httpErrorToHuman (error: any): string {
export function httpErrorToHuman(error: any): string {
if (error.response && error.response.data) {
let { data } = error.response;
@ -104,7 +107,7 @@ export interface PaginationDataSet {
totalPages: number;
}
export function getPaginationSet (data: any): PaginationDataSet {
export function getPaginationSet(data: any): PaginationDataSet {
return {
total: data.total,
count: data.count,
@ -142,11 +145,11 @@ export const withQueryBuilderParams = (data?: QueryBuilderParams): Record<string
const sorts = Object.keys(data.sorts || {}).reduce((arr, key) => {
const value = data.sorts?.[key];
if (!value || ![ 'asc', 'desc', 1, -1 ].includes(value)) {
if (!value || !['asc', 'desc', 1, -1].includes(value)) {
return arr;
}
return [ ...arr, (value === -1 || value === 'desc' ? '-' : '') + key ];
return [...arr, (value === -1 || value === 'desc' ? '-' : '') + key];
}, [] as string[]);
return {

17
resources/scripts/api/interceptors.ts
View File

@ -3,14 +3,17 @@ import { AxiosError } from 'axios';
import { History } from 'history';
export const setupInterceptors = (history: History) => {
http.interceptors.response.use(resp => resp, (error: AxiosError) => {
if (error.response?.status === 400) {
if (error.response?.data.errors?.[0].code === 'TwoFactorAuthRequiredException') {
if (!window.location.pathname.startsWith('/account')) {
history.replace('/account', { twoFactorRedirect: true });
http.interceptors.response.use(
(resp) => resp,
(error: AxiosError) => {
if (error.response?.status === 400) {
if (error.response?.data.errors?.[0].code === 'TwoFactorAuthRequiredException') {
if (!window.location.pathname.startsWith('/account')) {
history.replace('/account', { twoFactorRedirect: true });
}
}
}
throw error;
}
throw error;
});
);
};

31
resources/scripts/api/server/activity.ts
View File

@ -9,20 +9,27 @@ import { ServerContext } from '@/state/server';
export type ActivityLogFilters = QueryBuilderParams<'ip' | 'event', 'timestamp'>;
const useActivityLogs = (filters?: ActivityLogFilters, config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
const uuid = ServerContext.useStoreState(state => state.server.data?.uuid);
const key = useUserSWRContentKey([ 'server', 'activity', useFilteredObject(filters || {}) ]);
const useActivityLogs = (
filters?: ActivityLogFilters,
config?: ConfigInterface<PaginatedResult<ActivityLog>, AxiosError>
): responseInterface<PaginatedResult<ActivityLog>, AxiosError> => {
const uuid = ServerContext.useStoreState((state) => state.server.data?.uuid);
const key = useUserSWRContentKey(['server', 'activity', useFilteredObject(filters || {})]);
return useSWR<PaginatedResult<ActivityLog>>(key, async () => {
const { data } = await http.get(`/api/client/servers/${uuid}/activity`, {
params: {
...withQueryBuilderParams(filters),
include: [ 'actor' ],
},
});
return useSWR<PaginatedResult<ActivityLog>>(
key,
async () => {
const { data } = await http.get(`/api/client/servers/${uuid}/activity`, {
params: {
...withQueryBuilderParams(filters),
include: ['actor'],
},
});
return toPaginatedSet(data, Transformers.toActivityLog);
}, { revalidateOnMount: false, ...(config || {}) });
return toPaginatedSet(data, Transformers.toActivityLog);
},
{ revalidateOnMount: false, ...(config || {}) }
);
};
export { useActivityLogs };

18
resources/scripts/api/server/databases/createServerDatabase.ts
View File

@ -3,13 +3,17 @@ import http from '@/api/http';
export default (uuid: string, data: { connectionsFrom: string; databaseName: string }): Promise<ServerDatabase> => {
return new Promise((resolve, reject) => {
http.post(`/api/client/servers/${uuid}/databases`, {
database: data.databaseName,
remote: data.connectionsFrom,
}, {
params: { include: 'password' },
})
.then(response => resolve(rawDataToServerDatabase(response.data.attributes)))
http.post(
`/api/client/servers/${uuid}/databases`,
{
database: data.databaseName,
remote: data.connectionsFrom,
},
{
params: { include: 'password' },
}
)
.then((response) => resolve(rawDataToServerDatabase(response.data.attributes)))
.catch(reject);
});
};

9
resources/scripts/api/server/databases/getServerDatabases.ts
View File

@ -15,7 +15,8 @@ export const rawDataToServerDatabase = (data: any): ServerDatabase => ({
username: data.username,
connectionString: `${data.host.address}:${data.host.port}`,
allowConnectionsFrom: data.connections_from,
password: data.relationships && data.relationships.password ? data.relationships.password.attributes.password : undefined,
password:
data.relationships && data.relationships.password ? data.relationships.password.attributes.password : undefined,
});
export default (uuid: string, includePassword = true): Promise<ServerDatabase[]> => {
@ -23,9 +24,9 @@ export default (uuid: string, includePassword = true): Promise<ServerDatabase[]>
http.get(`/api/client/servers/${uuid}/databases`, {
params: includePassword ? { include: 'password' } : undefined,
})
.then(response => resolve(
(response.data.data || []).map((item: any) => rawDataToServerDatabase(item.attributes))
))
.then((response) =>
resolve((response.data.data || []).map((item: any) => rawDataToServerDatabase(item.attributes)))
)
.catch(reject);
});
};

13
resources/scripts/api/server/files/compressFiles.ts
View File

@ -3,10 +3,15 @@ import http from '@/api/http';
import { rawDataToFileObject } from '@/api/transformers';
export default async (uuid: string, directory: string, files: string[]): Promise<FileObject> => {
const { data } = await http.post(`/api/client/servers/${uuid}/files/compress`, { root: directory, files }, {
timeout: 60000,
timeoutErrorMessage: 'It looks like this archive is taking a long time to generate. It will appear once completed.',
});
const { data } = await http.post(
`/api/client/servers/${uuid}/files/compress`,
{ root: directory, files },
{
timeout: 60000,
timeoutErrorMessage:
'It looks like this archive is taking a long time to generate. It will appear once completed.',
}
);
return rawDataToFileObject(data);
};

13
resources/scripts/api/server/files/decompressFiles.ts
View File

@ -1,8 +1,13 @@
import http from '@/api/http';
export default async (uuid: string, directory: string, file: string): Promise<void> => {
await http.post(`/api/client/servers/${uuid}/files/decompress`, { root: directory, file }, {
timeout: 300000,
timeoutErrorMessage: 'It looks like this archive is taking a long time to be unarchived. Once completed the unarchived files will appear.',
});
await http.post(
`/api/client/servers/${uuid}/files/decompress`,
{ root: directory, file },
{
timeout: 300000,
timeoutErrorMessage:
'It looks like this archive is taking a long time to be unarchived. Once completed the unarchived files will appear.',
}
);
};

2
resources/scripts/api/server/files/getFileContents.ts
View File

@ -4,7 +4,7 @@ export default (server: string, file: string): Promise<string> => {
return new Promise((resolve, reject) => {
http.get(`/api/client/servers/${server}/files/contents`, {
params: { file },
transformResponse: res => res,
transformResponse: (res) => res,
responseType: 'text',
})
.then(({ data }) => resolve(data))

2
resources/scripts/api/server/files/loadDirectory.ts
View File

@ -5,7 +5,7 @@ export interface FileObject {
key: string;
name: string;
mode: string;
modeBits: string,
modeBits: string;
size: number;
isFile: boolean;
isSymlink: boolean;

24
resources/scripts/api/server/getServer.ts
View File

@ -58,24 +58,30 @@ export const rawDataToServerObject = ({ attributes: data }: FractalResponseData)
ip: data.sftp_details.ip,
port: data.sftp_details.port,
},
description: data.description ? ((data.description.length > 0) ? data.description : null) : null,
description: data.description ? (data.description.length > 0 ? data.description : null) : null,
limits: { ...data.limits },
eggFeatures: data.egg_features || [],
featureLimits: { ...data.feature_limits },
isInstalling: data.status === 'installing' || data.status === 'install_failed',
isTransferring: data.is_transferring,
variables: ((data.relationships?.variables as FractalResponseList | undefined)?.data || []).map(rawDataToServerEggVariable),
allocations: ((data.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(rawDataToServerAllocation),
variables: ((data.relationships?.variables as FractalResponseList | undefined)?.data || []).map(
rawDataToServerEggVariable
),
allocations: ((data.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(
rawDataToServerAllocation
),
});
export default (uuid: string): Promise<[ Server, string[] ]> => {
export default (uuid: string): Promise<[Server, string[]]> => {
return new Promise((resolve, reject) => {
http.get(`/api/client/servers/${uuid}`)
.then(({ data }) => resolve([
rawDataToServerObject(data),
// eslint-disable-next-line camelcase
data.meta?.is_server_owner ? [ '*' ] : (data.meta?.user_permissions || []),
]))
.then(({ data }) =>
resolve([
rawDataToServerObject(data),
// eslint-disable-next-line camelcase
data.meta?.is_server_owner ? ['*'] : data.meta?.user_permissions || [],
])
)
.catch(reject);
});
};

22
resources/scripts/api/server/getServerResourceUsage.ts
View File

@ -16,16 +16,18 @@ export interface ServerStats {
export default (server: string): Promise<ServerStats> => {
return new Promise((resolve, reject) => {
http.get(`/api/client/servers/${server}/resources`)
.then(({ data: { attributes } }) => resolve({
status: attributes.current_state,
isSuspended: attributes.is_suspended,
memoryUsageInBytes: attributes.resources.memory_bytes,
cpuUsagePercent: attributes.resources.cpu_absolute,
diskUsageInBytes: attributes.resources.disk_bytes,
networkRxInBytes: attributes.resources.network_rx_bytes,
networkTxInBytes: attributes.resources.network_tx_bytes,
uptime: attributes.resources.uptime,
}))
.then(({ data: { attributes } }) =>
resolve({
status: attributes.current_state,
isSuspended: attributes.is_suspended,
memoryUsageInBytes: attributes.resources.memory_bytes,
cpuUsagePercent: attributes.resources.cpu_absolute,
diskUsageInBytes: attributes.resources.disk_bytes,
networkRxInBytes: attributes.resources.network_rx_bytes,
networkTxInBytes: attributes.resources.network_tx_bytes,
uptime: attributes.resources.uptime,
})
)
.catch(reject);
});
};

10
resources/scripts/api/server/getWebsocketToken.ts
View File

@ -8,10 +8,12 @@ interface Response {
export default (server: string): Promise<Response> => {
return new Promise((resolve, reject) => {
http.get(`/api/client/servers/${server}/websocket`)
.then(({ data }) => resolve({
token: data.data.token,
socket: data.data.socket,
}))
.then(({ data }) =>
resolve({
token: data.data.token,
socket: data.data.socket,
})
)
.catch(reject);
});
};

3
resources/scripts/api/server/network/deleteServerAllocation.ts
View File

@ -1,4 +1,5 @@
import { Allocation } from '@/api/server/getServer';
import http from '@/api/http';
export default async (uuid: string, id: number): Promise<Allocation> => await http.delete(`/api/client/servers/${uuid}/network/allocations/${id}`);
export default async (uuid: string, id: number): Promise<Allocation> =>
await http.delete(`/api/client/servers/${uuid}/network/allocations/${id}`);

2
resources/scripts/api/server/schedules/createOrUpdateSchedule.ts
View File

@ -1,7 +1,7 @@
import { rawDataToServerSchedule, Schedule } from '@/api/server/schedules/getServerSchedules';
import http from '@/api/http';
type Data = Pick<Schedule, 'cron' | 'name' | 'onlyWhenOnline' | 'isActive'> & { id?: number }
type Data = Pick<Schedule, 'cron' | 'name' | 'onlyWhenOnline' | 'isActive'> & { id?: number };
export default async (uuid: string, schedule: Data): Promise<Schedule> => {
const { data } = await http.post(`/api/client/servers/${uuid}/schedules${schedule.id ? `/${schedule.id}` : ''}`, {

15
resources/scripts/api/server/schedules/createOrUpdateScheduleTask.ts
View File

@ -9,12 +9,15 @@ interface Data {
}
export default async (uuid: string, schedule: number, task: number | undefined, data: Data): Promise<Task> => {
const { data: response } = await http.post(`/api/client/servers/${uuid}/schedules/${schedule}/tasks${task ? `/${task}` : ''}`, {
action: data.action,
payload: data.payload,
continue_on_failure: data.continueOnFailure,
time_offset: data.timeOffset,
});
const { data: response } = await http.post(
`/api/client/servers/${uuid}/schedules/${schedule}/tasks${task ? `/${task}` : ''}`,
{
action: data.action,
payload: data.payload,
continue_on_failure: data.continueOnFailure,
time_offset: data.timeOffset,
}
);
return rawDataToServerTask(response.attributes);
};

2
resources/scripts/api/server/schedules/getServerSchedule.ts
View File

@ -5,7 +5,7 @@ export default (uuid: string, schedule: number): Promise<Schedule> => {
return new Promise((resolve, reject) => {
http.get(`/api/client/servers/${uuid}/schedules/${schedule}`, {
params: {
include: [ 'tasks' ],
include: ['tasks'],
},
})
.then(({ data }) => resolve(rawDataToServerSchedule(data.attributes)))

2
resources/scripts/api/server/schedules/getServerSchedules.ts
View File

@ -69,7 +69,7 @@ export const rawDataToServerSchedule = (data: any): Schedule => ({
export default async (uuid: string): Promise<Schedule[]> => {
const { data } = await http.get(`/api/client/servers/${uuid}/schedules`, {
params: {
include: [ 'tasks' ],
include: ['tasks'],
},
});

4
resources/scripts/api/server/updateStartupVariable.ts
View File

@ -2,8 +2,8 @@ import http from '@/api/http';
import { ServerEggVariable } from '@/api/server/types';
import { rawDataToServerEggVariable } from '@/api/transformers';
export default async (uuid: string, key: string, value: string): Promise<[ ServerEggVariable, string ]> => {
export default async (uuid: string, key: string, value: string): Promise<[ServerEggVariable, string]> => {
const { data } = await http.put(`/api/client/servers/${uuid}/startup/variable`, { key, value });
return [ rawDataToServerEggVariable(data), data.meta.startup_command ];
return [rawDataToServerEggVariable(data), data.meta.startup_command];
};

2
resources/scripts/api/server/users/createOrUpdateSubuser.ts
View File

@ -12,7 +12,7 @@ export default (uuid: string, params: Params, subuser?: Subuser): Promise<Subuse
http.post(`/api/client/servers/${uuid}/users${subuser ? `/${subuser.uuid}` : ''}`, {
...params,
})
.then(data => resolve(rawDataToServerSubuser(data.data)))
.then((data) => resolve(rawDataToServerSubuser(data.data)))
.catch(reject);
});
};

2
resources/scripts/api/server/users/getServerSubusers.ts
View File

@ -9,7 +9,7 @@ export const rawDataToServerSubuser = (data: FractalResponseData): Subuser => ({
twoFactorEnabled: data.attributes['2fa_enabled'],
createdAt: new Date(data.attributes.created_at),
permissions: data.attributes.permissions || [],
can: permission => (data.attributes.permissions || []).indexOf(permission) >= 0,
can: (permission) => (data.attributes.permissions || []).indexOf(permission) >= 0,
});
export default (uuid: string): Promise<Subuser[]> => {

14
resources/scripts/api/swr/getServerAllocations.ts
View File

@ -5,11 +5,15 @@ import { rawDataToServerAllocation } from '@/api/transformers';
import { Allocation } from '@/api/server/getServer';
export default () => {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
return useSWR<Allocation[]>([ 'server:allocations', uuid ], async () => {
const { data } = await http.get(`/api/client/servers/${uuid}/network/allocations`);
return useSWR<Allocation[]>(
['server:allocations', uuid],
async () => {
const { data } = await http.get(`/api/client/servers/${uuid}/network/allocations`);
return (data.data || []).map(rawDataToServerAllocation);
}, { revalidateOnFocus: false, revalidateOnMount: false });
return (data.data || []).map(rawDataToServerAllocation);
},
{ revalidateOnFocus: false, revalidateOnMount: false }
);
};

8
resources/scripts/api/swr/getServerBackups.ts
View File

@ -16,15 +16,15 @@ type BackupResponse = PaginatedResult<ServerBackup> & { backupCount: number };
export default () => {
const { page } = useContext(Context);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
return useSWR<BackupResponse>([ 'server:backups', uuid, page ], async () => {
return useSWR<BackupResponse>(['server:backups', uuid, page], async () => {
const { data } = await http.get(`/api/client/servers/${uuid}/backups`, { params: { page } });
return ({
return {
items: (data.data || []).map(rawDataToServerBackup),
pagination: getPaginationSet(data.meta.pagination),
backupCount: data.meta.backup_count,
});
};
});
};

23
resources/scripts/api/swr/getServerStartup.ts
View File

@ -9,14 +9,19 @@ interface Response {
dockerImages: Record<string, string>;
}
export default (uuid: string, initialData?: Response | null, config?: ConfigInterface<Response>) => useSWR([ uuid, '/startup' ], async (): Promise<Response> => {
const { data } = await http.get(`/api/client/servers/${uuid}/startup`);
export default (uuid: string, initialData?: Response | null, config?: ConfigInterface<Response>) =>
useSWR(
[uuid, '/startup'],
async (): Promise<Response> => {
const { data } = await http.get(`/api/client/servers/${uuid}/startup`);
const variables = ((data as FractalResponseList).data || []).map(rawDataToServerEggVariable);
const variables = ((data as FractalResponseList).data || []).map(rawDataToServerEggVariable);
return {
variables,
invocation: data.meta.startup_command,
dockerImages: data.meta.docker_images || {},
};
}, { initialData: initialData || undefined, errorRetryCount: 3, ...(config || {}) });
return {
variables,
invocation: data.meta.startup_command,
dockerImages: data.meta.docker_images || {},
};
},
{ initialData: initialData || undefined, errorRetryCount: 3, ...(config || {}) }
);

40
resources/scripts/api/transformers.ts
View File

@ -25,33 +25,31 @@ export const rawDataToFileObject = (data: FractalResponseData): FileObject => ({
modifiedAt: new Date(data.attributes.modified_at),
isArchiveType: function () {
return this.isFile && [
'application/vnd.rar', // .rar
'application/x-rar-compressed', // .rar (2)
'application/x-tar', // .tar
'application/x-br', // .tar.br
'application/x-bzip2', // .tar.bz2, .bz2
'application/gzip', // .tar.gz, .gz
'application/x-gzip',
'application/x-lzip', // .tar.lz4, .lz4 (not sure if this mime type is correct)
'application/x-sz', // .tar.sz, .sz (not sure if this mime type is correct)
'application/x-xz', // .tar.xz, .xz
'application/zstd', // .tar.zst, .zst
'application/zip', // .zip
].indexOf(this.mimetype) >= 0;
return (
this.isFile &&
[
'application/vnd.rar', // .rar
'application/x-rar-compressed', // .rar (2)
'application/x-tar', // .tar
'application/x-br', // .tar.br
'application/x-bzip2', // .tar.bz2, .bz2
'application/gzip', // .tar.gz, .gz
'application/x-gzip',
'application/x-lzip', // .tar.lz4, .lz4 (not sure if this mime type is correct)
'application/x-sz', // .tar.sz, .sz (not sure if this mime type is correct)
'application/x-xz', // .tar.xz, .xz
'application/zstd', // .tar.zst, .zst
'application/zip', // .zip
].indexOf(this.mimetype) >= 0
);
},
isEditable: function () {
if (this.isArchiveType() || !this.isFile) return false;
const matches = [
'application/jar',
'application/octet-stream',
'inode/directory',
/^image\//,
];
const matches = ['application/jar', 'application/octet-stream', 'inode/directory', /^image\//];
return matches.every(m => !this.mimetype.match(m));
return matches.every((m) => !this.mimetype.match(m));
},
});

20
resources/scripts/components/App.tsx
View File

@ -15,9 +15,9 @@ import { ServerContext } from '@/state/server';
import '@/assets/tailwind.css';
import Spinner from '@/components/elements/Spinner';
const DashboardRouter = lazy(() => import(/* webpackChunkName: "dashboard" */'@/routers/DashboardRouter'));
const ServerRouter = lazy(() => import(/* webpackChunkName: "server" */'@/routers/ServerRouter'));
const AuthenticationRouter = lazy(() => import(/* webpackChunkName: "auth" */'@/routers/AuthenticationRouter'));
const DashboardRouter = lazy(() => import(/* webpackChunkName: "dashboard" */ '@/routers/DashboardRouter'));
const ServerRouter = lazy(() => import(/* webpackChunkName: "server" */ '@/routers/ServerRouter'));
const AuthenticationRouter = lazy(() => import(/* webpackChunkName: "auth" */ '@/routers/AuthenticationRouter'));
interface ExtendedWindow extends Window {
SiteConfiguration?: SiteSettings;
@ -38,7 +38,7 @@ interface ExtendedWindow extends Window {
setupInterceptors(history);
const App = () => {
const { PterodactylUser, SiteConfiguration } = (window as ExtendedWindow);
const { PterodactylUser, SiteConfiguration } = window as ExtendedWindow;
if (PterodactylUser && !store.getState().user.data) {
store.getActions().user.setUserData({
uuid: PterodactylUser.uuid,
@ -58,31 +58,31 @@ const App = () => {
return (
<>
<GlobalStylesheet/>
<GlobalStylesheet />
<StoreProvider store={store}>
<ProgressBar/>
<ProgressBar />
<div css={tw`mx-auto w-auto`}>
<Router history={history}>
<Switch>
<Route path={'/auth'}>
<Spinner.Suspense>
<AuthenticationRouter/>
<AuthenticationRouter />
</Spinner.Suspense>
</Route>
<AuthenticatedRoute path={'/server/:id'}>
<Spinner.Suspense>
<ServerContext.Provider>
<ServerRouter/>
<ServerRouter />
</ServerContext.Provider>
</Spinner.Suspense>
</AuthenticatedRoute>
<AuthenticatedRoute path={'/'}>
<Spinner.Suspense>
<DashboardRouter/>
<DashboardRouter />
</Spinner.Suspense>
</AuthenticatedRoute>
<Route path={'*'}>
<NotFound/>
<NotFound />
</Route>
</Switch>
</Router>

10
resources/scripts/components/Avatar.tsx
View File

@ -2,20 +2,18 @@ import React from 'react';
import BoringAvatar, { AvatarProps } from 'boring-avatars';
import { useStoreState } from '@/state/hooks';
const palette = [ '#FFAD08', '#EDD75A', '#73B06F', '#0C8F8F', '#587291' ];
const palette = ['#FFAD08', '#EDD75A', '#73B06F', '#0C8F8F', '#587291'];
type Props = Omit<AvatarProps, 'colors'>;
const _Avatar = ({ variant = 'beam', ...props }: AvatarProps) => (
<BoringAvatar colors={palette} variant={variant} {...props}/>
<BoringAvatar colors={palette} variant={variant} {...props} />
);
const _UserAvatar = ({ variant = 'beam', ...props }: Omit<Props, 'name'>) => {
const uuid = useStoreState(state => state.user.data?.uuid);
const uuid = useStoreState((state) => state.user.data?.uuid);
return (
<BoringAvatar colors={palette} name={uuid || 'system'} variant={variant} {...props} />
);
return <BoringAvatar colors={palette} name={uuid || 'system'} variant={variant} {...props} />;
};
_Avatar.displayName = 'Avatar';

35
resources/scripts/components/FlashMessageRender.tsx
View File

@ -9,27 +9,22 @@ type Props = Readonly<{
}>;
const FlashMessageRender = ({ byKey, className }: Props) => {
const flashes = useStoreState(state => state.flashes.items.filter(
flash => byKey ? flash.key === byKey : true,
));
return (
flashes.length ?
<div className={className}>
{
flashes.map((flash, index) => (
<React.Fragment key={flash.id || flash.type + flash.message}>
{index > 0 && <div css={tw`mt-2`}></div>}
<MessageBox type={flash.type} title={flash.title}>
{flash.message}
</MessageBox>
</React.Fragment>
))
}
</div>
:
null
const flashes = useStoreState((state) =>
state.flashes.items.filter((flash) => (byKey ? flash.key === byKey : true))
);
return flashes.length ? (
<div className={className}>
{flashes.map((flash, index) => (
<React.Fragment key={flash.id || flash.type + flash.message}>
{index > 0 && <div css={tw`mt-2`}></div>}
<MessageBox type={flash.type} title={flash.title}>
{flash.message}
</MessageBox>
</React.Fragment>
))}
</div>
) : null;
};
export default FlashMessageRender;

28
resources/scripts/components/MessageBox.tsx
View File

@ -42,26 +42,24 @@ const getBackground = (type?: FlashMessageType): TwStyle | string => {
const Container = styled.div<{ $type?: FlashMessageType }>`
${tw`p-2 border items-center leading-normal rounded flex w-full text-sm text-white`};
${props => styling(props.$type)};
${(props) => styling(props.$type)};
`;
Container.displayName = 'MessageBox.Container';
const MessageBox = ({ title, children, type }: Props) => (
<Container css={tw`lg:inline-flex`} $type={type} role={'alert'}>
{title &&
<span
className={'title'}
css={[
tw`flex rounded-full uppercase px-2 py-1 text-xs font-bold mr-3 leading-none`,
getBackground(type),
]}
>
{title}
</span>
}
<span css={tw`mr-2 text-left flex-auto`}>
{children}
</span>
{title && (
<span
className={'title'}
css={[
tw`flex rounded-full uppercase px-2 py-1 text-xs font-bold mr-3 leading-none`,
getBackground(type),
]}
>
{title}
</span>
)}
<span css={tw`mr-2 text-left flex-auto`}>{children}</span>
</Container>
);
MessageBox.displayName = 'MessageBox';

31
resources/scripts/components/NavigationBar.tsx
View File

@ -14,14 +14,19 @@ import Tooltip from '@/components/elements/tooltip/Tooltip';
import Avatar from '@/components/Avatar';
const RightNavigation = styled.div`
& > a, & > button, & > .navigation-link {
& > a,
& > button,
& > .navigation-link {
${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`};
&:active, &:hover {
&:active,
&:hover {
${tw`text-neutral-100 bg-black`};
}
&:active, &:hover, &.active {
&:active,
&:hover,
&.active {
box-shadow: inset 0 -2px ${theme`colors.cyan.600`.toString()};
}
}
@ -30,7 +35,7 @@ const RightNavigation = styled.div`
export default () => {
const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
const rootAdmin = useStoreState((state: ApplicationStore) => state.user.data!.rootAdmin);
const [ isLoggingOut, setIsLoggingOut ] = useState(false);
const [isLoggingOut, setIsLoggingOut] = useState(false);
const onTriggerLogout = () => {
setIsLoggingOut(true);
@ -42,30 +47,32 @@ export default () => {
return (
<div className={'w-full bg-neutral-900 shadow-md overflow-x-auto'}>
<SpinnerOverlay visible={isLoggingOut}/>
<SpinnerOverlay visible={isLoggingOut} />
<div className={'mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]'}>
<div id={'logo'} className={'flex-1'}>
<Link
to={'/'}
className={'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150'}
className={
'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150'
}
>
{name}
</Link>
</div>
<RightNavigation className={'flex h-full items-center justify-center'}>
<SearchContainer/>
<SearchContainer />
<Tooltip placement={'bottom'} content={'Dashboard'}>
<NavLink to={'/'} exact>
<FontAwesomeIcon icon={faLayerGroup}/>
<FontAwesomeIcon icon={faLayerGroup} />
</NavLink>
</Tooltip>
{rootAdmin &&
{rootAdmin && (
<Tooltip placement={'bottom'} content={'Admin'}>
<a href={'/admin'} rel={'noreferrer'}>
<FontAwesomeIcon icon={faCogs}/>
<FontAwesomeIcon icon={faCogs} />
</a>
</Tooltip>
}
)}
<Tooltip placement={'bottom'} content={'Account Settings'}>
<NavLink to={'/account'}>
<span className={'flex items-center w-5 h-5'}>
@ -75,7 +82,7 @@ export default () => {
</Tooltip>
<Tooltip placement={'bottom'} content={'Sign Out'}>
<button onClick={onTriggerLogout}>
<FontAwesomeIcon icon={faSignOutAlt}/>
<FontAwesomeIcon icon={faSignOutAlt} />
</button>
</Tooltip>
</RightNavigation>

59
resources/scripts/components/auth/ForgotPasswordContainer.tsx
View File

@ -19,10 +19,10 @@ interface Values {
export default () => {
const ref = useRef<Reaptcha>(null);
const [ token, setToken ] = useState('');
const [token, setToken] = useState('');
const { clearFlashes, addFlash } = useFlash();
const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha);
const { enabled: recaptchaEnabled, siteKey } = useStoreState((state) => state.settings.data!.recaptcha);
useEffect(() => {
clearFlashes();
@ -34,7 +34,7 @@ export default () => {
// If there is no token in the state yet, request the token and then abort this submit request
// since it will be re-submitted when the recaptcha data is returned by the component.
if (recaptchaEnabled && !token) {
ref.current!.execute().catch(error => {
ref.current!.execute().catch((error) => {
console.error(error);
setSubmitting(false);
@ -45,11 +45,11 @@ export default () => {
}
requestPasswordResetEmail(email, token)
.then(response => {
.then((response) => {
resetForm();
addFlash({ type: 'success', title: 'Success', message: response });
})
.catch(error => {
.catch((error) => {
console.error(error);
addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
})
@ -66,47 +66,42 @@ export default () => {
onSubmit={handleSubmission}
initialValues={{ email: '' }}
validationSchema={object().shape({
email: string().email('A valid email address must be provided to continue.')
email: string()
.email('A valid email address must be provided to continue.')
.required('A valid email address must be provided to continue.'),
})}
>
{({ isSubmitting, setSubmitting, submitForm }) => (
<LoginFormContainer
title={'Request Password Reset'}
css={tw`w-full flex`}
>
<LoginFormContainer title={'Request Password Reset'} css={tw`w-full flex`}>
<Field
light
label={'Email'}
description={'Enter your account email address to receive instructions on resetting your password.'}
description={
'Enter your account email address to receive instructions on resetting your password.'
}
name={'email'}
type={'email'}
/>
<div css={tw`mt-6`}>
<Button
type={'submit'}
size={'xlarge'}
disabled={isSubmitting}
isLoading={isSubmitting}
>
<Button type={'submit'} size={'xlarge'} disabled={isSubmitting} isLoading={isSubmitting}>
Send Email
</Button>
</div>
{recaptchaEnabled &&
<Reaptcha
ref={ref}
size={'invisible'}
sitekey={siteKey || '_invalid_key'}
onVerify={response => {
setToken(response);
submitForm();
}}
onExpire={() => {
setSubmitting(false);
setToken('');
}}
/>
}
{recaptchaEnabled && (
<Reaptcha
ref={ref}
size={'invisible'}
sitekey={siteKey || '_invalid_key'}
onVerify={(response) => {
setToken(response);
submitForm();
}}
onExpire={() => {
setSubmitting(false);
setToken('');
}}
/>
)}
<div css={tw`mt-6 text-center`}>
<Link
to={'/auth/login'}

32
resources/scripts/components/auth/LoginCheckpointContainer.tsx
View File

@ -13,18 +13,18 @@ import Button from '@/components/elements/Button';
interface Values {
code: string;
recoveryCode: '',
recoveryCode: '';
}
type OwnProps = RouteComponentProps<Record<string, string | undefined>, StaticContext, { token?: string }>
type OwnProps = RouteComponentProps<Record<string, string | undefined>, StaticContext, { token?: string }>;
type Props = OwnProps & {
clearAndAddHttpError: ActionCreator<FlashStore['clearAndAddHttpError']['payload']>;
}
};
const LoginCheckpointContainer = () => {
const { isSubmitting, setFieldValue } = useFormikContext<Values>();
const [ isMissingDevice, setIsMissingDevice ] = useState(false);
const [isMissingDevice, setIsMissingDevice] = useState(false);
return (
<LoginFormContainer title={'Device Checkpoint'} css={tw`w-full flex`}>
@ -44,12 +44,7 @@ const LoginCheckpointContainer = () => {
/>
</div>
<div css={tw`mt-6`}>
<Button
size={'xlarge'}
type={'submit'}
disabled={isSubmitting}
isLoading={isSubmitting}
>
<Button size={'xlarge'} type={'submit'} disabled={isSubmitting} isLoading={isSubmitting}>
Continue
</Button>
</div>
@ -58,11 +53,11 @@ const LoginCheckpointContainer = () => {
onClick={() => {
setFieldValue('code', '');
setFieldValue('recoveryCode', '');
setIsMissingDevice(s => !s);
setIsMissingDevice((s) => !s);
}}
css={tw`cursor-pointer text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
>
{!isMissingDevice ? 'I\'ve Lost My Device' : 'I Have My Device'}
{!isMissingDevice ? "I've Lost My Device" : 'I Have My Device'}
</span>
</div>
<div css={tw`mt-6 text-center`}>
@ -80,7 +75,7 @@ const LoginCheckpointContainer = () => {
const EnhancedForm = withFormik<Props, Values>({
handleSubmit: ({ code, recoveryCode }, { setSubmitting, props: { clearAndAddHttpError, location } }) => {
loginCheckpoint(location.state?.token || '', code, recoveryCode)
.then(response => {
.then((response) => {
if (response.complete) {
// @ts-ignore
window.location = response.intended || '/';
@ -89,7 +84,7 @@ const EnhancedForm = withFormik<Props, Values>({
setSubmitting(false);
})
.catch(error => {
.catch((error) => {
console.error(error);
setSubmitting(false);
clearAndAddHttpError({ error });
@ -111,10 +106,7 @@ export default ({ history, location, ...props }: OwnProps) => {
return null;
}
return <EnhancedForm
clearAndAddHttpError={clearAndAddHttpError}
history={history}
location={location}
{...props}
/>;
return (
<EnhancedForm clearAndAddHttpError={clearAndAddHttpError} history={history} location={location} {...props} />
);
};

56
resources/scripts/components/auth/LoginContainer.tsx
View File

@ -18,10 +18,10 @@ interface Values {
const LoginContainer = ({ history }: RouteComponentProps) => {
const ref = useRef<Reaptcha>(null);
const [ token, setToken ] = useState('');
const [token, setToken] = useState('');
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { enabled: recaptchaEnabled, siteKey } = useStoreState(state => state.settings.data!.recaptcha);
const { enabled: recaptchaEnabled, siteKey } = useStoreState((state) => state.settings.data!.recaptcha);
useEffect(() => {
clearFlashes();
@ -33,7 +33,7 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
// If there is no token in the state yet, request the token and then abort this submit request
// since it will be re-submitted when the recaptcha data is returned by the component.
if (recaptchaEnabled && !token) {
ref.current!.execute().catch(error => {
ref.current!.execute().catch((error) => {
console.error(error);
setSubmitting(false);
@ -44,7 +44,7 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
}
login({ ...values, recaptchaData: token })
.then(response => {
.then((response) => {
if (response.complete) {
// @ts-ignore
window.location = response.intended || '/';
@ -53,7 +53,7 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
})
.catch(error => {
.catch((error) => {
console.error(error);
setToken('');
@ -75,42 +75,30 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
>
{({ isSubmitting, setSubmitting, submitForm }) => (
<LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`}>
<Field
light
type={'text'}
label={'Username or Email'}
name={'username'}
disabled={isSubmitting}
/>
<Field light type={'text'} label={'Username or Email'} name={'username'} disabled={isSubmitting} />
<div css={tw`mt-6`}>
<Field
light
type={'password'}
label={'Password'}
name={'password'}
disabled={isSubmitting}
/>
<Field light type={'password'} label={'Password'} name={'password'} disabled={isSubmitting} />
</div>
<div css={tw`mt-6`}>
<Button type={'submit'} size={'xlarge'} isLoading={isSubmitting} disabled={isSubmitting}>
Login
</Button>
</div>
{recaptchaEnabled &&
<Reaptcha
ref={ref}
size={'invisible'}
sitekey={siteKey || '_invalid_key'}
onVerify={response => {
setToken(response);
submitForm();
}}
onExpire={() => {
setSubmitting(false);
setToken('');
}}
/>
}
{recaptchaEnabled && (
<Reaptcha
ref={ref}
size={'invisible'}
sitekey={siteKey || '_invalid_key'}
onVerify={(response) => {
setToken(response);
submitForm();
}}
onExpire={() => {
setSubmitting(false);
setToken('');
}}
/>
)}
<div css={tw`mt-6 text-center`}>
<Link
to={'/auth/password'}

18
resources/scripts/components/auth/LoginFormContainer.tsx
View File

@ -7,7 +7,7 @@ import tw from 'twin.macro';
type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
title?: string;
}
};
const Container = styled.div`
${breakpoint('sm')`
@ -30,24 +30,18 @@ const Container = styled.div`
export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) => (
<Container>
{title &&
<h2 css={tw`text-3xl text-center text-neutral-100 font-medium py-4`}>
{title}
</h2>
}
<FlashMessageRender css={tw`mb-2 px-1`}/>
{title && <h2 css={tw`text-3xl text-center text-neutral-100 font-medium py-4`}>{title}</h2>}
<FlashMessageRender css={tw`mb-2 px-1`} />
<Form {...props} ref={ref}>
<div css={tw`md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1`}>
<div css={tw`flex-none select-none mb-6 md:mb-0 self-center`}>
<img src={'/assets/svgs/pterodactyl.svg'} css={tw`block w-48 md:w-64 mx-auto`}/>
</div>
<div css={tw`flex-1`}>
{props.children}
<img src={'/assets/svgs/pterodactyl.svg'} css={tw`block w-48 md:w-64 mx-auto`} />
</div>
<div css={tw`flex-1`}>{props.children}</div>
</div>
</Form>
<p css={tw`text-center text-neutral-500 text-xs mt-4`}>
&copy; 2015 - {(new Date()).getFullYear()}&nbsp;
&copy; 2015 - {new Date().getFullYear()}&nbsp;
<a
rel={'noopener nofollow noreferrer'}
href={'https://pterodactyl.io'}

30
resources/scripts/components/auth/ResetPasswordContainer.tsx
View File

@ -20,7 +20,7 @@ interface Values {
}
export default ({ match, location }: RouteComponentProps<{ token: string }>) => {
const [ email, setEmail ] = useState('');
const [email, setEmail] = useState('');
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@ -36,7 +36,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
// @ts-ignore
window.location = '/';
})
.catch(error => {
.catch((error) => {
console.error(error);
setSubmitting(false);
@ -52,22 +52,20 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
passwordConfirmation: '',
}}
validationSchema={object().shape({
password: string().required('A new password is required.')
password: string()
.required('A new password is required.')
.min(8, 'Your new password should be at least 8 characters in length.'),
passwordConfirmation: string()
.required('Your new password does not match.')
// @ts-ignore
.oneOf([ ref('password'), null ], 'Your new password does not match.'),
.oneOf([ref('password'), null], 'Your new password does not match.'),
})}
>
{({ isSubmitting }) => (
<LoginFormContainer
title={'Reset Password'}
css={tw`w-full flex`}
>
<LoginFormContainer title={'Reset Password'} css={tw`w-full flex`}>
<div>
<label>Email</label>
<Input value={email} isLight disabled/>
<Input value={email} isLight disabled />
</div>
<div css={tw`mt-6`}>
<Field
@ -79,20 +77,10 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
/>
</div>
<div css={tw`mt-6`}>
<Field
light
label={'Confirm New Password'}
name={'passwordConfirmation'}
type={'password'}
/>
<Field light label={'Confirm New Password'} name={'passwordConfirmation'} type={'password'} />
</div>
<div css={tw`mt-6`}>
<Button
size={'xlarge'}
type={'submit'}
disabled={isSubmitting}
isLoading={isSubmitting}
>
<Button size={'xlarge'} type={'submit'} disabled={isSubmitting} isLoading={isSubmitting}>
Reset Password
</Button>
</div>

86
resources/scripts/components/dashboard/AccountApiContainer.tsx
View File

@ -16,16 +16,16 @@ import { useFlashKey } from '@/plugins/useFlash';
import Code from '@/components/elements/Code';
export default () => {
const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
const [ keys, setKeys ] = useState<ApiKey[]>([]);
const [ loading, setLoading ] = useState(true);
const [deleteIdentifier, setDeleteIdentifier] = useState('');
const [keys, setKeys] = useState<ApiKey[]>([]);
const [loading, setLoading] = useState(true);
const { clearAndAddHttpError } = useFlashKey('account');
useEffect(() => {
getApiKeys()
.then(keys => setKeys(keys))
.then((keys) => setKeys(keys))
.then(() => setLoading(false))
.catch(error => clearAndAddHttpError(error));
.catch((error) => clearAndAddHttpError(error));
}, []);
const doDeletion = (identifier: string) => {
@ -33,10 +33,8 @@ export default () => {
clearAndAddHttpError();
deleteApiKey(identifier)
.then(() => setKeys(s => ([
...(s || []).filter(key => key.identifier !== identifier),
])))
.catch(error => clearAndAddHttpError(error))
.then(() => setKeys((s) => [...(s || []).filter((key) => key.identifier !== identifier)]))
.catch((error) => clearAndAddHttpError(error))
.then(() => {
setLoading(false);
setDeleteIdentifier('');
@ -45,13 +43,13 @@ export default () => {
return (
<PageContentBlock title={'Account API'}>
<FlashMessageRender byKey={'account'}/>
<FlashMessageRender byKey={'account'} />
<div css={tw`md:flex flex-nowrap my-10`}>
<ContentBox title={'Create API Key'} css={tw`flex-none w-full md:w-1/2`}>
<CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
<CreateApiKeyForm onKeyCreated={(key) => setKeys((s) => [...s!, key])} />
</ContentBox>
<ContentBox title={'API Keys'} css={tw`flex-1 overflow-hidden mt-8 md:mt-0 md:ml-8`}>
<SpinnerOverlay visible={loading}/>
<SpinnerOverlay visible={loading} />
<Dialog.Confirm
title={'Delete API Key'}
confirm={'Delete Key'}
@ -61,42 +59,36 @@ export default () => {
>
All requests using the <Code>{deleteIdentifier}</Code> key will be invalidated.
</Dialog.Confirm>
{
keys.length === 0 ?
<p css={tw`text-center text-sm`}>
{loading ? 'Loading...' : 'No API keys exist for this account.'}
</p>
:
keys.map((key, index) => (
<GreyRowBox
key={key.identifier}
css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
>
<FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
<div css={tw`ml-4 flex-1 overflow-hidden`}>
<p css={tw`text-sm break-words`}>{key.description}</p>
<p css={tw`text-2xs text-neutral-300 uppercase`}>
Last used:&nbsp;
{key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}
</p>
</div>
<p css={tw`text-sm ml-4 hidden md:block`}>
<code css={tw`font-mono py-1 px-2 bg-neutral-900 rounded`}>
{key.identifier}
</code>
{keys.length === 0 ? (
<p css={tw`text-center text-sm`}>
{loading ? 'Loading...' : 'No API keys exist for this account.'}
</p>
) : (
keys.map((key, index) => (
<GreyRowBox
key={key.identifier}
css={[tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2`]}
>
<FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`} />
<div css={tw`ml-4 flex-1 overflow-hidden`}>
<p css={tw`text-sm break-words`}>{key.description}</p>
<p css={tw`text-2xs text-neutral-300 uppercase`}>
Last used:&nbsp;
{key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}
</p>
<button
css={tw`ml-4 p-2 text-sm`}
onClick={() => setDeleteIdentifier(key.identifier)}
>
<FontAwesomeIcon
icon={faTrashAlt}
css={tw`text-neutral-400 hover:text-red-400 transition-colors duration-150`}
/>
</button>
</GreyRowBox>
))
}
</div>
<p css={tw`text-sm ml-4 hidden md:block`}>
<code css={tw`font-mono py-1 px-2 bg-neutral-900 rounded`}>{key.identifier}</code>
</p>
<button css={tw`ml-4 p-2 text-sm`} onClick={() => setDeleteIdentifier(key.identifier)}>
<FontAwesomeIcon
icon={faTrashAlt}
css={tw`text-neutral-400 hover:text-red-400 transition-colors duration-150`}
/>
</button>
</GreyRowBox>
))
)}
</ContentBox>
</div>
</PageContentBlock>

37
resources/scripts/components/dashboard/AccountOverviewContainer.tsx
View File

@ -11,19 +11,19 @@ import MessageBox from '@/components/MessageBox';
import { useLocation } from 'react-router-dom';
const Container = styled.div`
${tw`flex flex-wrap`};
${tw`flex flex-wrap`};
& > div {
${tw`w-full`};
& > div {
${tw`w-full`};
${breakpoint('sm')`
${breakpoint('sm')`
width: calc(50% - 1rem);
`}
${breakpoint('md')`
${breakpoint('md')`
${tw`w-auto flex-1`};
`}
}
}
`;
export default () => {
@ -31,28 +31,23 @@ export default () => {
return (
<PageContentBlock title={'Account Overview'}>
{state?.twoFactorRedirect &&
<MessageBox title={'2-Factor Required'} type={'error'}>
Your account must have two-factor authentication enabled in order to continue.
</MessageBox>
}
{state?.twoFactorRedirect && (
<MessageBox title={'2-Factor Required'} type={'error'}>
Your account must have two-factor authentication enabled in order to continue.
</MessageBox>
)}
<Container css={[ tw`lg:grid lg:grid-cols-3 mb-10`, state?.twoFactorRedirect ? tw`mt-4` : tw`mt-10` ]}>
<Container css={[tw`lg:grid lg:grid-cols-3 mb-10`, state?.twoFactorRedirect ? tw`mt-4` : tw`mt-10`]}>
<ContentBox title={'Update Password'} showFlashes={'account:password'}>
<UpdatePasswordForm/>
<UpdatePasswordForm />
</ContentBox>
<ContentBox
css={tw`mt-8 sm:mt-0 sm:ml-8`}
title={'Update Email Address'}
showFlashes={'account:email'}
>
<UpdateEmailAddressForm/>
<ContentBox css={tw`mt-8 sm:mt-0 sm:ml-8`} title={'Update Email Address'} showFlashes={'account:email'}>
<UpdateEmailAddressForm />
</ContentBox>
<ContentBox css={tw`md:ml-8 mt-8 md:mt-0`} title={'Configure Two Factor'}>
<ConfigureTwoFactorForm/>
<ConfigureTwoFactorForm />
</ContentBox>
</Container>
</PageContentBlock>
);
};

4
resources/scripts/components/dashboard/ApiKeyModal.tsx
View File

@ -20,7 +20,9 @@ const ApiKeyModal = ({ apiKey }: Props) => {
shown again.
</p>
<pre css={tw`text-sm bg-neutral-900 rounded py-2 px-4 font-mono`}>
<CopyOnClick text={apiKey}><code css={tw`font-mono`}>{apiKey}</code></CopyOnClick>
<CopyOnClick text={apiKey}>
<code css={tw`font-mono`}>{apiKey}</code>
</CopyOnClick>
</pre>
<div css={tw`flex justify-end mt-6`}>
<Button type={'button'} onClick={() => dismiss()}>

73
resources/scripts/components/dashboard/DashboardContainer.tsx
View File

@ -18,15 +18,15 @@ export default () => {
const { search } = useLocation();
const defaultPage = Number(new URLSearchParams(search).get('page') || '1');
const [ page, setPage ] = useState((!isNaN(defaultPage) && defaultPage > 0) ? defaultPage : 1);
const [page, setPage] = useState(!isNaN(defaultPage) && defaultPage > 0 ? defaultPage : 1);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const uuid = useStoreState(state => state.user.data!.uuid);
const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
const [ showOnlyAdmin, setShowOnlyAdmin ] = usePersistedState(`${uuid}:show_all_servers`, false);
const uuid = useStoreState((state) => state.user.data!.uuid);
const rootAdmin = useStoreState((state) => state.user.data!.rootAdmin);
const [showOnlyAdmin, setShowOnlyAdmin] = usePersistedState(`${uuid}:show_all_servers`, false);
const { data: servers, error } = useSWR<PaginatedResult<Server>>(
[ '/api/client/servers', (showOnlyAdmin && rootAdmin), page ],
() => getServers({ page, type: (showOnlyAdmin && rootAdmin) ? 'admin' : undefined }),
['/api/client/servers', showOnlyAdmin && rootAdmin, page],
() => getServers({ page, type: showOnlyAdmin && rootAdmin ? 'admin' : undefined })
);
useEffect(() => {
@ -34,58 +34,53 @@ export default () => {
if (servers.pagination.currentPage > 1 && !servers.items.length) {
setPage(1);
}
}, [ servers?.pagination.currentPage ]);
}, [servers?.pagination.currentPage]);
useEffect(() => {
// Don't use react-router to handle changing this part of the URL, otherwise it
// triggers a needless re-render. We just want to track this in the URL incase the
// user refreshes the page.
window.history.replaceState(null, document.title, `/${page <= 1 ? '' : `?page=${page}`}`);
}, [ page ]);
}, [page]);
useEffect(() => {
if (error) clearAndAddHttpError({ key: 'dashboard', error });
if (!error) clearFlashes('dashboard');
}, [ error ]);
}, [error]);
return (
<PageContentBlock title={'Dashboard'} showFlashKey={'dashboard'}>
{rootAdmin &&
<div css={tw`mb-2 flex justify-end items-center`}>
<p css={tw`uppercase text-xs text-neutral-400 mr-2`}>
{showOnlyAdmin ? 'Showing others\' servers' : 'Showing your servers'}
</p>
<Switch
name={'show_all_servers'}
defaultChecked={showOnlyAdmin}
onChange={() => setShowOnlyAdmin(s => !s)}
/>
</div>
}
{!servers ?
<Spinner centered size={'large'}/>
:
{rootAdmin && (
<div css={tw`mb-2 flex justify-end items-center`}>
<p css={tw`uppercase text-xs text-neutral-400 mr-2`}>
{showOnlyAdmin ? "Showing others' servers" : 'Showing your servers'}
</p>
<Switch
name={'show_all_servers'}
defaultChecked={showOnlyAdmin}
onChange={() => setShowOnlyAdmin((s) => !s)}
/>
</div>
)}
{!servers ? (
<Spinner centered size={'large'} />
) : (
<Pagination data={servers} onPageSelect={setPage}>
{({ items }) => (
items.length > 0 ?
{({ items }) =>
items.length > 0 ? (
items.map((server, index) => (
<ServerRow
key={server.uuid}
server={server}
css={index > 0 ? tw`mt-2` : undefined}
/>
<ServerRow key={server.uuid} server={server} css={index > 0 ? tw`mt-2` : undefined} />
))
:
) : (
<p css={tw`text-center text-sm text-neutral-400`}>
{showOnlyAdmin ?
'There are no other servers to display.'
:
'There are no servers associated with your account.'
}
{showOnlyAdmin
? 'There are no other servers to display.'
: 'There are no servers associated with your account.'}
</p>
)}
)
}
</Pagination>
}
)}
</PageContentBlock>
);
};

104
resources/scripts/components/dashboard/ServerRow.tsx
View File

@ -13,15 +13,18 @@ import isEqual from 'react-fast-compare';
// Determines if the current value is in an alarm threshold so we can show it in red rather
// than the more faded default style.
const isAlarmState = (current: number, limit: number): boolean => limit > 0 && (current / (limit * 1024 * 1024) >= 0.90);
const isAlarmState = (current: number, limit: number): boolean => limit > 0 && current / (limit * 1024 * 1024) >= 0.9;
const Icon = memo(styled(FontAwesomeIcon)<{ $alarm: boolean }>`
${props => props.$alarm ? tw`text-red-400` : tw`text-neutral-500`};
`, isEqual);
const Icon = memo(
styled(FontAwesomeIcon)<{ $alarm: boolean }>`
${(props) => (props.$alarm ? tw`text-red-400` : tw`text-neutral-500`)};
`,
isEqual
);
const IconDescription = styled.p<{ $alarm: boolean }>`
${tw`text-sm ml-2`};
${props => props.$alarm ? tw`text-white` : tw`text-neutral-400`};
${(props) => (props.$alarm ? tw`text-white` : tw`text-neutral-400`)};
`;
const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | undefined }>`
@ -31,7 +34,12 @@ const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | unde
${tw`w-2 bg-red-500 absolute right-0 z-20 rounded-full m-1 opacity-50 transition-all duration-150`};
height: calc(100% - 0.5rem);
${({ $status }) => (!$status || $status === 'offline') ? tw`bg-red-500` : ($status === 'running' ? tw`bg-green-500` : tw`bg-yellow-500`)};
${({ $status }) =>
!$status || $status === 'offline'
? tw`bg-red-500`
: $status === 'running'
? tw`bg-green-500`
: tw`bg-yellow-500`};
}
&:hover .status-bar {
@ -41,16 +49,17 @@ const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | unde
export default ({ server, className }: { server: Server; className?: string }) => {
const interval = useRef<number>(null);
const [ isSuspended, setIsSuspended ] = useState(server.status === 'suspended');
const [ stats, setStats ] = useState<ServerStats | null>(null);
const [isSuspended, setIsSuspended] = useState(server.status === 'suspended');
const [stats, setStats] = useState<ServerStats | null>(null);
const getStats = () => getServerResourceUsage(server.uuid)
.then(data => setStats(data))
.catch(error => console.error(error));
const getStats = () =>
getServerResourceUsage(server.uuid)
.then((data) => setStats(data))
.catch((error) => console.error(error));
useEffect(() => {
setIsSuspended(stats?.isSuspended || server.status === 'suspended');
}, [ stats?.isSuspended, server.status ]);
}, [stats?.isSuspended, server.status]);
useEffect(() => {
// Don't waste a HTTP request if there is nothing important to show to the user because
@ -65,11 +74,11 @@ export default ({ server, className }: { server: Server; className?: string }) =
return () => {
interval.current && clearInterval(interval.current);
};
}, [ isSuspended ]);
}, [isSuspended]);
const alarms = { cpu: false, memory: false, disk: false };
if (stats) {
alarms.cpu = server.limits.cpu === 0 ? false : (stats.cpuUsagePercent >= (server.limits.cpu * 0.9));
alarms.cpu = server.limits.cpu === 0 ? false : stats.cpuUsagePercent >= server.limits.cpu * 0.9;
alarms.memory = isAlarmState(stats.memoryUsageInBytes, server.limits.memory);
alarms.disk = server.limits.disk === 0 ? false : isAlarmState(stats.diskUsageInBytes, server.limits.disk);
}
@ -82,60 +91,57 @@ export default ({ server, className }: { server: Server; className?: string }) =
<StatusIndicatorBox as={Link} to={`/server/${server.id}`} className={className} $status={stats?.status}>
<div css={tw`flex items-center col-span-12 sm:col-span-5 lg:col-span-6`}>
<div className={'icon'} css={tw`mr-4`}>
<FontAwesomeIcon icon={faServer}/>
<FontAwesomeIcon icon={faServer} />
</div>
<div>
<p css={tw`text-lg break-words`}>{server.name}</p>
{!!server.description &&
<p css={tw`text-sm text-neutral-300 break-words line-clamp-2`}>{server.description}</p>
}
{!!server.description && (
<p css={tw`text-sm text-neutral-300 break-words line-clamp-2`}>{server.description}</p>
)}
</div>
</div>
<div css={tw`flex-1 ml-4 lg:block lg:col-span-2 hidden`}>
<div css={tw`flex justify-center`}>
<FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
<FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`} />
<p css={tw`text-sm text-neutral-400 ml-2`}>
{
server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
{server.allocations
.filter((alloc) => alloc.isDefault)
.map((allocation) => (
<React.Fragment key={allocation.ip + allocation.port.toString()}>
{allocation.alias || ip(allocation.ip)}:{allocation.port}
</React.Fragment>
))
}
))}
</p>
</div>
</div>
<div css={tw`hidden col-span-7 lg:col-span-4 sm:flex items-baseline justify-center`}>
{(!stats || isSuspended) ?
isSuspended ?
{!stats || isSuspended ? (
isSuspended ? (
<div css={tw`flex-1 text-center`}>
<span css={tw`bg-red-500 rounded px-2 py-1 text-red-100 text-xs`}>
{server.status === 'suspended' ? 'Suspended' : 'Connection Error'}
</span>
</div>
:
(server.isTransferring || server.status) ?
<div css={tw`flex-1 text-center`}>
<span css={tw`bg-neutral-500 rounded px-2 py-1 text-neutral-100 text-xs`}>
{server.isTransferring ?
'Transferring'
:
server.status === 'installing' ? 'Installing' : (
server.status === 'restoring_backup' ?
'Restoring Backup'
:
'Unavailable'
)
}
</span>
</div>
:
<Spinner size={'small'}/>
:
) : server.isTransferring || server.status ? (
<div css={tw`flex-1 text-center`}>
<span css={tw`bg-neutral-500 rounded px-2 py-1 text-neutral-100 text-xs`}>
{server.isTransferring
? 'Transferring'
: server.status === 'installing'
? 'Installing'
: server.status === 'restoring_backup'
? 'Restoring Backup'
: 'Unavailable'}
</span>
</div>
) : (
<Spinner size={'small'} />
)
) : (
<React.Fragment>
<div css={tw`flex-1 ml-4 sm:block hidden`}>
<div css={tw`flex justify-center`}>
<Icon icon={faMicrochip} $alarm={alarms.cpu}/>
<Icon icon={faMicrochip} $alarm={alarms.cpu} />
<IconDescription $alarm={alarms.cpu}>
{stats.cpuUsagePercent.toFixed(2)} %
</IconDescription>
@ -144,7 +150,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
</div>
<div css={tw`flex-1 ml-4 sm:block hidden`}>
<div css={tw`flex justify-center`}>
<Icon icon={faMemory} $alarm={alarms.memory}/>
<Icon icon={faMemory} $alarm={alarms.memory} />
<IconDescription $alarm={alarms.memory}>
{bytesToString(stats.memoryUsageInBytes)}
</IconDescription>
@ -153,7 +159,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
</div>
<div css={tw`flex-1 ml-4 sm:block hidden`}>
<div css={tw`flex justify-center`}>
<Icon icon={faHdd} $alarm={alarms.disk}/>
<Icon icon={faHdd} $alarm={alarms.disk} />
<IconDescription $alarm={alarms.disk}>
{bytesToString(stats.diskUsageInBytes)}
</IconDescription>
@ -161,9 +167,9 @@ export default ({ server, className }: { server: Server; className?: string }) =
<p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {diskLimit}</p>
</div>
</React.Fragment>
}
)}
</div>
<div className={'status-bar'}/>
<div className={'status-bar'} />
</StatusIndicatorBox>
);
};

44
resources/scripts/components/dashboard/activity/ActivityLogContainer.tsx
View File

@ -16,53 +16,57 @@ import useLocationHash from '@/plugins/useLocationHash';
export default () => {
const { hash } = useLocationHash();
const { clearAndAddHttpError } = useFlashKey('account');
const [ filters, setFilters ] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
const [filters, setFilters] = useState<ActivityLogFilters>({ page: 1, sorts: { timestamp: -1 } });
const { data, isValidating, error } = useActivityLogs(filters, {
revalidateOnMount: true,
revalidateOnFocus: false,
});
useEffect(() => {
setFilters(value => ({ ...value, filters: { ip: hash.ip, event: hash.event } }));
}, [ hash ]);
setFilters((value) => ({ ...value, filters: { ip: hash.ip, event: hash.event } }));
}, [hash]);
useEffect(() => {
clearAndAddHttpError(error);
}, [ error ]);
}, [error]);
return (
<PageContentBlock title={'Account Activity Log'}>
<FlashMessageRender byKey={'account'}/>
{(filters.filters?.event || filters.filters?.ip) &&
<FlashMessageRender byKey={'account'} />
{(filters.filters?.event || filters.filters?.ip) && (
<div className={'flex justify-end mb-2'}>
<Link
to={'#'}
className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
onClick={() => setFilters(value => ({ ...value, filters: {} }))}
onClick={() => setFilters((value) => ({ ...value, filters: {} }))}
>
Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'}/>
Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'} />
</Link>
</div>
}
{!data && isValidating ?
<Spinner centered/>
:
)}
{!data && isValidating ? (
<Spinner centered />
) : (
<div className={'bg-gray-700'}>
{data?.items.map((activity) => (
<ActivityLogEntry key={activity.timestamp.toString() + activity.event} activity={activity}>
{typeof activity.properties.useragent === 'string' &&
{typeof activity.properties.useragent === 'string' && (
<Tooltip content={activity.properties.useragent} placement={'top'}>
<span><DesktopComputerIcon/></span>
<span>
<DesktopComputerIcon />
</span>
</Tooltip>
}
)}
</ActivityLogEntry>
))}
</div>
}
{data && <PaginationFooter
pagination={data.pagination}
onPageSelect={page => setFilters(value => ({ ...value, page }))}
/>}
)}
{data && (
<PaginationFooter
pagination={data.pagination}
onPageSelect={(page) => setFilters((value) => ({ ...value, page }))}
/>
)}
</PageContentBlock>
);
};

22
resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
View File

@ -7,23 +7,21 @@ import tw from 'twin.macro';
import Button from '@/components/elements/Button';
export default () => {
const [ visible, setVisible ] = useState(false);
const [visible, setVisible] = useState(false);
const isEnabled = useStoreState((state: ApplicationStore) => state.user.data!.useTotp);
return (
<div>
{visible && (
isEnabled ?
<DisableTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
:
<SetupTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)}/>
)}
{visible &&
(isEnabled ? (
<DisableTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)} />
) : (
<SetupTwoFactorModal visible={visible} onModalDismissed={() => setVisible(false)} />
))}
<p css={tw`text-sm`}>
{isEnabled ?
'Two-factor authentication is currently enabled on your account.'
:
'You do not currently have two-factor authentication enabled on your account. Click the button below to begin configuring it.'
}
{isEnabled
? 'Two-factor authentication is currently enabled on your account.'
: 'You do not currently have two-factor authentication enabled on your account. Click the button below to begin configuring it.'}
</p>
<div css={tw`mt-6`}>
<Button color={'red'} isSecondary onClick={() => setVisible(true)}>

24
resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
View File

@ -19,10 +19,12 @@ interface Values {
allowedIps: string;
}
const CustomTextarea = styled(Textarea)`${tw`h-32`}`;
const CustomTextarea = styled(Textarea)`
${tw`h-32`}
`;
export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
const [ apiKey, setApiKey ] = useState('');
const [apiKey, setApiKey] = useState('');
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const submit = (values: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
@ -34,7 +36,7 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
setApiKey(`${key.identifier}${secretToken}`);
onKeyCreated(key);
})
.catch(error => {
.catch((error) => {
console.error(error);
addError({ key: 'account', message: httpErrorToHuman(error) });
@ -44,11 +46,7 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
return (
<>
<ApiKeyModal
visible={apiKey.length > 0}
onModalDismissed={() => setApiKey('')}
apiKey={apiKey}
/>
<ApiKeyModal visible={apiKey.length > 0} onModalDismissed={() => setApiKey('')} apiKey={apiKey} />
<Formik
onSubmit={submit}
initialValues={{ description: '', allowedIps: '' }}
@ -59,21 +57,23 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
>
{({ isSubmitting }) => (
<Form>
<SpinnerOverlay visible={isSubmitting}/>
<SpinnerOverlay visible={isSubmitting} />
<FormikFieldWrapper
label={'Description'}
name={'description'}
description={'A description of this API key.'}
css={tw`mb-6`}
>
<Field name={'description'} as={Input}/>
<Field name={'description'} as={Input} />
</FormikFieldWrapper>
<FormikFieldWrapper
label={'Allowed IPs'}
name={'allowedIps'}
description={'Leave blank to allow any IP address to use this API key, otherwise provide each IP address on a new line.'}
description={
'Leave blank to allow any IP address to use this API key, otherwise provide each IP address on a new line.'
}
>
<Field name={'allowedIps'} as={CustomTextarea}/>
<Field name={'allowedIps'} as={CustomTextarea} />
</FormikFieldWrapper>
<div css={tw`flex justify-end mt-6`}>
<Button>Create</Button>

8
resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx
View File

@ -27,7 +27,7 @@ const DisableTwoFactorModal = () => {
updateUserData({ useTotp: false });
dismiss();
})
.catch(error => {
.catch((error) => {
console.error(error);
clearAndAddHttpError({ error, key: 'account:two-factor' });
@ -48,13 +48,15 @@ const DisableTwoFactorModal = () => {
>
{({ isValid }) => (
<Form className={'mb-0'}>
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'} />
<Field
id={'password'}
name={'password'}
type={'password'}
label={'Current Password'}
description={'In order to disable two-factor authentication you will need to provide your account password.'}
description={
'In order to disable two-factor authentication you will need to provide your account password.'
}
autoFocus
/>
<div css={tw`mt-6 text-right`}>

78
resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
View File

@ -19,8 +19,8 @@ interface Values {
}
const SetupTwoFactorModal = () => {
const [ token, setToken ] = useState<TwoFactorTokenData | null>(null);
const [ recoveryTokens, setRecoveryTokens ] = useState<string[]>([]);
const [token, setToken] = useState<TwoFactorTokenData | null>(null);
const [recoveryTokens, setRecoveryTokens] = useState<string[]>([]);
const { dismiss, setPropOverrides } = useContext(ModalContext);
const updateUserData = useStoreActions((actions: Actions<ApplicationStore>) => actions.user.updateUserData);
@ -29,31 +29,31 @@ const SetupTwoFactorModal = () => {
useEffect(() => {
getTwoFactorTokenData()
.then(setToken)
.catch(error => {
.catch((error) => {
console.error(error);
clearAndAddHttpError({ error, key: 'account:two-factor' });
});
}, []);
const submit = ({ code }: Values, { setSubmitting }: FormikHelpers<Values>) => {
setPropOverrides(state => ({ ...state, showSpinnerOverlay: true }));
setPropOverrides((state) => ({ ...state, showSpinnerOverlay: true }));
enableAccountTwoFactor(code)
.then(tokens => {
.then((tokens) => {
setRecoveryTokens(tokens);
})
.catch(error => {
.catch((error) => {
console.error(error);
clearAndAddHttpError({ error, key: 'account:two-factor' });
})
.then(() => {
setSubmitting(false);
setPropOverrides(state => ({ ...state, showSpinnerOverlay: false }));
setPropOverrides((state) => ({ ...state, showSpinnerOverlay: false }));
});
};
useEffect(() => {
setPropOverrides(state => ({
setPropOverrides((state) => ({
...state,
closeOnEscape: !recoveryTokens.length,
closeOnBackground: !recoveryTokens.length,
@ -64,7 +64,7 @@ const SetupTwoFactorModal = () => {
updateUserData({ useTotp: true });
}
};
}, [ recoveryTokens ]);
}, [recoveryTokens]);
return (
<Formik
@ -76,20 +76,24 @@ const SetupTwoFactorModal = () => {
.matches(/^(\d){6}$/, 'Authenticator code must be 6 digits.'),
})}
>
{recoveryTokens.length > 0 ?
{recoveryTokens.length > 0 ? (
<>
<h2 css={tw`text-2xl mb-4`}>Two-factor authentication enabled</h2>
<p css={tw`text-neutral-300`}>
Two-factor authentication has been enabled on your account. Should you lose access to
your authenticator device, you&apos;ll need to use one of the codes displayed below in order to access your
account.
Two-factor authentication has been enabled on your account. Should you lose access to your
authenticator device, you&apos;ll need to use one of the codes displayed below in order to
access your account.
</p>
<p css={tw`text-neutral-300 mt-4`}>
<strong>These codes will not be displayed again.</strong> Please take note of them now
by storing them in a secure repository such as a password manager.
<strong>These codes will not be displayed again.</strong> Please take note of them now by
storing them in a secure repository such as a password manager.
</p>
<pre css={tw`text-sm mt-4 rounded font-mono bg-neutral-900 p-4`}>
{recoveryTokens.map(token => <code key={token} css={tw`block mb-1`}>{token}</code>)}
{recoveryTokens.map((token) => (
<code key={token} css={tw`block mb-1`}>
{token}
</code>
))}
</pre>
<div css={tw`text-right`}>
<Button css={tw`mt-6`} onClick={dismiss}>
@ -97,24 +101,26 @@ const SetupTwoFactorModal = () => {
</Button>
</div>
</>
:
) : (
<Form css={tw`mb-0`}>
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'} />
<div css={tw`flex flex-wrap`}>
<div css={tw`w-full md:flex-1`}>
<div css={tw`w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto`}>
{!token ?
{!token ? (
<img
src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
src={
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
}
css={tw`w-64 h-64 rounded`}
/>
:
) : (
<QRCode
renderAs={'svg'}
value={token.image_url_data}
css={tw`w-full h-full shadow-none rounded-none`}
/>
}
)}
</div>
</div>
<div css={tw`w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col`}>
@ -124,20 +130,20 @@ const SetupTwoFactorModal = () => {
name={'code'}
type={'text'}
title={'Code From Authenticator'}
description={'Enter the code from your authenticator device after scanning the QR image.'}
description={
'Enter the code from your authenticator device after scanning the QR image.'
}
/>
{token &&
<div css={tw`mt-4 pt-4 border-t border-neutral-500 text-neutral-200`}>
Alternatively, enter the following token into your authenticator application:
<CopyOnClick text={token.secret}>
<div css={tw`text-sm bg-neutral-900 rounded mt-2 py-2 px-4 font-mono`}>
<code css={tw`font-mono`}>
{token.secret}
</code>
</div>
</CopyOnClick>
</div>
}
{token && (
<div css={tw`mt-4 pt-4 border-t border-neutral-500 text-neutral-200`}>
Alternatively, enter the following token into your authenticator application:
<CopyOnClick text={token.secret}>
<div css={tw`text-sm bg-neutral-900 rounded mt-2 py-2 px-4 font-mono`}>
<code css={tw`font-mono`}>{token.secret}</code>
</div>
</CopyOnClick>
</div>
)}
</div>
<div css={tw`mt-6 md:mt-0 text-right`}>
<Button>Setup</Button>
@ -145,7 +151,7 @@ const SetupTwoFactorModal = () => {
</div>
</div>
</Form>
}
)}
</Formik>
);
};

77
resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
View File

@ -29,17 +29,21 @@ export default () => {
clearFlashes('account:email');
updateEmail({ ...values })
.then(() => addFlash({
type: 'success',
key: 'account:email',
message: 'Your primary email has been updated.',
}))
.catch(error => addFlash({
type: 'error',
key: 'account:email',
title: 'Error',
message: httpErrorToHuman(error),
}))
.then(() =>
addFlash({
type: 'success',
key: 'account:email',
message: 'Your primary email has been updated.',
})
)
.catch((error) =>
addFlash({
type: 'error',
key: 'account:email',
title: 'Error',
message: httpErrorToHuman(error),
})
)
.then(() => {
resetForm();
setSubmitting(false);
@ -47,39 +51,28 @@ export default () => {
};
return (
<Formik
onSubmit={submit}
validationSchema={schema}
initialValues={{ email: user!.email, password: '' }}
>
{
({ isSubmitting, isValid }) => (
<React.Fragment>
<SpinnerOverlay size={'large'} visible={isSubmitting}/>
<Form css={tw`m-0`}>
<Formik onSubmit={submit} validationSchema={schema} initialValues={{ email: user!.email, password: '' }}>
{({ isSubmitting, isValid }) => (
<React.Fragment>
<SpinnerOverlay size={'large'} visible={isSubmitting} />
<Form css={tw`m-0`}>
<Field id={'current_email'} type={'email'} name={'email'} label={'Email'} />
<div css={tw`mt-6`}>
<Field
id={'current_email'}
type={'email'}
name={'email'}
label={'Email'}
id={'confirm_password'}
type={'password'}
name={'password'}
label={'Confirm Password'}
/>
<div css={tw`mt-6`}>
<Field
id={'confirm_password'}
type={'password'}
name={'password'}
label={'Confirm Password'}
/>
</div>
<div css={tw`mt-6`}>
<Button size={'small'} disabled={isSubmitting || !isValid}>
Update Email
</Button>
</div>
</Form>
</React.Fragment>
)
}
</div>
<div css={tw`mt-6`}>
<Button size={'small'} disabled={isSubmitting || !isValid}>
Update Email
</Button>
</div>
</Form>
</React.Fragment>
)}
</Formik>
);
};

92
resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
View File

@ -19,9 +19,13 @@ interface Values {
const schema = Yup.object().shape({
current: Yup.string().min(1).required('You must provide your current password.'),
password: Yup.string().min(8).required(),
confirmPassword: Yup.string().test('password', 'Password confirmation does not match the password you entered.', function (value) {
return value === this.parent.password;
}),
confirmPassword: Yup.string().test(
'password',
'Password confirmation does not match the password you entered.',
function (value) {
return value === this.parent.password;
}
),
});
export default () => {
@ -39,12 +43,14 @@ export default () => {
// @ts-ignore
window.location = '/auth/login';
})
.catch(error => addFlash({
key: 'account:password',
type: 'error',
title: 'Error',
message: httpErrorToHuman(error),
}))
.catch((error) =>
addFlash({
key: 'account:password',
type: 'error',
title: 'Error',
message: httpErrorToHuman(error),
})
)
.then(() => setSubmitting(false));
};
@ -55,43 +61,43 @@ export default () => {
validationSchema={schema}
initialValues={{ current: '', password: '', confirmPassword: '' }}
>
{
({ isSubmitting, isValid }) => (
<React.Fragment>
<SpinnerOverlay size={'large'} visible={isSubmitting}/>
<Form css={tw`m-0`}>
{({ isSubmitting, isValid }) => (
<React.Fragment>
<SpinnerOverlay size={'large'} visible={isSubmitting} />
<Form css={tw`m-0`}>
<Field
id={'current_password'}
type={'password'}
name={'current'}
label={'Current Password'}
/>
<div css={tw`mt-6`}>
<Field
id={'current_password'}
id={'new_password'}
type={'password'}
name={'current'}
label={'Current Password'}
name={'password'}
label={'New Password'}
description={
'Your new password should be at least 8 characters in length and unique to this website.'
}
/>
<div css={tw`mt-6`}>
<Field
id={'new_password'}
type={'password'}
name={'password'}
label={'New Password'}
description={'Your new password should be at least 8 characters in length and unique to this website.'}
/>
</div>
<div css={tw`mt-6`}>
<Field
id={'confirm_new_password'}
type={'password'}
name={'confirmPassword'}
label={'Confirm New Password'}
/>
</div>
<div css={tw`mt-6`}>
<Button size={'small'} disabled={isSubmitting || !isValid}>
Update Password
</Button>
</div>
</Form>
</React.Fragment>
)
}
</div>
<div css={tw`mt-6`}>
<Field
id={'confirm_new_password'}
type={'password'}
name={'confirmPassword'}
label={'Confirm New Password'}
/>
</div>
<div css={tw`mt-6`}>
<Button size={'small'} disabled={isSubmitting || !isValid}>
Update Password
</Button>
</div>
</Form>
</React.Fragment>
)}
</Formik>
</React.Fragment>
);

14
resources/scripts/components/dashboard/search/SearchContainer.tsx
View File

@ -6,10 +6,10 @@ import SearchModal from '@/components/dashboard/search/SearchModal';
import Tooltip from '@/components/elements/tooltip/Tooltip';
export default () => {
const [ visible, setVisible ] = useState(false);
const [visible, setVisible] = useState(false);
useEventListener('keydown', (e: KeyboardEvent) => {
if ([ 'input', 'textarea' ].indexOf(((e.target as HTMLElement).tagName || 'input').toLowerCase()) < 0) {
if (['input', 'textarea'].indexOf(((e.target as HTMLElement).tagName || 'input').toLowerCase()) < 0) {
if (!visible && e.metaKey && e.key.toLowerCase() === '/') {
setVisible(true);
}
@ -18,16 +18,10 @@ export default () => {
return (
<>
{visible &&
<SearchModal
appear
visible={visible}
onDismissed={() => setVisible(false)}
/>
}
{visible && <SearchModal appear visible={visible} onDismissed={() => setVisible(false)} />}
<Tooltip placement={'bottom'} content={'Search'}>
<div className={'navigation-link'} onClick={() => setVisible(true)}>
<FontAwesomeIcon icon={faSearch}/>
<FontAwesomeIcon icon={faSearch} />
</div>
</Tooltip>
</>

48
resources/scripts/components/dashboard/search/SearchModal.tsx
View File

@ -40,24 +40,26 @@ const SearchWatcher = () => {
if (values.term.length >= 3) {
submitForm();
}
}, [ values.term ]);
}, [values.term]);
return null;
};
export default ({ ...props }: Props) => {
const ref = useRef<HTMLInputElement>(null);
const isAdmin = useStoreState(state => state.user.data!.rootAdmin);
const [ servers, setServers ] = useState<Server[]>([]);
const { clearAndAddHttpError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const isAdmin = useStoreState((state) => state.user.data!.rootAdmin);
const [servers, setServers] = useState<Server[]>([]);
const { clearAndAddHttpError, clearFlashes } = useStoreActions(
(actions: Actions<ApplicationStore>) => actions.flashes
);
const search = debounce(({ term }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('search');
// if (ref.current) ref.current.focus();
getServers({ query: term, type: isAdmin ? 'admin-all' : undefined })
.then(servers => setServers(servers.items.filter((_, index) => index < 5)))
.catch(error => {
.then((servers) => setServers(servers.items.filter((_, index) => index < 5)))
.catch((error) => {
console.error(error);
clearAndAddHttpError({ key: 'search', error });
})
@ -69,10 +71,10 @@ export default ({ ...props }: Props) => {
if (props.visible) {
if (ref.current) ref.current.focus();
}
}, [ props.visible ]);
}, [props.visible]);
// Formik does not support an innerRef on custom components.
const InputWithRef = (props: any) => <Input autoFocus {...props} ref={ref}/>;
const InputWithRef = (props: any) => <Input autoFocus {...props} ref={ref} />;
return (
<Formik
@ -90,16 +92,15 @@ export default ({ ...props }: Props) => {
label={'Search term'}
description={'Enter a server name, uuid, or allocation to begin searching.'}
>
<SearchWatcher/>
<SearchWatcher />
<InputSpinner visible={isSubmitting}>
<Field as={InputWithRef} name={'term'}/>
<Field as={InputWithRef} name={'term'} />
</InputSpinner>
</FormikFieldWrapper>
</Form>
{servers.length > 0 &&
<div css={tw`mt-6`}>
{
servers.map(server => (
{servers.length > 0 && (
<div css={tw`mt-6`}>
{servers.map((server) => (
<ServerResult
key={server.uuid}
to={`/server/${server.id}`}
@ -108,11 +109,13 @@ export default ({ ...props }: Props) => {
<div css={tw`flex-1 mr-4`}>
<p css={tw`text-sm`}>{server.name}</p>
<p css={tw`mt-1 text-xs text-neutral-400`}>
{
server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
<span key={allocation.ip + allocation.port.toString()}>{allocation.alias || ip(allocation.ip)}:{allocation.port}</span>
))
}
{server.allocations
.filter((alloc) => alloc.isDefault)
.map((allocation) => (
<span key={allocation.ip + allocation.port.toString()}>
{allocation.alias || ip(allocation.ip)}:{allocation.port}
</span>
))}
</p>
</div>
<div css={tw`flex-none text-right`}>
@ -121,10 +124,9 @@ export default ({ ...props }: Props) => {
</span>
</div>
</ServerResult>
))
}
</div>
}
))}
</div>
)}
</Modal>
)}
</Formik>

57
resources/scripts/components/dashboard/ssh/AccountSSHContainer.tsx
View File

@ -22,43 +22,40 @@ export default () => {
useEffect(() => {
clearAndAddHttpError(error);
}, [ error ]);
}, [error]);
return (
<PageContentBlock title={'Account API'}>
<FlashMessageRender byKey={'account'}/>
<FlashMessageRender byKey={'account'} />
<div css={tw`md:flex flex-nowrap my-10`}>
<ContentBox title={'Add SSH Key'} css={tw`flex-none w-full md:w-1/2`}>
<CreateSSHKeyForm/>
<CreateSSHKeyForm />
</ContentBox>
<ContentBox title={'SSH Keys'} css={tw`flex-1 overflow-hidden mt-8 md:mt-0 md:ml-8`}>
<SpinnerOverlay visible={!data && isValidating}/>
{
!data || !data.length ?
<p css={tw`text-center text-sm`}>
{!data ? 'Loading...' : 'No SSH Keys exist for this account.'}
</p>
:
data.map((key, index) => (
<GreyRowBox
key={key.fingerprint}
css={[ tw`bg-neutral-600 flex space-x-4 items-center`, index > 0 && tw`mt-2` ]}
>
<FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
<div css={tw`flex-1`}>
<p css={tw`text-sm break-words font-medium`}>{key.name}</p>
<p css={tw`text-xs mt-1 font-mono truncate`}>
SHA256:{key.fingerprint}
</p>
<p css={tw`text-xs mt-1 text-neutral-300 uppercase`}>
Added on:&nbsp;
{format(key.createdAt, 'MMM do, yyyy HH:mm')}
</p>
</div>
<DeleteSSHKeyButton name={key.name} fingerprint={key.fingerprint} />
</GreyRowBox>
))
}
<SpinnerOverlay visible={!data && isValidating} />
{!data || !data.length ? (
<p css={tw`text-center text-sm`}>
{!data ? 'Loading...' : 'No SSH Keys exist for this account.'}
</p>
) : (
data.map((key, index) => (
<GreyRowBox
key={key.fingerprint}
css={[tw`bg-neutral-600 flex space-x-4 items-center`, index > 0 && tw`mt-2`]}
>
<FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`} />
<div css={tw`flex-1`}>
<p css={tw`text-sm break-words font-medium`}>{key.name}</p>
<p css={tw`text-xs mt-1 font-mono truncate`}>SHA256:{key.fingerprint}</p>
<p css={tw`text-xs mt-1 text-neutral-300 uppercase`}>
Added on:&nbsp;
{format(key.createdAt, 'MMM do, yyyy HH:mm')}
</p>
</div>
<DeleteSSHKeyButton name={key.name} fingerprint={key.fingerprint} />
</GreyRowBox>
))
)}
</ContentBox>
</div>
</PageContentBlock>

10
resources/scripts/components/dashboard/ssh/CreateSSHKeyForm.tsx
View File

@ -15,7 +15,9 @@ interface Values {
publicKey: string;
}
const CustomTextarea = styled(Textarea)`${tw`h-32`}`;
const CustomTextarea = styled(Textarea)`
${tw`h-32`}
`;
export default () => {
const { clearAndAddHttpError } = useFlashKey('account');
@ -45,16 +47,16 @@ export default () => {
>
{({ isSubmitting }) => (
<Form>
<SpinnerOverlay visible={isSubmitting}/>
<SpinnerOverlay visible={isSubmitting} />
<FormikFieldWrapper label={'SSH Key Name'} name={'name'} css={tw`mb-6`}>
<Field name={'name'} as={Input}/>
<Field name={'name'} as={Input} />
</FormikFieldWrapper>
<FormikFieldWrapper
label={'Public Key'}
name={'publicKey'}
description={'Enter your public SSH key.'}
>
<Field name={'publicKey'} as={CustomTextarea}/>
<Field name={'publicKey'} as={CustomTextarea} />
</FormikFieldWrapper>
<div css={tw`flex justify-end mt-6`}>
<Button>Save</Button>

11
resources/scripts/components/dashboard/ssh/DeleteSSHKeyButton.tsx
View File

@ -9,7 +9,7 @@ import Code from '@/components/elements/Code';
export default ({ name, fingerprint }: { name: string; fingerprint: string }) => {
const { clearAndAddHttpError } = useFlashKey('account');
const [ visible, setVisible ] = useState(false);
const [visible, setVisible] = useState(false);
const { mutate } = useSSHKeys();
const onClick = () => {
@ -18,11 +18,10 @@ export default ({ name, fingerprint }: { name: string; fingerprint: string }) =>
Promise.all([
mutate((data) => data?.filter((value) => value.fingerprint !== fingerprint), false),
deleteSSHKey(fingerprint),
])
.catch((error) => {
mutate(undefined, true).catch(console.error);
clearAndAddHttpError(error);
});
]).catch((error) => {
mutate(undefined, true).catch(console.error);
clearAndAddHttpError(error);
});
};
return (

8
resources/scripts/components/elements/AuthenticatedRoute.tsx
View File

@ -3,14 +3,14 @@ import { Redirect, Route, RouteProps } from 'react-router';
import { useStoreState } from '@/state/hooks';
export default ({ children, ...props }: Omit<RouteProps, 'render'>) => {
const isAuthenticated = useStoreState(state => !!state.user.data?.uuid);
const isAuthenticated = useStoreState((state) => !!state.user.data?.uuid);
return (
<Route
{...props}
render={({ location }) => (
isAuthenticated ? children : <Redirect to={{ pathname: '/auth/login', state: { from: location } }}/>
)}
render={({ location }) =>
isAuthenticated ? children : <Redirect to={{ pathname: '/auth/login', state: { from: location } }} />
}
/>
);
};

145
resources/scripts/components/elements/Button.tsx
View File

@ -12,88 +12,103 @@ interface Props {
const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`};
${props => ((!props.isSecondary && !props.color) || props.color === 'primary') && css<Props>`
${props => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
&:hover:not(:disabled) {
${tw`bg-primary-600 border-primary-700`};
}
`};
${props => props.color === 'grey' && css`
${tw`border-neutral-600 bg-neutral-500 text-neutral-50`};
&:hover:not(:disabled) {
${tw`bg-neutral-600 border-neutral-700`};
}
`};
${props => props.color === 'green' && css<Props>`
${tw`border-green-600 bg-green-500 text-green-50`};
&:hover:not(:disabled) {
${tw`bg-green-600 border-green-700`};
}
${props => props.isSecondary && css`
&:active:not(:disabled) {
${(props) =>
((!props.isSecondary && !props.color) || props.color === 'primary') &&
css<Props>`
${(props) => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
&:hover:not(:disabled) {
${tw`bg-primary-600 border-primary-700`};
}
`};
${(props) =>
props.color === 'grey' &&
css`
${tw`border-neutral-600 bg-neutral-500 text-neutral-50`};
&:hover:not(:disabled) {
${tw`bg-neutral-600 border-neutral-700`};
}
`};
${(props) =>
props.color === 'green' &&
css<Props>`
${tw`border-green-600 bg-green-500 text-green-50`};
&:hover:not(:disabled) {
${tw`bg-green-600 border-green-700`};
}
${(props) =>
props.isSecondary &&
css`
&:active:not(:disabled) {
${tw`bg-green-600 border-green-700`};
}
`};
`};
`};
${props => props.color === 'red' && css<Props>`
${tw`border-red-600 bg-red-500 text-red-50`};
&:hover:not(:disabled) {
${tw`bg-red-600 border-red-700`};
}
${props => props.isSecondary && css`
&:active:not(:disabled) {
${(props) =>
props.color === 'red' &&
css<Props>`
${tw`border-red-600 bg-red-500 text-red-50`};
&:hover:not(:disabled) {
${tw`bg-red-600 border-red-700`};
}
${(props) =>
props.isSecondary &&
css`
&:active:not(:disabled) {
${tw`bg-red-600 border-red-700`};
}
`};
`};
`};
${props => props.size === 'xsmall' && tw`px-2 py-1 text-xs`};
${props => (!props.size || props.size === 'small') && tw`px-4 py-2`};
${props => props.size === 'large' && tw`p-4 text-sm`};
${props => props.size === 'xlarge' && tw`p-4 w-full`};
${props => props.isSecondary && css<Props>`
${tw`border-neutral-600 bg-transparent text-neutral-200`};
&:hover:not(:disabled) {
${tw`border-neutral-500 text-neutral-100`};
${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
${props => props.color === 'primary' && tw`bg-primary-500 border-primary-600 text-primary-50`};
${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
}
`};
&:disabled { opacity: 0.55; cursor: default }
${(props) => props.size === 'xsmall' && tw`px-2 py-1 text-xs`};
${(props) => (!props.size || props.size === 'small') && tw`px-4 py-2`};
${(props) => props.size === 'large' && tw`p-4 text-sm`};
${(props) => props.size === 'xlarge' && tw`p-4 w-full`};
${(props) =>
props.isSecondary &&
css<Props>`
${tw`border-neutral-600 bg-transparent text-neutral-200`};
&:hover:not(:disabled) {
${tw`border-neutral-500 text-neutral-100`};
${(props) => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
${(props) => props.color === 'primary' && tw`bg-primary-500 border-primary-600 text-primary-50`};
${(props) => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
}
`};
&:disabled {
opacity: 0.55;
cursor: default;
}
`;
type ComponentProps = Omit<JSX.IntrinsicElements['button'], 'ref' | keyof Props> & Props;
const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
<ButtonStyle {...props}>
{isLoading &&
<div css={tw`flex absolute justify-center items-center w-full h-full left-0 top-0`}>
<Spinner size={'small'}/>
</div>
}
<span css={isLoading ? tw`text-transparent` : undefined}>
{children}
</span>
{isLoading && (
<div css={tw`flex absolute justify-center items-center w-full h-full left-0 top-0`}>
<Spinner size={'small'} />
</div>
)}
<span css={isLoading ? tw`text-transparent` : undefined}>{children}</span>
</ButtonStyle>
);
type LinkProps = Omit<JSX.IntrinsicElements['a'], 'ref' | keyof Props> & Props;
const LinkButton: React.FC<LinkProps> = props => <ButtonStyle as={'a'} {...props}/>;
const LinkButton: React.FC<LinkProps> = (props) => <ButtonStyle as={'a'} {...props} />;
export { LinkButton, ButtonStyle };
export default Button;

9
resources/scripts/components/elements/Can.tsx
View File

@ -14,12 +14,9 @@ const Can = ({ action, matchAny = false, renderOnError, children }: Props) => {
return (
<>
{
((matchAny && can.filter(p => p).length > 0) || (!matchAny && can.every(p => p))) ?
children
:
renderOnError
}
{(matchAny && can.filter((p) => p).length > 0) || (!matchAny && can.every((p) => p))
? children
: renderOnError}
</>
);
};

2
resources/scripts/components/elements/Checkbox.tsx
View File

@ -29,7 +29,7 @@ const Checkbox = ({ name, value, className, ...props }: Props & InputProps) => (
type={'checkbox'}
checked={(field.value || []).includes(value)}
onClick={() => form.setFieldTouched(field.name, true)}
onChange={e => {
onChange={(e) => {
const set = new Set(field.value);
set.has(value) ? set.delete(value) : set.add(value);

16
resources/scripts/components/elements/CodemirrorEditor.tsx
View File

@ -98,7 +98,7 @@ const EditorContainer = styled.div`
}
.CodeMirror-foldmarker {
color: #CBCCC6;
color: #cbccc6;
text-shadow: none;
margin-left: 0.25rem;
margin-right: 0.25rem;
@ -144,7 +144,7 @@ const findModeByFilename = (filename: string) => {
};
export default ({ style, initialContent, filename, mode, fetchContent, onContentSaved, onModeChanged }: Props) => {
const [ editor, setEditor ] = useState<CodeMirror.Editor>();
const [editor, setEditor] = useState<CodeMirror.Editor>();
const ref = useCallback((node) => {
if (!node) return;
@ -173,7 +173,7 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
// @ts-ignore
autoCloseBrackets: true,
matchBrackets: true,
gutters: [ 'CodeMirror-linenumbers', 'CodeMirror-foldgutter' ],
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
});
setEditor(e);
@ -185,15 +185,15 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
}
onModeChanged(findModeByFilename(filename)?.mime || 'text/plain');
}, [ filename ]);
}, [filename]);
useEffect(() => {
editor && editor.setOption('mode', mode);
}, [ editor, mode ]);
}, [editor, mode]);
useEffect(() => {
editor && editor.setValue(initialContent || '');
}, [ editor, initialContent ]);
}, [editor, initialContent]);
useEffect(() => {
if (!editor) {
@ -207,11 +207,11 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
});
fetchContent(() => Promise.resolve(editor.getValue()));
}, [ editor, fetchContent, onContentSaved ]);
}, [editor, fetchContent, onContentSaved]);
return (
<EditorContainer style={style}>
<textarea ref={ref}/>
<textarea ref={ref} />
</EditorContainer>
);
};

6
resources/scripts/components/elements/ConfirmationModal.tsx
View File

@ -17,9 +17,7 @@ const ConfirmationModal: React.FC<Props> = ({ title, children, buttonText, onCon
return (
<>
<h2 css={tw`text-2xl mb-6`}>{title}</h2>
<div css={tw`text-neutral-300`}>
{children}
</div>
<div css={tw`text-neutral-300`}>{children}</div>
<div css={tw`flex flex-wrap items-center justify-end mt-8`}>
<Button isSecondary onClick={() => dismiss()} css={tw`w-full sm:w-auto border-transparent`}>
Cancel
@ -34,6 +32,6 @@ const ConfirmationModal: React.FC<Props> = ({ title, children, buttonText, onCon
ConfirmationModal.displayName = 'ConfirmationModal';
export default asModal<Props>(props => ({
export default asModal<Props>((props) => ({
showSpinnerOverlay: props.showSpinnerOverlay,
}))(ConfirmationModal);

32
resources/scripts/components/elements/ContentBox.tsx
View File

@ -3,29 +3,23 @@ import FlashMessageRender from '@/components/FlashMessageRender';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import tw from 'twin.macro';
type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
title?: string;
borderColor?: string;
showFlashes?: string | boolean;
showLoadingOverlay?: boolean;
}>;
type Props = Readonly<
React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
title?: string;
borderColor?: string;
showFlashes?: string | boolean;
showLoadingOverlay?: boolean;
}
>;
const ContentBox = ({ title, borderColor, showFlashes, showLoadingOverlay, children, ...props }: Props) => (
<div {...props}>
{title && <h2 css={tw`text-neutral-300 mb-4 px-4 text-2xl`}>{title}</h2>}
{showFlashes &&
<FlashMessageRender
byKey={typeof showFlashes === 'string' ? showFlashes : undefined}
css={tw`mb-4`}
/>
}
<div
css={[
tw`bg-neutral-700 p-4 rounded shadow-lg relative`,
!!borderColor && tw`border-t-4`,
]}
>
<SpinnerOverlay visible={showLoadingOverlay || false}/>
{showFlashes && (
<FlashMessageRender byKey={typeof showFlashes === 'string' ? showFlashes : undefined} css={tw`mb-4`} />
)}
<div css={[tw`bg-neutral-700 p-4 rounded shadow-lg relative`, !!borderColor && tw`border-t-4`]}>
<SpinnerOverlay visible={showLoadingOverlay || false} />
{children}
</div>
</div>

10
resources/scripts/components/elements/CopyOnClick.tsx
View File

@ -20,7 +20,7 @@ const Toast = styled.div`
`;
const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
const [ copied, setCopied ] = useState(false);
const [copied, setCopied] = useState(false);
useEffect(() => {
if (!copied) return;
@ -32,7 +32,7 @@ const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
return () => {
clearTimeout(timeout);
};
}, [ copied ]);
}, [copied]);
const onCopy = useCallback(() => {
setCopied(true);
@ -42,15 +42,15 @@ const CopyOnClick: React.FC<{ text: any }> = ({ text, children }) => {
<>
<SwitchTransition>
<Fade timeout={250} key={copied ? 'visible' : 'invisible'}>
{copied ?
{copied ? (
<Toast>
<div>
<p>Copied &quot;{text}&quot; to clipboard.</p>
</div>
</Toast>
:
) : (
<></>
}
)}
</Fade>
</SwitchTransition>
<CopyToClipboard onCopy={onCopy} text={text} options={{ debug: true }} css={tw`cursor-pointer`}>

19
resources/scripts/components/elements/DropdownMenu.tsx
View File

@ -13,7 +13,7 @@ export const DropdownButtonRow = styled.button<{ danger?: boolean }>`
transition: 150ms all ease;
&:hover {
${props => props.danger ? tw`text-red-700 bg-red-100` : tw`text-neutral-700 bg-neutral-100`};
${(props) => (props.danger ? tw`text-red-700 bg-red-100` : tw`text-neutral-700 bg-neutral-100`)};
}
`;
@ -30,11 +30,11 @@ class DropdownMenu extends React.PureComponent<Props, State> {
visible: false,
};
componentWillUnmount () {
componentWillUnmount() {
this.removeListeners();
}
componentDidUpdate (prevProps: Readonly<Props>, prevState: Readonly<State>) {
componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {
const menu = this.menu.current;
if (this.state.visible && !prevState.visible && menu) {
@ -76,19 +76,20 @@ class DropdownMenu extends React.PureComponent<Props, State> {
}
};
triggerMenu = (posX: number) => this.setState(s => ({
posX: !s.visible ? posX : s.posX,
visible: !s.visible,
}));
triggerMenu = (posX: number) =>
this.setState((s) => ({
posX: !s.visible ? posX : s.posX,
visible: !s.visible,
}));
render () {
render() {
return (
<div>
{this.props.renderToggle(this.onClickHandler)}
<Fade timeout={150} in={this.state.visible} unmountOnExit>
<div
ref={this.menu}
onClick={e => {
onClick={(e) => {
e.stopPropagation();
this.setState({ visible: false });
}}

15
resources/scripts/components/elements/ErrorBoundary.tsx
View File

@ -13,26 +13,27 @@ class ErrorBoundary extends React.Component<{}, State> {
hasError: false,
};
static getDerivedStateFromError () {
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch (error: Error) {
componentDidCatch(error: Error) {
console.error(error);
}
render () {
return this.state.hasError ?
render() {
return this.state.hasError ? (
<div css={tw`flex items-center justify-center w-full my-4`}>
<div css={tw`flex items-center bg-neutral-900 rounded p-3 text-red-500`}>
<Icon icon={faExclamationTriangle} css={tw`h-4 w-auto mr-2`}/>
<Icon icon={faExclamationTriangle} css={tw`h-4 w-auto mr-2`} />
<p css={tw`text-sm text-neutral-100`}>
An error was encountered by the application while rendering this view. Try refreshing the page.
</p>
</div>
</div>
:
this.props.children;
) : (
this.props.children
);
}
}

22
resources/scripts/components/elements/Fade.tsx
View File

@ -8,25 +8,29 @@ interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
}
const Container = styled.div<{ timeout: number }>`
.fade-enter, .fade-exit, .fade-appear {
.fade-enter,
.fade-exit,
.fade-appear {
will-change: opacity;
}
.fade-enter, .fade-appear {
.fade-enter,
.fade-appear {
${tw`opacity-0`};
&.fade-enter-active, &.fade-appear-active {
&.fade-enter-active,
&.fade-appear-active {
${tw`opacity-100 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;
transition-duration: ${(props) => props.timeout}ms;
}
}
.fade-exit {
${tw`opacity-100`};
&.fade-exit-active {
${tw`opacity-0 transition-opacity ease-in`};
transition-duration: ${props => props.timeout}ms;
transition-duration: ${(props) => props.timeout}ms;
}
}
`;

35
resources/scripts/components/elements/Field.tsx
View File

@ -13,14 +13,16 @@ interface OwnProps {
type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, label, description, validate, ...props }, ref) => (
<FormikField innerRef={ref} name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
const Field = forwardRef<HTMLInputElement, Props>(
({ id, name, light = false, label, description, validate, ...props }, ref) => (
<FormikField innerRef={ref} name={name} validate={validate}>
{({ field, form: { errors, touched } }: FieldProps) => (
<div>
{label &&
<Label htmlFor={id} isLight={light}>{label}</Label>
}
{label && (
<Label htmlFor={id} isLight={light}>
{label}
</Label>
)}
<Input
id={id}
{...field}
@ -28,18 +30,19 @@ const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, la
isLight={light}
hasError={!!(touched[field.name] && errors[field.name])}
/>
{touched[field.name] && errors[field.name] ?
{touched[field.name] && errors[field.name] ? (
<p className={'input-help error'}>
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
{(errors[field.name] as string).charAt(0).toUpperCase() +
(errors[field.name] as string).slice(1)}
</p>
:
description ? <p className={'input-help'}>{description}</p> : null
}
) : description ? (
<p className={'input-help'}>{description}</p>
) : null}
</div>
)
}
</FormikField>
));
)}
</FormikField>
)
);
Field.displayName = 'Field';
export default Field;

20
resources/scripts/components/elements/FormikFieldWrapper.tsx
View File

@ -15,17 +15,15 @@ interface Props {
const FormikFieldWrapper = ({ id, name, label, className, description, validate, children }: Props) => (
<Field name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
<div className={`${className} ${(touched[field.name] && errors[field.name]) ? 'has-error' : undefined}`}>
{label && <Label htmlFor={id}>{label}</Label>}
{children}
<InputError errors={errors} touched={touched} name={field.name}>
{description || null}
</InputError>
</div>
)
}
{({ field, form: { errors, touched } }: FieldProps) => (
<div className={`${className} ${touched[field.name] && errors[field.name] ? 'has-error' : undefined}`}>
{label && <Label htmlFor={id}>{label}</Label>}
{children}
<InputError errors={errors} touched={touched} name={field.name}>
{description || null}
</InputError>
</div>
)}
</Field>
);

4
resources/scripts/components/elements/GreyRowBox.tsx
View File

@ -3,8 +3,8 @@ import tw from 'twin.macro';
export default styled.div<{ $hoverable?: boolean }>`
${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150 overflow-hidden`};
${props => props.$hoverable !== false && tw`hover:border-neutral-500`};
${(props) => props.$hoverable !== false && tw`hover:border-neutral-500`};
& .icon {
${tw`rounded-full bg-neutral-500 p-3`};

6
resources/scripts/components/elements/Icon.tsx
View File

@ -9,9 +9,9 @@ interface Props {
}
const Icon = ({ icon, className, style }: Props) => {
let [ width, height, , , paths ] = icon.icon;
let [width, height, , , paths] = icon.icon;
paths = Array.isArray(paths) ? paths : [ paths ];
paths = Array.isArray(paths) ? paths : [paths];
return (
<svg
@ -22,7 +22,7 @@ const Icon = ({ icon, className, style }: Props) => {
style={style}
>
{paths.map((path, index) => (
<path key={`svg_path_${index}`} d={path}/>
<path key={`svg_path_${index}`} d={path} />
))}
</svg>
);

42
resources/scripts/components/elements/Input.tsx
View File

@ -7,9 +7,11 @@ export interface Props {
}
const light = css<Props>`
${tw`bg-white border-neutral-200 text-neutral-800`};
&:focus { ${tw`border-primary-400`} }
${tw`bg-white border-neutral-200 text-neutral-800`};
&:focus {
${tw`border-primary-400`}
}
&:disabled {
${tw`bg-neutral-100 border-neutral-200`};
}
@ -40,43 +42,47 @@ const inputStyle = css<Props>`
${tw`appearance-none outline-none w-full min-w-0`};
${tw`p-3 border-2 rounded text-sm transition-all duration-150`};
${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none focus:ring-0`};
& + .input-help {
${tw`mt-1 text-xs`};
${props => props.hasError ? tw`text-red-200` : tw`text-neutral-200`};
${(props) => (props.hasError ? tw`text-red-200` : tw`text-neutral-200`)};
}
&:required, &:invalid {
&:required,
&:invalid {
${tw`shadow-none`};
}
&:not(:disabled):not(:read-only):focus {
${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`};
${props => props.hasError && tw`border-red-300 ring-red-200`};
${(props) => props.hasError && tw`border-red-300 ring-red-200`};
}
&:disabled {
${tw`opacity-75`};
}
${props => props.isLight && light};
${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`};
${(props) => props.isLight && light};
${(props) => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`};
`;
const Input = styled.input<Props>`
&:not([type="checkbox"]):not([type="radio"]) {
&:not([type='checkbox']):not([type='radio']) {
${inputStyle};
}
&[type="checkbox"], &[type="radio"] {
&[type='checkbox'],
&[type='radio'] {
${checkboxStyle};
&[type="radio"] {
&[type='radio'] {
${tw`rounded-full`};
}
}
`;
const Textarea = styled.textarea<Props>`${inputStyle}`;
const Textarea = styled.textarea<Props>`
${inputStyle}
`;
export { Textarea };
export default Input;

20
resources/scripts/components/elements/InputError.tsx
View File

@ -10,19 +10,15 @@ interface Props {
children?: string | number | null | undefined;
}
const InputError = ({ errors, touched, name, children }: Props) => (
touched[name] && errors[name] ?
const InputError = ({ errors, touched, name, children }: Props) =>
touched[name] && errors[name] ? (
<p css={tw`text-xs text-red-400 pt-2`}>
{typeof errors[name] === 'string' ?
capitalize(errors[name] as string)
:
capitalize((errors[name] as unknown as string[])[0])
}
{typeof errors[name] === 'string'
? capitalize(errors[name] as string)
: capitalize((errors[name] as unknown as string[])[0])}
</p>
:
<>
{children ? <p css={tw`text-xs text-neutral-400 pt-2`}>{children}</p> : null}
</>
);
) : (
<>{children ? <p css={tw`text-xs text-neutral-400 pt-2`}>{children}</p> : null}</>
);
export default InputError;

18
resources/scripts/components/elements/InputSpinner.tsx
View File

@ -7,19 +7,21 @@ import Select from '@/components/elements/Select';
const Container = styled.div<{ visible?: boolean }>`
${tw`relative`};
${props => props.visible && css`
& ${Select} {
background-image: none;
}
`};
${(props) =>
props.visible &&
css`
& ${Select} {
background-image: none;
}
`};
`;
const InputSpinner = ({ visible, children }: { visible: boolean, children: React.ReactNode }) => (
const InputSpinner = ({ visible, children }: { visible: boolean; children: React.ReactNode }) => (
<Container visible={visible}>
<Fade appear unmountOnExit in={visible} timeout={150}>
<div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
<Spinner size={'small'}/>
<Spinner size={'small'} />
</div>
</Fade>
{children}

2
resources/scripts/components/elements/Label.tsx
View File

@ -3,7 +3,7 @@ import tw from 'twin.macro';
const Label = styled.label<{ isLight?: boolean }>`
${tw`block text-xs uppercase text-neutral-200 mb-1 sm:mb-2`};
${props => props.isLight && tw`text-neutral-700`};
${(props) => props.isLight && tw`text-neutral-700`};
`;
export default Label;

109
resources/scripts/components/elements/Modal.tsx
View File

@ -22,41 +22,55 @@ export interface ModalProps extends RequiredModalProps {
export const ModalMask = styled.div`
${tw`fixed z-50 overflow-auto flex w-full inset-0`};
background: rgba(0, 0, 0, 0.70);
background: rgba(0, 0, 0, 0.7);
`;
const ModalContainer = styled.div<{ alignTop?: boolean }>`
const ModalContainer = styled.div<{ alignTop?: boolean }>`
max-width: 95%;
max-height: calc(100vh - 8rem);
${breakpoint('md')`max-width: 75%`};
${breakpoint('lg')`max-width: 50%`};
${tw`relative flex flex-col w-full m-auto`};
${props => props.alignTop && css`
margin-top: 20%;
${breakpoint('md')`margin-top: 10%`};
`};
${(props) =>
props.alignTop &&
css`
margin-top: 20%;
${breakpoint('md')`margin-top: 10%`};
`};
margin-bottom: auto;
& > .close-icon {
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
top: -2.5rem;
&:hover {${tw`transform rotate-90`}}
&:hover {
${tw`transform rotate-90`}
}
& > svg {
${tw`w-6 h-6`};
}
}
`;
const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }) => {
const [ render, setRender ] = useState(visible);
const Modal: React.FC<ModalProps> = ({
visible,
appear,
dismissable,
showSpinnerOverlay,
top = true,
closeOnBackground = true,
closeOnEscape = true,
onDismissed,
children,
}) => {
const [render, setRender] = useState(visible);
const isDismissable = useMemo(() => {
return (dismissable || true) && !(showSpinnerOverlay || false);
}, [ dismissable, showSpinnerOverlay ]);
}, [dismissable, showSpinnerOverlay]);
useEffect(() => {
if (!isDismissable || !closeOnEscape) return;
@ -69,22 +83,16 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
return () => {
window.removeEventListener('keydown', handler);
};
}, [ isDismissable, closeOnEscape, render ]);
}, [isDismissable, closeOnEscape, render]);
useEffect(() => setRender(visible), [ visible ]);
useEffect(() => setRender(visible), [visible]);
return (
<Fade
in={render}
timeout={150}
appear={appear || true}
unmountOnExit
onExited={() => onDismissed()}
>
<Fade in={render} timeout={150} appear={appear || true} unmountOnExit onExited={() => onDismissed()}>
<ModalMask
onClick={e => e.stopPropagation()}
onContextMenu={e => e.stopPropagation()}
onMouseDown={e => {
onClick={(e) => e.stopPropagation()}
onContextMenu={(e) => e.stopPropagation()}
onMouseDown={(e) => {
if (isDismissable && closeOnBackground) {
e.stopPropagation();
if (e.target === e.currentTarget) {
@ -94,29 +102,36 @@ const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinner
}}
>
<ModalContainer alignTop={top}>
{isDismissable &&
<div className={'close-icon'} onClick={() => setRender(false)}>
<svg xmlns={'http://www.w3.org/2000/svg'} fill={'none'} viewBox={'0 0 24 24'} stroke={'currentColor'}>
<path
strokeLinecap={'round'}
strokeLinejoin={'round'}
strokeWidth={'2'}
d={'M6 18L18 6M6 6l12 12'}
/>
</svg>
</div>
}
{showSpinnerOverlay &&
<Fade timeout={150} appear in>
<div
css={tw`absolute w-full h-full rounded flex items-center justify-center`}
style={{ background: 'hsla(211, 10%, 53%, 0.35)', zIndex: 9999 }}
>
<Spinner/>
{isDismissable && (
<div className={'close-icon'} onClick={() => setRender(false)}>
<svg
xmlns={'http://www.w3.org/2000/svg'}
fill={'none'}
viewBox={'0 0 24 24'}
stroke={'currentColor'}
>
<path
strokeLinecap={'round'}
strokeLinejoin={'round'}
strokeWidth={'2'}
d={'M6 18L18 6M6 6l12 12'}
/>
</svg>
</div>
</Fade>
}
<div css={tw`bg-neutral-800 p-3 sm:p-4 md:p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
)}
{showSpinnerOverlay && (
<Fade timeout={150} appear in>
<div
css={tw`absolute w-full h-full rounded flex items-center justify-center`}
style={{ background: 'hsla(211, 10%, 53%, 0.35)', zIndex: 9999 }}
>
<Spinner />
</div>
</Fade>
)}
<div
css={tw`bg-neutral-800 p-3 sm:p-4 md:p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}
>
{children}
</div>
</ModalContainer>

8
resources/scripts/components/elements/PageContentBlock.tsx
View File

@ -15,15 +15,13 @@ const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey
if (title) {
document.title = title;
}
}, [ title ]);
}, [title]);
return (
<CSSTransition timeout={150} classNames={'fade'} appear in>
<>
<ContentContainer css={tw`my-4 sm:my-10`} className={className}>
{showFlashKey &&
<FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
}
{showFlashKey && <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`} />}
{children}
</ContentContainer>
<ContentContainer css={tw`mb-4`}>
@ -36,7 +34,7 @@ const PageContentBlock: React.FC<PageContentBlockProps> = ({ title, showFlashKey
>
Pterodactyl&reg;
</a>
&nbsp;&copy; 2015 - {(new Date()).getFullYear()}
&nbsp;&copy; 2015 - {new Date().getFullYear()}
</p>
</ContentContainer>
</>

46
resources/scripts/components/elements/Pagination.tsx
View File

@ -22,13 +22,13 @@ interface Props<T> {
const Block = styled(Button)`
${tw`p-0 w-10 h-10`}
&:not(:last-of-type) {
${tw`mr-2`};
}
`;
function Pagination<T> ({ data: { items, pagination }, onPageSelect, children }: Props<T>) {
function Pagination<T>({ data: { items, pagination }, onPageSelect, children }: Props<T>) {
const isFirstPage = pagination.currentPage === 1;
const isLastPage = pagination.currentPage >= pagination.totalPages;
@ -46,19 +46,14 @@ function Pagination<T> ({ data: { items, pagination }, onPageSelect, children }:
return (
<>
{children({ items, isFirstPage, isLastPage })}
{(pages.length > 1) &&
<div css={tw`mt-4 flex justify-center`}>
{(pages[0] > 1 && !isFirstPage) &&
<Block
isSecondary
color={'primary'}
onClick={() => onPageSelect(1)}
>
<FontAwesomeIcon icon={faAngleDoubleLeft}/>
</Block>
}
{
pages.map(i => (
{pages.length > 1 && (
<div css={tw`mt-4 flex justify-center`}>
{pages[0] > 1 && !isFirstPage && (
<Block isSecondary color={'primary'} onClick={() => onPageSelect(1)}>
<FontAwesomeIcon icon={faAngleDoubleLeft} />
</Block>
)}
{pages.map((i) => (
<Block
isSecondary={pagination.currentPage !== i}
color={'primary'}
@ -67,19 +62,14 @@ function Pagination<T> ({ data: { items, pagination }, onPageSelect, children }:
>
{i}
</Block>
))
}
{(pages[4] < pagination.totalPages && !isLastPage) &&
<Block
isSecondary
color={'primary'}
onClick={() => onPageSelect(pagination.totalPages)}
>
<FontAwesomeIcon icon={faAngleDoubleRight}/>
</Block>
}
</div>
}
))}
{pages[4] < pagination.totalPages && !isLastPage && (
<Block isSecondary color={'primary'} onClick={() => onPageSelect(pagination.totalPages)}>
<FontAwesomeIcon icon={faAngleDoubleRight} />
</Block>
)}
</div>
)}
</>
);
}

11
resources/scripts/components/elements/PermissionRoute.tsx
View File

@ -11,20 +11,17 @@ interface Props extends Omit<RouteProps, 'path'> {
export default ({ permission, children, ...props }: Props) => (
<Route {...props}>
{!permission ?
{!permission ? (
children
:
) : (
<Can
action={permission}
renderOnError={
<ServerError
title={'Access Denied'}
message={'You do not have permission to access this page.'}
/>
<ServerError title={'Access Denied'} message={'You do not have permission to access this page.'} />
}
>
{children}
</Can>
}
)}
</Route>
);

24
resources/scripts/components/elements/ProgressBar.tsx
View File

@ -14,10 +14,10 @@ const BarFill = styled.div`
export default () => {
const interval = useRef<number>(null);
const timeout = useRef<number>(null);
const [ visible, setVisible ] = useState(false);
const progress = useStoreState(state => state.progress.progress);
const continuous = useStoreState(state => state.progress.continuous);
const setProgress = useStoreActions(actions => actions.progress.setProgress);
const [visible, setVisible] = useState(false);
const progress = useStoreState((state) => state.progress.progress);
const continuous = useStoreState((state) => state.progress.continuous);
const setProgress = useStoreActions((actions) => actions.progress.setProgress);
useEffect(() => {
return () => {
@ -33,7 +33,7 @@ export default () => {
// @ts-ignore
timeout.current = setTimeout(() => setProgress(undefined), 500);
}
}, [ progress ]);
}, [progress]);
useEffect(() => {
if (!continuous) {
@ -44,7 +44,7 @@ export default () => {
if (!progress || progress === 0) {
setProgress(randomInt(20, 30));
}
}, [ continuous ]);
}, [continuous]);
useEffect(() => {
if (continuous) {
@ -56,18 +56,12 @@ export default () => {
interval.current = setTimeout(() => setProgress(progress + randomInt(1, 5)), 500);
}
}
}, [ progress, continuous ]);
}, [progress, continuous]);
return (
<div css={tw`w-full fixed`} style={{ height: '2px' }}>
<CSSTransition
timeout={150}
appear
in={visible}
unmountOnExit
classNames={'fade'}
>
<BarFill style={{ width: progress === undefined ? '100%' : `${progress}%` }}/>
<CSSTransition timeout={150} appear in={visible} unmountOnExit classNames={'fade'}>
<BarFill style={{ width: progress === undefined ? '100%' : `${progress}%` }} />
</CSSTransition>
</div>
);

34
resources/scripts/components/elements/ScreenBlock.tsx
View File

@ -43,22 +43,22 @@ const ActionButton = styled(Button)`
const ScreenBlock = ({ title, image, message, onBack, onRetry }: ScreenBlockProps) => (
<PageContentBlock>
<div css={tw`flex justify-center`}>
<div css={tw`w-full sm:w-3/4 md:w-1/2 p-12 md:p-20 bg-neutral-100 rounded-lg shadow-lg text-center relative`}>
{(typeof onBack === 'function' || typeof onRetry === 'function') &&
<div css={tw`absolute left-0 top-0 ml-4 mt-4`}>
<ActionButton
onClick={() => onRetry ? onRetry() : (onBack ? onBack() : null)}
className={onRetry ? 'hover:spin' : undefined}
>
<FontAwesomeIcon icon={onRetry ? faSyncAlt : faArrowLeft}/>
</ActionButton>
</div>
}
<img src={image} css={tw`w-2/3 h-auto select-none mx-auto`}/>
<div
css={tw`w-full sm:w-3/4 md:w-1/2 p-12 md:p-20 bg-neutral-100 rounded-lg shadow-lg text-center relative`}
>
{(typeof onBack === 'function' || typeof onRetry === 'function') && (
<div css={tw`absolute left-0 top-0 ml-4 mt-4`}>
<ActionButton
onClick={() => (onRetry ? onRetry() : onBack ? onBack() : null)}
className={onRetry ? 'hover:spin' : undefined}
>
<FontAwesomeIcon icon={onRetry ? faSyncAlt : faArrowLeft} />
</ActionButton>
</div>
)}
<img src={image} css={tw`w-2/3 h-auto select-none mx-auto`} />
<h2 css={tw`mt-10 text-neutral-900 font-bold text-4xl`}>{title}</h2>
<p css={tw`text-sm text-neutral-700 mt-2`}>
{message}
</p>
<p css={tw`text-sm text-neutral-700 mt-2`}>{message}</p>
</div>
</div>
</PageContentBlock>
@ -66,10 +66,10 @@ const ScreenBlock = ({ title, image, message, onBack, onRetry }: ScreenBlockProp
type ServerErrorProps = (Omit<PropsWithBack, 'image' | 'title'> | Omit<PropsWithRetry, 'image' | 'title'>) & {
title?: string;
}
};
const ServerError = ({ title, ...props }: ServerErrorProps) => (
<ScreenBlock title={title || 'Something went wrong'} image={ServerErrorSvg} {...props}/>
<ScreenBlock title={title || 'Something went wrong'} image={ServerErrorSvg} {...props} />
);
const NotFound = ({ title, message, onBack }: Partial<Pick<ScreenBlockProps, 'title' | 'message' | 'onBack'>>) => (

25
resources/scripts/components/elements/Select.tsx
View File

@ -8,7 +8,9 @@ interface Props {
const Select = styled.select<Props>`
${tw`shadow-none block p-3 pr-8 rounded border w-full text-sm transition-colors duration-150 ease-linear`};
&, &:hover:not(:disabled), &:focus {
&,
&:hover:not(:disabled),
&:focus {
${tw`outline-none`};
}
@ -22,15 +24,18 @@ const Select = styled.select<Props>`
&::-ms-expand {
display: none;
}
${props => !props.hideDropdownArrow && css`
${tw`bg-neutral-600 border-neutral-500 text-neutral-200`};
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
&:hover:not(:disabled), &:focus {
${tw`border-neutral-400`};
}
`};
${(props) =>
!props.hideDropdownArrow &&
css`
${tw`bg-neutral-600 border-neutral-500 text-neutral-200`};
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
&:hover:not(:disabled),
&:focus {
${tw`border-neutral-400`};
}
`};
`;
export default Select;

2
resources/scripts/components/elements/ServerContentBlock.tsx
View File

@ -7,7 +7,7 @@ interface Props extends PageContentBlockProps {
}
const ServerContentBlock: React.FC<Props> = ({ title, children, ...props }) => {
const name = ServerContext.useStoreState(state => state.server.data!.name);
const name = ServerContext.useStoreState((state) => state.server.data!.name);
return (
<PageContentBlock title={`${name} | ${title}`} {...props}>

44
resources/scripts/components/elements/Spinner.tsx
View File

@ -25,30 +25,30 @@ const SpinnerComponent = styled.div<Props>`
${tw`w-8 h-8`};
border-width: 3px;
border-radius: 50%;
animation: ${spin} 1s cubic-bezier(0.55, 0.25, 0.25, 0.70) infinite;
animation: ${spin} 1s cubic-bezier(0.55, 0.25, 0.25, 0.7) infinite;
${props => props.size === 'small' ? tw`w-4 h-4 border-2` : (props.size === 'large' ? css`
${tw`w-16 h-16`};
border-width: 6px;
` : null)};
${(props) =>
props.size === 'small'
? tw`w-4 h-4 border-2`
: props.size === 'large'
? css`
${tw`w-16 h-16`};
border-width: 6px;
`
: null};
border-color: ${props => !props.isBlue ? 'rgba(255, 255, 255, 0.2)' : 'hsla(212, 92%, 43%, 0.2)'};
border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
border-color: ${(props) => (!props.isBlue ? 'rgba(255, 255, 255, 0.2)' : 'hsla(212, 92%, 43%, 0.2)')};
border-top-color: ${(props) => (!props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)')};
`;
const Spinner: Spinner = ({ centered, ...props }) => (
centered ?
<div
css={[
tw`flex justify-center items-center`,
props.size === 'large' ? tw`m-20` : tw`m-6`,
]}
>
<SpinnerComponent {...props}/>
const Spinner: Spinner = ({ centered, ...props }) =>
centered ? (
<div css={[tw`flex justify-center items-center`, props.size === 'large' ? tw`m-20` : tw`m-6`]}>
<SpinnerComponent {...props} />
</div>
:
<SpinnerComponent {...props}/>
);
) : (
<SpinnerComponent {...props} />
);
Spinner.displayName = 'Spinner';
Spinner.Size = {
@ -58,10 +58,8 @@ Spinner.Size = {
};
Spinner.Suspense = ({ children, centered = true, size = Spinner.Size.LARGE, ...props }) => (
<Suspense fallback={<Spinner centered={centered} size={size} {...props}/>}>
<ErrorBoundary>
{children}
</ErrorBoundary>
<Suspense fallback={<Spinner centered={centered} size={size} {...props} />}>
<ErrorBoundary>{children}</ErrorBoundary>
</Suspense>
);
Spinner.Suspense.displayName = 'Spinner.Suspense';

2
resources/scripts/components/elements/SpinnerOverlay.tsx
View File

@ -19,7 +19,7 @@ const SpinnerOverlay: React.FC<Props> = ({ size, fixed, visible, backgroundOpaci
]}
style={{ background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }}
>
<Spinner size={size}/>
<Spinner size={size} />
{children && (typeof children === 'string' ? <p css={tw`mt-4 text-neutral-400`}>{children}</p> : children)}
</div>
</Fade>

6
resources/scripts/components/elements/SubNavigation.tsx
View File

@ -8,7 +8,8 @@ const SubNavigation = styled.div`
${tw`flex items-center text-sm mx-auto px-2`};
max-width: 1200px;
& > a, & > div {
& > a,
& > div {
${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-nowrap transition-all duration-150`};
&:not(:first-of-type) {
@ -19,7 +20,8 @@ const SubNavigation = styled.div`
${tw`text-neutral-100`};
}
&:active, &.active {
&:active,
&.active {
${tw`text-neutral-100`};
box-shadow: inset 0 -2px ${theme`colors.cyan.600`.toString()};
}

53
resources/scripts/components/elements/Switch.tsx
View File

@ -8,7 +8,7 @@ import Input from '@/components/elements/Input';
const ToggleContainer = styled.div`
${tw`relative select-none w-12 leading-normal`};
& > input[type="checkbox"] {
& > input[type='checkbox'] {
${tw`hidden`};
&:checked + label {
@ -30,7 +30,7 @@ const ToggleContainer = styled.div`
right: calc(50% + 0.125rem);
//width: 1.25rem;
//height: 1.25rem;
content: "";
content: '';
transition: all 75ms ease-in;
}
}
@ -52,35 +52,28 @@ const Switch = ({ name, label, description, defaultChecked, readOnly, onChange,
return (
<div css={tw`flex items-center`}>
<ToggleContainer css={tw`flex-none`}>
{children
|| <Input
id={uuid}
name={name}
type={'checkbox'}
onChange={e => onChange && onChange(e)}
defaultChecked={defaultChecked}
disabled={readOnly}
/>
}
<Label htmlFor={uuid}/>
{children || (
<Input
id={uuid}
name={name}
type={'checkbox'}
onChange={(e) => onChange && onChange(e)}
defaultChecked={defaultChecked}
disabled={readOnly}
/>
)}
<Label htmlFor={uuid} />
</ToggleContainer>
{(label || description) &&
<div css={tw`ml-4 w-full`}>
{label &&
<Label
css={[ tw`cursor-pointer`, !!description && tw`mb-0` ]}
htmlFor={uuid}
>
{label}
</Label>
}
{description &&
<p css={tw`text-neutral-400 text-sm mt-2`}>
{description}
</p>
}
</div>
}
{(label || description) && (
<div css={tw`ml-4 w-full`}>
{label && (
<Label css={[tw`cursor-pointer`, !!description && tw`mb-0`]} htmlFor={uuid}>
{label}
</Label>
)}
{description && <p css={tw`text-neutral-400 text-sm mt-2`}>{description}</p>}
</div>
)}
</div>
);
};

13
resources/scripts/components/elements/TitledGreyBox.tsx
View File

@ -14,17 +14,16 @@ interface Props {
const TitledGreyBox = ({ icon, title, children, className }: Props) => (
<div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
<div css={tw`bg-neutral-900 rounded-t p-3 border-b border-black`}>
{typeof title === 'string' ?
{typeof title === 'string' ? (
<p css={tw`text-sm uppercase`}>
{icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
{icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`} />}
{title}
</p>
:
) : (
title
}
</div>
<div css={tw`p-3`}>
{children}
)}
</div>
<div css={tw`p-3`}>{children}</div>
</div>
);

30
resources/scripts/components/elements/activity/ActivityLogEntry.tsx
View File

@ -25,9 +25,12 @@ const formatProperties = (properties: Record<string, unknown>): Record<string, u
return {
...obj,
[key]: isCount || typeof value !== 'string'
? (isObject(value) ? formatProperties(value) : value)
: `<strong>${value}</strong>`,
[key]:
isCount || typeof value !== 'string'
? isObject(value)
? formatProperties(value)
: value
: `<strong>${value}</strong>`,
};
}, {});
};
@ -58,16 +61,18 @@ export default ({ activity, children }: Props) => {
{activity.event}
</Link>
<div className={classNames(style.icons, 'group-hover:text-gray-300')}>
{activity.isApi &&
{activity.isApi && (
<Tooltip placement={'top'} content={'Performed using API Key'}>
<span><TerminalIcon/></span>
<span>
<TerminalIcon />
</span>
</Tooltip>
}
)}
{children}
</div>
</div>
<p className={style.description}>
<Translate ns={'activity'} values={properties} i18nKey={activity.event.replace(':', '.')}/>
<Translate ns={'activity'} values={properties} i18nKey={activity.event.replace(':', '.')} />
</p>
<div className={'mt-1 flex items-center text-sm'}>
<Link
@ -77,17 +82,12 @@ export default ({ activity, children }: Props) => {
{activity.ip}
</Link>
<span className={'text-gray-400'}>&nbsp;|&nbsp;</span>
<Tooltip
placement={'right'}
content={format(activity.timestamp, 'MMM do, yyyy H:mm:ss')}
>
<span>
{formatDistanceToNowStrict(activity.timestamp, { addSuffix: true })}
</span>
<Tooltip placement={'right'} content={format(activity.timestamp, 'MMM do, yyyy H:mm:ss')}>
<span>{formatDistanceToNowStrict(activity.timestamp, { addSuffix: true })}</span>
</Tooltip>
</div>
</div>
{activity.hasAdditionalMetadata && <ActivityLogMetaButton meta={activity.properties}/>}
{activity.hasAdditionalMetadata && <ActivityLogMetaButton meta={activity.properties} />}
</div>
</div>
);

Some files were not shown because too many files have changed in this diff Show More