ui(account): add security key management

resources/scripts/api/account/webauthn/getWebauthnKeys.ts

@@ -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);
     });
 };

resources/scripts/api/account/webauthn/registerKey.ts

@@ -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);
     });
 };

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -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'}>

resources/scripts/components/dashboard/SecurityKeyContainer.tsx

@@ -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>
+    );
+};

resources/scripts/routers/DashboardRouter.tsx

@@ -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>

routes/api-client.php

@@ -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);
 });
 
 /*

routes/auth.php

@@ -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.