refactor(base64): mutualized base64 functions into global utilities

This commit is contained in:
Corentin Thomasset 2022-08-04 12:09:32 +02:00
parent ca7cb44389
commit 447bdf2148
No known key found for this signature in database
GPG key ID: 3103EB5E79496F9C
8 changed files with 138 additions and 12 deletions

View file

@ -35,6 +35,7 @@
import { useCopy } from '@/composable/copy';
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
import { useValidation } from '@/composable/validation';
import { isValidBase64 } from '@/utils/base64';
import { Upload } from '@vicons/tabler';
import { useBase64 } from '@vueuse/core';
import type { UploadFileInfo } from 'naive-ui';
@ -47,7 +48,7 @@ const base64InputValidation = useValidation({
rules: [
{
message: 'Invalid base 64 string',
validator: (value) => window.atob(value.replace(/^data:.*?;base64,/, '')),
validator: (value) => isValidBase64(value.trim()),
},
],
});

View file

@ -37,24 +37,20 @@
<script setup lang="ts">
import { useCopy } from '@/composable/copy';
import { useValidation } from '@/composable/validation';
import { base64ToText, isValidBase64, textToBase64 } from '@/utils/base64';
import { withDefaultOnError } from '@/utils/defaults';
import { computed, ref } from 'vue';
const textInput = ref('');
const base64Output = computed(() => window.btoa(textInput.value));
const base64Output = computed(() => textToBase64(textInput.value));
const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
const base64Input = ref('');
const textOutput = computed(() => {
try {
return window.atob(base64Input.value);
} catch (_) {
return '';
}
});
const textOutput = computed(() => withDefaultOnError(() => base64ToText(base64Input.value.trim()), ''));
const { copy: copyText } = useCopy({ source: textOutput, text: 'String copied to the clipboard' });
const b64Validation = useValidation({
source: base64Input,
rules: [{ message: 'Invalid base64 string', validator: (value) => window.atob(value) }],
rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
});
</script>

View file

@ -30,11 +30,12 @@
<script setup lang="ts">
import { useCopy } from '@/composable/copy';
import { textToBase64 } from '@/utils/base64';
import { computed, ref } from 'vue';
const username = ref('');
const password = ref('');
const header = computed(() => `Authorization: Basic ${window.btoa(`${username.value}:${password.value}`)}`);
const header = computed(() => `Authorization: Basic ${textToBase64(`${username.value}:${password.value}`)}`);
const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard' });
</script>

View file

@ -53,6 +53,7 @@
import TextareaCopyable from '@/components/TextareaCopyable.vue';
import { useCopy } from '@/composable/copy';
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
import { textToBase64 } from '@/utils/base64';
import { computed, ref } from 'vue';
const width = ref(600);
@ -75,7 +76,7 @@ const svgString = computed(() => {
</svg>
`.trim();
});
const base64 = computed(() => 'data:image/svg+xml;base64,' + window.btoa(svgString.value));
const base64 = computed(() => 'data:image/svg+xml;base64,' + textToBase64(svgString.value));
const { copy: copySVG } = useCopy({ source: svgString });
const { copy: copyBase64 } = useCopy({ source: base64 });