Getting somewhere on subuser stuff, adds i18n packages
This commit is contained in:
parent
2a7fc4612a
commit
01d81bd548
9 changed files with 215 additions and 12 deletions
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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
32
resources/scripts/i18n.ts
Normal 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;
|
|
@ -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'));
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue