From 14259f8cd6c3b13672200174273f755d124e1fe4 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Wed, 31 Jan 2024 14:52:13 +0800 Subject: [PATCH] feat(console,phrases): add verify JWT notice in protected app details page (#5352) --- packages/console/src/assets/icons/alert.svg | 4 ++++ .../InlineNotification/index.module.scss | 4 ---- .../InlineNotification/index.tsx | 7 +++++-- .../ProtectedAppSettings/index.tsx | 21 +++++++++++++++++++ .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- .../admin-console/application-details.ts | 2 +- 19 files changed, 45 insertions(+), 21 deletions(-) create mode 100644 packages/console/src/assets/icons/alert.svg diff --git a/packages/console/src/assets/icons/alert.svg b/packages/console/src/assets/icons/alert.svg new file mode 100644 index 000000000..ac49a3b4b --- /dev/null +++ b/packages/console/src/assets/icons/alert.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/console/src/ds-components/InlineNotification/index.module.scss b/packages/console/src/ds-components/InlineNotification/index.module.scss index 1b4dfb3d3..c3afe35b6 100644 --- a/packages/console/src/ds-components/InlineNotification/index.module.scss +++ b/packages/console/src/ds-components/InlineNotification/index.module.scss @@ -35,10 +35,6 @@ &.alert { background: var(--color-alert-container); - - .icon { - color: var(--color-on-alert-container); - } } &.success { diff --git a/packages/console/src/ds-components/InlineNotification/index.tsx b/packages/console/src/ds-components/InlineNotification/index.tsx index b6c11da5c..5dd043cbe 100644 --- a/packages/console/src/ds-components/InlineNotification/index.tsx +++ b/packages/console/src/ds-components/InlineNotification/index.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import { forwardRef } from 'react'; import type { ReactNode, Ref } from 'react'; +import Alert from '@/assets/icons/alert.svg'; import Info from '@/assets/icons/info.svg'; import Error from '@/assets/icons/toast-error.svg'; import Success from '@/assets/icons/toast-success.svg'; @@ -29,10 +30,12 @@ type Props = { function NotificationIcon({ severity }: Required>) { switch (severity) { - case 'info': - case 'alert': { + case 'info': { return ; } + case 'alert': { + return ; + } case 'success': { return ; } diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx index 93a4d9440..027ea613b 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx @@ -17,9 +17,11 @@ import OpenExternalLink from '@/components/OpenExternalLink'; import Button from '@/ds-components/Button'; import CopyToClipboard from '@/ds-components/CopyToClipboard'; import FormField from '@/ds-components/FormField'; +import InlineNotification from '@/ds-components/InlineNotification'; 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 useDocumentationUrl from '@/hooks/use-documentation-url'; import AddDomainForm from '@/pages/TenantSettings/TenantDomainSettings/AddDomainForm'; @@ -209,6 +211,25 @@ function ProtectedAppSettings({ data }: Props) { ))} + + + + ), + }} + > + {t('application_details.implement_jwt_verification_description')} + + + 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 eacd3dd8c..c7834cd4e 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 d608e8279..4590ba3b8 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 @@ -84,7 +84,7 @@ const application_details = { 'Redirect your authentication button using the specified routes. Note: These routes are irreplaceable.', implement_jwt_verification: 'Implement JWT verification', implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', 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 7bb7a84ff..1834d2f18 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 fb9fd5c98..88dedc5f5 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 8c0d036df..3d4711f8c 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 118df6741..6e1fe7f9c 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 2ba7eba27..a7c28700b 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 50918e7b9..2e858aa6a 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 33c4d961b..5717d7130 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 8b6aa1ec2..71cc0c12e 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 2cd63390f..c59fdd643 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 a9b0a119f..7cc0f2e25 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 @@ -107,7 +107,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 342b40d96..29f7b0ad8 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 @@ -105,7 +105,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 2ba590627..231eb0695 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 @@ -105,7 +105,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** 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 5cc0d4e9e..337cc3038 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 @@ -106,7 +106,7 @@ const application_details = { implement_jwt_verification: 'Implement JWT verification', /** UNTRANSLATED */ implement_jwt_verification_description: - 'Configure JWT in your service for essential security communication. Follow the JWT implementation guide.', + '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.', /** UNTRANSLATED */ session_duration: 'Session duration (days)', /** UNTRANSLATED */