The frontend of Certimate relies on a suite of specialized utility modules to handle cryptographic operations, data validation, file I/O, and internationalization. These utilities bridge the gap between raw user input in the UI and the structured data required by the backend and workflow engine.
Certimate uses the @peculiar/x509 and related ASN.1 libraries to perform client-side validation and parsing of PEM-encoded certificates and private keys. This ensures that users receive immediate feedback on the validity of their credentials before they are submitted to the backend.
x509.tsparseCertificate(certPEM: string): Uses X509Certificate to parse a PEM string, throwing an error if it is not ASN-encoded. ui/src/utils/x509.ts7-22validatePEMCertificate(pem: string): Checks if the provided string is a valid PEM-encoded X.509 certificate and contains Subject Alternative Names. ui/src/utils/x509.ts136-143validatePEMPrivateKey(pem: string): Validates PEM-encoded private keys by attempting to parse them as PKCS#1, EC, or PKCS#8. ui/src/utils/x509.ts145-152getCertificateSubjectAltNames(pem: string): Extracts Subject Alternative Names (SANs) from a certificate. This is used in the Workflow Designer to automatically label BizUpload nodes. ui/src/utils/x509.ts24-34getPrivateKeyAlgorithm(pem: string): Identifies the algorithm (RSA or EC) and key size (e.g., 2048, 256) used by a private key by inspecting the parsed ASN.1 structure. ui/src/utils/x509.ts105-134The following diagram illustrates how x509.ts utilities are integrated into the Workflow Designer forms.
Certificate Parsing Flow
Sources: ui/src/utils/x509.ts1-152 ui/package.json36-40
The validator.ts module provides robust checks for network-related identifiers, while cron.ts handles the validation and prediction of execution schedules.
These are used extensively in configuration forms to ensure data integrity.
isDomain(val: string): Validates standard domain formats. ui/src/utils/validator.ts9-14isHostname(val: string): A composite check that validates if a string is a domain, IPv4, or IPv6 address. ui/src/utils/validator.ts16-18isIPv4(val: string) and isIPv6(val: string): Validates IP addresses using Zod's built-in parsers. ui/src/utils/validator.ts20-26isPortNumber(val: string | number): Ensures a value is an integer between 1 and 65535. ui/src/utils/validator.ts37-39matchSearchOption(input, option): A utility for filtering dropdown options based on user search strings, used in provider selectors. ui/src/utils/search.ts1-12The cron.ts module provides specialized logic to ensure frontend schedule definitions match the backend's expectations.
validateCronExpression(expr: string): Validates that a cron expression contains exactly 5 segments (standard crontab format). It includes a transpiled version of PocketBase's Go logic to ensure parity between frontend validation and backend execution. ui/src/utils/cron.ts3-21parseCronSegment(segment, min, max): A helper function that parses individual cron segments, supporting wildcards (*), ranges (1-5), and steps (/n). ui/src/utils/cron.ts34-110getNextCronExecutions(expr, times): Uses CronExpressionParser to predict the next n execution times for display in the UI. ui/src/utils/cron.ts23-30Sources: ui/src/utils/cron.ts1-110 ui/src/utils/validator.ts1-51 ui/src/utils/search.ts1-12
file.ts)Provides a Promise-based wrapper around the native FileReader API.
readFileAsText(file: File): Reads a local file (e.g., a .pem file uploaded via an Ant Design Upload component) and returns its text content as a UTF-8 string. It utilizes Promise.withResolvers for modern control flow. ui/src/utils/file.ts1-16browser.ts)Certimate includes a compatibility check to ensure the user's browser supports modern ECMAScript features required by the application.
isBrowserHappy(): Checks for critical APIs including Promise.withResolvers, Promise.try, and CSS.supports for oklch color space. ui/src/utils/browser.ts1-12isTouchSupported(): Detects touch capabilities to adjust the Workflow Designer's interaction mode. ui/src/utils/browser.ts14-20Sources: ui/src/utils/file.ts1-16 ui/src/utils/browser.ts1-20
Certimate uses i18next for its internationalization framework, supporting dynamic locale switching and namespaced resource files.
The i18n setup is initialized in ui/src/i18n/index.ts. It utilizes i18next-browser-languagedetector to persist the user's language preference in local storage under the key certimate-ui-lang. ui/src/i18n/index.ts1-21
EN ("en") and ZH ("zh"). ui/src/i18n/locales.ts3-6 ui/src/i18n/resources/index.ts6-7resources object maps these names to their respective translation files (e.g., nls.certificate.json). ui/src/i18n/resources/index.ts9-18 ui/src/i18n/resources/en/nls.certificate.json1-127Certimate synchronizes the i18n state across several third-party libraries to ensure a consistent UI:
useAntdLocale maps the active language to AntD's internal locale objects (AntdLocaleEnUS, AntdLocaleZhCN). ui/src/i18n/vendors/antd.ts8-16useDayjsLocale updates the global time formatting locale, specifically mapping the internal ZH locale to zh-cn. ui/src/i18n/vendors/dayjs.ts11-25useZodLocale provides custom error message templates for schema validation, including specialized handling for too_big, too_small, and invalid_format codes in both English and Chinese. ui/src/i18n/vendors/zod.ts10-99Natural Language Space to Code Entity Space: I18n
| Concept | Code Entity | File |
|---|---|---|
| Language Detector | i18nBrowserLanguageDetector | ui/src/i18n/index.ts3 |
| Storage Key | certimate-ui-lang | ui/src/i18n/index.ts19 |
| English Locale | localeNames.EN | ui/src/i18n/locales.ts4 |
| AntD Sync Hook | useAntdLocale | ui/src/i18n/vendors/antd.ts13-16 |
| Dayjs Sync Hook | useDayjsLocale | ui/src/i18n/vendors/dayjs.ts16-25 |
| Zod Locale Sync | useZodLocale | ui/src/i18n/vendors/zod.ts90-99 |
Sources: ui/src/i18n/index.ts1-30 ui/src/i18n/vendors/antd.ts1-16 ui/src/i18n/vendors/dayjs.ts1-25 ui/src/i18n/vendors/zod.ts1-99 ui/src/i18n/locales.ts1-7 ui/src/i18n/resources/index.ts1-21
The utility modules are primarily consumed by configuration forms within the Workflow Designer and management components like CertificateDownloadModal to provide real-time validation and feedback.
Validation Logic Mapping
| Utility Entity | Applied In | Purpose |
|---|---|---|
validateCronExpression | cron.ts | Ensure schedule parity with PocketBase backend ui/src/utils/cron.ts3-21 |
CERTIFICATE_FORMATS | certificate.ts | Define supported download formats (PEM, PFX, JKS) ui/src/domain/certificate.ts31-35 |
saveAs | CertificateDownloadModal | Handle client-side file saving of generated certificate ZIPs ui/src/components/certificate/CertificateDownloadModal.tsx6 ui/src/components/certificate/CertificateDownloadModal.tsx163 |
The WorkflowDesigner uses utility-driven validation in its node registry. For example, BranchBlockNodeRegistry uses Zod schemas and getAllPreviousNodes to validate logical expressions. ui/src/components/workflow/designer/nodes/ConditionNode.tsx65-107
Designer Entity Mapping
Sources: ui/src/utils/cron.ts1-110 ui/src/domain/certificate.ts1-38 ui/src/components/certificate/CertificateDownloadModal.tsx1-170 ui/src/components/workflow/designer/nodes/ConditionNode.tsx13-175 ui/src/components/workflow/designer/Toolbar.tsx58-81
Refresh this wiki