Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use SWR for security key index

Browse source
This commit is contained in:
Dane Everitt 2022-02-13 15:44:19 -05:00
parent b43e8835bb
commit 9032699deb
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 135 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/Services/Users/SecurityKeys/StoreSecurityKeyService.php
View file

@ -61,7 +61,7 @@ class StoreSecurityKeyService
// void — so we need to just query the database immediately after this to pull the information
// we just stored to return to the caller.
/** @var \Pterodactyl\Models\SecurityKey $key */
$key = $user->securityKeys()->forceCreate([
$key = $user->securityKeys()->make()->forceFill([
'uuid' => Uuid::uuid4(),
'name' => $this->keyName ?? 'Security Key (' . Str::random() . ')',
'public_key_id' => $source->getPublicKeyCredentialId(),
@ -76,6 +76,8 @@ class StoreSecurityKeyService
'other_ui' => $source->getOtherUI(),
]);
$key->saveOrFail();
return $key;
}
}

22
resources/scripts/api/account/webauthn/security-keys.ts Normal file
View file

@ -0,0 +1,22 @@
import useSWR, { SWRConfiguration, SWRResponse } from 'swr';
import { useStoreState } from '@/state/hooks';
import http, { FractalResponseList } from '@/api/http';
import Transformers from '@transformers';
import { SecurityKey } from '@models';
import { AxiosError } from 'axios';
const useSecurityKeys = (config?: SWRConfiguration<SecurityKey[], AxiosError>): SWRResponse<SecurityKey[], AxiosError> => {
const uuid = useStoreState(state => state.user.data!.uuid);
return useSWR<SecurityKey[], AxiosError>(
[ 'account', uuid, 'security-keys' ],
async (): Promise<SecurityKey[]> => {
const { data } = await http.get('/api/client/account/security-keys');
return (data as FractalResponseList).data.map((datum) => Transformers.toSecurityKey(datum.attributes));
},
config,
);
};
export { useSecurityKeys };

11
resources/scripts/api/types/models.d.ts vendored Normal file
View file

@ -0,0 +1,11 @@
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface Model {}
interface SecurityKey extends Model {
uuid: string;
name: string;
type: 'public-key';
publicKeyId: string;
createdAt: Date;
updatedAt: Date;
}

14
resources/scripts/api/types/transformers.ts Normal file
View file

@ -0,0 +1,14 @@
import * as Models from '@models';
export default class Transformers {
static toSecurityKey (data: Record<string, any>): Models.SecurityKey {
return {
uuid: data.uuid,
name: data.name,
type: data.type,
publicKeyId: data.public_key_id,
createdAt: new Date(data.created_at),
updatedAt: new Date(data.updated_at),
};
}
}

107
resources/scripts/components/dashboard/SecurityKeyContainer.tsx
View file

