dvkei/Pterodactyl-Panel
1
0
Fork 0
forked from Alex/Pterodactyl-Panel
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'develop' into feature/cross-env

Browse Source
This commit is contained in:
Dane Everitt 2020-03-23 10:03:17 -07:00 committed by GitHub
commit fcdb7cd2d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 667 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
app/Http/Controllers/Api/Client/ApiKeyController.php Normal file
View File

@ -0,0 +1,116 @@
<?php
namespace Pterodactyl\Http\Controllers\Api\Client;
use Pterodactyl\Models\ApiKey;
use Illuminate\Http\JsonResponse;
use Pterodactyl\Exceptions\DisplayException;
use Illuminate\Contracts\Encryption\Encrypter;
use Pterodactyl\Services\Api\KeyCreationService;
use Pterodactyl\Repositories\Eloquent\ApiKeyRepository;
use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
use Pterodactyl\Transformers\Api\Client\ApiKeyTransformer;
use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
use Pterodactyl\Http\Requests\Api\Client\Account\StoreApiKeyRequest;
class ApiKeyController extends ClientApiController
{
/**
* @var \Pterodactyl\Services\Api\KeyCreationService
*/
private $keyCreationService;
/**
* @var \Illuminate\Contracts\Encryption\Encrypter
*/
private $encrypter;
/**
* @var \Pterodactyl\Repositories\Eloquent\ApiKeyRepository
*/
private $repository;
/**
* ApiKeyController constructor.
*
* @param \Illuminate\Contracts\Encryption\Encrypter $encrypter
* @param \Pterodactyl\Services\Api\KeyCreationService $keyCreationService
* @param \Pterodactyl\Repositories\Eloquent\ApiKeyRepository $repository
*/
public function __construct(
Encrypter $encrypter,
KeyCreationService $keyCreationService,
ApiKeyRepository $repository
) {
parent::__construct();
$this->encrypter = $encrypter;
$this->keyCreationService = $keyCreationService;
$this->repository = $repository;
}
/**
* Returns all of the API keys that exist for the given client.
*
* @param \Pterodactyl\Http\Requests\Api\Client\ClientApiRequest $request
* @return array
*/
public function index(ClientApiRequest $request)
{
return $this->fractal->collection($request->user()->apiKeys)
->transformWith($this->getTransformer(ApiKeyTransformer::class))
->toArray();
}
/**
* Store a new API key for a user's account.
*
* @param \Pterodactyl\Http\Requests\Api\Client\Account\StoreApiKeyRequest $request
* @return array
*
* @throws \Pterodactyl\Exceptions\DisplayException
* @throws \Pterodactyl\Exceptions\Model\DataValidationException
*/
public function store(StoreApiKeyRequest $request)
{
if ($request->user()->apiKeys->count() >= 5) {
throw new DisplayException(
'You have reached the account limit for number of API keys.'
);
}
$key = $this->keyCreationService->setKeyType(ApiKey::TYPE_ACCOUNT)->handle([
'user_id' => $request->user()->id,
'memo' => $request->input('description'),
'allowed_ips' => $request->input('allowed_ips') ?? [],
]);
return $this->fractal->item($key)
->transformWith($this->getTransformer(ApiKeyTransformer::class))
->addMeta([
'secret_token' => $this->encrypter->decrypt($key->token),
])
->toArray();
}
/**
* Deletes a given API key.
*
* @param \Pterodactyl\Http\Requests\Api\Client\ClientApiRequest $request
* @param string $identifier
* @return \Illuminate\Http\JsonResponse
*/
public function delete(ClientApiRequest $request, string $identifier)
{
$response = $this->repository->deleteWhere([
'user_id' => $request->user()->id,
'identifier' => $identifier,
]);
if (! $response) {
throw new NotFoundHttpException;
}
return JsonResponse::create([], JsonResponse::HTTP_NO_CONTENT);
}
}

32
app/Http/Controllers/Api/Client/Servers/ServerController.php
View File

