Add base support for creating a new API key for an account
This commit is contained in:
Dane Everitt
parent
32f25170f1
commit
933a4733e8
17 changed files with 371 additions and 13 deletions
17
resources/scripts/api/account/createApiKey.ts
Normal file
17
resources/scripts/api/account/createApiKey.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import http from '@/api/http';
|
||||
import { ApiKey, rawDataToApiKey } from '@/api/account/getApiKeys';
|
||||
|
||||
export default (description: string, allowedIps: string): Promise<ApiKey & { secretToken: string }> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http.post(`/api/client/account/api-keys`, {
|
||||
description,
|
||||
// eslint-disable-next-line @typescript-eslint/camelcase
|
||||
allowed_ips: allowedIps.length > 0 ? allowedIps.split('\n') : [],
|
||||
})
|
||||
.then(({ data }) => resolve({
|
||||
...rawDataToApiKey(data.attributes),
|
||||
secretToken: data.meta?.secret_token ?? '',
|
||||
}))
|
||||
.catch(reject);
|
||||
});
|
||||
};
|
||||
25
resources/scripts/api/account/getApiKeys.ts
Normal file
25
resources/scripts/api/account/getApiKeys.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import http from '@/api/http';
|
||||
|
||||
export interface ApiKey {
|
||||
identifier: string;
|
||||
description: string;
|
||||
allowedIps: string[];
|
||||
createdAt: Date | null;
|
||||
lastUsedAt: Date | null;
|
||||
}
|
||||
|
||||
export const rawDataToApiKey = (data: any): ApiKey => ({
|
||||
identifier: data.identifier,
|
||||
description: data.description,
|
||||
allowedIps: data.allowed_ips,
|
||||
createdAt: data.created_at ? new Date(data.created_at) : null,
|
||||
lastUsedAt: data.last_used_at ? new Date(data.last_used_at) : null,
|
||||
});
|
||||
|
||||
export default (): Promise<ApiKey[]> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
http.get('/api/client/account/api-keys')
|
||||
.then(({ data }) => resolve((data.data || []).map(rawDataToApiKey)))
|
||||
.catch(reject);
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react';
|
||||
import ContentBox from '@/components/elements/ContentBox';
|
||||
import CreateApiKeyForm from '@/components/dashboard/forms/CreateApiKeyForm';
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<div className={'my-10 flex'}>
|
||||
<ContentBox title={'Create API Key'} className={'flex-1'} showFlashes={'account'}>
|
||||
<CreateApiKeyForm/>
|
||||
</ContentBox>
|
||||
<ContentBox title={'API Keys'} className={'ml-10 flex-1'}>
|
||||
<p>Testing</p>
|
||||
</ContentBox>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Field, Form, Formik, FormikHelpers } from 'formik';
|
||||
import { object, string } from 'yup';
|
||||
import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
|
||||
import Modal from '@/components/elements/Modal';
|
||||
import createApiKey from '@/api/account/createApiKey';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationStore } from '@/state';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
|
||||
interface Values {
|
||||
description: string;
|
||||
allowedIps: string;
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const [ apiKey, setApiKey ] = useState('');
|
||||
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
|
||||
const submit = (values: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
|
||||
clearFlashes('account');
|
||||
createApiKey(values.description, values.allowedIps)
|
||||
.then(key => {
|
||||
resetForm();
|
||||
setSubmitting(false);
|
||||
setApiKey(`${key.identifier}.${key.secretToken}`);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
|
||||
addError({ key: 'account', message: httpErrorToHuman(error) });
|
||||
setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
visible={apiKey.length > 0}
|
||||
onDismissed={() => setApiKey('')}
|
||||
closeOnEscape={false}
|
||||
closeOnBackground={false}
|
||||
>
|
||||
<h3 className={'mb-6'}>Your API Key</h3>
|
||||
<p className={'text-sm mb-6'}>
|
||||
The API key you have requested is shown below. Please store this in a safe location, it will not be
|
||||
shown again.
|
||||
</p>
|
||||
<pre className={'text-sm bg-neutral-900 rounded py-2 px-4 font-mono'}>
|
||||
<code className={'font-mono'}>{apiKey}</code>
|
||||
</pre>
|
||||
<div className={'flex justify-end mt-6'}>
|
||||
<button
|
||||
type={'button'}
|
||||
className={'btn btn-secondary btn-sm'}
|
||||
onClick={() => setApiKey('')}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<Formik
|
||||
onSubmit={submit}
|
||||
initialValues={{
|
||||
description: '',
|
||||
allowedIps: '',
|
||||
}}
|
||||
validationSchema={object().shape({
|
||||
allowedIps: string(),
|
||||
description: string().required().min(4),
|
||||
})}
|
||||
>
|
||||
{({ isSubmitting }) => (
|
||||
<Form>
|
||||
<SpinnerOverlay visible={isSubmitting}/>
|
||||
<FormikFieldWrapper
|
||||
label={'Description'}
|
||||
name={'description'}
|
||||
description={'A description of this API key.'}
|
||||
className={'mb-6'}
|
||||
>
|
||||
<Field name={'description'} className={'input-dark'}/>
|
||||
</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.'}
|
||||
>
|
||||
<Field
|
||||
as={'textarea'}
|
||||
name={'allowedIps'}
|
||||
className={'input-dark h-32'}
|
||||
/>
|
||||
</FormikFieldWrapper>
|
||||
<div className={'flex justify-end mt-6'}>
|
||||
<button className={'btn btn-primary btn-sm'}>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -4,6 +4,7 @@ import classNames from 'classnames';
|
|||
import InputError from '@/components/elements/InputError';
|
||||
|
||||
interface Props {
|
||||
id?: string;
|
||||
name: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
|
|
@ -12,12 +13,12 @@ interface Props {
|
|||
validate?: (value: any) => undefined | string | Promise<any>;
|
||||
}
|
||||
|
||||
const FormikFieldWrapper = ({ name, label, className, description, validate, children }: Props) => (
|
||||
const FormikFieldWrapper = ({ id, name, label, className, description, validate, children }: Props) => (
|
||||
<Field name={name} validate={validate}>
|
||||
{
|
||||
({ field, form: { errors, touched } }: FieldProps) => (
|
||||
<div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
|
||||
{label && <label htmlFor={name}>{label}</label>}
|
||||
{label && <label htmlFor={id} className={'input-dark-label'}>{label}</label>}
|
||||
{children}
|
||||
<InputError errors={errors} touched={touched} name={field.name}>
|
||||
{description ? <p className={'input-help'}>{description}</p> : null}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,28 @@
|
|||
import * as React from 'react';
|
||||
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
|
||||
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
|
||||
import DesignElementsContainer from '@/components/dashboard/DesignElementsContainer';
|
||||
import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
|
||||
import NavigationBar from '@/components/NavigationBar';
|
||||
import DashboardContainer from '@/components/dashboard/DashboardContainer';
|
||||
import TransitionRouter from '@/TransitionRouter';
|
||||
import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
|
||||
|
||||
export default ({ location }: RouteComponentProps) => (
|
||||
<React.Fragment>
|
||||
<NavigationBar/>
|
||||
{location.pathname.startsWith('/account') &&
|
||||
<div id={'sub-navigation'}>
|
||||
<div className={'items'}>
|
||||
<NavLink to={`/account`} exact>Settings</NavLink>
|
||||
<NavLink to={`/account/api`}>API Credentials</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<TransitionRouter>
|
||||
<Switch location={location}>
|
||||
<Route path={'/'} component={DashboardContainer} exact/>
|
||||
<Route path={'/account'} component={AccountOverviewContainer}/>
|
||||
<Route path={'/account'} component={AccountOverviewContainer} exact/>
|
||||
<Route path={'/account/api'} component={AccountApiContainer} exact/>
|
||||
<Route path={'/design'} component={DesignElementsContainer}/>
|
||||
</Switch>
|
||||
</TransitionRouter>
|
||||
|
|
|
|||
|
|
@ -65,12 +65,8 @@ input[type=number] {
|
|||
@apply .text-xs .text-neutral-400;
|
||||
}
|
||||
|
||||
&.error {
|
||||
@apply .text-red-100 .border-red-400;
|
||||
}
|
||||
|
||||
&.error + .input-help {
|
||||
@apply .text-red-400;
|
||||
@apply .text-red-400 !important;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -78,11 +74,15 @@ input[type=number] {
|
|||
}
|
||||
}
|
||||
|
||||
.has-error .input-dark:not(select), .input-dark.error {
|
||||
@apply .text-red-100 .border-red-400;
|
||||
}
|
||||
|
||||
.input-help {
|
||||
@apply .text-xs .text-neutral-400 .pt-2;
|
||||
|
||||
&.error {
|
||||
@apply .text-red-400;
|
||||
@apply .text-red-400 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue