diff --git a/src/components/provider-info-dialog/ProviderInfoDialog.stories.tsx b/src/components/provider-info-dialog/ProviderInfoDialog.stories.tsx new file mode 100644 index 00000000..c84bb6e6 --- /dev/null +++ b/src/components/provider-info-dialog/ProviderInfoDialog.stories.tsx @@ -0,0 +1,49 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { ProviderInfoDialog } from "./ProviderInfoDialog"; +import type { IProviderInfo } from "@peculiar/fortify-client-core"; + +const meta: Meta = { + title: "Components/ProviderInfoDialog", + component: ProviderInfoDialog, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + data: { + name: "MacOS Crypto", + version: 0, + isHardware: true, + token: { + label: "MacOS Crypto", + firmwareVersion: { + major: 0, + minor: 1, + version: 0, + }, + flags: 1064, + freePrivateMemory: 18446744073709552000, + freePublicMemory: 18446744073709552000, + hardwareVersion: { + major: 0, + minor: 1, + version: 0, + }, + manufacturerID: "Peculiar Ventures", + maxPinLen: 255, + maxRwSessionCount: 0, + maxSessionCount: 0, + minPinLen: 4, + model: "MacOS Crypto", + rwSessionCount: 0, + serialNumber: "1", + sessionCount: 0, + totalPrivateMemory: 18446744073709552000, + totalPublicMemory: 18446744073709552000, + version: 0, + }, + } as IProviderInfo, + }, +}; diff --git a/src/components/provider-info-dialog/ProviderInfoDialog.tsx b/src/components/provider-info-dialog/ProviderInfoDialog.tsx new file mode 100644 index 00000000..b03d660a --- /dev/null +++ b/src/components/provider-info-dialog/ProviderInfoDialog.tsx @@ -0,0 +1,68 @@ +import React from "react"; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Typography, +} from "@peculiar/react-components"; +import { useTranslation } from "react-i18next"; +import type { IProviderInfo } from "@peculiar/fortify-client-core"; + +import styles from "./styles/index.module.scss"; + +interface ProviderInfoDialogProps { + data: IProviderInfo; + onDialogClose: () => void; +} + +export const ProviderInfoDialog: React.FunctionComponent< + ProviderInfoDialogProps +> = (props) => { + const { onDialogClose, data } = props; + const { t } = useTranslation(); + + const items = [ + { + label: t("providers.dialog.info.list.token-name"), + value: data.token?.label, + }, + { + label: t("providers.dialog.info.list.token-category.label"), + value: t( + `providers.dialog.info.list.token-category.value.${data.isHardware ? "hardware" : "software"}` + ), + }, + ]; + + const renderInfoItems = () => + items.map(({ label, value }) => ( + + + {label} + + + {value} + + + )); + + return ( + + <> + + {t("providers.dialog.info.title", { name: data.name })} + + +
{renderInfoItems()}
+
+ + + + +
+ ); +}; diff --git a/src/components/provider-info-dialog/index.ts b/src/components/provider-info-dialog/index.ts new file mode 100644 index 00000000..019f22d6 --- /dev/null +++ b/src/components/provider-info-dialog/index.ts @@ -0,0 +1 @@ +export * from "./ProviderInfoDialog"; diff --git a/src/components/provider-info-dialog/styles/index.module.scss b/src/components/provider-info-dialog/styles/index.module.scss new file mode 100644 index 00000000..86b6a1a8 --- /dev/null +++ b/src/components/provider-info-dialog/styles/index.module.scss @@ -0,0 +1,22 @@ +.dialog { + max-width: 879px !important; + + .dialog_title { + padding-left: var(--pv-size-base-6); + padding-right: var(--pv-size-base-6); + } + + .dialog_content { + max-height: 525px; + .dialog_content_list { + padding: var(--pv-size-base) var(--pv-size-base-2) 0 var(--pv-size-base-2); + display: grid; + grid-template-columns: 35% auto; + gap: var(--pv-size-base-4) var(--pv-size-base-8); + } + } + + .dialog_footer { + padding: var(--pv-size-base-6); + } +} diff --git a/src/i18n/locales/en/main.json b/src/i18n/locales/en/main.json index 6461674c..e5e7b4d3 100644 --- a/src/i18n/locales/en/main.json +++ b/src/i18n/locales/en/main.json @@ -6,6 +6,21 @@ "read-only": "Read only" }, "empty-text": "No providers connected" + }, + "dialog": { + "info": { + "title": "{{name}} information", + "list": { + "token-name": "Token name:", + "token-category": { + "label": "Token category", + "value": { + "hardware": "Hardware", + "software": "Software" + } + } + } + } } }, "certificates": {