@ -6,7 +6,7 @@ import { object, string } from 'yup';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFingerprint, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import deleteWebauthnKey from '@/api/account/webauthn/deleteSecurityKey';
import getWebauthnKeys, { SecurityKey } from '@/api/account/webauthn/getSecurityKeys';
import { SecurityKey } from '@/api/account/webauthn/getSecurityKeys';
import registerSecurityKey from '@/api/account/webauthn/registerSecurityKey';
import FlashMessageRender from '@/components/FlashMessageRender';
import Button from '@/components/elements/Button';
@ -15,8 +15,9 @@ import Field from '@/components/elements/Field';
import GreyRowBox from '@/components/elements/GreyRowBox';
import PageContentBlock from '@/components/elements/PageContentBlock';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useFlash from '@/plugins/useFlash';
import useFlash, { useFlashKey } from '@/plugins/useFlash';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import { useSecurityKeys } from '@/api/account/webauthn/security-keys';
interface Values {
name: string;
@ -68,91 +69,77 @@ const AddSecurityKeyForm = ({ onKeyAdded }: { onKeyAdded: (key: SecurityKey) =>
};
export default () => {
const { clearFlashes, clearAndAddHttpError } = useFlash();
const { clearFlashes, clearAndAddHttpError } = useFlashKey('security_keys');
const [ keys, setKeys ] = useState<SecurityKey[]>([]);
const [ loading, setLoading ] = useState(true);
const [ deleteId, setDeleteId ] = useState<string | null>(null);
const { data, mutate, error } = useSecurityKeys({ revalidateOnFocus: false });
const doDeletion = (uuid: string | null) => {
if (uuid === null) {
return;
}
const doDeletion = () => {
const uuid = deleteId;
clearFlashes('security_keys');
setDeleteId(null);
clearFlashes();
mutate(keys => !keys ? undefined : keys.filter(key => key.uuid !== deleteId));
deleteWebauthnKey(uuid)
.then(() => setKeys(s => ([
...(s || []).filter(key => key.uuid !== uuid),
])))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'security_keys', error });
});
if (!uuid) return;
deleteWebauthnKey(uuid).catch(error => {
clearAndAddHttpError(error);
mutate();
});
};
useEffect(() => {
clearFlashes('security_keys');
getWebauthnKeys()
.then(keys => setKeys(keys))
.then(() => setLoading(false))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'security_keys', error });
});
}, []);
clearAndAddHttpError(error);
}, [ error ]);
return (
<PageContentBlock title={'Security Keys'}>
<FlashMessageRender byKey={'security_keys'}/>
<div css={tw`md:flex flex-nowrap my-10`}>
<ContentBox title={'Add Security Key'} css={tw`flex-1 md:mr-8`}>
<AddSecurityKeyForm onKeyAdded={key => setKeys(s => ([ ...s!, key ]))}/>
<AddSecurityKeyForm onKeyAdded={key => mutate((keys) => (keys || []).concat(key))}/>
</ContentBox>
<ContentBox title={'Security Keys'} css={tw`flex-none w-full mt-8 md:mt-0 md:w-1/2`}>
<SpinnerOverlay visible={loading}/>
<ConfirmationModal
visible={!!deleteId}
title={'Confirm key deletion'}
buttonText={'Yes, delete key'}
onConfirmed={() => {
doDeletion(deleteId);
setDeleteId(null);
}}
buttonText={'Yes, Delete Key'}
onConfirmed={doDeletion}
onModalDismissed={() => setDeleteId(null)}
>
Are you sure you wish to delete this security key?
You will no longer be able to authenticate using this key.
</ConfirmationModal>
{keys.length === 0 ?
!loading ?
{!data ?
<SpinnerOverlay visible/>
:
data?.length === 0 ?
<p css={tw`text-center text-sm`}>
No security keys have been configured for this account.
</p>
: null
:
keys.map((key, index) => (
<GreyRowBox
key={index}
css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
>
<FontAwesomeIcon icon={faFingerprint} css={tw`text-neutral-300`}/>
<div css={tw`ml-4 flex-1 overflow-hidden`}>
<p css={tw`text-sm break-words`}>{key.name}</p>
<p css={tw`text-2xs text-neutral-300 uppercase`}>
Created at:&nbsp;
{key.createdAt ? format(key.createdAt, 'MMM do, yyyy HH:mm') : 'Never'}
</p>
</div>
<button css={tw`ml-4 p-2 text-sm`} onClick={() => setDeleteId(key.uuid)}>
<FontAwesomeIcon
icon={faTrashAlt}
css={tw`text-neutral-400 hover:text-red-400 transition-colors duration-150`}
/>
</button>
</GreyRowBox>
))
:
data.map((key, index) => (
<GreyRowBox
key={index}
css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
>
<FontAwesomeIcon icon={faFingerprint} css={tw`text-neutral-300`}/>
<div css={tw`ml-4 flex-1 overflow-hidden`}>
<p css={tw`text-sm break-words`}>{key.name}</p>
<p css={tw`text-2xs text-neutral-300 uppercase`}>
Created at:&nbsp;
{key.createdAt ? format(key.createdAt, 'MMM do, yyyy HH:mm') : 'Never'}
</p>
</div>
<button css={tw`ml-4 p-2 text-sm`} onClick={() => setDeleteId(key.uuid)}>
<FontAwesomeIcon
icon={faTrashAlt}
css={tw`text-neutral-400 hover:text-red-400 transition-colors duration-150`}
/>
</button>
</GreyRowBox>
))
}
</ContentBox>
</div>

21
resources/scripts/plugins/useFlash.ts
View file

@ -1,9 +1,24 @@
import { Actions, useStoreActions } from 'easy-peasy';
import { Actions } from 'easy-peasy';
import { FlashStore } from '@/state/flashes';
import { ApplicationStore } from '@/state';
import { useStoreActions } from '@/state/hooks';
const useFlash = (): Actions<FlashStore> => {
return useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
return useStoreActions(actions => actions.flashes);
};
interface KeyedFlashStore {
clearFlashes: () => void;
clearAndAddHttpError: (error?: Error | string | null) => void;
}
const useFlashKey = (key: string): KeyedFlashStore => {
const { clearFlashes, clearAndAddHttpError } = useFlash();
return {
clearFlashes: () => clearFlashes(key),
clearAndAddHttpError: (error) => clearAndAddHttpError({ key, error }),
};
};
export { useFlashKey };
export default useFlash;

15
resources/scripts/state/flashes.ts
View file

@ -6,7 +6,7 @@ export interface FlashStore {
items: FlashMessage[];
addFlash: Action<FlashStore, FlashMessage>;
addError: Action<FlashStore, { message: string; key?: string }>;
clearAndAddHttpError: Action<FlashStore, { error: any; key?: string }>;
clearAndAddHttpError: Action<FlashStore, { error?: Error | any | null; key?: string }>;
clearFlashes: Action<FlashStore, string | void>;
}
@ -30,9 +30,18 @@ const flashes: FlashStore = {
}),
clearAndAddHttpError: action((state, payload) => {
console.error(payload.error);
if (!payload.error) {
state.items = [];
} else {
console.error(payload.error);
state.items = [ { type: 'error', title: 'Error', key: payload.key, message: httpErrorToHuman(payload.error) } ];
state.items = [ {
type: 'error',
title: 'Error',
key: payload.key,
message: httpErrorToHuman(payload.error),
} ];
}
}),
clearFlashes: action((state, payload) => {

6
tsconfig.json
View file

@ -25,6 +25,12 @@
],
"@feature/*": [
"./resources/scripts/components/server/features/*"
],
"@models": [
"./resources/scripts/api/types/models.d.ts"
],
"@transformers": [
"./resources/scripts/api/types/transformers.ts"
]
},
"plugins": [

2
webpack.config.js
View file

@ -60,6 +60,8 @@ module.exports = {
extensions: ['.ts', '.tsx', '.js', '.json'],
alias: {
'@': path.join(__dirname, '/resources/scripts'),
'@models': path.join(__dirname, '/resources/scripts/api/types/models.d.ts'),
'@transformers': path.join(__dirname, '/resources/scripts/api/types/transformers.ts'),
'@feature': path.join(__dirname, '/resources/scripts/components/server/features'),
'react-dom': '@hot-loader/react-dom',
},