public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: better ui to select file or paste content

Browse Source
This commit is contained in:
ShareVB 2024-09-22 19:27:06 +02:00
parent 6d0b6c5c4f
commit 6c718820a4
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/tools/certificate-key-parser/certificate-key-parser.vue
View File

@ -8,6 +8,7 @@ import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
const inputKeyOrCertificate = ref(''); const inputKeyOrCertificate = ref('');
const passphrase = ref(''); const passphrase = ref('');
const fileInput = ref() as Ref<Buffer>; const fileInput = ref() as Ref<Buffer>;
const inputType = ref<'file' | 'content'>('file');
async function onUpload(file: File) { async function onUpload(file: File) {
if (file) { if (file) {
@ -37,11 +38,15 @@ function downloadX509DERFile() {
} }
const parsedSections = computedAsync<LabelValue[]>(async () => { const parsedSections = computedAsync<LabelValue[]>(async () => {
const inputKeyOrCertificateValue const inputContent = inputKeyOrCertificate.value;
= inputKeyOrCertificate.value !== '' const file = fileInput.value;
? inputKeyOrCertificate.value let inputKeyOrCertificateValue: string | Buffer = '';
: fileInput.value; if (inputType.value === 'file' && file) {
inputKeyOrCertificateValue = file;
}
else if (inputType.value === 'content' && inputContent) {
inputKeyOrCertificateValue = inputContent;
}
const { values, certificateX509DER: certPEM } = await getKeyOrCertificateInfosAsync(inputKeyOrCertificateValue, passphrase.value); const { values, certificateX509DER: certPEM } = await getKeyOrCertificateInfosAsync(inputKeyOrCertificateValue, passphrase.value);
certificateX509DER.value = certPEM || ''; certificateX509DER.value = certPEM || '';
return values; return values;
@ -51,16 +56,27 @@ const parsedSections = computedAsync<LabelValue[]>(async () => {
<template> <template>
<div> <div>
<c-card> <c-card>
<c-file-upload title="Drag and drop a Certificate file here, or click to select a Certificate file" @file-upload="onUpload" /> <n-radio-group v-model:value="inputType" name="radiogroup" mb-2 flex justify-center>
<!-- separator --> <n-space>
<div my-4 w-full flex items-center justify-center op-70> <n-radio
<div class="h-1px max-w-100px flex-1 bg-gray-300 op-50" /> value="file"
<div class="mx-2 text-gray-400"> label="File"
or />
</div> <n-radio
<div class="h-1px max-w-100px flex-1 bg-gray-300 op-50" /> value="content"
</div> label="Content"
/>
</n-space>
</n-radio-group>
<c-file-upload
v-if="inputType === 'file'"
title="Drag and drop a Certificate file here, or click to select a Certificate file"
@file-upload="onUpload"
/>
<c-input-text <c-input-text
v-if="inputType === 'content'"
v-model:value="inputKeyOrCertificate" v-model:value="inputKeyOrCertificate"
label="Paste your Public Key / Private Key / Signature / Fingerprint / Certificate:" label="Paste your Public Key / Private Key / Signature / Fingerprint / Certificate:"
placeholder="Your Public Key / Private Key / Signature / Fingerprint / Certificate..." placeholder="Your Public Key / Private Key / Signature / Fingerprint / Certificate..."