From 8b18744642cad978a96667cad8a39f661dce261b Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Thu, 5 Jan 2023 16:43:55 +0800 Subject: [PATCH] feat(console): create role (#2822) --- packages/console/src/App.tsx | 1 + .../Roles/components/CreateRoleForm/index.tsx | 68 +++++++++++++++++++ .../components/CreateRoleModal/index.tsx | 45 ++++++++++++ packages/console/src/pages/Roles/index.tsx | 13 +++- .../de/translation/admin-console/roles.ts | 5 ++ .../en/translation/admin-console/roles.ts | 5 ++ .../fr/translation/admin-console/roles.ts | 5 ++ .../ko/translation/admin-console/roles.ts | 5 ++ .../pt-br/translation/admin-console/roles.ts | 5 ++ .../pt-pt/translation/admin-console/roles.ts | 5 ++ .../tr-tr/translation/admin-console/roles.ts | 5 ++ .../zh-cn/translation/admin-console/roles.ts | 5 ++ 12 files changed, 166 insertions(+), 1 deletion(-) create mode 100644 packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx create mode 100644 packages/console/src/pages/Roles/components/CreateRoleModal/index.tsx diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx index e0a25003b..1431ab158 100644 --- a/packages/console/src/App.tsx +++ b/packages/console/src/App.tsx @@ -86,6 +86,7 @@ const Main = () => { } /> + } /> } /> } /> diff --git a/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx new file mode 100644 index 000000000..a7217e63f --- /dev/null +++ b/packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx @@ -0,0 +1,68 @@ +import type { Role } from '@logto/schemas'; +import { useForm } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; + +import Button from '@/components/Button'; +import FormField from '@/components/FormField'; +import ModalLayout from '@/components/ModalLayout'; +import TextInput from '@/components/TextInput'; +import useApi from '@/hooks/use-api'; + +export type Props = { + onClose: (createdRole?: Role) => void; +}; + +type CreateRoleFormData = Pick; + +const CreateRoleForm = ({ onClose }: Props) => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { + handleSubmit, + register, + formState: { isSubmitting }, + } = useForm(); + + const api = useApi(); + + const onSubmit = handleSubmit(async (formData) => { + if (isSubmitting) { + return; + } + + const createdRole = await api.post('/api/roles', { json: formData }).json(); + onClose(createdRole); + }); + + return ( + + } + onClose={onClose} + > +
+ + + + + + +
+ + ); +}; + +export default CreateRoleForm; diff --git a/packages/console/src/pages/Roles/components/CreateRoleModal/index.tsx b/packages/console/src/pages/Roles/components/CreateRoleModal/index.tsx new file mode 100644 index 000000000..e06200543 --- /dev/null +++ b/packages/console/src/pages/Roles/components/CreateRoleModal/index.tsx @@ -0,0 +1,45 @@ +import type { Role } from '@logto/schemas'; +import { toast } from 'react-hot-toast'; +import { useTranslation } from 'react-i18next'; +import ReactModal from 'react-modal'; +import { useNavigate } from 'react-router-dom'; + +import * as modalStyles from '@/scss/modal.module.scss'; + +import type { Props as CreateRoleFormProps } from '../CreateRoleForm'; +import CreateRoleForm from '../CreateRoleForm'; + +type Props = { + onClose: () => void; +}; + +const CreateRoleModal = ({ onClose }: Props) => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const navigate = useNavigate(); + + const onCreateFormClose: CreateRoleFormProps['onClose'] = (createdRole?: Role) => { + if (createdRole) { + // TODO @xiaoyijun open assigning role to users modal + navigate(`/roles/${createdRole.id}`, { replace: true }); + toast.success(t('roles.role_created', { name: createdRole.name })); + + return; + } + + onClose(); + }; + + return ( + + + + ); +}; + +export default CreateRoleModal; diff --git a/packages/console/src/pages/Roles/index.tsx b/packages/console/src/pages/Roles/index.tsx index 9eed75427..1920e096d 100644 --- a/packages/console/src/pages/Roles/index.tsx +++ b/packages/console/src/pages/Roles/index.tsx @@ -1,6 +1,6 @@ import type { Role } from '@logto/schemas'; import { useTranslation } from 'react-i18next'; -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import useSWR from 'swr'; import Plus from '@/assets/images/plus.svg'; @@ -11,13 +11,17 @@ import Table from '@/components/Table'; import type { RequestError } from '@/hooks/use-api'; import * as pageStyles from '@/scss/resources.module.scss'; +import CreateRoleModal from './components/CreateRoleModal'; + const rolesPathname = '/roles'; const createRolePathname = `${rolesPathname}/create`; const buildDetailsPathname = (id: string) => `${rolesPathname}/${id}`; const Roles = () => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { pathname } = useLocation(); const navigate = useNavigate(); + const isOnCreatePage = pathname === createRolePathname; const { data: roles, error, mutate } = useSWR(`/api/roles`); const isLoading = !roles && !error; @@ -71,6 +75,13 @@ const Roles = () => { }} onRetry={async () => mutate(undefined, true)} /> + {isOnCreatePage && ( + { + navigate(rolesPathname); + }} + /> + )} ); }; diff --git a/packages/phrases/src/locales/de/translation/admin-console/roles.ts b/packages/phrases/src/locales/de/translation/admin-console/roles.ts index 66771537f..1e32ddf38 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/roles.ts @@ -5,6 +5,11 @@ const roles = { create: 'Add Roles', // UNTRANSLATED role_name: 'Role', // UNTRANSLATED role_description: 'Description', // UNTRANSLATED + create_role_title: 'Create a role', // UNTRANSLATED + create_role_description: + 'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED + create_role_button: 'Create role', // UNTRANSLATED + role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED }; export default roles; diff --git a/packages/phrases/src/locales/en/translation/admin-console/roles.ts b/packages/phrases/src/locales/en/translation/admin-console/roles.ts index 855f14e52..eeb4a10f1 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/roles.ts @@ -5,6 +5,11 @@ const roles = { create: 'Add Roles', role_name: 'Role', role_description: 'Description', + create_role_title: 'Create a role', + create_role_description: + 'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', + create_role_button: 'Create role', + role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED }; export default roles; diff --git a/packages/phrases/src/locales/fr/translation/admin-console/roles.ts b/packages/phrases/src/locales/fr/translation/admin-console/roles.ts index 66771537f..1e32ddf38 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/roles.ts @@ -5,6 +5,11 @@ const roles = { create: 'Add Roles', // UNTRANSLATED role_name: 'Role', // UNTRANSLATED role_description: 'Description', // UNTRANSLATED + create_role_title: 'Create a role', // UNTRANSLATED + create_role_description: + 'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED + create_role_button: 'Create role', // UNTRANSLATED + role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED }; export default roles; diff --git a/packages/phrases/src/locales/ko/translation/admin-console/roles.ts b/packages/phrases/src/locales/ko/translation/admin-console/roles.ts index 66771537f..1e32ddf38 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/roles.ts @@ -5,6 +5,11 @@ const roles = { create: 'Add Roles', // UNTRANSLATED role_name: 'Role', // UNTRANSLATED role_description: 'Description', // UNTRANSLATED + create_role_title: 'Create a role', // UNTRANSLATED + create_role_description: + 'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED + create_role_button: 'Create role', // UNTRANSLATED + role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED }; export default roles; diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts index 66771537f..1e32ddf38 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/roles.ts @@ -5,6 +5,11 @@ const roles = { create: 'Add Roles', // UNTRANSLATED role_name: 'Role', // UNTRANSLATED role_description: 'Description', // UNTRANSLATED + create_role_title: 'Create a role', // UNTRANSLATED + create_role_description: + 'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED + create_role_button: 'Create role', // UNTRANSLATED + role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED }; export default roles; diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts index 66771537f..1e32ddf38 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/roles.ts @@ -5,6 +5,11 @@ const roles = { create: 'Add Roles', // UNTRANSLATED role_name: 'Role', // UNTRANSLATED role_description: 'Description', // UNTRANSLATED + create_role_title: 'Create a role', // UNTRANSLATED + create_role_description: + 'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED + create_role_button: 'Create role', // UNTRANSLATED + role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED }; export default roles; diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts index 66771537f..1e32ddf38 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/roles.ts @@ -5,6 +5,11 @@ const roles = { create: 'Add Roles', // UNTRANSLATED role_name: 'Role', // UNTRANSLATED role_description: 'Description', // UNTRANSLATED + create_role_title: 'Create a role', // UNTRANSLATED + create_role_description: + 'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED + create_role_button: 'Create role', // UNTRANSLATED + role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED }; export default roles; diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts index 66771537f..1e32ddf38 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/roles.ts @@ -5,6 +5,11 @@ const roles = { create: 'Add Roles', // UNTRANSLATED role_name: 'Role', // UNTRANSLATED role_description: 'Description', // UNTRANSLATED + create_role_title: 'Create a role', // UNTRANSLATED + create_role_description: + 'Create and manage Roles for your applications. Roles contain collections of Permissions and can be assigned to Users.', // UNTRANSLATED + create_role_button: 'Create role', // UNTRANSLATED + role_created: 'The role {{name}} has been successfully created!', // UNTRANSLATED }; export default roles;