Ms2/iam interface

src/management-system-v2/app/(dashboard)/iam/roles/[roleId]/role-members.tsx

@@ -144,7 +144,7 @@ const RoleMembers: FC<{ role: Role; isLoadingRole?: boolean }> = ({ role, isLoad
         )}
         searchBarRightNode={
           <Button type="primary" onClick={() => setAddUserModalOpen(true)}>
-            Add member
+            Add Member
           </Button>
         }
       />

src/management-system-v2/app/(dashboard)/iam/roles/[roleId]/role-page.tsx

@@ -24,17 +24,17 @@ function RolePage({ params: { roleId } }: { params: { roleId: string } }) {
 
   const items: Items = role
     ? [
-        {
-          key: 'members',
-          label: 'Manage Members',
-          children: <RoleMembers role={role} isLoadingRole={isLoading} />,
-        },
-        { key: 'permissions', label: 'Permissions', children: <RolePermissions role={role} /> },
         {
           key: 'generalData',
           label: 'General Data',
           children: <RoleGeneralData roleId={roleId} />,
         },
+        { key: 'permissions', label: 'Permissions', children: <RolePermissions role={role} /> },
+        {
+          key: 'members',
+          label: 'Manage Members',
+          children: <RoleMembers role={role} isLoadingRole={isLoading} />,
+        },
       ]
     : [];
 
@@ -58,9 +58,11 @@ function RolePage({ params: { roleId } }: { params: { roleId: string } }) {
         </Space>
       }
     >
-      <Skeleton loading={isLoading}>
-        <Tabs items={items} />
-      </Skeleton>
+      <div style={{ maxWidth: '800px', margin: 'auto' }}>
+        <Skeleton loading={isLoading}>
+          <Tabs items={items} />
+        </Skeleton>
+      </div>
     </Content>
   );
 }

src/management-system-v2/app/(dashboard)/iam/roles/[roleId]/roleGeneralData.tsx

@@ -3,7 +3,7 @@
 import { toCaslResource } from '@/lib/ability/caslAbility';
 import { useGetAsset, usePutAsset } from '@/lib/fetch-data';
 import { Alert, App, Button, DatePicker, Form, Input, Spin } from 'antd';
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import germanLocale from 'antd/es/date-picker/locale/de_DE';
 import { useAbilityStore } from '@/lib/abilityStore';
@@ -21,6 +21,20 @@ const RoleGeneralData: FC<{ roleId: string }> = ({ roleId }) => {
     onError: () => message.open({ type: 'error', content: 'Something went wrong' }),
   });
 
+  const [submittable, setSubmittable] = useState(false);
+  const values = Form.useWatch('name', form);
+
+  useEffect(() => {
+    form.validateFields({ validateOnly: true }).then(
+      () => {
+        setSubmittable(true);
+      },
+      () => {
+        setSubmittable(false);
+      },
+    );
+  }, [form, values]);
+
   if (isLoading || error || !data) return <Spin />;
 
   const role = toCaslResource('Role', data);
@@ -51,7 +65,13 @@ const RoleGeneralData: FC<{ roleId: string }> = ({ roleId }) => {
           <br />
         </>
       )}
-      <Form.Item label="Name" name="name">
+
+      <Form.Item
+        label="Name"
+        name="name"
+        rules={[{ required: true, message: 'this field is required' }]}
+        required
+      >
         <Input placeholder="input placeholder" disabled={!ability.can('update', role, 'name')} />
       </Form.Item>
 
@@ -73,8 +93,8 @@ const RoleGeneralData: FC<{ roleId: string }> = ({ roleId }) => {
       </Form.Item>
 
       <Form.Item>
-        <Button type="primary" htmlType="submit" loading={putLoading}>
-          Submit
+        <Button type="primary" htmlType="submit" loading={putLoading} disabled={!submittable}>
+          Update Role
         </Button>
       </Form.Item>
     </Form>

src/management-system-v2/app/(dashboard)/iam/roles/header-actions.tsx

@@ -1,68 +1,34 @@
 'use client';
 
-import { AuthCan } from '@/lib/clientAuthComponents';
-import { ApiRequestBody, usePostAsset } from '@/lib/fetch-data';
+import { usePostAsset } from '@/lib/fetch-data';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Form, App, Input, Modal } from 'antd';
+import { Button, Form, App, Input, Modal, DatePicker } from 'antd';
 import { FC, ReactNode, useEffect, useState } from 'react';
