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

ui(account): add security key management

Browse source
This commit is contained in:
Matthew Penner 2021-07-17 13:20:03 -06:00
parent 31c2ef5279
commit 3c21770c25
7 changed files with 148 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/scripts/api/account/webauthn/getWebauthn.ts → resources/scripts/api/account/webauthn/getWebauthnKeys.ts
View file

@ -1,23 +1,23 @@
import http from '@/api/http';
export interface Key {
export interface WebauthnKey {
id: number;
name: string;
createdAt: Date;
lastUsedAt: Date;
}
export const rawDataToKey = (data: any): Key => ({
export const rawDataToWebauthnKey = (data: any): WebauthnKey => ({
id: data.id,
name: data.name,
createdAt: new Date(data.created_at),
lastUsedAt: new Date(data.last_used_at) || new Date(),
});
export default (): Promise<Key[]> => {
export default (): Promise<WebauthnKey[]> => {
return new Promise((resolve, reject) => {
http.get('/api/client/account/webauthn')
.then(({ data }) => resolve((data.data || []).map((d: any) => rawDataToKey(d.attributes))))
.then(({ data }) => resolve((data.data || []).map((d: any) => rawDataToWebauthnKey(d.attributes))))
.catch(reject);
});
};

6
resources/scripts/api/account/webauthn/registerKey.ts
View file

@ -1,5 +1,5 @@
import http from '@/api/http';
import { Key, rawDataToKey } from '@/api/account/webauthn/getWebauthn';
import { rawDataToWebauthnKey, WebauthnKey } from '@/api/account/webauthn/getWebauthnKeys';
export const base64Decode = (input: string): string => {
input = input.replace(/-/g, '+').replace(/_/g, '/');
@ -32,7 +32,7 @@ export const decodeCredentials = (credentials: PublicKeyCredentialDescriptor[])
});
};
export default (name: string): Promise<Key> => {
export default (name: string): Promise<WebauthnKey> => {
return new Promise((resolve, reject) => {
http.get('/api/client/account/webauthn/register').then((res) => {
const publicKey = res.data.public_key;
@ -67,7 +67,7 @@ export default (name: string): Promise<Key> => {
clientDataJSON: bufferEncode(response.clientDataJSON),
},
}),
}).then(({ data }) => resolve(rawDataToKey(data.attributes))).catch(reject);
}).then(({ data }) => resolve(rawDataToWebauthnKey(data.attributes))).catch(reject);
}).catch(reject);
});
};

2
resources/scripts/components/dashboard/AccountOverviewContainer.tsx
View file

