modify frontend for add multiple users

src/components/Form/TextArea/index.ts

@@ -0,0 +1 @@
+export { TextArea } from './textarea';

src/components/Form/TextArea/textarea.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useController } from 'react-hook-form';
+
+/* eslint-disable react/react-in-jsx-scope */
+export const TextArea = ({ control, name, label, required, ...props }: TextAreaProps) => {
+  const {
+    field,
+    // fieldState: { invalid, isTouched, isDirty },
+    // formState: { touchedFields, dirtyFields },
+  } = useController({
+    name,
+    control,
+    rules: { required },
+    defaultValue: '',
+  });
+
+  return (
+    <>
+      {label && (
+        <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+          {label}
+        </label>
+      )}
+      <textarea
+        id={name}
+        onChange={field.onChange} // send value to hook form
+        onBlur={field.onBlur} // notify when input is touched/blur
+        value={field.value ? field.value.toString() : ''} // input value
+        name={name} // send down the input name
+        ref={field.ref} // send input ref, so we can focus on input when error appear
+        autoComplete="given-name"
+        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+        {...props}
+      />
+    </>
+  );
+};
+
+type TextAreaProps = {
+  control: any;
+  name: string;
+  label?: string;
+} & React.HTMLProps<HTMLTextAreaElement>;

src/components/Form/index.ts

@@ -1,2 +1,3 @@
 export { Input } from './Input';
 export { Select } from './Select';
+export { TextArea } from './TextArea';

src/components/UserModal/consts.ts

@@ -23,26 +23,35 @@ export const appAccessList = [
   },
 ];
 
-const initialAppRoles = [
+export const allAppAccessList = [
+  ...appAccessList,
+  {
+    name: 'dashboard',
+    image: '/assets/logo-small.svg',
+    label: 'Dashboard',
+  },
+];
+
+export const initialAppRoles = [
   {
     name: 'dashboard',
     role: UserRole.User,
   },
   {
     name: 'wekan',
-    role: UserRole.NoAccess,
+    role: UserRole.User,
   },
   {
     name: 'wordpress',
-    role: UserRole.NoAccess,
+    role: UserRole.User,
   },
   {
     name: 'nextcloud',
-    role: UserRole.NoAccess,
+    role: UserRole.User,
   },
   {
     name: 'zulip',
-    role: UserRole.NoAccess,
+    role: UserRole.User,
   },
 ];