feat(console,phrases): add new jwt claims page (#5448)

* feat(console,phrases): add new jwt claims page

add new jwt claims page

* feat(console, phrases): add token tabs nav

add token tabs nav

* fix(console): remove lint comments

remove lint comments

packages/console/src/App.tsx

@@ -22,10 +22,10 @@ import CloudAppRoutes from '@/cloud/AppRoutes';
 import AppLoading from '@/components/AppLoading';
 import { isCloud } from '@/consts/env';
 import { cloudApi, getManagementApi, meApi } from '@/consts/resources';
+import { ConsoleRoutes } from '@/containers/ConsoleRoutes';
 import useTrackUserId from '@/hooks/use-track-user-id';
 import { OnboardingRoutes } from '@/onboarding';
 import useUserOnboardingData from '@/onboarding/hooks/use-user-onboarding-data';
-import { ConsoleRoutes } from '@/pages/ConsoleRoutes';
 
 import { GlobalScripts } from './components/Conversion';
 import { adminTenantEndpoint, mainTitle } from './consts';

packages/console/src/consts/env.ts

@@ -3,6 +3,6 @@ import { yes } from '@silverhand/essentials';
 export const isProduction = process.env.NODE_ENV === 'production';
 export const isCloud = yes(process.env.IS_CLOUD);
 export const adminEndpoint = process.env.ADMIN_ENDPOINT;
-// eslint-disable-next-line import/no-unused-modules
+
 export const isDevFeaturesEnabled =
   !isProduction || yes(process.env.DEV_FEATURES_ENABLED) || yes(process.env.INTEGRATION_TEST);

packages/console/src/containers/ConsoleContent/index.tsx

@@ -11,7 +11,7 @@ import {
   ApplicationDetailsTabs,
   EnterpriseSsoDetailsTabs,
 } from '@/consts';
-import { isCloud } from '@/consts/env';
+import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
 import ApiResourceDetails from '@/pages/ApiResourceDetails';
@@ -28,6 +28,7 @@ import Dashboard from '@/pages/Dashboard';
 import EnterpriseSsoConnectors from '@/pages/EnterpriseSso';
 import EnterpriseSsoConnectorDetails from '@/pages/EnterpriseSsoDetails';
 import GetStarted from '@/pages/GetStarted';
+import JwtClaims, { JwtTokenType } from '@/pages/JwtClaims';
 import Mfa from '@/pages/Mfa';
 import NotFound from '@/pages/NotFound';
 import OrganizationDetails from '@/pages/OrganizationDetails';
@@ -203,6 +204,19 @@ function ConsoleContent() {
                 )}
               </Route>
             )}
+            {isDevFeaturesEnabled && (
+              <Route path="jwt-claims">
+                <Route index element={<Navigate replace to={JwtTokenType.UserAccessToken} />} />
+                <Route
+                  path={JwtTokenType.UserAccessToken}
+                  element={<JwtClaims tab={JwtTokenType.UserAccessToken} />}
+                />
+                <Route
+                  path={JwtTokenType.MachineToMachineAccessToken}
+                  element={<JwtClaims tab={JwtTokenType.MachineToMachineAccessToken} />}
+                />
+              </Route>
+            )}
           </Routes>
         </div>
       </OverlayScrollbar>

packages/console/src/containers/ConsoleRoutes/index.tsx

@@ -14,12 +14,11 @@ import { GlobalRoute } from '@/contexts/TenantsProvider';
 import Toast from '@/ds-components/Toast';
 import useSwrOptions from '@/hooks/use-swr-options';
 import Callback from '@/pages/Callback';
+import CheckoutSuccessCallback from '@/pages/CheckoutSuccessCallback';
+import HandleSocialCallback from '@/pages/Profile/containers/HandleSocialCallback';
 import Welcome from '@/pages/Welcome';
 import { dropLeadingSlash } from '@/utils/url';
 
-import CheckoutSuccessCallback from '../CheckoutSuccessCallback';
-import HandleSocialCallback from '../Profile/containers/HandleSocialCallback';
-
 function Layout() {
   const swrOptions = useSwrOptions();
 

packages/console/src/pages/JwtClaims/index.module.scss

@@ -0,0 +1,12 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .cardTitle {
+    flex-shrink: 0;
+    margin-bottom: _.unit(4);
+  }
+}

packages/console/src/pages/JwtClaims/index.tsx

@@ -0,0 +1,46 @@
+import { withAppInsights } from '@logto/app-insights/react/AppInsightsReact';
+import { useTranslation } from 'react-i18next';
+
+import CardTitle from '@/ds-components/CardTitle';
+import TabNav, { TabNavItem } from '@/ds-components/TabNav';
+
+import * as styles from './index.module.scss';
+import { JwtTokenType } from './type';
+
+export * from './type';
+
+type Props = {
+  tab: JwtTokenType;
+};
+
+const getPath = (tab: JwtTokenType) => `/jwt-claims/${tab}`;
+
+function JwtClaims({ tab }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <div className={styles.container}>
+      <CardTitle
+        title="jwt_claims.title"
+        subtitle="jwt_claims.description"
+        className={styles.cardTitle}
+      />
+      <TabNav>
+        <TabNavItem
+          href={getPath(JwtTokenType.UserAccessToken)}
+          isActive={tab === JwtTokenType.UserAccessToken}
+        >
+          {t('jwt_claims.user_jwt_tab')}
+        </TabNavItem>
+        <TabNavItem
+          href={getPath(JwtTokenType.MachineToMachineAccessToken)}
+          isActive={tab === JwtTokenType.MachineToMachineAccessToken}
+        >
+          {t('jwt_claims.machine_to_machine_jwt_tab')}
+        </TabNavItem>
+      </TabNav>
+    </div>
+  );
+}
+
+export default withAppInsights(JwtClaims);

packages/console/src/pages/JwtClaims/type.ts

@@ -0,0 +1,4 @@
+export enum JwtTokenType {
+  UserAccessToken = 'user-access-token',
+  MachineToMachineAccessToken = 'm2m-access-token',
+}

packages/phrases/src/locales/de/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/en/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,9 @@
+const jwt_claims = {
+  title: 'JWT claims',
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  user_jwt_tab: 'User JWT',
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/es/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/fr/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/it/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/ja/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/ko/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/pl-pl/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/pt-br/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/pt-pt/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/ru/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/tr-tr/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/zh-cn/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/zh-hk/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);

packages/phrases/src/locales/zh-tw/translation/admin-console/index.ts

@@ -15,6 +15,7 @@ import errors from './errors.js';
 import general from './general.js';
 import get_started from './get-started.js';
 import guide from './guide.js';
+import jwt_claims from './jwt-claims.js';
 import log_details from './log-details.js';
 import logs from './logs.js';
 import menu from './menu.js';
@@ -85,6 +86,7 @@ const admin_console = {
   organizations,
   organization_details,
   protected_app,
+  jwt_claims,
 };
 
 export default Object.freeze(admin_console);

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

@@ -0,0 +1,13 @@
+const jwt_claims = {
+  /** UNTRANSLATED */
+  title: 'JWT claims',
+  /** UNTRANSLATED */
+  description:
+    'Set up custom JWT claims to include in the access token. These claims can be used to pass additional information to your application.',
+  /** UNTRANSLATED */
+  user_jwt_tab: 'User JWT',
+  /** UNTRANSLATED */
+  machine_to_machine_jwt_tab: 'Machine-to-Machine JWT',
+};
+
+export default Object.freeze(jwt_claims);