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

feat(console, phrases): add data source guides (#5469)

Browse source 
* feat(console, phrases): add data source guides

add data source guides

* chore(console): update some variable naming

update some variable naming
This commit is contained in:
simeng-li 2024-03-06 14:44:58 +08:00 • committed by GitHub
parent 2f72f8ffd7
commit fa6390d770
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 1105 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,4 @@
<svg width="17" height="17" viewBox="0 0 17 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M11.7944 1.74365H3.79435C3.61754 1.74365 3.44797 1.81389 3.32295 1.93891C3.19792 2.06394 3.12769 2.23351 3.12769 2.41032V14.4103C3.12769 14.5871 3.19792 14.7567 3.32295 14.8817C3.44797 15.0067 3.61754 15.077 3.79435 15.077H11.7944C12.3248 15.077 12.8335 14.8663 13.2086 14.4912C13.5836 14.1161 13.7944 13.6074 13.7944 13.077V3.74365C13.7944 3.21322 13.5836 2.70451 13.2086 2.32944C12.8335 1.95437 12.3248 1.74365 11.7944 1.74365ZM5.79435 13.7437H4.46102V3.07699H5.79435V13.7437ZM12.461 13.077C12.461 13.2538 12.3908 13.4234 12.2658 13.5484C12.1407 13.6734 11.9712 13.7437 11.7944 13.7437H7.12769V3.07699H11.7944C11.9712 3.07699 12.1407 3.14722 12.2658 3.27225C12.3908 3.39727 12.461 3.56684 12.461 3.74365V13.077Z" fill="currentcolor" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 854 B

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

@ -0,0 +1,4 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12.3599 6.72788L5.9199 3.03455C5.57142 2.83332 5.1759 2.72791 4.77349 2.72901C4.37109 2.73012 3.97615 2.8377 3.62878 3.04084C3.28142 3.24398 2.994 3.53543 2.79573 3.8856C2.59746 4.23577 2.49539 4.63217 2.4999 5.03455V12.4479C2.4999 13.0526 2.74011 13.6325 3.1677 14.0601C3.59528 14.4877 4.17521 14.7279 4.7799 14.7279C5.18019 14.7272 5.57329 14.6215 5.9199 14.4212L12.3599 10.7279C12.7059 10.5276 12.9932 10.2399 13.193 9.89351C13.3927 9.54715 13.4978 9.15436 13.4978 8.75455C13.4978 8.35473 13.3927 7.96195 13.193 7.61559C12.9932 7.26924 12.7059 6.98149 12.3599 6.78122V6.72788ZM11.6932 9.52121L5.25323 13.2679C5.10889 13.3497 4.94581 13.3927 4.7799 13.3927C4.61399 13.3927 4.45091 13.3497 4.30657 13.2679C4.16263 13.1848 4.04311 13.0653 3.96002 12.9213C3.87693 12.7774 3.8332 12.6141 3.83323 12.4479V5.00788C3.8332 4.84168 3.87693 4.6784 3.96002 4.53446C4.04311 4.39051 4.16263 4.27098 4.30657 4.18788C4.4515 4.10732 4.6141 4.06381 4.7799 4.06122C4.94559 4.06462 5.10799 4.10808 5.25323 4.18788L11.6932 7.90788C11.8372 7.99095 11.9568 8.11046 12.0399 8.25441C12.1231 8.39835 12.1668 8.56165 12.1668 8.72788C12.1668 8.89411 12.1231 9.05741 12.0399 9.20136C11.9568 9.3453 11.8372 9.46482 11.6932 9.54788V9.52121Z" fill="currentcolor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

51
packages/console/src/pages/JwtClaims/RightPanel/GuideCard.tsx Normal file
View file

@ -0,0 +1,51 @@
import classNames from 'classnames';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import CaretExpandedIcon from '@/assets/icons/caret-expanded.svg';
import Card from '@/ds-components/Card';
import { onKeyDownHandler } from '@/utils/a11y';
import * as styles from './index.module.scss';
export enum CardType {
UserData = 'user_data',
TokenData = 'token_data',
FetchExternalData = 'fetch_external_data',
EnvironmentVariables = 'environment_variables',
}
type GuardCardProps = {
name: CardType;
children?: React.ReactNode;
};
function GuideCard({ name, children }: GuardCardProps) {
const [expanded, setExpanded] = useState(false);
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.jwt_claims' });
return (
<Card className={classNames(styles.card, expanded && styles.expanded)}>
<div
className={styles.headerRow}
role="button"
tabIndex={0}
onClick={() => {
setExpanded((expanded) => !expanded);
}}
onKeyDown={onKeyDownHandler(() => {
setExpanded((expanded) => !expanded);
})}
>
<div className={styles.cardHeader}>
<div className={styles.cardTitle}>{t(`${name}.title`)}</div>
<div className={styles.cardSubtitle}>{t(`${name}.subtitle`)}</div>
</div>
<CaretExpandedIcon className={styles.expandButton} />
</div>
<div className={styles.cardContent}>{children}</div>
</Card>
);
}
export default GuideCard;

136
packages/console/src/pages/JwtClaims/RightPanel/index.module.scss Normal file
View file

@ -0,0 +1,136 @@
@use '@/scss/underscore' as _;
.tabs {
display: flex;
align-items: center;
gap: _.unit(4);
margin-bottom: _.unit(4);
.tab {
display: flex;
align-items: center;
border-radius: 100px;
color: var(--color-text);
background: transparent;
border: 1px solid var(--color-specific-selected-disabled);
svg {
width: 16px;
height: 16px;
object-fit: cover;
color: var(--color-text-link);
}
&.active,
&:hover {
background: var(--color-inverse-primary);
color: var(--color-white);
border-color: var(--color-inverse-primary);
svg {
color: var(--color-button-icon);
}
}
}
}
.tabContent {
display: none;
&.active {
display: flex;
flex-direction: column;
gap: _.unit(4);
}
.description {
font: var(--font-body-2);
color: var(--color-text-secondary);
}
.card {
.headerRow {
display: flex;
flex-direction: row;
gap: _.unit(4);
align-items: center;
cursor: pointer;
user-select: none;
}
.cardHeader {
flex: 1;
}
.cardTitle {
font: var(--font-label-2);
color: var(--color-text);
margin-bottom: _.unit(1);
}
.cardSubtitle {
font: var(--font-body-2);
color: var(--color-text-secondary);
}
.expandButton {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
color: var(--color-text-secondary);
}
.cardContent {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
> *:first-child {
margin-top: _.unit(6);
}
}
&.expanded {
.expandButton {
transform: rotate(180deg);
}
.cardContent {
max-height: 1000;
}
}
.table {
.value {
display: inline-block;
padding: _.unit(0.5) _.unit(2);
color: var(--color-text);
background-color: var(--color-bg-info-tag);
border-radius: 4px;
font-family: 'Roboto Mono', monospace;
}
}
}
.editor {
margin-top: _.unit(4);
:global {
/* stylelint-disable-next-line selector-class-pattern */
.monaco-editor {
border-radius: 8px;
/* stylelint-disable-next-line selector-class-pattern */
.overflow-guard {
border-radius: 8px;
}
/* stylelint-disable-next-line selector-class-pattern */
.lines-content {
padding: 0 16px;
}
}
}
}
}

116
packages/console/src/pages/JwtClaims/RightPanel/index.tsx Normal file
View file

@ -0,0 +1,116 @@
import { Editor } from '@monaco-editor/react';
import classNames from 'classnames';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import BookIcon from '@/assets/icons/book.svg';
import StartIcon from '@/assets/icons/start.svg';
import Button from '@/ds-components/Button';
import Table from '@/ds-components/Table';
import {
JwtTokenType,
userDataDescription,
tokenDataDescription,
fetchExternalDataEditorOptions,
fetchExternalDataCodeExample,
} from '../config';
import GuideCard, { CardType } from './GuideCard';
import * as styles from './index.module.scss';
enum Tab {
DataSource = 'data_source_tab',
Test = 'test_tab',
}
type Props = {
tokenType: JwtTokenType;
};
function RightPanel({ tokenType }: Props) {
const [activeTab, setActiveTab] = useState<Tab>(Tab.DataSource);
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const getDataColumns = useCallback(
(valueColSpan = 10) => [
{
title: t('domain.custom.dns_table.value_field'),
dataIndex: 'value',
colSpan: valueColSpan,
render: ({ value }: (typeof userDataDescription)[0]) => (
<span className={styles.value}>{value}</span>
),
},
{
title: t('general.description'),
dataIndex: 'description',
colSpan: 24 - valueColSpan,
render: ({ description }: (typeof userDataDescription)[0]) => (
<span className={styles.description}>{description}</span>
),
},
],
[t]
);
return (
<div>
<div className={styles.tabs}>
{Object.values(Tab).map((tab) => (
<Button
key={tab}
type="primary"
icon={tab === Tab.DataSource ? <BookIcon /> : <StartIcon />}
title={`jwt_claims.${tab}`}
className={classNames(styles.tab, activeTab === tab && styles.active)}
onClick={() => {
setActiveTab(tab);
}}
/>
))}
</div>
<div className={classNames(styles.tabContent, activeTab === Tab.DataSource && styles.active)}>
<div className={styles.description}>{t('jwt_claims.jwt_claims_description')}</div>
{tokenType === JwtTokenType.UserAccessToken && (
<GuideCard name={CardType.UserData}>
<Table
hasBorder
isRowHoverEffectDisabled
className={styles.table}
rowIndexKey="value"
columns={getDataColumns()}
rowGroups={[{ key: 'user_data', data: userDataDescription }]}
/>
</GuideCard>
)}
<GuideCard name={CardType.TokenData}>
<Table
hasBorder
isRowHoverEffectDisabled
className={styles.table}
rowIndexKey="value"
columns={getDataColumns(6)}
rowGroups={[{ key: 'token_data', data: tokenDataDescription }]}
/>
</GuideCard>
<GuideCard name={CardType.FetchExternalData}>
<div className={styles.description}>
{t('jwt_claims.fetch_external_data.description')}
</div>
<Editor
language="typescript"
className={styles.editor}
value={fetchExternalDataCodeExample}
height="300px"
theme="logto-dark"
options={fetchExternalDataEditorOptions}
/>
</GuideCard>
<GuideCard name={CardType.EnvironmentVariables} />
</div>
</div>
);
}
export default RightPanel;

118
packages/console/src/pages/JwtClaims/config.ts
View file

@ -1,5 +1,18 @@
import { type EditorProps } from '@monaco-editor/react';
import type { Model } from './MonacoCodeEditor/type.js';
/**
* JWT token types
*/
export enum JwtTokenType {
UserAccessToken = 'user-access-token',
MachineToMachineAccessToken = 'm2m-access-token',
}
/**
* JWT token code editor configuration
*/
const userJwtGlobalDeclarations = `
declare global {
export interface CustomJwtClaims extends Record<string, any> {}
@ -112,7 +125,104 @@ export const machineToMachineJwtFile: Model = {
globalDeclarations: machineToMachineJwtGlobalDeclarations,
};
export enum JwtTokenType {
UserAccessToken = 'user-access-token',
MachineToMachineAccessToken = 'm2m-access-token',
}
/**
* JWT claims guide card configs
*/
// TODO: align user properties and then i18n the descriptions
type GuideTableData = {
value: string;
description: string;
};
export const userDataDescription: GuideTableData[] = [
{
value: 'user.id',
description: 'Unique identifier of the user.',
},
{
value: 'user.username',
description: 'Username for sign-in',
},
{
value: 'user.primary_email',
description: 'Primary email address of the user.',
},
{
value: 'user.primary_phone',
description: 'Primary phone number of the user.',
},
{
value: 'user.name',
description: 'Full name of the user.',
},
{
value: 'user.avatar',
description: "URL pointing to user's avatar image ",
},
{
value: 'user.identities',
description: 'User info retrieved from social sign-in',
},
{
value: 'user.custom_data',
description: 'Additional info in customizable properties ',
},
];
export const tokenDataDescription: GuideTableData[] = [
{
value: 'iss',
description: '(issuer) Issuer of the JWT.',
},
{
value: 'sub',
description: '(subject) Subject of the JWT.',
},
{
value: 'aud',
description: '(audience) Recipient for which the JWT is intended.',
},
{
value: 'exp',
description: '(expiration) Time after which the JWT expires.',
},
{
value: 'nbf',
description: '(not before) Time before which the JWT must not be accepted for processing.',
},
{
value: 'iat',
description: '(issued at) Time at which the JWT was issued.',
},
{
value: 'jti',
description:
'(JWT ID) Unique identifier for the JWT. Useful for tracking and preventing reuse of the token.',
},
];
export const fetchExternalDataEditorOptions: EditorProps['options'] = {
readOnly: true,
wordWrap: 'on',
minimap: { enabled: false },
renderLineHighlight: 'none',
fontSize: 14,
padding: { top: 16, bottom: 16 },
overviewRulerBorder: false,
overviewRulerLanes: 0,
lineNumbers: 'off',
scrollbar: { vertical: 'hidden', horizontal: 'hidden', handleMouseWheel: false },
folding: false,
};
export const fetchExternalDataCodeExample = `const response = await fetch('https://api.example.com/data', {
headers: {
Authorization: \`{{API KEY}}\`,
}
});
const data = await response.json();
return {
externalData: data,
};`;

2
packages/console/src/pages/JwtClaims/index.module.scss
View file

@ -18,7 +18,7 @@
.tabContent {
display: flex;
flex-direction: row;
gap: _.unit(2);
gap: _.unit(3);
flex-grow: 1;
> * {

3
packages/console/src/pages/JwtClaims/index.tsx
View file

@ -10,6 +10,7 @@ import TabNav, { TabNavItem } from '@/ds-components/TabNav';
import MonacoCodeEditor from './MonacoCodeEditor';
import { type Model } from './MonacoCodeEditor/type';
import RightPanel from './RightPanel';
import { userJwtFile, machineToMachineJwtFile, JwtTokenType } from './config';
import * as styles from './index.module.scss';
@ -66,7 +67,7 @@ function JwtClaims({ tab }: Props) {
</div>
<MonacoCodeEditor className={styles.flexGrow} models={[activeModel]} />
</Card>
<div>Form Panel</div>
<RightPanel tokenType={tab} />
</form>
</div>
);

46
packages/phrases/src/locales/de/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

31
packages/phrases/src/locales/en/translation/admin-console/jwt-claims.ts
View file

@ -7,6 +7,37 @@ const jwt_claims = {
user_jwt: 'user JWT',
machine_to_machine_jwt: 'machine-to-machine JWT',
code_editor_title: 'Customize the {{token}} claims',
data_source_tab: 'Data source',
test_tab: 'Test claim',
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
title: 'User data',
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
title: 'Token data',
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
title: 'Fetch external data',
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
title: 'Set environment variables',
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
title: 'Test',
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/es/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/fr/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/it/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/ja/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/ko/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/pl-pl/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/pt-br/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/pt-pt/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/ru/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/tr-tr/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/zh-cn/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/zh-hk/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

46
packages/phrases/src/locales/zh-tw/translation/admin-console/jwt-claims.ts
View file

@ -14,6 +14,52 @@ const jwt_claims = {
machine_to_machine_jwt: 'machine-to-machine JWT',
/** UNTRANSLATED */
code_editor_title: 'Customize the {{token}} claims',
/** UNTRANSLATED */
data_source_tab: 'Data source',
/** UNTRANSLATED */
test_tab: 'Test claim',
/** UNTRANSLATED */
jwt_claims_description:
'Handler that will be called during the access token generation process to add custom claims to the token. The function should return an object with the custom claims.',
user_data: {
/** UNTRANSLATED */
title: 'User data',
/** UNTRANSLATED */
subtitle:
'Input parameter `data.user`, providing essential user information linked to the present access token.',
},
token_data: {
/** UNTRANSLATED */
title: 'Token data',
/** UNTRANSLATED */
subtitle:
'Input parameter `token`, providing the payload of the current access token for contextual reference.',
},
fetch_external_data: {
/** UNTRANSLATED */
title: 'Fetch external data',
/** UNTRANSLATED */
subtitle: 'Incorporate data sources from your external APIs directly into your custom claims.',
/** UNTRANSLATED */
description:
'Use the `fetch` function to call your external APIs and include the data in your custom claims. Example: ',
},
environment_variables: {
/** UNTRANSLATED */
title: 'Set environment variables',
/** UNTRANSLATED */
subtitle:
'Use environment variables to store sensitive information and access them in your custom claims handler.',
},
/** UNTRANSLATED */
jwt_claims_hint:
'Limit custom claims to under 50KB. Default JWT claims are automatically included in the token and can not be overridden.',
test_data: {
/** UNTRANSLATED */
title: 'Test',
/** UNTRANSLATED */
subtitle: "Edit the context to adjust the token's request states and test your custom claims.",
},
};
export default Object.freeze(jwt_claims);

2
packages/toolkit/core-kit/scss/_console-themes.scss
View file

@ -162,6 +162,7 @@
--color-specific-icon-bg: #f3effa;
--color-specific-toggle-off-enable: var(--color-neutral-90);
--color-specific-unselected-disabled: var(--color-hover); // 8% Neutral-10
--color-specific-selected-disabled: var(--color-primary-80);
--color-function-n-overlay-primary-focused: rgba(93, 52, 242, 16%); // 16% Primary-40
// Shadows
@ -367,6 +368,7 @@
--color-specific-icon-bg: rgba(247, 248, 248, 12%);
--color-specific-toggle-off-enable: var(--color-neutral-90);
--color-specific-unselected-disabled: var(--color-hover); // 8% Neutral-10
--color-specific-selected-disabled: var(--color-primary-80);
--color-function-n-overlay-primary-focused: rgba(202, 190, 255, 16%); // 16% Primary-40
// Shadows