@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
629 lines • 26.3 kB
JSON
{
"timestamp": "2026-06-15T14:24:21",
"compiler": {
"name": "@stencil/core",
"version": "4.39.0",
"typescriptVersion": "5.8.3"
},
"components": [
{
"filePath": "src/components/fortify-certificates/fortify-certificates.tsx",
"encapsulation": "shadow",
"tag": "peculiar-fortify-certificates",
"readme": "# Fortify Certificates WebComponent\n\nThe web-component provides an easier way to connect a web-page to the Fortify App, show certificates from available OS crypto providers, and choose a certificate for signing.\n\n<iframe height=\"400\" style=\"width: 100%;\" scrolling=\"no\" title=\"Fortify web-component (certificates)\" src=\"https://codepen.io/donskov/embed/preview/RwWMPjG?height=400&theme-id=light&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n See the Pen <a href='https://codepen.io/donskov/pen/RwWMPjG'>Fortify web-component (certificates)</a> by Dmitriy Donskov\n (<a href='https://codepen.io/donskov'>@donskov</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n",
"docs": "The web-component provides an easier way to connect a web-page to the Fortify App, show certificates from available OS crypto providers, and choose a certificate for signing.\n\n<iframe height=\"400\" style=\"width: 100%;\" scrolling=\"no\" title=\"Fortify web-component (certificates)\" src=\"https://codepen.io/donskov/embed/preview/RwWMPjG?height=400&theme-id=light&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n See the Pen <a href='https://codepen.io/donskov/pen/RwWMPjG'>Fortify web-component (certificates)</a> by Dmitriy Donskov\n (<a href='https://codepen.io/donskov'>@donskov</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>",
"docsTags": [],
"usage": {
"basic": "Quick example embed web component in to you application:\n\n```html\n<peculiar-fortify-certificates\n id=\"fortify-certificates-wc\"\n language=\"en\"\n/>\n```\n\nThen in js you can access to component lifecycle events and filter properties:\n\n```javascript\nconst fortifyCertificates = document.getElementById('fortify-certificates-wc');\n\nfortifyCertificates.filters = {\n expired: false,\n onlySmartcards: false,\n onlyWithPrivateKey: false,\n keyUsage: ['digitalSignature'],\n subjectDNMatch: 'kubernetes-master',\n issuerDNMatch: 'kubernetes',\n providerNameMatch: 'MacOS Crypto',\n providerATRMatch: '0123456789',\n certificateIdMatch: '0123456789',\n};\n\nfortifyCertificates.addEventListener('selectionCancel', () => {\n console.log('cancel flow');\n});\n\nfortifyCertificates.addEventListener('selectionSuccess', (result) => {\n console.log(result);\n});\n```\n"
},
"props": [
{
"name": "downloadAppLink",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "download-app-link",
"reflectToAttr": true,
"docs": "A link to download the application when a connection to Fortify is not found.",
"docsTags": [
{
"name": "default",
"text": "'https://fortifyapp.com'"
}
],
"default": "'https://fortifyapp.com'",
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "filters",
"type": "IFilters",
"complexType": {
"original": "IFilters",
"resolved": "IFilters",
"references": {
"IFilters": {
"location": "import",
"path": "@peculiar/fortify-client-core",
"id": "../client-core/dist/types/index.d.ts::IFilters"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Component data filters.\nKeyUsageType you can find on [certificate specification](https://tools.ietf.org/html/rfc5280#section-4.2.1.3).",
"docsTags": [
{
"name": "default",
"text": "{}"
}
],
"default": "{}",
"values": [
{
"type": "IFilters"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "helpPageLink",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "help-page-link",
"reflectToAttr": true,
"docs": "A link to redirect the user to the help page\nif there are any questions about the operation of the application.",
"docsTags": [
{
"name": "default",
"text": "'https://fortifyapp.com/help'"
}
],
"default": "'https://fortifyapp.com/help'",
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "hideFooter",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "hide-footer",
"reflectToAttr": true,
"docs": "If `true`, the component footer will be hidden.",
"docsTags": [
{
"name": "default",
"text": "false"
}
],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "language",
"type": "\"de\" | \"el\" | \"en\" | \"es\" | \"fr\" | \"he\" | \"it\" | \"ja\" | \"nl\" | \"pl\" | \"pt\" | \"tr\" | \"uk\"",
"complexType": {
"original": "TSupportedMessagesType",
"resolved": "\"de\" | \"el\" | \"en\" | \"es\" | \"fr\" | \"he\" | \"it\" | \"ja\" | \"nl\" | \"pl\" | \"pt\" | \"tr\" | \"uk\"",
"references": {
"TSupportedMessagesType": {
"location": "import",
"path": "../../utils/l10n",
"id": "src/utils/l10n.ts::TSupportedMessagesType"
}
}
},
"mutable": false,
"attr": "language",
"reflectToAttr": true,
"docs": "Component language.",
"docsTags": [],
"values": [
{
"value": "de",
"type": "string"
},
{
"value": "el",
"type": "string"
},
{
"value": "en",
"type": "string"
},
{
"value": "es",
"type": "string"
},
{
"value": "fr",
"type": "string"
},
{
"value": "he",
"type": "string"
},
{
"value": "it",
"type": "string"
},
{
"value": "ja",
"type": "string"
},
{
"value": "nl",
"type": "string"
},
{
"value": "pl",
"type": "string"
},
{
"value": "pt",
"type": "string"
},
{
"value": "tr",
"type": "string"
},
{
"value": "uk",
"type": "string"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
}
],
"methods": [],
"events": [
{
"event": "selectionCancel",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Fires when the user has canceled the selection flow.",
"docsTags": []
},
{
"event": "selectionSuccess",
"detail": "ISelectionSuccessEvent",
"bubbles": true,
"complexType": {
"original": "ISelectionSuccessEvent",
"resolved": "ISelectionSuccessEvent",
"references": {
"ISelectionSuccessEvent": {
"location": "local",
"path": "/home/runner/work/fortify-webcomponents/fortify-webcomponents/packages/webcomponents/src/components/fortify-certificates/fortify-certificates.tsx",
"id": "src/components/fortify-certificates/fortify-certificates.tsx::ISelectionSuccessEvent"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Fires when the user has successfully selected a certificate.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [
"peculiar-certificate-viewer",
"peculiar-circular-progress"
],
"dependencyGraph": {
"peculiar-fortify-certificates": [
"peculiar-certificate-viewer",
"peculiar-circular-progress"
]
}
},
{
"filePath": "src/components/fortify-enrollment/fortify-enrollment.tsx",
"encapsulation": "shadow",
"tag": "peculiar-fortify-enrollment",
"readme": "# Fortify Enrollment WebComponent\n\nThe web-component provides an easier way to connect a web-page to the Fortify App, show available OS crypto providers, and enroll self-signed certificate or certificate request with prefilled parameters.\n\n<iframe height=\"400\" style=\"width: 100%;\" scrolling=\"no\" title=\"Fortify web-component (certificate enrollment)\" src=\"https://codepen.io/donskov/embed/preview/pogpPWb?height=400&theme-id=light&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n See the Pen <a href='https://codepen.io/donskov/pen/pogpPWb'>Fortify web-component (certificate enrollment)</a> by Dmitriy Donskov\n (<a href='https://codepen.io/donskov'>@donskov</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>\n",
"docs": "The web-component provides an easier way to connect a web-page to the Fortify App, show available OS crypto providers, and enroll self-signed certificate or certificate request with prefilled parameters.\n\n<iframe height=\"400\" style=\"width: 100%;\" scrolling=\"no\" title=\"Fortify web-component (certificate enrollment)\" src=\"https://codepen.io/donskov/embed/preview/pogpPWb?height=400&theme-id=light&default-tab=result\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\">\n See the Pen <a href='https://codepen.io/donskov/pen/pogpPWb'>Fortify web-component (certificate enrollment)</a> by Dmitriy Donskov\n (<a href='https://codepen.io/donskov'>@donskov</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>",
"docsTags": [],
"usage": {
"basic": "Quick example embed web component in to you application:\n\n```html\n<peculiar-fortify-enrollment\n id=\"fortify-enrollment-wc\"\n language=\"en\"\n/>\n```\n\nThen in js you can access to component lifecycle events and filter properties:\n\n```javascript\nconst fortifyEnrollment = document.getElementById('fortify-enrollment-wc');\n\nfortifyEnrollment.filters = {\n onlySmartcards: false,\n providerNameMatch: 'MacOS Crypto',\n providerATRMatch: '0123456789',\n};\n\nfortifyEnrollment.addEventListener('creationCancel', () => {\n console.log('creationCancel');\n});\n\nfortifyEnrollment.addEventListener('creationClose', () => {\n console.log('creationClose');\n});\n\nfortifyEnrollment.addEventListener('creationSuccess', (result) => {\n console.log(result);\n});\n\nfortifyEnrollment.addEventListener('creationFail', (error) => {\n console.log(error);\n});\n```\n",
"form-policy": "To provide custom form policy you need to pass object to component.\n\n[Default](https://cdn.jsdelivr.net/npm/@peculiar/fortify-webcomponents/dist/collection/components/fortify-enrollment/policyConfig.js) policy config:\n\n```js\n{\n subject: {\n fields: {\n CN: {\n required: true\n },\n O: {\n required: false\n },\n OU: {\n required: false\n },\n C: {\n required: false,\n defaultValue: \"US\"\n },\n L: {\n required: false\n },\n ST: {\n required: false\n }\n }\n },\n publicKey: {\n fields: {\n signatureAlgorithm: {\n required: true,\n defaultValue: \"RSA-2048\"\n },\n hashAlgorithm: {\n required: true,\n defaultValue: \"SHA-256\"\n }\n }\n },\n options: {\n fields: {\n useSelfSignedCertificate: {\n required: false\n }\n }\n }\n}\n```\n\nExample of read only policy with prefilled values:\n\n```js\nconst fortifyEnrollment = document.getElementById('fortify-enrollment-wc');\n\nfortifyEnrollment.formPolicy = {\n subject: {\n fields: {\n CN: {\n required: true,\n readOnly: true,\n defaultValue: 'kubernetes',\n },\n O: {\n required: false,\n readOnly: true,\n defaultValue: 'kubernetes org.',\n },\n OU: {\n required: false,\n readOnly: true,\n defaultValue: 'kubernetes org. unit',\n },\n C: {\n required: false,\n readOnly: true,\n defaultValue: \"US\"\n },\n L: {\n required: false,\n readOnly: true,\n defaultValue: \"kubernetes world\"\n },\n ST: {\n required: false,\n readOnly: true,\n defaultValue: \"kubernetes west\"\n }\n }\n },\n publicKey: {\n fields: {\n signatureAlgorithm: {\n required: true,\n readOnly: true,\n defaultValue: \"RSA-2048\"\n },\n hashAlgorithm: {\n required: true,\n readOnly: true,\n defaultValue: \"SHA-256\"\n }\n }\n },\n options: {\n fields: {\n useSelfSignedCertificate: {\n required: false,\n readOnly: true,\n defaultValue: true\n }\n }\n }\n};\n```\n"
},
"props": [
{
"name": "downloadAppLink",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "download-app-link",
"reflectToAttr": true,
"docs": "A link to download the application when a connection to Fortify is not found.",
"docsTags": [
{
"name": "default",
"text": "'https://fortifyapp.com'"
}
],
"default": "'https://fortifyapp.com'",
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "filters",
"type": "{ onlySmartcards?: boolean; providerNameMatch?: string | RegExp; providerATRMatch?: string | RegExp; }",
"complexType": {
"original": "Pick<IFilters, 'onlySmartcards' | 'providerNameMatch' | 'providerATRMatch'>",
"resolved": "{ onlySmartcards?: boolean; providerNameMatch?: string | RegExp; providerATRMatch?: string | RegExp; }",
"references": {
"Pick": {
"location": "global",
"id": "global::Pick"
},
"IFilters": {
"location": "import",
"path": "@peculiar/fortify-client-core",
"id": "../client-core/dist/types/index.d.ts::IFilters"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Object that contains filters for user certificates and providers.",
"docsTags": [
{
"name": "default",
"text": "{}"
}
],
"default": "{}",
"values": [
{
"type": "{ onlySmartcards?: boolean; providerNameMatch?: string"
},
{
"type": "RegExp; providerATRMatch?: string"
},
{
"type": "RegExp; }"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "formPolicy",
"type": "IFormPolicyConfig",
"complexType": {
"original": "IFormPolicyConfig",
"resolved": "IFormPolicyConfig",
"references": {
"IFormPolicyConfig": {
"location": "import",
"path": "./policyConfig",
"id": "src/components/fortify-enrollment/policyConfig.ts::IFormPolicyConfig"
}
}
},
"mutable": false,
"reflectToAttr": false,
"docs": "Object that contains configurations for enrollment form.",
"docsTags": [],
"values": [
{
"type": "IFormPolicyConfig"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "helpPageLink",
"type": "string",
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"mutable": false,
"attr": "help-page-link",
"reflectToAttr": true,
"docs": "A link to redirect the user to the help page\nif there are any questions about the operation of the application.",
"docsTags": [
{
"name": "default",
"text": "'https://fortifyapp.com/help'"
}
],
"default": "'https://fortifyapp.com/help'",
"values": [
{
"type": "string"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "hideFooter",
"type": "boolean",
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"mutable": false,
"attr": "hide-footer",
"reflectToAttr": true,
"docs": "If `true`, the component footer will be hidden.",
"docsTags": [
{
"name": "default",
"text": "false"
}
],
"default": "false",
"values": [
{
"type": "boolean"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
},
{
"name": "language",
"type": "\"de\" | \"el\" | \"en\" | \"es\" | \"fr\" | \"he\" | \"it\" | \"ja\" | \"nl\" | \"pl\" | \"pt\" | \"tr\" | \"uk\"",
"complexType": {
"original": "TSupportedMessagesType",
"resolved": "\"de\" | \"el\" | \"en\" | \"es\" | \"fr\" | \"he\" | \"it\" | \"ja\" | \"nl\" | \"pl\" | \"pt\" | \"tr\" | \"uk\"",
"references": {
"TSupportedMessagesType": {
"location": "import",
"path": "../../utils/l10n",
"id": "src/utils/l10n.ts::TSupportedMessagesType"
}
}
},
"mutable": false,
"attr": "language",
"reflectToAttr": true,
"docs": "Component language.",
"docsTags": [],
"values": [
{
"value": "de",
"type": "string"
},
{
"value": "el",
"type": "string"
},
{
"value": "en",
"type": "string"
},
{
"value": "es",
"type": "string"
},
{
"value": "fr",
"type": "string"
},
{
"value": "he",
"type": "string"
},
{
"value": "it",
"type": "string"
},
{
"value": "ja",
"type": "string"
},
{
"value": "nl",
"type": "string"
},
{
"value": "pl",
"type": "string"
},
{
"value": "pt",
"type": "string"
},
{
"value": "tr",
"type": "string"
},
{
"value": "uk",
"type": "string"
}
],
"optional": true,
"required": false,
"getter": false,
"setter": false
}
],
"methods": [],
"events": [
{
"event": "creationCancel",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Fires when the user has canceled the creation flow.",
"docsTags": []
},
{
"event": "creationClose",
"detail": "void",
"bubbles": true,
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
},
"cancelable": true,
"composed": true,
"docs": "Fires when the user clicks on the \"Close\" button after\nsuccessfully creating a certificate or certificate request.",
"docsTags": []
},
{
"event": "creationFail",
"detail": "Error",
"bubbles": true,
"complexType": {
"original": "Error",
"resolved": "Error",
"references": {
"Error": {
"location": "global",
"id": "global::Error"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Fires when the user failed to generate a certificate or certificate request.",
"docsTags": []
},
{
"event": "creationSuccess",
"detail": "ICreationSuccessEvent",
"bubbles": true,
"complexType": {
"original": "ICreationSuccessEvent",
"resolved": "ICreationSuccessEvent",
"references": {
"ICreationSuccessEvent": {
"location": "local",
"path": "/home/runner/work/fortify-webcomponents/fortify-webcomponents/packages/webcomponents/src/components/fortify-enrollment/fortify-enrollment.tsx",
"id": "src/components/fortify-enrollment/fortify-enrollment.tsx::ICreationSuccessEvent"
}
}
},
"cancelable": true,
"composed": true,
"docs": "Fires when the user has successfully created a certificate or certificate request.",
"docsTags": []
}
],
"listeners": [],
"styles": [],
"slots": [],
"parts": [],
"dependents": [],
"dependencies": [],
"dependencyGraph": {}
}
],
"typeLibrary": {
"src/utils/l10n.ts::TSupportedMessagesType": {
"declaration": "\"tr\" | \"es\" | \"en\" | \"uk\" | \"de\" | \"el\" | \"it\" | \"he\" | \"pl\" | \"nl\" | \"fr\" | \"pt\" | \"ja\"",
"docstring": "",
"path": "src/utils/l10n.ts"
},
"../client-core/dist/types/index.d.ts::IFilters": {
"declaration": "any",
"docstring": "",
"path": "../client-core/dist/types/index.d.ts"
},
"src/components/fortify-certificates/fortify-certificates.tsx::ISelectionSuccessEvent": {
"declaration": "export interface ISelectionSuccessEvent {\n certificateId: string;\n providerId: string;\n privateKeyId: string;\n socketProvider: SocketProvider;\n}",
"docstring": "",
"path": "src/components/fortify-certificates/fortify-certificates.tsx"
},
"src/components/fortify-enrollment/policyConfig.ts::IFormPolicyConfig": {
"declaration": "export interface IFormPolicyConfig {\n subject: {\n title?: string;\n fields: IFormPolicyConfigSubjectFieldsSeparate | IFormPolicyConfigSubjectFieldsMulti;\n };\n publicKey: {\n title?: string;\n fields: IFormPolicyConfigPublicKeyFields;\n };\n options: {\n title?: string;\n fields: IFormPolicyConfigOptionsFields;\n };\n}",
"docstring": "",
"path": "src/components/fortify-enrollment/policyConfig.ts"
},
"src/components/fortify-enrollment/fortify-enrollment.tsx::ICreationSuccessEvent": {
"declaration": "export interface ICreationSuccessEvent {\n providerId: string;\n raw: ArrayBuffer;\n privateKey: CryptoKey;\n publicKey: CryptoKey;\n socketProvider: SocketProvider;\n}",
"docstring": "",
"path": "src/components/fortify-enrollment/fortify-enrollment.tsx"
}
}
}