Merge ed019b0334 into a07806cd15

components.d.ts

@@ -156,6 +156,7 @@ declare module '@vue/runtime-core' {
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
+    NInput: typeof import('naive-ui')['NInput']
     NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
@@ -165,6 +166,7 @@ declare module '@vue/runtime-core' {
     NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']

package.json

@@ -79,6 +79,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",
@@ -108,6 +109,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",
@@ -129,6 +131,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/rsa-key-pair-generator/index.ts

@@ -5,8 +5,8 @@ import { translate } from '@/plugins/i18n.plugin';
 export const tool = defineTool({
   name: translate('tools.rsa-key-pair-generator.title'),
   path: '/rsa-key-pair-generator',
-  description: translate('tools.rsa-key-pair-generator.description'),
-  keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
+  description: 'Generate new random RSA private and public keys (with or without passphrase).',
+  keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem', 'passphrase', 'password'],
   component: () => import('./rsa-key-pair-generator.vue'),
   icon: Certificate,
 });

src/tools/rsa-key-pair-generator/rsa-key-pair-generator.service.ts

@@ -1,5 +1,6 @@
 import { pki } from 'node-forge';
 import workerScript from 'node-forge/dist/prime.worker.min?url';
+import sshpk from 'sshpk';
 
 export { generateKeyPair };
 
@@ -16,11 +17,39 @@ function generateRawPairs({ bits = 2048 }) {
   );
 }
 
-async function generateKeyPair(config: { bits?: number } = {}) {
+async function generateKeyPair(config: {
+  bits?: number
+  password?: string
+  format?: sshpk.PrivateKeyFormatType
+  comment?: string
+} = {}) {
   const { privateKey, publicKey } = await generateRawPairs(config);
 
+  const privateUnencryptedKeyPem = pki.privateKeyToPem(privateKey);
+
+  if (config?.format === 'pem') {
+    return {
+      publicKey: pki.publicKeyToPem(publicKey),
+      privateKey: config?.password
+        ? pki.encryptRsaPrivateKey(privateKey, config?.password)
+        : privateUnencryptedKeyPem,
+    };
+  }
+
+  const privKey = sshpk.parsePrivateKey(privateUnencryptedKeyPem);
+  privKey.comment = config?.comment;
+  const pubFormat = config.format ?? 'ssh';
+  let privFormat = config.format ?? 'ssh';
+  if (privFormat === 'ssh') {
+    privFormat = 'ssh-private';
+  }
+  const pubKey = privKey.toPublic();
   return {
-    publicKeyPem: pki.publicKeyToPem(publicKey),
-    privateKeyPem: pki.privateKeyToPem(privateKey),
+    publicKey: pubKey.toString(pubFormat),
+    privateKey: config?.password
+      ? privKey.toString(privFormat,
+        { passphrase: config?.password, comment: config?.comment },
+      )
+      : privKey.toString(privFormat, { comment: config?.comment }),
   };
 }

src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type sshpk from 'sshpk';
 import { generateKeyPair } from './rsa-key-pair-generator.service';
 import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { withDefaultOnErrorAsync } from '@/utils/defaults';
@@ -6,7 +7,21 @@ import { useValidation } from '@/composable/validation';
 import { computedRefreshableAsync } from '@/composable/computedRefreshable';
 
 const bits = ref(2048);
-const emptyCerts = { publicKeyPem: '', privateKeyPem: '' };
+const comment = ref('');
+const password = ref('');
+const emptyCerts = { publicKey: '', privateKey: '' };
+
+const format = useStorage('rsa-key-pair-generator:format', 'ssh');
+const formatOptions = [
+  { value: 'pem', label: 'PEM' },
+  { value: 'pkcs1', label: 'PKCS#1' },
+  { value: 'pkcs8', label: 'PKCS#8' },
+  { value: 'ssh', label: 'OpenSSH Standard' },
+  { value: 'openssh', label: 'OpenSSH New' },
+  { value: 'putty', label: 'PuTTY' },
+];
+
+const supportsPassphrase = computed(() => format.value === 'pem' || format.value === 'ssh');
 
 const { attrs: bitsValidationAttrs } = useValidation({
   source: bits,
@@ -19,31 +34,67 @@ const { attrs: bitsValidationAttrs } = useValidation({
 });
 
 const [certs, refreshCerts] = computedRefreshableAsync(
-  () => withDefaultOnErrorAsync(() => generateKeyPair({ bits: bits.value }), emptyCerts),
+  () => withDefaultOnErrorAsync(() => generateKeyPair({
+    bits: bits.value,
+    password: password.value,
+    format: format.value as sshpk.PrivateKeyFormatType,
+    comment: comment.value,
+  }), emptyCerts),
   emptyCerts,
 );
 </script>
 
 <template>
-  <div style="flex: 0 0 100%">
-    <div item-style="flex: 1 1 0" style="max-width: 600px" mx-auto flex gap-3>
-      <n-form-item label="Bits :" v-bind="bitsValidationAttrs as any" label-placement="left" label-width="100">
+  <div>
+    <n-space justify="space-between" mb-1>
+      <c-select
+        v-model:value="format"
+        label-position="left"
+        label="Format:"
+        :options="formatOptions"
+        placeholder="Select a key format"
+      />
+
+      <n-form-item label="Bits :" v-bind="bitsValidationAttrs as any" label-placement="left">
         <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
       </n-form-item>
+    </n-space>
 
+    <div v-if="supportsPassphrase" mb-1>
+      <n-form-item label="Passphrase :" label-placement="left">
+        <n-input
+          v-model:value="password"
+          type="password"
+          show-password-on="mousedown"
+          placeholder="Passphrase"
+        />
+      </n-form-item>
+    </div>
+
+    <div mb-1>
+      <n-form-item label="Comment :" label-placement="left">
+        <n-input
+          v-model:value="comment"
+          type="text"
+          placeholder="Comment"
+        />
+      </n-form-item>
+    </div>
+
+    <n-space justify="center" mb-1>
       <c-button @click="refreshCerts">
         Refresh key-pair
       </c-button>
+    </n-space>
+
+    <div>
+      <h3>Public key</h3>
+      <TextareaCopyable :value="certs.publicKey" :word-wrap="true" />
+    </div>
+
+    <div>
+      <h3>Private key</h3>
+      <TextareaCopyable :value="certs.privateKey" />
     </div>
   </div>
-
-  <div>
-    <h3>Public key</h3>
-    <TextareaCopyable :value="certs.publicKeyPem" />
-  </div>
-
-  <div>
-    <h3>Private key</h3>
-    <TextareaCopyable :value="certs.privateKeyPem" />
-  </div>
 </template>

vite.config.ts

@@ -1,20 +1,21 @@
-import { resolve } from 'node:path';
 import { URL, fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
-import VueI18n from '@intlify/unplugin-vue-i18n/vite';
+import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import Unocss from 'unocss/vite';
-import AutoImport from 'unplugin-auto-import/vite';
-import IconsResolver from 'unplugin-icons/resolver';
-import Icons from 'unplugin-icons/vite';
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
-import Components from 'unplugin-vue-components/vite';
-import { defineConfig } from 'vite';
-import { VitePWA } from 'vite-plugin-pwa';
 import markdown from 'vite-plugin-vue-markdown';
 import svgLoader from 'vite-svg-loader';
+import { VitePWA } from 'vite-plugin-pwa';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
+import Unocss from 'unocss/vite';
 import { configDefaults } from 'vitest/config';
+import Icons from 'unplugin-icons/vite';
+import IconsResolver from 'unplugin-icons/resolver';
+import VueI18n from '@intlify/unplugin-vue-i18n/vite';
 
 const baseUrl = process.env.BASE_URL ?? '/';
 
@@ -23,13 +24,10 @@ export default defineConfig({
   plugins: [
     VueI18n({
       runtimeOnly: true,
-      jitCompilation: true,
       compositionOnly: true,
       fullInstall: true,
+      include: [resolve(__dirname, 'locales/**')],
       strictMessage: false,
-      include: [
-        resolve(__dirname, 'locales/**'),
-      ],
     }),
     AutoImport({
       imports: [
@@ -97,6 +95,7 @@ export default defineConfig({
       resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })],
     }),
     Unocss(),
+    nodePolyfills(),
   ],
   base: baseUrl,
   resolve: {