From f652560da9a475ed24c8c653dab73daf098a047a Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Fri, 2 Feb 2024 11:50:47 +0800 Subject: [PATCH] feat(console): add endpoints and credentials section to protected app details (#5367) --- .../EndpointsAndCredentials.tsx | 6 +++++- .../ProtectedAppSettings/index.tsx | 15 +++++++++++---- .../ApplicationDetailsContent/Settings.tsx | 2 +- .../ApplicationDetailsContent/index.tsx | 1 + .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- .../admin-console/application-details.ts | 6 +++--- 19 files changed, 63 insertions(+), 51 deletions(-) diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials.tsx index dc6f64e39..85cfe68c1 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials.tsx +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials.tsx @@ -140,7 +140,11 @@ function EndpointsAndCredentials({ app: { type, secret, id, isThirdParty }, oidc - {[ApplicationType.Traditional, ApplicationType.MachineToMachine].includes(type) && ( + {[ + ApplicationType.Traditional, + ApplicationType.MachineToMachine, + ApplicationType.Protected, + ].includes(type) && ( diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx index 440ce3d9f..b6cad94bb 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx @@ -3,6 +3,7 @@ import { DomainStatus, type Application, type CustomDomain as CustomDomainType, + type SnakeCaseOidcConfig, } from '@logto/schemas'; import { cond } from '@silverhand/essentials'; import classNames from 'classnames'; @@ -17,6 +18,7 @@ import DomainStatusTag from '@/components/DomainStatusTag'; import FormCard from '@/components/FormCard'; import OpenExternalLink from '@/components/OpenExternalLink'; import { isCloud, isDevFeaturesEnabled } from '@/consts/env'; +import { openIdProviderConfigPath } from '@/consts/oidc'; import Button from '@/ds-components/Button'; import CopyToClipboard from '@/ds-components/CopyToClipboard'; import FormField from '@/ds-components/FormField'; @@ -25,11 +27,12 @@ import Spacer from '@/ds-components/Spacer'; import TextInput from '@/ds-components/TextInput'; import NumericInput from '@/ds-components/TextInput/NumericInput'; import TextLink from '@/ds-components/TextLink'; -import useApi from '@/hooks/use-api'; +import useApi, { type RequestError } from '@/hooks/use-api'; import useDocumentationUrl from '@/hooks/use-documentation-url'; import AddDomainForm from '@/pages/TenantSettings/TenantDomainSettings/AddDomainForm'; import CustomDomain from '@/pages/TenantSettings/TenantDomainSettings/CustomDomain'; +import EndpointsAndCredentials from '../EndpointsAndCredentials'; import { type ApplicationForm } from '../utils'; import * as styles from './index.module.scss'; @@ -44,6 +47,9 @@ const maxSessionDuration = 365; // 1 year function ProtectedAppSettings({ data }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { getDocumentationUrl } = useDocumentationUrl(); + const { data: oidcConfig } = useSWRImmutable( + openIdProviderConfigPath + ); const { data: customDomains = [], isLoading: isLoadingCustomDomain, @@ -76,7 +82,7 @@ function ProtectedAppSettings({ data }: Props) { } }, [fields.length, setValue]); - if (!data.protectedAppMetadata) { + if (!data.protectedAppMetadata || !oidcConfig) { return null; } @@ -241,7 +247,7 @@ function ProtectedAppSettings({ data }: Props) { ))} - + - {t('application_details.implement_jwt_verification_description')} + {t('application_details.protect_origin_server_description')} + (); - const { type: applicationType, isThirdParty } = data; + const { type: applicationType } = data; const isNativeApp = applicationType === ApplicationType.Native; const isProtectedApp = applicationType === ApplicationType.Protected; diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx index 089a0ceaf..5415f9387 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/index.tsx @@ -192,6 +192,7 @@ function ApplicationDetailsContent({ data, oidcConfig, onApplicationUpdated }: P onSubmit={onSubmit} > + {/* Protected apps will reference this section in component */} {data.type !== ApplicationType.Protected && ( )} diff --git a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts index ba8aecc58..975b4ed88 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/application-details.ts @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts index 4060689a1..de113eca7 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts @@ -80,9 +80,9 @@ const application_details = { "Here are two case scenarios:
  1. To only protect routes '/admin' and '/privacy' with authentication: ^/(admin|privacy)/.*
  2. To exclude JPG images from authentication: ^(?!.*\\.jpg$).*$
", authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', - implement_jwt_verification: 'Implement JWT verification', - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server: 'Protect your origin server', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', session_duration: 'Session duration (days)', try_it: 'Try it', branding: { diff --git a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts index f68cb1b7e..3163190d8 100644 --- a/packages/phrases/src/locales/es/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/es/translation/admin-console/application-details.ts @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ 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 952d24600..c27f0d4d9 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 @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts index f4a1f8b47..1800e5b85 100644 --- a/packages/phrases/src/locales/it/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/it/translation/admin-console/application-details.ts @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts index 664af2da0..fa99ad269 100644 --- a/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ja/translation/admin-console/application-details.ts @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts index 074cf7065..afdab6b1f 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/application-details.ts @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts index 71f7d502c..5109d54eb 100644 --- a/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts index b683f5049..880a8c495 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ 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 a88da928b..a494b65ab 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 @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts index 8da897c3c..2d17797dd 100644 --- a/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/ru/translation/admin-console/application-details.ts @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ 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 24feaef91..3207b3b62 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 @@ -101,10 +101,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ 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 3140ed8d3..7a7e91aeb 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 @@ -99,10 +99,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts index 837520881..fc5d83eda 100644 --- a/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts @@ -99,10 +99,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */ diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts index 84a24abaf..a6adcb7c2 100644 --- a/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts +++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts @@ -100,10 +100,10 @@ const application_details = { authentication_routes_description: 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', /** UNTRANSLATED */ - implement_jwt_verification: 'Implement JWT verification', + protect_origin_server: 'Protect your origin server', /** UNTRANSLATED */ - implement_jwt_verification_description: - 'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please follow the guide.', + protect_origin_server_description: + 'Ensure to protect your origin server from direct access. Refer to the guide for more detailed instructions.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */