Getting somewhere on subuser stuff, adds i18n packages

resources/scripts/components/server/users/PermissionEditor.tsx

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

resources/scripts/components/server/users/UsersContainer.tsx

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