@ -3,12 +3,31 @@
namespace Pterodactyl\Http\Controllers\Api\Client\Servers;
use Pterodactyl\Models\Server;
use Pterodactyl\Repositories\Eloquent\SubuserRepository;
use Pterodactyl\Transformers\Api\Client\ServerTransformer;
use Pterodactyl\Exceptions\Repository\RecordNotFoundException;
use Pterodactyl\Http\Controllers\Api\Client\ClientApiController;
use Pterodactyl\Http\Requests\Api\Client\Servers\GetServerRequest;
class ServerController extends ClientApiController
{
/**
* @var \Pterodactyl\Repositories\Eloquent\SubuserRepository
*/
private $repository;
/**
* ServerController constructor.
*
* @param \Pterodactyl\Repositories\Eloquent\SubuserRepository $repository
*/
public function __construct(SubuserRepository $repository)
{
parent::__construct();
$this->repository = $repository;
}
/**
* Transform an individual server into a response that can be consumed by a
* client using the API.
@ -19,8 +38,21 @@ class ServerController extends ClientApiController
*/
public function index(GetServerRequest $request, Server $server): array
{
try {
$permissions = $this->repository->findFirstWhere([
'server_id' => $server->id,
'user_id' => $request->user()->id,
])->permissions;
} catch (RecordNotFoundException $exception) {
$permissions = [];
}
return $this->fractal->item($server)
->transformWith($this->getTransformer(ServerTransformer::class))
->addMeta([
'is_server_owner' => $request->user()->id === $server->owner_id,
'user_permissions' => $permissions,
])
->toArray();
}
}

20
app/Http/Requests/Api/Client/Account/StoreApiKeyRequest.php Normal file
View File

@ -0,0 +1,20 @@
<?php
namespace Pterodactyl\Http\Requests\Api\Client\Account;
use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
class StoreApiKeyRequest extends ClientApiRequest
{
/**
* @return array
*/
public function rules(): array
{
return [
'description' => 'required|string|min:4',
'allowed_ips' => 'array',
'allowed_ips.*' => 'ip',
];
}
}

14
app/Models/ApiKey.php
View File

@ -4,8 +4,22 @@ namespace Pterodactyl\Models;
use Pterodactyl\Services\Acl\Api\AdminAcl;
/**
* @property int $id
* @property int $user_id
* @property int $key_type
* @property string $identifier
* @property string $token
* @property array $allowed_ips
* @property string $memo
* @property \Carbon\Carbon|null $last_used_at
* @property \Carbon\Carbon $created_at
* @property \Carbon\Carbon $updated_at
*/
class ApiKey extends Validable
{
const RESOURCE_NAME = 'api_key';
/**
* Different API keys that can exist on the system.
*/

24
app/Models/Permission.php
View File

@ -286,28 +286,4 @@ class Permission extends Validable
return collect(self::$deprecatedPermissions);
}
/**
* Find permission by permission node.
*
* @param \Illuminate\Database\Query\Builder $query
* @param string $permission
* @return \Illuminate\Database\Query\Builder
*/
public function scopePermission($query, $permission)
{
return $query->where('permission', $permission);
}
/**
* Filter permission by server.
*
* @param \Illuminate\Database\Query\Builder $query
* @param \Pterodactyl\Models\Server $server
* @return \Illuminate\Database\Query\Builder
*/
public function scopeServer($query, Server $server)
{
return $query->where('server_id', $server->id);
}
}

9
app/Models/Subuser.php
View File

@ -8,12 +8,12 @@ use Illuminate\Notifications\Notifiable;
* @property int $id
* @property int $user_id
* @property int $server_id
* @property array $permissions
* @property \Carbon\Carbon $created_at
* @property \Carbon\Carbon $updated_at
*
* @property \Pterodactyl\Models\User $user
* @property \Pterodactyl\Models\Server $server
* @property \Pterodactyl\Models\Permission[]|\Illuminate\Database\Eloquent\Collection $permissions
*/
class Subuser extends Validable
{
@ -45,8 +45,9 @@ class Subuser extends Validable
* @var array
*/
protected $casts = [
'user_id' => 'integer',
'server_id' => 'integer',
'user_id' => 'int',
'server_id' => 'int',
'permissions' => 'array',
];
/**
@ -55,6 +56,8 @@ class Subuser extends Validable
public static $validationRules = [
'user_id' => 'required|numeric|exists:users,id',
'server_id' => 'required|numeric|exists:servers,id',
'permissions' => 'nullable|array',
'permissions.*' => 'string',
];
/**

10
app/Models/User.php
View File

@ -36,6 +36,7 @@ use Pterodactyl\Notifications\SendPasswordReset as ResetPasswordNotification;
* @property \Carbon\Carbon $updated_at
*
* @property string $name
* @property \Pterodactyl\Models\ApiKey[]|\Illuminate\Database\Eloquent\Collection $apiKeys
* @property \Pterodactyl\Models\Permission[]|\Illuminate\Database\Eloquent\Collection $permissions
* @property \Pterodactyl\Models\Server[]|\Illuminate\Database\Eloquent\Collection $servers
* @property \Pterodactyl\Models\Subuser[]|\Illuminate\Database\Eloquent\Collection $subuserOf
@ -258,4 +259,13 @@ class User extends Validable implements
{
return $this->hasMany(DaemonKey::class);
}
/**
* @return \Illuminate\Database\Eloquent\Relations\HasMany
*/
public function apiKeys()
{
return $this->hasMany(ApiKey::class)
->where('key_type', ApiKey::TYPE_ACCOUNT);
}
}

