Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-24 22:41:28 -05:00
Code Issues Activity

feat(console,phrases): add verify JWT notice in protected app details page (#5352)

Browse source
This commit is contained in:
Charles Zhao 2024-01-31 14:52:13 +08:00 • committed by GitHub
parent 75f4341e17
commit 14259f8cd6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 45 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/assets/icons/alert.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.99996 1.66699C8.35179 1.66699 6.74062 2.15573 5.37021 3.07141C3.9998 3.98709 2.9317 5.28858 2.30097 6.8113C1.67024 8.33401 1.50521 10.0096 1.82675 11.6261C2.1483 13.2426 2.94197 14.7274 4.10741 15.8929C5.27284 17.0583 6.7577 17.852 8.37421 18.1735C9.99072 18.4951 11.6663 18.33 13.189 17.6993C14.7117 17.0686 16.0132 16.0005 16.9289 14.6301C17.8446 13.2597 18.3333 11.6485 18.3333 10.0003C18.3333 8.90597 18.1177 7.82234 17.699 6.8113C17.2802 5.80025 16.6663 4.88159 15.8925 4.10777C15.1187 3.33395 14.2 2.72012 13.189 2.30133C12.1779 1.88254 11.0943 1.66699 9.99996 1.66699Z" fill="white"/>
<path d="M9.99996 1.66699C5.41663 1.66699 1.66663 5.41699 1.66663 10.0003C1.66663 14.5837 5.41663 18.3337 9.99996 18.3337C14.5833 18.3337 18.3333 14.5837 18.3333 10.0003C18.3333 5.41699 14.5833 1.66699 9.99996 1.66699ZM9.99996 14.167C9.49996 14.167 9.16663 13.8337 9.16663 13.3337C9.16663 12.8337 9.49996 12.5003 9.99996 12.5003C10.5 12.5003 10.8333 12.8337 10.8333 13.3337C10.8333 13.8337 10.5 14.167 9.99996 14.167ZM10.8333 10.0003C10.8333 10.5003 10.5 10.8337 9.99996 10.8337C9.49996 10.8337 9.16663 10.5003 9.16663 10.0003V6.66699C9.16663 6.16699 9.49996 5.83366 9.99996 5.83366C10.5 5.83366 10.8333 6.16699 10.8333 6.66699V10.0003Z" fill="#EB9918"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
packages/console/src/ds-components/InlineNotification/index.module.scss
View file

@ -35,10 +35,6 @@
&.alert {
background: var(--color-alert-container);
.icon {
color: var(--color-on-alert-container);
}
}
&.success {

7
packages/console/src/ds-components/InlineNotification/index.tsx
View file

@ -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<Pick<Props, 'severity'>>) {
switch (severity) {
case 'info':
case 'alert': {
case 'info': {
return <Info />;
}
case 'alert': {
return <Alert />;
}
case 'success': {
return <Success />;
}

21
packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/ProtectedAppSettings/index.tsx
View file

@ -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) {
))}
</div>
</FormField>
<FormField title="application_details.implement_jwt_verification">
<InlineNotification severity="alert">
<Trans
components={{
a: (
<TextLink
// TODO: @charles please update the doc link
href={getDocumentationUrl(
'/docs/recipes/protect-your-api/#validate-the-api-requests-authorization-token'
)}
targetBlank="noopener"
/>
),
}}
>
{t('application_details.implement_jwt_verification_description')}
</Trans>
</InlineNotification>
</FormField>
</FormCard>
<FormCard title="application_details.session">
<FormField title="application_details.session_duration">

2
packages/phrases/src/locales/de/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/en/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
session_duration: 'Session duration (days)',
try_it: 'Try it',
branding: {

2
packages/phrases/src/locales/es/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/fr/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/it/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/ja/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/ko/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/pl-pl/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/pt-br/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/pt-pt/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/ru/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/zh-hk/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */

2
packages/phrases/src/locales/zh-tw/translation/admin-console/application-details.ts
View file

@ -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 <a>JWT implementation guide</a>.',
'Validating JWT in your service before going online is essential for secure communications. Without it, your app will remain vulnerable to unauthorized access. Please <a>follow the guide</a>.',
/** UNTRANSLATED */
session_duration: 'Session duration (days)',
/** UNTRANSLATED */