Merge branch 'develop' into subusers

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

@@ -10,7 +10,7 @@ export default () => {
 
     return (
         <>
-            {visible && <EditSubuserModal appear visible onDismissed={() => setVisible(false)}/>}
+            <EditSubuserModal visible={visible} onModalDismissed={() => setVisible(false)}/>
             <Button onClick={() => setVisible(true)}>
                 <FontAwesomeIcon icon={faUserPlus} css={tw`mr-1`}/> New User
             </Button>

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

@@ -0,0 +1,65 @@
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+import Checkbox from '@/components/elements/Checkbox';
+import React from 'react';
+import { useStoreState } from 'easy-peasy';
+import Label from '@/components/elements/Label';
+
+const Container = styled.label`
+  ${tw`flex items-center border border-transparent rounded md:p-2 transition-colors duration-75`};
+  text-transform: none;
+
+  &:not(.disabled) {
+      ${tw`cursor-pointer`};
+
+      &:hover {
+        ${tw`border-neutral-500 bg-neutral-800`};
+      }
+  }
+  
+  &:not(:first-of-type) {
+      ${tw`mt-4 sm:mt-2`};
+  }
+
+  &.disabled {
+      ${tw`opacity-50`};
+
+      & input[type="checkbox"]:not(:checked) {
+          ${tw`border-0`};
+      }
+  }
+`;
+
+interface Props {
+    permission: string;
+    disabled: boolean;
+}
+
+const PermissionRow = ({ permission, disabled }: Props) => {
+    const [ key, pkey ] = permission.split('.', 2);
+    const permissions = useStoreState(state => state.permissions.data);
+
+    return (
+        <Container htmlFor={`permission_${permission}`} className={disabled ? 'disabled' : undefined}>
+            <div css={tw`p-2`}>
+                <Checkbox
+                    id={`permission_${permission}`}
+                    name={'permissions'}
+                    value={permission}
+                    css={tw`w-5 h-5 mr-2`}
+                    disabled={disabled}
+                />
+            </div>
+            <div css={tw`flex-1`}>
+                <Label as={'p'} css={tw`font-medium`}>{pkey}</Label>
+                {permissions[key].keys[pkey].length > 0 &&
+                <p css={tw`text-xs text-neutral-400 mt-1`}>
+                    {permissions[key].keys[pkey]}
+                </p>
+                }
+            </div>
+        </Container>
+    );
+};
+
+export default PermissionRow;

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

@@ -0,0 +1,50 @@
+import React, { memo, useCallback } from 'react';
+import { useField } from 'formik';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
+import tw from 'twin.macro';
+import Input from '@/components/elements/Input';
+import isEqual from 'react-fast-compare';
+
+interface Props {
+    isEditable: boolean;
+    title: string;
+    permissions: string[];
+    className?: string;
+}
+
+const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissions, className, children }) => {
+    const [ { value }, , { setValue } ] = useField<string[]>('permissions');
+
+    const onCheckboxClicked = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.currentTarget.checked) {
+            setValue([
+                ...value,
+                ...permissions.filter(p => !value.includes(p)),
+            ]);
+        } else {
+            setValue(value.filter(p => !permissions.includes(p)));
+        }
+    }, [ permissions, value ]);
+
+    return (
+        <TitledGreyBox
+            title={
+                <div css={tw`flex items-center`}>
+                    <p css={tw`text-sm uppercase flex-1`}>{title}</p>
+                    {isEditable &&
+                    <Input
+                        type={'checkbox'}
+                        checked={permissions.every(p => value.includes(p))}
+                        onChange={onCheckboxClicked}
+                    />
+                    }
+                </div>
+            }
+            className={className}
+        >
+            {children}
+        </TitledGreyBox>
+    );
+}, isEqual);
+
+export default PermissionTitleBox;

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

@@ -19,14 +19,11 @@ export default ({ subuser }: Props) => {
 
     return (
         <GreyRowBox css={tw`mb-2`}>
-            {visible &&
             <EditSubuserModal
-                appear
-                visible
                 subuser={subuser}
-                onDismissed={() => setVisible(false)}
+                visible={visible}
+                onModalDismissed={() => setVisible(false)}
             />
-            }
             <div css={tw`w-10 h-10 rounded-full bg-white border-2 border-neutral-800 overflow-hidden hidden md:block`}>
                 <img css={tw`w-full h-full`} src={`${subuser.image}?s=400`}/>
             </div>