3
app/Providers/RepositoryServiceProvider.php
View File

@ -21,7 +21,6 @@ use Pterodactyl\Repositories\Eloquent\SettingsRepository;
use Pterodactyl\Repositories\Wings\DaemonPowerRepository;
use Pterodactyl\Repositories\Eloquent\DaemonKeyRepository;
use Pterodactyl\Repositories\Eloquent\AllocationRepository;
use Pterodactyl\Repositories\Eloquent\PermissionRepository;
use Pterodactyl\Repositories\Wings\DaemonCommandRepository;
use Pterodactyl\Contracts\Repository\EggRepositoryInterface;
use Pterodactyl\Repositories\Eloquent\EggVariableRepository;
@ -43,7 +42,6 @@ use Pterodactyl\Contracts\Repository\SettingsRepositoryInterface;
use Pterodactyl\Repositories\Wings\DaemonConfigurationRepository;
use Pterodactyl\Contracts\Repository\DaemonKeyRepositoryInterface;
use Pterodactyl\Contracts\Repository\AllocationRepositoryInterface;
use Pterodactyl\Contracts\Repository\PermissionRepositoryInterface;
use Pterodactyl\Contracts\Repository\Daemon\FileRepositoryInterface;
use Pterodactyl\Contracts\Repository\EggVariableRepositoryInterface;
use Pterodactyl\Contracts\Repository\Daemon\PowerRepositoryInterface;
@ -73,7 +71,6 @@ class RepositoryServiceProvider extends ServiceProvider
$this->app->bind(NestRepositoryInterface::class, NestRepository::class);
$this->app->bind(NodeRepositoryInterface::class, NodeRepository::class);
$this->app->bind(PackRepositoryInterface::class, PackRepository::class);
$this->app->bind(PermissionRepositoryInterface::class, PermissionRepository::class);
$this->app->bind(ScheduleRepositoryInterface::class, ScheduleRepository::class);
$this->app->bind(ServerRepositoryInterface::class, ServerRepository::class);
$this->app->bind(ServerVariableRepositoryInterface::class, ServerVariableRepository::class);

5
app/Repositories/Eloquent/PermissionRepository.php
View File

@ -2,7 +2,7 @@
namespace Pterodactyl\Repositories\Eloquent;
use Pterodactyl\Models\Permission;
use Exception;
use Pterodactyl\Contracts\Repository\PermissionRepositoryInterface;
class PermissionRepository extends EloquentRepository implements PermissionRepositoryInterface
@ -11,9 +11,10 @@ class PermissionRepository extends EloquentRepository implements PermissionRepos
* Return the model backing this repository.
*
* @return string
* @throws \Exception
*/
public function model()
{
return Permission::class;
throw new Exception('This functionality is not implemented.');
}
}

4
app/Services/Api/KeyCreationService.php
View File

@ -72,8 +72,6 @@ class KeyCreationService
$data = array_merge($data, $permissions);
}
$instance = $this->repository->create($data, true, true);
return $instance;
return $this->repository->create($data, true, true);
}
}

33
app/Transformers/Api/Client/ApiKeyTransformer.php Normal file
View File

@ -0,0 +1,33 @@
<?php
namespace Pterodactyl\Transformers\Api\Client;
use Pterodactyl\Models\ApiKey;
class ApiKeyTransformer extends BaseClientTransformer
{
/**
* {@inheritdoc}
*/
public function getResourceName(): string
{
return ApiKey::RESOURCE_NAME;
}
/**
* Transform this model into a representation that can be consumed by a client.
*
* @param \Pterodactyl\Models\ApiKey $model
* @return array
*/
public function transform(ApiKey $model)
{
return [
'identifier' => $model->identifier,
'description' => $model->memo,
'allowed_ips' => $model->allowed_ips,
'last_used_at' => $model->last_used_at ? $model->last_used_at->toIso8601String() : null,
'created_at' => $model->created_at->toIso8601String(),
];
}
}

