Merge df7fa898ea into fe349ad69b

components.d.ts

@@ -58,6 +58,7 @@ declare module '@vue/runtime-core' {
     CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
     CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
     'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
+    CsrGenerator: typeof import('./src/tools/csr-generator/csr-generator.vue')['default']
     CTable: typeof import('./src/ui/c-table/c-table.vue')['default']
     'CTable.demo': typeof import('./src/ui/c-table/c-table.demo.vue')['default']
     CTextCopyable: typeof import('./src/ui/c-text-copyable/c-text-copyable.vue')['default']
@@ -133,11 +134,10 @@ declare module '@vue/runtime-core' {
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']

package.json

@@ -81,6 +81,7 @@
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
     "sql-formatter": "^13.0.0",
+    "sshpk": "^1.18.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
     "unicode-emoji-json": "^0.4.0",
@@ -110,6 +111,7 @@
     "@types/node": "^18.15.11",
     "@types/node-forge": "^1.3.2",
     "@types/qrcode": "^1.5.0",
+    "@types/sshpk": "^1.17.4",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.0",
     "@unocss/eslint-config": "^0.57.0",
@@ -131,6 +133,7 @@
     "unplugin-icons": "^0.17.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.4.9",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-pwa": "^0.16.0",
     "vite-plugin-vue-markdown": "^0.23.5",
     "vite-svg-loader": "^4.0.0",

src/components/TextareaCopyable.vue

@@ -16,6 +16,7 @@ const props = withDefaults(
     language?: string
     copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
     copyMessage?: string
+    wordWrap?: boolean
   }>(),
   {
     followHeightOf: null,
@@ -47,7 +48,7 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
         :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
       >
         <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+          <n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
         </n-config-provider>
       </n-scrollbar>
       <div absolute right-10px top-10px>

src/tools/csr-generator/csr-generator.service.ts

@@ -0,0 +1,77 @@
+import { pki } from 'node-forge';
+import workerScript from 'node-forge/dist/prime.worker.min?url';
+
+export { generateCSR };
+
+function generateRSAPairs({ bits = 2048 }) {
+  return new Promise<pki.rsa.KeyPair>((resolve, reject) =>
+    pki.rsa.generateKeyPair({ bits, workerScript }, (err, keyPair) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+
+      resolve(keyPair);
+    }),
+  );
+}
+
+async function generateCSR(config: {
+  bits?: number
+  password?: string
+  commonName?: string
+  countryName?: string
+  city?: string
+  state?: string
+  organizationName?: string
+  organizationalUnit?: string
+  contactEmail?: string
+} = {}): Promise<{
+  publicKeyPem: string
+  privateKeyPem: string
+  csrPem: string
+}> {
+  const { privateKey, publicKey } = await generateRSAPairs(config);
+
+  // create a certification request (CSR)
+  const csr = pki.createCertificationRequest();
+  csr.publicKey = publicKey;
+  csr.setSubject([{
+    name: 'commonName',
+    value: config.commonName,
+  }, {
+    name: 'countryName',
+    value: config.countryName,
+  }, {
+    name: 'stateOrProvinceName',
+    value: config.state,
+  }, {
+    name: 'localityName',
+    value: config.city,
+  }, {
+    name: 'organizationName',
+    value: config.organizationName,
+  }, {
+    name: 'organizationalUnitName',
+    value: config.organizationalUnit,
+  }, {
+    name: 'emailAddress',
+    value: config.contactEmail,
+  }].filter(attr => attr.value !== null && attr.value?.trim() !== ''));
+
+  // sign certification request
+  csr.sign(privateKey);
+
+  // convert certification request to PEM-format
+  const csrPem = pki.certificationRequestToPem(csr);
+
+  const privateUnencryptedKeyPem = pki.privateKeyToPem(privateKey);
+
+  return {
+    csrPem,
+    publicKeyPem: pki.publicKeyToPem(publicKey),
+    privateKeyPem: config?.password
+      ? pki.encryptRsaPrivateKey(privateKey, config?.password)
+      : privateUnencryptedKeyPem,
+  };
+}

src/tools/csr-generator/csr-generator.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { generateCSR } from './csr-generator.service';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { withDefaultOnErrorAsync } from '@/utils/defaults';
+import { computedRefreshableAsync } from '@/composable/computedRefreshable';
+import { useValidation } from '@/composable/validation';
+
+const commonName = ref('test.com');
+const commonNameValidation = useValidation({
+  source: commonName,
+  rules: [
+    {
+      message: 'Common Name/Domain Name must not be empty',
+      validator: value => value?.trim() !== '',
+    },
+  ],
+});
+
+const organizationName = ref('Test');
+const organizationalUnit = ref('');
+const password = ref('');
+const city = ref('Paris');
+const state = ref('FR');
+const country = ref('France');
+const contactEmail = ref('');
+const emptyCSR = { csrPem: '', privateKeyPem: '', publicKeyPem: '' };
+
+const [certs, refreshCerts] = computedRefreshableAsync(
+  () => withDefaultOnErrorAsync(() => {
+    if (!commonNameValidation.isValid) {
+      return emptyCSR;
+    }
+
+    return generateCSR({
+      password: password.value,
+      commonName: commonName.value,
+      countryName: country.value,
+      city: city.value,
+      state: state.value,
+      organizationName: organizationName.value,
+      organizationalUnit: organizationalUnit.value,
+      contactEmail: contactEmail.value,
+    });
+  },
+  emptyCSR,
+  ), emptyCSR);
+</script>
+
+<template>
+  <div>
+    <div mb-2>
+      <n-form-item
+        label="Common Name/Domain Name:"
+        label-placement="top"
+        :feedback="commonNameValidation.message"
+        :validation-status="commonNameValidation.status"
+      >
+        <n-input
+          v-model:value="commonName"
+          placeholder="Common/Domain Name"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Organization Name:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="organizationName"
+          placeholder="Organization Name"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Organization Unit:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="organizationalUnit"
+          placeholder="Organization Unit"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="State:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="state"
+          placeholder="State"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="City:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="city"
+          placeholder="City"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Country:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="country"
+          placeholder="Country"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Contact Email:"
+        label-placement="left" label-width="100"
+      >
+        <n-input
+          v-model:value="contactEmail"
+          placeholder="Contact Email"
+        />
+      </n-form-item>
+    </div>
+
+    <div>
+      <n-form-item
+        label="Private Key passphrase:"
+        label-placement="top"
+      >
+        <n-input
+          v-model:value="password"
+          type="password"
+          show-password-on="mousedown"
+          placeholder="Passphrase"
+        />
+      </n-form-item>
+    </div>
+
+    <div flex justify-center>
+      <c-button @click="refreshCerts">
+        Refresh CSR
+      </c-button>
+    </div>
+
+    <n-divider />
+
+    <div v-if="commonNameValidation.isValid">
+      <div>
+        <h3>Certificate Signing Request</h3>
+        <TextareaCopyable :value="certs.csrPem" />
+      </div>
+
+      <div>
+        <h3>Public key</h3>
+        <TextareaCopyable :value="certs.publicKeyPem" :word-wrap="true" />
+      </div>
+
+      <div>
+        <h3>Private key</h3>
+        <TextareaCopyable :value="certs.privateKeyPem" />
+      </div>
+    </div>
+  </div>
+</template>

src/tools/csr-generator/index.ts

@@ -0,0 +1,12 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'CSR Generator',
+  path: '/csr-generator',
+  description: 'Certificate Signing Request generator (PEM format)',
+  keywords: ['csr', 'certificate', 'signing', 'request', 'x509', 'generator'],
+  component: () => import('./csr-generator.vue'),
+  icon: ArrowsShuffle,
+  createdAt: new Date('2024-02-25'),
+});

src/tools/index.ts

@@ -5,7 +5,7 @@ import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
-
+import { tool as csrGenerator } from './csr-generator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -85,7 +85,20 @@ import { tool as yamlViewer } from './yaml-viewer';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+    components: [
+      tokenGenerator,
+      hashText,
+      bcrypt,
+      uuidGenerator,
+      ulidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+      csrGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+    ],
   },
   {
     name: 'Converter',

vite.config.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'node:path';
 import { URL, fileURLToPath } from 'node:url';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 import VueI18n from '@intlify/unplugin-vue-i18n/vite';
 import vue from '@vitejs/plugin-vue';
@@ -97,6 +98,7 @@ export default defineConfig({
       resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })],
     }),
     Unocss(),
+    nodePolyfills(),
   ],
   base: baseUrl,
   resolve: {