Getting somewhere on subuser stuff, adds i18n packages

This commit is contained in:
Dane Everitt 2019-11-16 12:46:19 -08:00
parent 2a7fc4612a
commit 01d81bd548
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 215 additions and 12 deletions

View file

@ -0,0 +1,43 @@
<?php
namespace Pterodactyl\Http\Controllers\Base;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
use Illuminate\Translation\Translator;
use Pterodactyl\Http\Controllers\Controller;
class LocaleController extends Controller
{
/**
* @var \Illuminate\Translation\Translator
*/
private $translator;
/**
* LocaleController constructor.
*
* @param \Illuminate\Translation\Translator $translator
*/
public function __construct(Translator $translator)
{
$this->translator = $translator;
}
/**
* Returns translation data given a specific locale and namespace.
*
* @param \Illuminate\Http\Request $request
* @param string $locale
* @param string $namespace
* @return \Illuminate\Http\JsonResponse
*/
public function __invoke(Request $request, string $locale, string $namespace)
{
$data = $this->translator->getLoader()->load($locale, str_replace('.', '/', $namespace));
return JsonResponse::create($data, 200, [
'E-Tag' => md5(json_encode($data)),
]);
}
}

View file

@ -14,6 +14,10 @@
"easy-peasy": "^3.0.2",
"events": "^3.0.0",
"formik": "^1.5.7",
"i18next": "^19.0.0",
"i18next-chained-backend": "^2.0.0",
"i18next-localstorage-backend": "^3.0.0",
"i18next-xhr-backend": "^3.2.2",
"jquery": "^3.3.1",
"lodash-es": "^4.17.15",
"path": "^0.12.7",
@ -21,6 +25,7 @@
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.12.13",
"react-i18next": "^11.2.1",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"react-transition-group": "^4.1.0",

View file

