feat(TextareaCopyable): word-wrap prop

Add word-wrap property (to allow presenting long public keys)

components.d.ts

@@ -57,6 +57,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']
@@ -88,28 +89,17 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
-    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
-    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
-    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
-    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
-    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
-    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
-    IconMdiPause: typeof import('~icons/mdi/pause')['default']
-    IconMdiPlay: typeof import('~icons/mdi/play')['default']
-    IconMdiRecord: typeof import('~icons/mdi/record')['default']
-    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
-    IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -136,39 +126,21 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
-    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
-    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
-    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
-    NH2: typeof import('naive-ui')['NH2']
     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']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSlider: typeof import('naive-ui')['NSlider']
-    NStatistic: typeof import('naive-ui')['NStatistic']
-    NSwitch: typeof import('naive-ui')['NSwitch']
-    NTable: typeof import('naive-ui')['NTable']
-    NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

pnpm-lock.yaml

@@ -3378,7 +3378,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.7.2(vue@3.3.4)
+      '@vueuse/shared': 10.9.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -4020,10 +4020,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.7.2(vue@3.3.4):
+  /@vueuse/shared@10.9.0(vue@3.3.4):
-    resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
+    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.7(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4679,8 +4679,8 @@ packages:
       delayed-stream: 1.0.0
     dev: true
 
-  /commander@10.0.0:
+  /commander@10.0.1:
-    resolution: {integrity: sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==}
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
     dev: false
 
@@ -4703,8 +4703,9 @@ packages:
 
   /composerize-ts@0.6.2:
     resolution: {integrity: sha512-8tw5p/FBxg77ubjVftaXA+pknWbkUgbZ4rbZZs2yFUsj2yvO38IvtfpGLfaJ9mGFj324lFEr/OU9xULrKSF9Ag==}
+    hasBin: true
     dependencies:
-      commander: 10.0.0
+      commander: 10.0.1
       deepmerge-ts: 5.1.0
       flex-js: 1.0.5
       ip-cidr: 3.1.0
@@ -9752,8 +9753,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
+  /vue-demi@0.14.7(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -10196,6 +10197,7 @@ packages:
 
   /yamljs@0.3.0:
     resolution: {integrity: sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ==}
+    hasBin: true
     dependencies:
       argparse: 1.0.10
       glob: 7.2.3

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

@@ -37,27 +37,27 @@ async function generateCSR(config: {
   const csr = pki.createCertificationRequest();
   csr.publicKey = publicKey;
   csr.setSubject([{
-    name: 'CN',
+    name: 'commonName',
     value: config.commonName,
   }, {
-    name: 'C',
+    name: 'countryName',
     value: config.countryName,
   }, {
-    shortName: 'ST',
+    name: 'stateOrProvinceName',
     value: config.state,
   }, {
-    name: 'L',
+    name: 'localityName',
     value: config.city,
   }, {
-    name: 'O',
+    name: 'organizationName',
     value: config.organizationName,
   }, {
-    shortName: 'OU',
+    name: 'organizationalUnitName',
     value: config.organizationalUnit,
   }, {
-    name: 'EMAIL',
+    name: 'emailAddress',
     value: config.contactEmail,
-  }]);
+  }].filter(attr => attr.value));
 
   // sign certification request
   csr.sign(privateKey);

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

@@ -1,20 +1,36 @@
 <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 { generateCSR } from "./csr-generator.service.ts";
+import { useValidation } from '@/composable/validation';
 
-const commonName = ref('');
+const commonName = ref('test.com');
-const organizationName = ref('');
+const commonNameValidation = useValidation({
-const organizationUnit = ref('');
+  source: commonName,
-const city = ref('');
+  rules: [
-const state = ref('');
+    {
-const country = ref('');
+      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,
@@ -26,105 +42,135 @@ const [certs, refreshCerts] = computedRefreshableAsync(
       contactEmail: contactEmail.value,
     });
   },
-  ), emptyCSR),
   emptyCSR,
-);
+  ), emptyCSR);
 </script>
 
 <template>
   <div>
-        <n-form-item label="Private Key passphrase:" label-placement="left">
+    <div mb-2>
-          <n-input
+      <n-form-item
-            v-model:value="password"
+        label="Common Name/Domain Name:"
-            type="password"
+        label-placement="top"
-            show-password-on="mousedown"
+        :feedback="commonNameValidation.message"
-            placeholder="Passphrase"
+        :validation-status="commonNameValidation.status"
-          />
+      >
-        </n-form-item>
+        <n-input
+          v-model:value="commonName"
+          placeholder="Common/Domain Name"
+        />
+      </n-form-item>
     </div>
 
     <div>
