Apply new eslint rules; default to prettier for styling
This commit is contained in:
DaneEveritt
parent
f22cce8881
commit
dc84af9937
218 changed files with 3876 additions and 3564 deletions
57
.eslintrc.js
Normal file
57
.eslintrc.js
Normal 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'}],
|
||||
}
|
||||
};
|
||||
|
|
@ -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
16
package.json
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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> => {
|
||||
|
|
|
|||
|
|
@ -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.'));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
2
resources/scripts/api/definitions/index.d.ts
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.',
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export interface FileObject {
|
|||
key: string;
|
||||
name: string;
|
||||
mode: string;
|
||||
modeBits: string,
|
||||
modeBits: string;
|
||||
size: number;
|
||||
isFile: boolean;
|
||||
isSymlink: boolean;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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}`);
|
||||
|
|
|
|||
|
|
@ -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}` : ''}`, {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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[]> => {
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
};
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 || {}) }
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
|
|
|
|||
|
|
@ -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`}>
|
||||
© 2015 - {(new Date()).getFullYear()}
|
||||
© 2015 - {new Date().getFullYear()}
|
||||
<a
|
||||
rel={'noopener nofollow noreferrer'}
|
||||
href={'https://pterodactyl.io'}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
{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:
|
||||
{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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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()}>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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)}>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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`}>
|
||||
|
|
|
|||
|
|
@ -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'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'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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
{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:
|
||||
{format(key.createdAt, 'MMM do, yyyy HH:mm')}
|
||||
</p>
|
||||
</div>
|
||||
<DeleteSSHKeyButton name={key.name} fingerprint={key.fingerprint} />
|
||||
</GreyRowBox>
|
||||
))
|
||||
)}
|
||||
</ContentBox>
|
||||
</div>
|
||||
</PageContentBlock>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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 } }} />
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,87 +13,102 @@ 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`};
|
||||
${(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`};
|
||||
}
|
||||
`};
|
||||
&: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`};
|
||||
${(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`};
|
||||
}
|
||||
`};
|
||||
&: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`};
|
||||
${(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) {
|
||||
&: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`};
|
||||
${(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) {
|
||||
&: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.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`};
|
||||
${(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`};
|
||||
}
|
||||
`};
|
||||
&: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 }
|
||||
&: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;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 "{text}" to clipboard.</p>
|
||||
</div>
|
||||
</Toast>
|
||||
:
|
||||
) : (
|
||||
<></>
|
||||
}
|
||||
)}
|
||||
</Fade>
|
||||
</SwitchTransition>
|
||||
<CopyToClipboard onCopy={onCopy} text={text} options={{ debug: true }} css={tw`cursor-pointer`}>
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,16 +8,20 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -26,7 +30,7 @@ const Container = styled.div<{ timeout: number }>`
|
|||
|
||||
&.fade-exit-active {
|
||||
${tw`opacity-0 transition-opacity ease-in`};
|
||||
transition-duration: ${props => props.timeout}ms;
|
||||
transition-duration: ${(props) => props.timeout}ms;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,7 +4,7 @@ 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`};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@ export interface Props {
|
|||
|
||||
const light = css<Props>`
|
||||
${tw`bg-white border-neutral-200 text-neutral-800`};
|
||||
&:focus { ${tw`border-primary-400`} }
|
||||
&:focus {
|
||||
${tw`border-primary-400`}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
${tw`bg-neutral-100 border-neutral-200`};
|
||||
|
|
@ -43,40 +45,44 @@ const inputStyle = css<Props>`
|
|||
|
||||
& + .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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -8,18 +8,20 @@ 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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ 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 }>`
|
||||
|
|
@ -32,10 +32,12 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
|
|||
${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;
|
||||
|
||||
|
|
@ -43,7 +45,9 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
|
|||
${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`};
|
||||
|
|
@ -51,12 +55,22 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
|
|||
}
|
||||
`;
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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®
|
||||
</a>
|
||||
© 2015 - {(new Date()).getFullYear()}
|
||||
© 2015 - {new Date().getFullYear()}
|
||||
</p>
|
||||
</ContentContainer>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const Block = styled(Button)`
|
|||
}
|
||||
`;
|
||||
|
||||
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,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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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'>>) => (
|
||||
|
|
|
|||
|
|
@ -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`};
|
||||
}
|
||||
|
||||
|
|
@ -23,14 +25,17 @@ const Select = styled.select<Props>`
|
|||
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 ");
|
||||
${(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`};
|
||||
}
|
||||
`};
|
||||
&:hover:not(:disabled),
|
||||
&:focus {
|
||||
${tw`border-neutral-400`};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
export default Select;
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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()};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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'}> | </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
Loading…
Reference in a new issue