57
database/migrations/2020_03_22_163911_merge_permissions_table_into_subusers.php Normal file
View File

@ -0,0 +1,57 @@
<?php
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class MergePermissionsTableIntoSubusers extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('subusers', function (Blueprint $table) {
$table->json('permissions')->nullable()->after('server_id');
});
DB::statement('
UPDATE subusers as s
LEFT JOIN (
SELECT subuser_id, JSON_ARRAYAGG(permission) as permissions
FROM permissions
GROUP BY subuser_id
) as p ON p.subuser_id = s.id
SET s.permissions = p.permissions
');
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
foreach (DB::select('SELECT id, permissions FROM subusers') as $datum) {
$values = [];
foreach(json_decode($datum->permissions, true) as $permission) {
$values[] = $datum->id;
$values[] = $permission;
}
if (!empty($values)) {
$string = 'VALUES ' . implode(', ', array_fill(0, count($values) / 2, '(?, ?)'));
DB::insert('INSERT INTO permissions(`subuser_id`, `permission`) ' . $string, $values);
}
}
Schema::table('subusers', function (Blueprint $table) {
$table->dropColumn('permissions');
});
}
}

34
database/migrations/2020_03_22_164814_drop_permissions_table.php Normal file
View File

@ -0,0 +1,34 @@
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class DropPermissionsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::dropIfExists('permissions');
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::create('permissions', function (Blueprint $table) {
$table->increments('id');
$table->unsignedInteger('subuser_id');
$table->string('permission');
$table->foreign('subuser_id')->references('id')->on('subusers')->onDelete('cascade');
});
}
}

1
package.json
View File

@ -43,6 +43,7 @@
"devDependencies": {
"@babel/core": "^7.7.5",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
"@babel/plugin-proposal-optional-chaining": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.7.4",

17
resources/scripts/api/account/createApiKey.ts Normal file
View 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);
});
};

9
resources/scripts/api/account/deleteApiKey.ts Normal file
View File

@ -0,0 +1,9 @@
import http from '@/api/http';
export default (identifier: string): Promise<void> => {
return new Promise((resolve, reject) => {
http.delete(`/api/client/account/api-keys/${identifier}`)
.then(() => resolve())
.catch(reject);
});
};

25
resources/scripts/api/account/getApiKeys.ts Normal file
View 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((d: any) => rawDataToApiKey(d.attributes))))
.catch(reject);
});
};

107
resources/scripts/components/dashboard/AccountApiContainer.tsx Normal file
View File

@ -0,0 +1,107 @@
import React, { useEffect, useState } from 'react';
import ContentBox from '@/components/elements/ContentBox';
import CreateApiKeyForm from '@/components/dashboard/forms/CreateApiKeyForm';
import getApiKeys, { ApiKey } from '@/api/account/getApiKeys';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faKey } from '@fortawesome/free-solid-svg-icons/faKey';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import deleteApiKey from '@/api/account/deleteApiKey';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import FlashMessageRender from '@/components/FlashMessageRender';
import { httpErrorToHuman } from '@/api/http';
import format from 'date-fns/format';
export default () => {
const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
const [ keys, setKeys ] = useState<ApiKey[]>([]);
const [ loading, setLoading ] = useState(true);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
useEffect(() => {
clearFlashes('account');
getApiKeys()
.then(keys => setKeys(keys))
.then(() => setLoading(false))
.catch(error => {
console.error(error);
addError({ key: 'account', message: httpErrorToHuman(error) });
});
}, []);
const doDeletion = (identifier: string) => {
setLoading(true);
clearFlashes('account');
deleteApiKey(identifier)
.then(() => setKeys(s => ([
...(s || []).filter(key => key.identifier !== identifier),
])))
.catch(error => {
console.error(error);
addError({ key: 'account', message: httpErrorToHuman(error) });
})
.then(() => setLoading(false));
};
return (
<div className={'my-10 flex'}>
<FlashMessageRender byKey={'account'} className={'mb-4'}/>
<ContentBox title={'Create API Key'} className={'flex-1'}>
<CreateApiKeyForm onKeyCreated={key => setKeys(s => ([...s!, key]))}/>
</ContentBox>
<ContentBox title={'API Keys'} className={'ml-10 flex-1'}>
<SpinnerOverlay visible={loading}/>
{deleteIdentifier &&
<ConfirmationModal
title={'Confirm key deletion'}
buttonText={'Yes, delete key'}
visible={true}
onConfirmed={() => {
doDeletion(deleteIdentifier);
setDeleteIdentifier('');
}}
onCanceled={() => setDeleteIdentifier('')}
>
Are you sure you wish to delete this API key? All requests using it will immediately be
invalidated and will fail.
</ConfirmationModal>
}
{
keys.length === 0 ?
<p className={'text-center text-sm'}>
{loading ? 'Loading...' : 'No API keys exist for this account.'}
</p>
:
keys.map(key => (
<div key={key.identifier} className={'grey-row-box bg-neutral-600 mb-2 flex items-center'}>
<FontAwesomeIcon icon={faKey} className={'text-neutral-300'}/>
<div className={'ml-4 flex-1'}>
<p className={'text-sm'}>{key.description}</p>
<p className={'text-2xs text-neutral-300 uppercase'}>
Last
used: {key.lastUsedAt ? format(key.lastUsedAt, 'MMM Do, YYYY HH:mm') : 'Never'}
</p>
</div>
<p className={'text-sm ml-4'}>
<code className={'font-mono py-1 px-2 bg-neutral-900 rounded'}>
{key.identifier}
</code>
</p>
<button
className={'ml-4 p-2 text-sm'}
onClick={() => setDeleteIdentifier(key.identifier)}
>
<FontAwesomeIcon
icon={faTrashAlt}
className={'text-neutral-400 hover:text-red-400 transition-color duration-150'}
/>
</button>
</div>
))
}
</ContentBox>
</div>
);
};

