diff --git a/packages/console/src/assets/images/machine-to-machine-dark.svg b/packages/console/src/assets/images/machine-to-machine-dark.svg new file mode 100644 index 000000000..cfdad93bd --- /dev/null +++ b/packages/console/src/assets/images/machine-to-machine-dark.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/images/machine-to-machine.svg b/packages/console/src/assets/images/machine-to-machine.svg new file mode 100644 index 000000000..506951028 --- /dev/null +++ b/packages/console/src/assets/images/machine-to-machine.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/console/src/assets/images/native-app-dark.svg b/packages/console/src/assets/images/native-app-dark.svg index 3d3cc729f..7cf222605 100644 --- a/packages/console/src/assets/images/native-app-dark.svg +++ b/packages/console/src/assets/images/native-app-dark.svg @@ -1,14 +1,14 @@ - - - - + - + + + + - + diff --git a/packages/console/src/assets/images/native-app.svg b/packages/console/src/assets/images/native-app.svg index 77920a70b..643514689 100644 --- a/packages/console/src/assets/images/native-app.svg +++ b/packages/console/src/assets/images/native-app.svg @@ -1,14 +1,14 @@ - - + + - + - + diff --git a/packages/console/src/assets/images/single-page-app-dark.svg b/packages/console/src/assets/images/single-page-app-dark.svg index 58acd1640..54f859e01 100644 --- a/packages/console/src/assets/images/single-page-app-dark.svg +++ b/packages/console/src/assets/images/single-page-app-dark.svg @@ -4,21 +4,21 @@ - + - - + + - + - + - + diff --git a/packages/console/src/assets/images/single-page-app.svg b/packages/console/src/assets/images/single-page-app.svg index 59e596fe2..d8239af73 100644 --- a/packages/console/src/assets/images/single-page-app.svg +++ b/packages/console/src/assets/images/single-page-app.svg @@ -1,24 +1,24 @@ - + - - + + - + - - + + - + - + - + diff --git a/packages/console/src/assets/images/traditional-web-app-dark.svg b/packages/console/src/assets/images/traditional-web-app-dark.svg index 8a4b68646..3befdf282 100644 --- a/packages/console/src/assets/images/traditional-web-app-dark.svg +++ b/packages/console/src/assets/images/traditional-web-app-dark.svg @@ -1,33 +1,17 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + - - - - - - - + + + diff --git a/packages/console/src/assets/images/traditional-web-app.svg b/packages/console/src/assets/images/traditional-web-app.svg index cb67ce6d9..d69f0f9c8 100644 --- a/packages/console/src/assets/images/traditional-web-app.svg +++ b/packages/console/src/assets/images/traditional-web-app.svg @@ -1,35 +1,15 @@ - - - - - - - - - - - - - - - - - - - + + + + + + - - - - + - - - - - + diff --git a/packages/console/src/components/RadioGroup/index.module.scss b/packages/console/src/components/RadioGroup/index.module.scss index 389c3cdad..b712f4cfd 100644 --- a/packages/console/src/components/RadioGroup/index.module.scss +++ b/packages/console/src/components/RadioGroup/index.module.scss @@ -13,12 +13,12 @@ .card { display: flex; flex-wrap: wrap; - margin: 0 _.unit(-8) _.unit(-8) 0; + gap: _.unit(3); > .radio { position: relative; flex: 1; - min-width: 180px; + min-width: 170px; max-width: 230px; padding: _.unit(5); display: flex; @@ -28,7 +28,6 @@ outline: 1px solid var(--color-neutral-90); user-select: none; cursor: pointer; - margin: 0 _.unit(8) _.unit(8) 0; &.disabled { cursor: not-allowed; diff --git a/packages/console/src/consts/applications.ts b/packages/console/src/consts/applications.ts index dbf80ec03..e83f653ba 100644 --- a/packages/console/src/consts/applications.ts +++ b/packages/console/src/consts/applications.ts @@ -1,5 +1,7 @@ import { ApplicationType } from '@logto/schemas'; +import MachineToMachineDark from '@/assets/images/machine-to-machine-dark.svg'; +import MachineToMachine from '@/assets/images/machine-to-machine.svg'; import NativeAppDark from '@/assets/images/native-app-dark.svg'; import NativeApp from '@/assets/images/native-app.svg'; import SinglePageAppDark from '@/assets/images/single-page-app-dark.svg'; @@ -15,12 +17,12 @@ export const lightModeApplicationIconMap: ApplicationIconMap = Object.freeze({ [ApplicationType.Native]: NativeApp, [ApplicationType.SPA]: SinglePageApp, [ApplicationType.Traditional]: TraditionalWebApp, - [ApplicationType.MachineToMachine]: TraditionalWebApp, + [ApplicationType.MachineToMachine]: MachineToMachine, } as const); export const darkModeApplicationIconMap: ApplicationIconMap = Object.freeze({ [ApplicationType.Native]: NativeAppDark, [ApplicationType.SPA]: SinglePageAppDark, [ApplicationType.Traditional]: TraditionalWebAppDark, - [ApplicationType.MachineToMachine]: TraditionalWebAppDark, + [ApplicationType.MachineToMachine]: MachineToMachineDark, } as const); diff --git a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx index e24ce1695..0e8c6538d 100644 --- a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx +++ b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx @@ -1,24 +1,29 @@ -import { Application, SnakeCaseOidcConfig } from '@logto/schemas'; +import { Application, ApplicationType, SnakeCaseOidcConfig, UserRole } from '@logto/schemas'; import { useEffect } from 'react'; -import { useFormContext } from 'react-hook-form'; +import { Controller, useFormContext } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; import CopyToClipboard from '@/components/CopyToClipboard'; import FormField from '@/components/FormField'; +import Switch from '@/components/Switch'; import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; import * as styles from '../index.module.scss'; type Props = { + applicationType: ApplicationType; oidcConfig: SnakeCaseOidcConfig; defaultData: Application; isDeleted: boolean; }; -const AdvancedSettings = ({ oidcConfig, defaultData, isDeleted }: Props) => { +const AdvancedSettings = ({ applicationType, oidcConfig, defaultData, isDeleted }: Props) => { const { + control, reset, formState: { isDirty }, } = useFormContext(); + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); useEffect(() => { reset(defaultData); @@ -48,6 +53,28 @@ const AdvancedSettings = ({ oidcConfig, defaultData, isDeleted }: Props) => { variant="border" /> + {applicationType === ApplicationType.MachineToMachine && ( + + ( + { + if (checked) { + onChange([...new Set(value.concat(UserRole.Admin))]); + } else { + onChange(value.filter((value) => value !== UserRole.Admin)); + } + }} + /> + )} + /> + + )} ); diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx index 41eaa2593..a8db900e3 100644 --- a/packages/console/src/pages/ApplicationDetails/index.tsx +++ b/packages/console/src/pages/ApplicationDetails/index.tsx @@ -204,6 +204,7 @@ const ApplicationDetails = () => {
{isAdvancedSettings && ( {{name}} to confirm.', enter_your_application_name: 'Enter your application name', diff --git a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts index dd3bf7922..a9151bbb1 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/application-details.ts @@ -30,7 +30,10 @@ const application_details = { id_token_expiration: "Expiration du jeton d'identification", refresh_token_expiration: "Rafraîchir l'expiration du jeton", token_endpoint: 'Token Endpoint', - user_info_endpoint: 'Userinfo endpoint', + user_info_endpoint: 'Userinfo Endpoint', + enable_admin_access: 'Enable admin access', // UNTRANSLATED + enable_admin_access_label: + 'Enable or disable the access to Management API. Once enabled, you can use access tokens to call Management API on behalf on this application.', // UNTRANSLATED delete_description: "Cette action ne peut être annulée. Elle supprimera définitivement l'application. Veuillez entrer le nom de l'application {{nom}} pour confirmer.", enter_your_application_name: "Saisissez votre nom d'application", diff --git a/packages/phrases/src/locales/ko-kr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ko-kr/translation/admin-console/application-details.ts index f3295f5f3..1e6e2f5da 100644 --- a/packages/phrases/src/locales/ko-kr/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ko-kr/translation/admin-console/application-details.ts @@ -31,6 +31,9 @@ const application_details = { refresh_token_expiration: 'Refresh 토큰 만료', token_endpoint: '토큰 End-Point', user_info_endpoint: '사용자 정보 End-Point', + enable_admin_access: 'Enable admin access', // UNTRANSLATED + enable_admin_access_label: + 'Enable or disable the access to Management API. Once enabled, you can use access tokens to call Management API on behalf on this application.', // UNTRANSLATED delete_description: '이 행동은 취소될 수 없어요. 어플리케이션을 영원히 삭제할 거에요. 삭제를 진행하기 위해 {{name}} 를 입력해주세요.', enter_your_application_name: '어플리케이션 이름을 입력해주세요.', diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts index 1d521fcd5..648d1ff7b 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts @@ -31,6 +31,9 @@ const application_details = { refresh_token_expiration: 'Expiração do token de atualização', token_endpoint: 'Endpoint Token', user_info_endpoint: 'Enpoint Userinfo', + enable_admin_access: 'Enable admin access', // UNTRANSLATED + enable_admin_access_label: + 'Enable or disable the access to Management API. Once enabled, you can use access tokens to call Management API on behalf on this application.', // UNTRANSLATED delete_description: 'Esta ação não pode ser desfeita. Isso ira eliminar permanentemente a app. Insira o nome da aplicação {{name}} para confirmar.', enter_your_application_name: 'Digite o nome da aplicação', diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts index 4fb33729c..dc5466041 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts @@ -31,6 +31,9 @@ const application_details = { refresh_token_expiration: 'Refresh Token sona erme süresi', token_endpoint: 'Token bitiş noktası', user_info_endpoint: 'Userinfo bitiş noktası', + enable_admin_access: 'Enable admin access', // UNTRANSLATED + enable_admin_access_label: + 'Enable or disable the access to Management API. Once enabled, you can use access tokens to call Management API on behalf on this application.', // UNTRANSLATED delete_description: 'Bu eylem geri alınamaz. Uygulama kalıcı olarak silinecektir. Lütfen onaylamak için uygulama adı {{name}} girin.', enter_your_application_name: 'Uygulama adı giriniz', diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts index 28555bff3..93a297d74 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts @@ -29,7 +29,10 @@ const application_details = { id_token_expiration: 'ID Token 过期时间', refresh_token_expiration: 'Refresh Token 过期时间', token_endpoint: 'Token Endpoint', - user_info_endpoint: 'UserInfo endpoint', + user_info_endpoint: 'UserInfo Endpoint', + enable_admin_access: 'Enable admin access', // UNTRANSLATED + enable_admin_access_label: + 'Enable or disable the access to Management API. Once enabled, you can use access tokens to call Management API on behalf on this application.', // UNTRANSLATED delete_description: '本操作会永久性地删除该应用，且不可撤销。输入 {{name}} 确认。', enter_your_application_name: '输入你的应用名称', application_deleted: '应用 {{name}} 成功删除.',