+import dayjs from 'dayjs';
+import germanLocale from 'antd/es/date-picker/locale/de_DE';
+import { useRouter } from 'next/navigation';
+import { AuthCan } from '@/lib/clientAuthComponents';
+
+type PostRoleKeys = 'name' | 'description' | 'expiration';
 
-type PostUserField = keyof ApiRequestBody<'/users', 'post'>;
-
-const modalStructureWithoutPassword: {
-  dataKey: PostUserField;
-  label: string;
-  type: string;
-}[] = [
-  {
-    dataKey: 'firstName',
-    label: 'First Name',
-    type: 'text',
-  },
-  {
-    dataKey: 'lastName',
-    label: 'Last Name',
-    type: 'text',
-  },
-  {
-    dataKey: 'username',
-    label: 'Username Name',
-    type: 'text',
-  },
-  {
-    dataKey: 'email',
-    label: 'Email',
-    type: 'email',
-  },
-];
-
-const fieldNameToLabel: Record<PostUserField, string> = modalStructureWithoutPassword.reduce(
-  (acc, curr) => {
-    acc[curr.dataKey] = curr.label;
-    return acc;
-  },
-  {} as Record<PostUserField, string>,
-);
-
-const CreateUserModal: FC<{
+const CreateRoleModal: FC<{
   modalOpen: boolean;
   close: () => void;
 }> = ({ modalOpen, close }) => {
   const [form] = Form.useForm();
+  const router = useRouter();
   const { message: messageApi } = App.useApp();
-  type ErrorsObject = { [field in PostUserField]?: ReactNode[] };
+  type ErrorsObject = { [field in PostRoleKeys]?: ReactNode[] };
   const [formatError, setFormatError] = useState<ErrorsObject>({});
-
-  const { mutateAsync: postUser, isLoading } = usePostAsset('/users', {
+  const { mutateAsync: postRole, isLoading } = usePostAsset('/roles', {
     onError(e) {
       if (!(typeof e === 'object' && e !== null && 'errors' in e)) {
         return;
       }
 
-      const errors: { [key in PostUserField]?: ReactNode[] } = {};
-
-      function appendError(key: PostUserField, error: string) {
-        error = error.replace(key, fieldNameToLabel[key]);
+      const errors: { [key in PostRoleKeys]?: ReactNode[] } = {};
 
+      function appendError(key: PostRoleKeys, error: string) {
         if (key in errors) {
           errors[key]!.push(<p key={errors[key]?.length}>{error}</p>);
         } else {
@@ -71,102 +37,93 @@ const CreateUserModal: FC<{
       }
 
       for (const error of e.errors as string[]) {
-        if (error.includes('username')) appendError('username', error);
-        else if (error.includes('email')) appendError('email', error);
-        else if (error.includes('firstName')) appendError('firstName', error);
-        else if (error.includes('lastName')) appendError('lastName', error);
-        else if (error.includes('password')) appendError('password', error);
+        if (error.includes('name')) appendError('name', error);
+        else if (error.includes('description')) appendError('description', error);
+        else if (error.includes('expiration')) appendError('expiration', error);
       }
 
       setFormatError(errors);
     },
   });
 
+  const [submittable, setSubmittable] = useState(false);
+  const values = Form.useWatch('name', form);
+
+  useEffect(() => {
+    form.validateFields({ validateOnly: true }).then(
+      () => {
+        setSubmittable(true);
+      },
+      () => {
+        setSubmittable(false);
+      },
+    );
+  }, [form, values]);
+
   useEffect(() => {
     form.resetFields();
     setFormatError({});
   }, [form, modalOpen]);
 
-  const submitData = async (
-    values: Record<keyof ApiRequestBody<'/users', 'post'> | 'confirm_password', string>,
-  ) => {
-    debugger;
+  const submitData = async (values: Record<'name' | 'description' | 'expirationDayJs', 'post'>) => {
+    let expiration;
+    if (typeof values.expirationDayJs === 'object')
+      expiration = (values.expirationDayJs as dayjs.Dayjs).toISOString();
+
     try {
-      await postUser({
+      const newRole = await postRole({
         body: {
-          email: values.email,
-          firstName: values.firstName,
-          lastName: values.lastName,
-          username: values.username,
-          password: values.password,
+          name: values.name,
+          description: values.description,
+          expiration,
         },
       });
-      messageApi.success({ content: 'Account created' });
-      close();
+      messageApi.success({ content: 'Role created' });
+      router.push(`/iam/roles/${newRole.id}`);
     } catch (e) {
-      messageApi.error({ content: 'An error ocurred' });
+      messageApi.error({ content: 'Something went wrong' });
     }
   };
 
   return (
-    <Modal open={modalOpen} onCancel={close} footer={null}>
+    <Modal open={modalOpen} onCancel={close} footer={null} title="Create New Role">
       <Form form={form} layout="vertical" onFinish={submitData}>
-        {modalStructureWithoutPassword.map((formField) => (
-          <Form.Item
-            key={formField.dataKey}
-            label={formField.label}
-            name={formField.dataKey}
-            validateStatus={formField.dataKey in formatError ? 'error' : ''}
-            help={formField.dataKey in formatError ? formatError[formField.dataKey] : ''}
-            hasFeedback
-            required
-          >
-            <Input type={formField.type} />
-          </Form.Item>
-        ))}
+        <Form.Item
+          label="Name"
+          name="name"
+          help={formatError.name}
+          validateStatus={formatError.name && 'error'}
+          rules={[{ required: true, message: 'This field is required' }]}
+          required
+        >
+          <Input />
+        </Form.Item>
 
         <Form.Item
-          name="password"
-          label="Password"
-          rules={[
-            {
-              required: true,
-              message: 'Please input your password!',
-            },
-          ]}
-          validateStatus={'password' in formatError ? 'error' : ''}
-          help={'password' in formatError ? formatError.password : ''}
-          hasFeedback
+          label="Description"
+          name="description"
+          help={formatError.description}
+          validateStatus={formatError.description && 'error'}
         >
-          <Input.Password />
+          <Input.TextArea />
         </Form.Item>
 
         <Form.Item
-          name="confirm_password"
-          label="Confirm Password"
-          dependencies={['password']}
-          hasFeedback
-          rules={[
-            {
-              required: true,
-              message: 'Please confirm your password!',
-            },
-            ({ getFieldValue }) => ({
-              validator(_, value) {
-                if (!value || getFieldValue('password') === value) {
-                  return Promise.resolve();
-                }
-                return Promise.reject(new Error('The new password that you entered do not match!'));
-              },
-            }),
-          ]}
+          label="Expiration"
+          name="expirationDayJs"
+          help={formatError.expiration}
+          validateStatus={formatError.expiration && 'error'}
         >
-          <Input.Password />
+          <DatePicker
+            // NOTE german locale hard coded
+            locale={germanLocale}
+            allowClear={true}
+          />
         </Form.Item>
 
         <Form.Item>
-          <Button type="primary" htmlType="submit" loading={isLoading}>
-            Submit
+          <Button type="primary" htmlType="submit" loading={isLoading} disabled={!submittable}>
+            Create Role
           </Button>
         </Form.Item>
       </Form>
@@ -175,18 +132,18 @@ const CreateUserModal: FC<{
 };
 
 const HeaderActions: FC = () => {
-  const [createUserModalOpen, setCreateUserModalOpen] = useState(false);
+  const [createRoleModalOpen, setCreateRoleModalOpen] = useState(false);
 
   return (
     <>
-      <CreateUserModal
-        modalOpen={createUserModalOpen}
-        close={() => setCreateUserModalOpen(false)}
+      <CreateRoleModal
+        modalOpen={createRoleModalOpen}
+        close={() => setCreateRoleModalOpen(false)}
       />
 
-      <AuthCan action="create" resource="User">
-        <Button type="primary" onClick={() => setCreateUserModalOpen(true)}>
-          <PlusOutlined /> Create
+      <AuthCan action="create" resource="Role">
+        <Button type="primary" onClick={() => setCreateRoleModalOpen(true)}>
+          <PlusOutlined /> Create Role
         </Button>
       </AuthCan>
     </>