@ -27,7 +27,7 @@ const Container = styled.div`
`;
export default () => {
const { state } = useLocation<undefined | { twoFactorRedirect?: boolean }>();
const { state } = useLocation<{ twoFactorRedirect?: boolean } | undefined>();
return (
<PageContentBlock title={'Account Overview'}>

127
resources/scripts/components/dashboard/SecurityKeyContainer.tsx Normal file
View file

@ -0,0 +1,127 @@
import React, { useEffect, useState } from 'react';
import { Form, Formik, FormikHelpers } from 'formik';
import tw from 'twin.macro';
import { object, string } from 'yup';
import getWebauthnKeys, { WebauthnKey } from '@/api/account/webauthn/getWebauthnKeys';
import registerKey from '@/api/account/webauthn/registerKey';
import FlashMessageRender from '@/components/FlashMessageRender';
import Button from '@/components/elements/Button';
import ContentBox from '@/components/elements/ContentBox';
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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faKey, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import { format } from 'date-fns';
interface Values {
name: string;
}
const AddSecurityKeyForm = ({ onKeyAdded }: { onKeyAdded: (key: WebauthnKey) => void }) => {
const { clearFlashes, clearAndAddHttpError } = useFlash();
const submit = ({ name }: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
clearFlashes('security_keys');
registerKey(name)
.then(key => {
resetForm();
setSubmitting(false);
onKeyAdded(key);
})
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'security_keys', error });
setSubmitting(false);
});
};
return (
<Formik
onSubmit={submit}
initialValues={{ name: '' }}
validationSchema={object().shape({
name: string().required(),
})}
>
{({ isSubmitting }) => (
<Form>
<SpinnerOverlay visible={isSubmitting}/>
<Field
type={'text'}
id={'name'}
name={'name'}
label={'Name'}
description={'A descriptive name for this security key.'}
/>
<div css={tw`flex justify-end mt-6`}>
<Button>Create</Button>
</div>
</Form>
)}
</Formik>
);
};
export default () => {
const { clearFlashes, clearAndAddHttpError } = useFlash();
const [ keys, setKeys ] = useState<WebauthnKey[]>([]);
const [ loading, setLoading ] = useState(true);
useEffect(() => {
clearFlashes('security_keys');
getWebauthnKeys()
.then(keys => setKeys(keys))
.then(() => setLoading(false))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'security_keys', error });
});
}, []);
return (
<PageContentBlock title={'Security Keys'}>
<FlashMessageRender byKey={'security_keys'}/>
<div css={tw`md:flex flex-nowrap my-10`}>
<ContentBox title={'Security Keys'} css={tw`flex-1 md:mr-8`}>
<SpinnerOverlay visible={loading}/>
{keys.length === 0 ?
!loading ?
<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={faKey} 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`}>
Last used:&nbsp;
{key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}
</p>
</div>
<button css={tw`ml-4 p-2 text-sm`}>
<FontAwesomeIcon
icon={faTrashAlt}
css={tw`text-neutral-400 hover:text-red-400 transition-colors duration-150`}
/>
</button>
</GreyRowBox>
))
}
</ContentBox>
<ContentBox title={'Add Security Key'} css={tw`flex-none w-full mt-8 md:mt-0 md:w-1/2`}>
<AddSecurityKeyForm onKeyAdded={key => setKeys(s => ([ ...s!, key ]))}/>
</ContentBox>
</div>
</PageContentBlock>
);
};

9
resources/scripts/routers/DashboardRouter.tsx
View file

@ -1,11 +1,12 @@
import React from 'react';
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
import TransitionRouter from '@/TransitionRouter';
import NavigationBar from '@/components/NavigationBar';
import DashboardContainer from '@/components/dashboard/DashboardContainer';
import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
import SecurityKeyContainer from '@/components/dashboard/SecurityKeyContainer';
import { NotFound } from '@/components/elements/ScreenBlock';
import TransitionRouter from '@/TransitionRouter';
import SubNavigation from '@/components/elements/SubNavigation';
export default ({ location }: RouteComponentProps) => (
@ -16,6 +17,7 @@ export default ({ location }: RouteComponentProps) => (
<div>
<NavLink to={'/account'} exact>Settings</NavLink>
<NavLink to={'/account/api'}>API Credentials</NavLink>
<NavLink to={'/account/keys/security'}>Security Keys</NavLink>
</div>
</SubNavigation>
}
@ -30,6 +32,9 @@ export default ({ location }: RouteComponentProps) => (
<Route path={'/account/api'} exact>
<AccountApiContainer/>
</Route>
<Route path={'/account/keys/security'} exact>
<SecurityKeyContainer/>
</Route>
<Route path={'*'}>
<NotFound/>
</Route>

5
routes/api-client.php
View file

@ -28,6 +28,11 @@ Route::group(['prefix' => '/account'], function () {
Route::get('/api-keys', 'ApiKeyController@index');
Route::post('/api-keys', 'ApiKeyController@store');
Route::delete('/api-keys/{identifier}', 'ApiKeyController@delete');
Route::get('/webauthn', 'WebauthnController@index')->withoutMiddleware(RequireTwoFactorAuthentication::class);
Route::get('/webauthn/register', 'WebauthnController@register')->withoutMiddleware(RequireTwoFactorAuthentication::class);
Route::post('/webauthn/register', 'WebauthnController@create')->withoutMiddleware(RequireTwoFactorAuthentication::class);
Route::delete('/webauthn/{id}', 'WebauthnController@deleteKey')->withoutMiddleware(RequireTwoFactorAuthentication::class);
});
/*

1
routes/auth.php
View file

@ -20,6 +20,7 @@ Route::group(['middleware' => 'guest'], function () {
// Login endpoints.
Route::post('/login', 'LoginController@login')->middleware('recaptcha');
Route::post('/login/checkpoint', 'LoginCheckpointController')->name('auth.login-checkpoint');
Route::post('/login/checkpoint/key', 'WebauthnController@auth');
// Forgot password route. A post to this endpoint will trigger an
// email to be sent containing a reset token.