diff --git a/.changeset/curvy-paws-breathe.md b/.changeset/curvy-paws-breathe.md new file mode 100644 index 000000000..0294f1e19 --- /dev/null +++ b/.changeset/curvy-paws-breathe.md @@ -0,0 +1,6 @@ +--- +"@logto/console": minor +"@logto/phrases": minor +--- + +feat(console): support signing-key rotation diff --git a/packages/console/src/assets/icons/key.svg b/packages/console/src/assets/icons/key.svg new file mode 100644 index 000000000..821b2ce86 --- /dev/null +++ b/packages/console/src/assets/icons/key.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/src/consts/external-links.ts b/packages/console/src/consts/external-links.ts index f86437c5c..bfd69f3e2 100644 --- a/packages/console/src/consts/external-links.ts +++ b/packages/console/src/consts/external-links.ts @@ -23,3 +23,4 @@ export const logtoThirdPartyGuideLink = '/docs/recipes/logto-as-idp/'; export const logtoThirdPartyAppPermissionsLink = '/docs/recipes/logto-as-idp/permissions-management/'; export const logtoThirdPartyAppBrandingLink = '/docs/recipes/logto-as-idp/branding-customization/'; +export const signingKeysLink = '/docs/recipes/openid-connect/signing-keys-rotation/'; diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx index 5ea3954bc..e85ef4af1 100644 --- a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx +++ b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx @@ -9,6 +9,7 @@ import Connection from '@/assets/icons/connection.svg'; import Gear from '@/assets/icons/gear.svg'; import Hook from '@/assets/icons/hook.svg'; import JwtClaims from '@/assets/icons/jwt-claims.svg'; +import Key from '@/assets/icons/key.svg'; import List from '@/assets/icons/list.svg'; import Organization from '@/assets/icons/organization.svg'; import UserProfile from '@/assets/icons/profile.svg'; @@ -116,6 +117,10 @@ export const useSidebarMenuItems = (): { { title: 'developer', items: [ + { + Icon: Key, + title: 'signing_keys', + }, { Icon: JwtClaims, title: 'jwt_customizer', diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx index eea7da055..323bac321 100644 --- a/packages/console/src/containers/ConsoleContent/index.tsx +++ b/packages/console/src/containers/ConsoleContent/index.tsx @@ -48,6 +48,7 @@ import RoleUsers from '@/pages/RoleDetails/RoleUsers'; import Roles from '@/pages/Roles'; import SignInExperience from '@/pages/SignInExperience'; import { SignInExperienceTab } from '@/pages/SignInExperience/types'; +import SigningKeys from '@/pages/SigningKeys'; import TenantSettings from '@/pages/TenantSettings'; import BillingHistory from '@/pages/TenantSettings/BillingHistory'; import Subscription from '@/pages/TenantSettings/Subscription'; @@ -193,6 +194,7 @@ function ConsoleContent() { } /> } /> + } /> {isCloud && ( }> } /> diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.module.scss b/packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.module.scss similarity index 100% rename from packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.module.scss rename to packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.module.scss diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.tsx b/packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.tsx similarity index 75% rename from packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.tsx rename to packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.tsx index 14e47b956..180279fdb 100644 --- a/packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.tsx +++ b/packages/console/src/pages/SigningKeys/SigningKeyFormCard/index.tsx @@ -13,24 +13,25 @@ import Delete from '@/assets/icons/delete.svg'; import FormCard from '@/components/FormCard'; import Button from '@/ds-components/Button'; import DangerConfirmModal from '@/ds-components/DeleteConfirmModal'; -import DynamicT from '@/ds-components/DynamicT'; import FormField from '@/ds-components/FormField'; import IconButton from '@/ds-components/IconButton'; import Select from '@/ds-components/Select'; -import TabNav, { TabNavItem } from '@/ds-components/TabNav'; import Table from '@/ds-components/Table'; import Tag from '@/ds-components/Tag'; import useApi, { type RequestError } from '@/hooks/use-api'; import * as styles from './index.module.scss'; -function SigningKeys() { +type Props = { + keyType: LogtoOidcConfigKeyType; +}; + +function SigningKeyFormCard({ keyType }: Props) { const api = useApi(); - const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.tenants.signing_keys' }); - const [keyType, setKeyType] = useState( - LogtoOidcConfigKeyType.PrivateKeys - ); + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.signing_keys' }); + const isPrivateKey = keyType === LogtoOidcConfigKeyType.PrivateKeys; + const keyTypePhrase = isPrivateKey ? 'private' : 'cookie'; const { data, error, mutate } = useSWR( `api/configs/oidc/${keyType}` @@ -96,26 +97,11 @@ function SigningKeys() { ); return ( - - - { - setKeyType(LogtoOidcConfigKeyType.PrivateKeys); - }} - > - - - { - setKeyType(LogtoOidcConfigKeyType.CookieKeys); - }} - > - - - - + + - +
-
- {t(`rotate_${isPrivateKey ? 'private' : 'cookie'}_keys_description`)} -
+
{t(`rotate_${keyTypePhrase}_keys_description`)}
{ setShowRotateConfirmModal(false); @@ -164,11 +148,11 @@ function SigningKeys() { > }}> - {t(`reminder.rotate_${isPrivateKey ? 'private' : 'cookie'}_key`)} + {t(`reminder.rotate_${keyTypePhrase}_key`)} {isPrivateKey && ( - +