-        <n-form-item label="Common Name/Domain Name:" label-placement="left">
+      <n-form-item
-          <n-input
+        label="Organization Name:"
-            v-model:value="commonName"
+        label-placement="left" label-width="100"
-            placeholder="Common/Domain Name"
+      >
-          />
+        <n-input
-        </n-form-item>
+          v-model:value="organizationName"
+          placeholder="Organization Name"
+        />
+      </n-form-item>
     </div>
 
     <div>
-        <n-form-item label="Organization Name:" label-placement="left">
+      <n-form-item
-          <n-input
+        label="Organization Unit:"
-            v-model:value="organizationName"
+        label-placement="left" label-width="100"
-            placeholder="Organization Name"
+      >
-          />
+        <n-input
-        </n-form-item>
+          v-model:value="organizationalUnit"
+          placeholder="Organization Unit"
+        />
+      </n-form-item>
     </div>
 
     <div>
-        <n-form-item label="Organization Unit:" label-placement="left">
+      <n-form-item
-          <n-input
+        label="State:"
-            v-model:value="organizationalUnit"
+        label-placement="left" label-width="100"
-            placeholder="Organization Unit"
+      >
-          />
+        <n-input
-        </n-form-item>
+          v-model:value="state"
+          placeholder="State"
+        />
+      </n-form-item>
     </div>
 
     <div>
-        <n-form-item label="State:" label-placement="left">
+      <n-form-item
-          <n-input
+        label="City:"
-            v-model:value="state"
+        label-placement="left" label-width="100"
-            placeholder="State"
+      >
-          />
+        <n-input
-        </n-form-item>
+          v-model:value="city"
+          placeholder="City"
+        />
+      </n-form-item>
     </div>
 
     <div>
-        <n-form-item label="City:" label-placement="left">
+      <n-form-item
-          <n-input
+        label="Country:"
-            v-model:value="city"
+        label-placement="left" label-width="100"
-            placeholder="City"
+      >
-          />
+        <n-input
-        </n-form-item>
+          v-model:value="country"
+          placeholder="Country"
+        />
+      </n-form-item>
     </div>
 
     <div>
-        <n-form-item label="Country:" label-placement="left">
+      <n-form-item
-          <n-input
+        label="Contact Email:"
-            v-model:value="country"
+        label-placement="left" label-width="100"
-            placeholder="Country"
+      >
-          />
+        <n-input
-        </n-form-item>
+          v-model:value="contactEmail"
+          placeholder="Contact Email"
+        />
+      </n-form-item>
     </div>
 
     <div>
-        <n-form-item label="Contact Email:" label-placement="left">
+      <n-form-item
-          <n-input
+        label="Private Key passphrase:"
-            v-model:value="contactEmail"
+        label-placement="top"
-            placeholder="Contact Email"
+      >
-          />
+        <n-input
-        </n-form-item>
+          v-model:value="password"
+          type="password"
+          show-password-on="mousedown"
+          placeholder="Passphrase"
+        />
+      </n-form-item>
     </div>
 
-    <div>
+    <div flex justify-center>
-        <c-button @click="refreshCerts">
+      <c-button @click="refreshCerts">
-          Refresh CSR
+        Refresh CSR
-        </c-button>
+      </c-button>
+    </div>
+
+    <n-divider />
+
+    <div v-if="commonNameValidation.isValid">
+      <div>
+        <h3>Certifacate Signing Request</h3>
+        <TextareaCopyable :value="certs.csrPem" />
       </div>
 
-    <div>
+      <div>
-      <h3>Certifacate Signing Request</h3>
+        <h3>Public key</h3>
-      <TextareaCopyable :value="certs.csrPem" />
+        <TextareaCopyable :value="certs.publicKeyPem" :word-wrap="true" />
-    </div>
+      </div>
 
-    <div>
+      <div>
-      <h3>Public key</h3>
+        <h3>Private key</h3>
-      <TextareaCopyable :value="certs.publicKeyPem" word-wrap="true" />
+        <TextareaCopyable :value="certs.privateKeyPem" />
-    </div>
+      </div>
-
-    <div>
-      <h3>Private key</h3>
-      <TextareaCopyable :value="certs.privateKeyPem" />
     </div>
   </div>
 </template>

src/tools/csr-generator/index.ts

@@ -2,11 +2,11 @@ import { ArrowsShuffle } from '@vicons/tabler';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
-  name: 'Csr generator',
+  name: 'CSR Generator',
   path: '/csr-generator',
-  description: '',
+  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-22'),
+  createdAt: new Date('2024-02-25'),
 });