108
resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx Normal file
View File

@ -0,0 +1,108 @@
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';
import { ApiKey } from '@/api/account/getApiKeys';
interface Values {
description: string;
allowedIps: string;
}
export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
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(({ secretToken, ...key }) => {
resetForm();
setSubmitting(false);
setApiKey(`${key.identifier}${secretToken}`);
onKeyCreated(key);
})
.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>
</>
);
};

32
resources/scripts/components/elements/ConfirmationModal.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from 'react';
import Modal from '@/components/elements/Modal';
interface Props {
title: string;
buttonText: string;
children: string;
visible: boolean;
onConfirmed: () => void;
onCanceled: () => void;
}
const ConfirmationModal = ({ title, children, visible, buttonText, onConfirmed, onCanceled }: Props) => (
<Modal
appear={true}
visible={visible}
onDismissed={() => onCanceled()}
>
<h3 className={'mb-6'}>{title}</h3>
<p className={'text-sm'}>{children}</p>
<div className={'flex items-center justify-end mt-8'}>
<button className={'btn btn-secondary btn-sm'} onClick={() => onCanceled()}>
Cancel
</button>
<button className={'btn btn-red btn-sm ml-4'} onClick={() => onConfirmed()}>
{buttonText}
</button>
</div>
</Modal>
);
export default ConfirmationModal;

5
resources/scripts/components/elements/FormikFieldWrapper.tsx
View File

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

14
resources/scripts/routers/DashboardRouter.tsx
View File

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

12
resources/styles/components/forms.css
View File

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

4
routes/api-client.php
View File

@ -22,6 +22,10 @@ Route::group(['prefix' => '/account'], function () {
Route::put('/email', 'AccountController@updateEmail')->name('api.client.account.update-email');
Route::put('/password', 'AccountController@updatePassword')->name('api.client.account.update-password');
Route::get('/api-keys', 'ApiKeyController@index');
Route::post('/api-keys', 'ApiKeyController@store');
Route::delete('/api-keys/{identifier}', 'ApiKeyController@delete');
});
/*

2
webpack.config.js
View File

@ -87,6 +87,7 @@ module.exports = {
'@babel/proposal-class-properties',
'@babel/proposal-object-rest-spread',
'@babel/proposal-optional-chaining',
'@babel/proposal-nullish-coalescing-operator',
'@babel/syntax-dynamic-import',
],
},
@ -164,6 +165,7 @@ module.exports = {
],
},
watchOptions: {
poll: 1000,
ignored: /node_modules/,
},
devServer: {

15
yarn.lock
View File

@ -250,6 +250,14 @@
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-json-strings" "^7.7.4"
"@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
dependencies:
"@babel/helper-plugin-utils" "^7.8.3"
"@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
"@babel/plugin-proposal-object-rest-spread@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.4.tgz#cc57849894a5c774214178c8ab64f6334ec8af71"
@ -302,6 +310,13 @@
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
dependencies:
"@babel/helper-plugin-utils" "^7.8.0"
"@babel/plugin-syntax-object-rest-spread@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.7.4.tgz#47cf220d19d6d0d7b154304701f468fc1cc6ff46"