diff --git a/packages/console/src/components/DateTime/index.tsx b/packages/console/src/components/DateTime/index.tsx index 766d94d28..c40b39bfd 100644 --- a/packages/console/src/components/DateTime/index.tsx +++ b/packages/console/src/components/DateTime/index.tsx @@ -1,18 +1,30 @@ -import type { Nullable } from '@silverhand/essentials'; +import { type Nullable } from '@silverhand/essentials'; import { isValid } from 'date-fns'; -type Props = { - readonly children: Nullable; -}; - -function DateTime({ children }: Props) { - const date = children && new Date(children); - - if (!date || !isValid(date)) { - return -; +const parseDate = (date: Nullable) => { + if (!date) { + return; } - return {date.toLocaleDateString()}; + const parsed = new Date(date); + return isValid(parsed) ? parsed : undefined; +}; + +type Props = { + readonly children: Nullable; +}; + +/** + * Safely display a date in the user's locale. If the date is invalid, it will display a dash. + */ +export function LocaleDate({ children }: Props) { + return {parseDate(children)?.toLocaleDateString() ?? '-'}; } -export default DateTime; +/** + * Safely display a date and time in the user's locale. If the date is invalid, it will display a + * dash. + */ +export function LocaleDateTime({ children }: Props) { + return {parseDate(children)?.toLocaleString() ?? '-'}; +} diff --git a/packages/console/src/components/Guide/index.tsx b/packages/console/src/components/Guide/index.tsx index f697cdf70..d68f76139 100644 --- a/packages/console/src/components/Guide/index.tsx +++ b/packages/console/src/components/Guide/index.tsx @@ -7,6 +7,7 @@ import { type GuideMetadata } from '@/assets/docs/guides/types'; import Button from '@/ds-components/Button'; import OverlayScrollbar from '@/ds-components/OverlayScrollbar'; import MdxProvider from '@/mdx-components/MdxProvider'; +import { type ApplicationSecretRow } from '@/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials'; import NotFound from '@/pages/NotFound'; import StepsSkeleton from './StepsSkeleton'; @@ -19,6 +20,7 @@ export type GuideContextType = { | ((props: { readonly className?: string }) => JSX.Element); isCompact: boolean; app?: ApplicationResponse; + secrets?: ApplicationSecretRow[]; endpoint?: string; redirectUris?: string[]; postLogoutRedirectUris?: string[]; @@ -40,6 +42,7 @@ export const GuideContext = createContext({ metadata: {} as GuideMetadata, // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, no-restricted-syntax app: {} as ApplicationResponse, + secrets: [], endpoint: '', redirectUris: [], postLogoutRedirectUris: [], diff --git a/packages/console/src/ds-components/CopyToClipboard/index.module.scss b/packages/console/src/ds-components/CopyToClipboard/index.module.scss index 3989a2726..a2a60f55e 100644 --- a/packages/console/src/ds-components/CopyToClipboard/index.module.scss +++ b/packages/console/src/ds-components/CopyToClipboard/index.module.scss @@ -72,11 +72,6 @@ } .dot { - flex-shrink: 0; - display: inline-block; - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--color-text-secondary); + -webkit-text-stroke: 1px var(--color-text); } } diff --git a/packages/console/src/ds-components/CopyToClipboard/index.tsx b/packages/console/src/ds-components/CopyToClipboard/index.tsx index 2fe3e52f2..6b1fbde92 100644 --- a/packages/console/src/ds-components/CopyToClipboard/index.tsx +++ b/packages/console/src/ds-components/CopyToClipboard/index.tsx @@ -60,10 +60,7 @@ function CopyToClipboard( return value; } - return Array.from({ length: Math.max(Math.floor((value.length / 5) * 3), 1) }).map( - // eslint-disable-next-line react/no-array-index-key -- No need to persist the key - (_, index) => - ); + return {'•'.repeat(value.length)}; }, [hasVisibilityToggle, showHiddenContent, value]); useEffect(() => { diff --git a/packages/console/src/mdx-components/ApplicationCredentials/index.tsx b/packages/console/src/mdx-components/ApplicationCredentials/index.tsx index 332fc172d..8283c84fe 100644 --- a/packages/console/src/mdx-components/ApplicationCredentials/index.tsx +++ b/packages/console/src/mdx-components/ApplicationCredentials/index.tsx @@ -9,8 +9,8 @@ import TextLink from '@/ds-components/TextLink'; import styles from './index.module.scss'; function ApplicationCredentials() { - const { app } = useContext(GuideContext); - const { id, secret } = app ?? {}; + const { app, secrets } = useContext(GuideContext); + const { id } = app ?? {}; const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); return ( @@ -37,12 +37,12 @@ function ApplicationCredentials() { )} - {secret && ( + {secrets?.[0] && ( diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials/index.module.scss b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials/index.module.scss index c017eeb91..3433636aa 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials/index.module.scss +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials/index.module.scss @@ -31,7 +31,7 @@ button.add { } .expired { - color: var(--color-text-secondary); + color: var(--color-placeholder); } .copyToClipboard { diff --git a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials/use-secret-table-columns.tsx b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials/use-secret-table-columns.tsx index 46db4f69e..72082f38c 100644 --- a/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials/use-secret-table-columns.tsx +++ b/packages/console/src/pages/ApplicationDetails/ApplicationDetailsContent/EndpointsAndCredentials/use-secret-table-columns.tsx @@ -4,6 +4,7 @@ import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import ActionsButton from '@/components/ActionsButton'; +import { LocaleDateTime } from '@/components/DateTime'; import CopyToClipboard from '@/ds-components/CopyToClipboard'; import { type Column } from '@/ds-components/Table/types'; import { Tooltip } from '@/ds-components/Tip'; @@ -68,7 +69,7 @@ export const useSecretTableColumns = ({ appId, onUpdated }: UseSecretTableColumn compareDesc(expiresAt, new Date()) === 1 ? ( ) : ( - new Date(expiresAt).toLocaleString() + {expiresAt} ) ) : ( t('application_details.secrets.never') diff --git a/packages/console/src/pages/OrganizationDetails/Members/index.tsx b/packages/console/src/pages/OrganizationDetails/Members/index.tsx index 36e2fea56..53fcf5043 100644 --- a/packages/console/src/pages/OrganizationDetails/Members/index.tsx +++ b/packages/console/src/pages/OrganizationDetails/Members/index.tsx @@ -6,7 +6,7 @@ import useSWR from 'swr'; import Plus from '@/assets/icons/plus.svg?react'; import ActionsButton from '@/components/ActionsButton'; -import DateTime from '@/components/DateTime'; +import { LocaleDate } from '@/components/DateTime'; import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder'; import UserPreview from '@/components/ItemPreview/UserPreview'; import { RoleOption } from '@/components/OrganizationRolesSelect'; @@ -96,7 +96,7 @@ function Members() { dataIndex: 'lastSignInAt', title: t('users.latest_sign_in'), colSpan: 5, - render: ({ lastSignInAt }) => {lastSignInAt}, + render: ({ lastSignInAt }) => {lastSignInAt}, }, { dataIndex: 'actions', diff --git a/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx b/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx index 0aa9e4718..a616e1634 100644 --- a/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx +++ b/packages/console/src/pages/RoleDetails/RoleUsers/index.tsx @@ -9,7 +9,7 @@ import useSWR from 'swr'; import Delete from '@/assets/icons/delete.svg?react'; import Plus from '@/assets/icons/plus.svg?react'; import ApplicationName from '@/components/ApplicationName'; -import DateTime from '@/components/DateTime'; +import { LocaleDate } from '@/components/DateTime'; import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder'; import UserPreview from '@/components/ItemPreview/UserPreview'; import { defaultPageSize } from '@/consts'; @@ -103,7 +103,7 @@ function RoleUsers() { title: t('role_details.users.latest_sign_in_column'), dataIndex: 'latestSignIn', colSpan: 5, - render: ({ lastSignInAt }) => {lastSignInAt}, + render: ({ lastSignInAt }) => {lastSignInAt}, }, { title: null, diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx index f12f12ae2..1dd66e891 100644 --- a/packages/console/src/pages/Users/index.tsx +++ b/packages/console/src/pages/Users/index.tsx @@ -8,7 +8,7 @@ import Plus from '@/assets/icons/plus.svg?react'; import UsersEmptyDark from '@/assets/images/users-empty-dark.svg?react'; import UsersEmpty from '@/assets/images/users-empty.svg?react'; import ApplicationName from '@/components/ApplicationName'; -import DateTime from '@/components/DateTime'; +import { LocaleDate } from '@/components/DateTime'; import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder'; import ItemPreview from '@/components/ItemPreview'; import ListPage from '@/components/ListPage'; @@ -104,7 +104,7 @@ function Users() { title: t('users.latest_sign_in'), dataIndex: 'lastSignInAt', colSpan: 5, - render: ({ lastSignInAt }) => {lastSignInAt}, + render: ({ lastSignInAt }) => {lastSignInAt}, }, ], filter: ( 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 879cc78c6..5508658b9 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 @@ -179,7 +179,7 @@ const application_details = { expiration: 'Expiration', expiration_description: 'The secret will expire at {{date}}.', expiration_description_never: - 'The secret will never expire. We recommend setting an expiration date for better security.', + 'The secret will never expire. We recommend setting an expiration date for enhanced security.', days: '{{count}} day', days_other: '{{count}} days', },