@ -1,10 +1,46 @@
import React from 'react';
import { SubuserPermission } from '@/state/server/subusers';
import { useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { useTranslation } from 'react-i18next';
interface Props {
defaultPermissions: SubuserPermission[];
}
export default ({ defaultPermissions }: Props) => {
return null;
const { t } = useTranslation('server.users');
const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
return (
<div>
{
permissions.map(permission => (
<div className={'flex mb-2'} key={permission}>
<input
id={`permission_${permission}`}
type={'checkbox'}
name={'permissions[]'}
value={permission}
defaultChecked={defaultPermissions.indexOf(permission) >= 0}
/>
<label
htmlFor={`permission_${permission}`}
className={'flex-1 ml-3 text-sm text-neutral-200 cursor-pointer'}
>
{permission}
<p className={'text-xs text-neutral-300'} style={{ textTransform: 'none' }}>
{t(`server.users:permissions.${permission.replace('.', '_')}`)}
</p>
</label>
</div>
))
}
<div className={'mt-4 flex justify-end'}>
<button className={'btn btn-primary btn-sm'}>
Save Changes
</button>
</div>
</div>
);
};

View file

@ -9,6 +9,7 @@ import classNames from 'classnames';
import PermissionEditor from '@/components/server/users/PermissionEditor';
import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
export default () => {
const [ loading, setLoading ] = useState(true);
@ -45,10 +46,12 @@ export default () => {
<div className={'flex my-10'}>
<div className={'w-1/2'}>
<h2 className={'text-neutral-300 mb-4'}>Subusers</h2>
<div className={classNames('border-t-4 grey-box mt-0', {
'border-cyan-400': editSubuser === null,
'border-neutral-400': editSubuser !== null,
})}>
<div
className={classNames('border-t-4 grey-box mt-0', {
'border-cyan-400': editSubuser === null,
'border-neutral-400': editSubuser !== null,
})}
>
{(loading || !permissions.length) ?
<div className={'w-full'}>
<Spinner centered={true}/>
@ -93,11 +96,21 @@ export default () => {
{editSubuser &&
<CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
<div className={'flex-1 ml-6'}>
<h2 className={'text-neutral-300 mb-4'}>Edit {editSubuser.email}</h2>
<div className={'border-t-4 border-cyan-400 grey-box mt-0'}>
<PermissionEditor
defaultPermissions={editSubuser.permissions}
/>
<h2 className={'flex items-center text-neutral-300 mb-4'}>
<span onClick={() => setEditSubuser(null)}>
<FontAwesomeIcon
icon={faArrowLeft}
className={'text-base mr-2 text-neutral-200 hover:text-neutral-100 cursor-pointer'}
/>
</span>
Edit {editSubuser.email}
</h2>
<div className={'border-t-4 border-cyan-400 grey-box mt-0 p-4'}>
<React.Suspense fallback={'Loading...'}>
<PermissionEditor
defaultPermissions={editSubuser.permissions}
/>
</React.Suspense>
</div>
</div>
</CSSTransition>

32
resources/scripts/i18n.ts Normal file
View file

@ -0,0 +1,32 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LocalStorageBackend from 'i18next-localstorage-backend';
import XHR from 'i18next-xhr-backend';
import Backend from 'i18next-chained-backend';
i18n
.use(Backend)
.use(initReactI18next)
.init({
debug: process.env.NODE_ENV !== 'production',
lng: 'en',
fallbackLng: 'en',
keySeparator: '.',
backend: {
backends: [
LocalStorageBackend,
XHR,
],
backendOptions: [{
prefix: 'pterodactyl_lng__',
expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days, in milliseconds
store: window.localStorage,
}, {
loadPath: '/locales/{{lng}}/{{ns}}.json',
}],
},
});
// i18n.loadNamespaces(['validation']);
export default i18n;

View file

@ -1,5 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import App from '@/components/App';
import './i18n';
ReactDOM.render(<App/>, document.getElementById('app'));

View file

@ -219,3 +219,26 @@ a.btn {
cursor: default;
}
}
input[type="checkbox"], input[type="radio"] {
@apply .appearance-none .inline-block .align-middle .select-none .flex-no-shrink .w-4 .h-4 .text-primary-400 .border .border-neutral-300 .rounded-sm;
color-adjust: exact;
background-origin: border-box;
transition: all 75ms linear, box-shadow 25ms linear;
&:checked {
@apply .border-transparent .bg-no-repeat .bg-center;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
background-color: currentColor;
background-size: 100% 100%;
}
&:focus {
@apply .outline-none .border-primary-300;
box-shadow: 0 0 0 1px rgba(9, 103, 210, 0.25);
}
}
input[type="radio"] {
@apply .rounded-full;
}

View file

@ -3,6 +3,9 @@
Route::get('/', 'IndexController@index')->name('index')->fallback();
Route::get('/account', 'IndexController@index')->name('account');
Route::get('/locales/{locale}/{namespace}.json', 'LocaleController')
->where('namespace', '.*');
/*
|--------------------------------------------------------------------------
| Account API Controller Routes

View file

@ -747,6 +747,12 @@
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5":
version "7.7.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.4.2":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
@ -4141,6 +4147,12 @@ html-minifier@^3.2.3:
relateurl "0.2.x"
uglify-js "3.3.x"
html-parse-stringify2@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
dependencies:
void-elements "^2.0.1"
html-webpack-plugin@^3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
@ -4224,6 +4236,30 @@ humps@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
i18next-chained-backend@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/i18next-chained-backend/-/i18next-chained-backend-2.0.0.tgz#faf2e8b5f081a01e74fbec1fe580c184bc64e25b"
dependencies:
"@babel/runtime" "^7.4.5"
i18next-localstorage-backend@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/i18next-localstorage-backend/-/i18next-localstorage-backend-3.0.0.tgz#19b4e836e9a79e564631b88b8ba1c738375e636f"
dependencies:
"@babel/runtime" "^7.4.5"
i18next-xhr-backend@^3.2.2:
version "3.2.2"
resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-3.2.2.tgz#769124441461b085291f539d91864e3691199178"
dependencies:
"@babel/runtime" "^7.5.5"
i18next@^19.0.0:
version "19.0.0"
resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.0.0.tgz#5418207d7286128e6cfe558e659fa8c60d89794b"
dependencies:
"@babel/runtime" "^7.3.1"
iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@ -6909,6 +6945,13 @@ react-hot-loader@^4.12.13:
shallowequal "^1.1.0"
source-map "^0.7.3"
react-i18next@^11.2.1:
version "11.2.1"
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.2.1.tgz#a56d9f1f52d003eb4fa8f1c7d6752123827160f0"
dependencies:
"@babel/runtime" "^7.3.1"
html-parse-stringify2 "2.0.1"
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
@ -8394,6 +8437,10 @@ vm-browserify@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
void-elements@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
watchpack@^1.5.0, watchpack@^1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"