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

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