mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-10-23 04:52:14 +00:00
Compare commits
30 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
b38ab82d05 | ||
|
f6cd9b76d3 | ||
|
208a373fd0 | ||
|
8089c60000 | ||
|
d30cd8a9ab | ||
|
04a8e122be | ||
|
447bdf2148 | ||
|
ca7cb44389 | ||
|
e48d60b1ed | ||
|
fda0b0ca25 | ||
|
cc717bc87e | ||
|
1bc6380c6f | ||
|
02c4963531 | ||
|
129f74c371 | ||
|
0be33fb337 | ||
|
422b6eb05a | ||
|
fad4833ca2 | ||
|
531a25c1c4 | ||
|
77b5b0cab5 | ||
|
7570ad9656 | ||
|
8a9e7888de | ||
|
750a76b00f | ||
|
5f03619ab4 | ||
|
352365f012 | ||
|
4f599b6999 | ||
|
138149e6f0 | ||
|
412de23796 | ||
|
1a22d55b3c | ||
|
bb4aac6d4a | ||
|
e6953d1b67 |
@@ -7,23 +7,28 @@ module.exports = {
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'plugin:vue/vue3-recommended',
|
||||
'plugin:vue/vue3-recommended',
|
||||
'@vue/eslint-config-typescript/recommended',
|
||||
'@vue/eslint-config-prettier',
|
||||
'plugin:import/recommended',
|
||||
],
|
||||
|
||||
settings: {
|
||||
'import/resolver': { typescript: { project: './tsconfig.app.json' } },
|
||||
},
|
||||
env: {
|
||||
'vue/setup-compiler-macros': true,
|
||||
},
|
||||
rules: {
|
||||
'vue/multi-word-component-names': ['off'],
|
||||
'prettier/prettier': [
|
||||
'prettier/prettier': ['error'],
|
||||
'import/no-duplicates': ['error', { considerQueryString: true }],
|
||||
'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
|
||||
'import/extensions': [
|
||||
'error',
|
||||
'ignorePackages',
|
||||
{
|
||||
singleQuote: true,
|
||||
semi: true,
|
||||
tabWidth: 2,
|
||||
trailingComma: 'all',
|
||||
printWidth: 120,
|
||||
js: 'never',
|
||||
ts: 'never',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
7
.prettierrc
Normal file
7
.prettierrc
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"semi": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 120
|
||||
}
|
70
CHANGELOG.md
70
CHANGELOG.md
@@ -2,6 +2,76 @@
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
### [2.10.2](https://github.com/CorentinTh/it-tools/compare/v2.10.1...v2.10.2) (2022-08-04)
|
||||
|
||||
|
||||
### Refactors
|
||||
|
||||
* **dry:** mutualised duplicated code with withDefaultOnError ([f6cd9b7](https://github.com/CorentinTh/it-tools/commit/f6cd9b76d38800e1a1f63d07152fc96cda562795))
|
||||
* **home:** removed new tool first sort ([d30cd8a](https://github.com/CorentinTh/it-tools/commit/d30cd8a9abc3298c0a0b05f249e54318bb4537f2))
|
||||
* **json-prettifier:** more permissive json parser ([8089c60](https://github.com/CorentinTh/it-tools/commit/8089c60000000c42c821c6586c128d3d2b248885))
|
||||
* **lint:** added import rules ([208a373](https://github.com/CorentinTh/it-tools/commit/208a373fd08ac550778745eb6e4536bf02537da7))
|
||||
|
||||
### [2.10.1](https://github.com/CorentinTh/it-tools/compare/v2.10.0...v2.10.1) (2022-08-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **bip39-generator:** cleared an issue with the mnemonic validation ([ca7cb44](https://github.com/CorentinTh/it-tools/commit/ca7cb4438972ca09f28a6a40332ec94ceaa4aab4))
|
||||
* **import:** removed auto added weird .js extension ([fda0b0c](https://github.com/CorentinTh/it-tools/commit/fda0b0ca25c1733542a4e797ac1a2150c546a660))
|
||||
|
||||
|
||||
### Refactors
|
||||
|
||||
* **base64:** mutualized base64 functions into global utilities ([447bdf2](https://github.com/CorentinTh/it-tools/commit/447bdf2148098d70ba309e13d9b1e846b5064da1))
|
||||
* **chronometer:** improved chronometer precision ([e48d60b](https://github.com/CorentinTh/it-tools/commit/e48d60b1ed19279f48441743f7ed69e8fd915011))
|
||||
|
||||
## [2.10.0](https://github.com/CorentinTh/it-tools/compare/v2.9.2...v2.10.0) (2022-08-03)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **hash-text:** digest base selector ([#254](https://github.com/CorentinTh/it-tools/issues/254)) ([422b6eb](https://github.com/CorentinTh/it-tools/commit/422b6eb05a2fb5e7eec816a6bd2d37b53e4a6bdc))
|
||||
* **new-tool:** an svg placeholder image generator ([129f74c](https://github.com/CorentinTh/it-tools/commit/129f74c371eaf09fdc3a19afb709cee40b7aaf7f))
|
||||
* **new-tool:** hmac generator ([1bc6380](https://github.com/CorentinTh/it-tools/commit/1bc6380c6fdd7a9b500422a54bc508ab5557eb46))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **base64-to-string:** prevent validation error ([8a9e788](https://github.com/CorentinTh/it-tools/commit/8a9e7888dec41364c8c17b1234adcdc0616612b0))
|
||||
* **bip39-generator:** typo in validation message ([7570ad9](https://github.com/CorentinTh/it-tools/commit/7570ad965602233f860b9e03177a5b9dacf1b034))
|
||||
* **eta-calculator:** clamp inputs ([#249](https://github.com/CorentinTh/it-tools/issues/249)) ([531a25c](https://github.com/CorentinTh/it-tools/commit/531a25c1c4892835633ba5635c6ee48e1fbef31c))
|
||||
* **wording:** removed spaces before ponctuation ([#252](https://github.com/CorentinTh/it-tools/issues/252)) ([5f03619](https://github.com/CorentinTh/it-tools/commit/5f03619ab44c0b35455c46698ec37d79e87555b5))
|
||||
|
||||
|
||||
### Refactors
|
||||
|
||||
* **base64-to-file:** clean validation to convert base64 to file ([750a76b](https://github.com/CorentinTh/it-tools/commit/750a76b00fb79c0e9c2851c112141158ee0ffab1))
|
||||
* **display:** mutualized code display ([0be33fb](https://github.com/CorentinTh/it-tools/commit/0be33fb337e8d82474922c0fdf9555aa328cd729))
|
||||
* **lint:** externalization of prettier for simpler IDE support ([02c4963](https://github.com/CorentinTh/it-tools/commit/02c49635315661ca08deb0859c5ba33113368b9b))
|
||||
* **validation:** simplified validation system ([77b5b0c](https://github.com/CorentinTh/it-tools/commit/77b5b0cab50a05dcb419ce87d74517d82e7cd2c0))
|
||||
|
||||
### [2.9.2](https://github.com/CorentinTh/it-tools/compare/v2.9.1...v2.9.2) (2022-07-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **base64-file:** fixed url slug ([412de23](https://github.com/CorentinTh/it-tools/commit/412de23796babbc080b0768a75029ff2ddf2acfc))
|
||||
* **device-information:** handle of unknown values ([4f599b6](https://github.com/CorentinTh/it-tools/commit/4f599b699901a93444bcc67cbb3b3556a0561ae4))
|
||||
* **device-information:** prevent unwanted y-truncature of text ([138149e](https://github.com/CorentinTh/it-tools/commit/138149e6f0be91255907a6083887898e5c68882e))
|
||||
|
||||
|
||||
### Refactors
|
||||
|
||||
* **base64-file:** fixed typo ([1a22d55](https://github.com/CorentinTh/it-tools/commit/1a22d55b3c48f58b05b5a50de4fea260e781fbef))
|
||||
|
||||
### [2.9.1](https://github.com/CorentinTh/it-tools/compare/v2.9.0...v2.9.1) (2022-07-25)
|
||||
|
||||
|
||||
### Refactors
|
||||
|
||||
* **base64:** split base64 text and file conversion in two tools + base64 to file ([e6953d1](https://github.com/CorentinTh/it-tools/commit/e6953d1b67b81a6d3c19973b706f29637c421f98))
|
||||
|
||||
## [2.9.0](https://github.com/CorentinTh/it-tools/compare/v2.8.0...v2.9.0) (2022-07-25)
|
||||
|
||||
|
||||
|
7372
package-lock.json
generated
7372
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "it-tools",
|
||||
"version": "2.9.0",
|
||||
"version": "2.10.2",
|
||||
"description": "Collection of handy online tools for developers, with great UX. ",
|
||||
"keywords": [
|
||||
"productivity",
|
||||
@@ -47,6 +47,7 @@
|
||||
"highlight.js": "^11.5.1",
|
||||
"lodash": "^4.17.21",
|
||||
"mathjs": "^10.6.0",
|
||||
"mime-types": "^2.1.35",
|
||||
"naive-ui": "^2.31.0",
|
||||
"pinia": "^2.0.11",
|
||||
"plausible-tracker": "^0.3.5",
|
||||
@@ -62,10 +63,12 @@
|
||||
"@types/bcryptjs": "^2.4.2",
|
||||
"@types/crypto-js": "^4.1.1",
|
||||
"@types/jsdom": "^16.2.14",
|
||||
"@types/mime-types": "^2.1.1",
|
||||
"@types/node": "^16.11.25",
|
||||
"@types/qrcode": "^1.4.2",
|
||||
"@types/randombytes": "^2.0.0",
|
||||
"@types/uuid": "^8.3.4",
|
||||
"@typescript-eslint/parser": "^5.32.0",
|
||||
"@vitejs/plugin-vue": "^2.2.2",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.7",
|
||||
"@vue/eslint-config-prettier": "^7.0.0",
|
||||
@@ -74,6 +77,9 @@
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"c8": "^7.11.0",
|
||||
"eslint": "^8.5.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-import-resolver-typescript": "^3.4.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-vue": "^8.2.0",
|
||||
"jsdom": "^19.0.0",
|
||||
"less": "^4.1.2",
|
||||
|
@@ -1,9 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { layouts } from './layouts';
|
||||
import { computed } from 'vue';
|
||||
import { useRoute, RouterView } from 'vue-router';
|
||||
import { darkThemeOverrides, lightThemeOverrides } from './themes';
|
||||
import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
|
||||
import { darkThemeOverrides, lightThemeOverrides } from './themes';
|
||||
import { layouts } from './layouts';
|
||||
import { useStyleStore } from './stores/style.store';
|
||||
|
||||
const route = useRoute();
|
||||
|
98
src/components/TextareaCopyable.vue
Normal file
98
src/components/TextareaCopyable.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div style="overflow-x: hidden; width: 100%">
|
||||
<n-card class="result-card">
|
||||
<n-scrollbar
|
||||
x-scrollable
|
||||
trigger="none"
|
||||
: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" />
|
||||
</n-config-provider>
|
||||
</n-scrollbar>
|
||||
<n-tooltip v-if="value" trigger="hover">
|
||||
<template #trigger>
|
||||
<div class="copy-button" :class="[copyPlacement]">
|
||||
<n-button secondary circle size="large" @click="onCopyClicked">
|
||||
<n-icon size="22" :component="Copy" />
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
<span>{{ tooltipText }}</span>
|
||||
</n-tooltip>
|
||||
</n-card>
|
||||
<n-space v-if="copyPlacement === 'outside'" justify="center" style="margin-top: 15px">
|
||||
<n-button secondary @click="onCopyClicked"> {{ tooltipText }} </n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Copy } from '@vicons/tabler';
|
||||
import { useClipboard, useElementSize } from '@vueuse/core';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import jsonHljs from 'highlight.js/lib/languages/json';
|
||||
import sqlHljs from 'highlight.js/lib/languages/sql';
|
||||
import { ref, toRefs } from 'vue';
|
||||
|
||||
hljs.registerLanguage('sql', sqlHljs);
|
||||
hljs.registerLanguage('json', jsonHljs);
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value: string;
|
||||
followHeightOf?: HTMLElement | null;
|
||||
language?: string;
|
||||
copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none';
|
||||
copyMessage?: string;
|
||||
}>(),
|
||||
{
|
||||
followHeightOf: null,
|
||||
language: 'txt',
|
||||
copyPlacement: 'top-right',
|
||||
copyMessage: 'Copy to clipboard',
|
||||
},
|
||||
);
|
||||
const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
|
||||
const { height } = followHeightOf ? useElementSize(followHeightOf) : { height: ref(null) };
|
||||
|
||||
const { copy } = useClipboard({ source: value });
|
||||
const tooltipText = ref(copyMessage.value);
|
||||
|
||||
function onCopyClicked() {
|
||||
copy();
|
||||
tooltipText.value = 'Copied !';
|
||||
|
||||
setTimeout(() => {
|
||||
tooltipText.value = copyMessage.value;
|
||||
}, 2000);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
::v-deep(.n-scrollbar) {
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
.result-card {
|
||||
position: relative;
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
|
||||
&.top-right {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&.bottom-right {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
&.outside,
|
||||
&.none {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@@ -1,11 +1,36 @@
|
||||
import { extension as getExtensionFromMime } from 'mime-types';
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
export function useDownloadFileFromBase64({ source, filename = 'file' }: { source: Ref<string>; filename?: string }) {
|
||||
function getFileExtensionFromBase64({
|
||||
base64String,
|
||||
defaultExtension = 'txt',
|
||||
}: {
|
||||
base64String: string;
|
||||
defaultExtension?: string;
|
||||
}) {
|
||||
const hasMimeType = base64String.match(/data:(.*?);base64/i);
|
||||
|
||||
if (hasMimeType) {
|
||||
return getExtensionFromMime(hasMimeType[1]) || defaultExtension;
|
||||
}
|
||||
|
||||
return defaultExtension;
|
||||
}
|
||||
|
||||
export function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
|
||||
return {
|
||||
download() {
|
||||
const base64String = source.value;
|
||||
|
||||
if (base64String === '') {
|
||||
throw new Error('Base64 string is empty');
|
||||
}
|
||||
|
||||
const cleanFileName = filename ?? `file.${getFileExtensionFromBase64({ base64String })}`;
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = source.value;
|
||||
a.download = filename;
|
||||
a.href = base64String;
|
||||
a.download = cleanFileName;
|
||||
a.click();
|
||||
},
|
||||
};
|
||||
|
29
src/composable/validation.test.ts
Normal file
29
src/composable/validation.test.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
/* eslint-disable @typescript-eslint/no-empty-function */
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { isFalsyOrHasThrown } from './validation';
|
||||
|
||||
describe('useValidation', () => {
|
||||
describe('isFalsyOrHasThrown', () => {
|
||||
it('should return true if the callback return nil, false or throw', () => {
|
||||
expect(isFalsyOrHasThrown(() => false)).toBe(true);
|
||||
expect(isFalsyOrHasThrown(() => null)).toBe(true);
|
||||
expect(isFalsyOrHasThrown(() => undefined)).toBe(true);
|
||||
expect(isFalsyOrHasThrown(() => {})).toBe(true);
|
||||
expect(
|
||||
isFalsyOrHasThrown(() => {
|
||||
throw new Error();
|
||||
}),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it('should return true for any truthy values and empty string and 0 values', () => {
|
||||
expect(isFalsyOrHasThrown(() => true)).toBe(false);
|
||||
expect(isFalsyOrHasThrown(() => 'string')).toBe(false);
|
||||
expect(isFalsyOrHasThrown(() => 1)).toBe(false);
|
||||
expect(isFalsyOrHasThrown(() => 0)).toBe(false);
|
||||
expect(isFalsyOrHasThrown(() => '')).toBe(false);
|
||||
expect(isFalsyOrHasThrown(() => [])).toBe(false);
|
||||
expect(isFalsyOrHasThrown(() => ({}))).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
@@ -1,38 +1,65 @@
|
||||
import _ from 'lodash';
|
||||
import { reactive, watch, type Ref } from 'vue';
|
||||
|
||||
type UseValidationRule<T> = {
|
||||
validator: (value: T) => boolean;
|
||||
message: string;
|
||||
};
|
||||
type ValidatorReturnType = unknown;
|
||||
|
||||
function isFalsyOrHasThrown(cb: () => boolean) {
|
||||
interface UseValidationRule<T> {
|
||||
validator: (value: T) => ValidatorReturnType;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
|
||||
try {
|
||||
return !cb();
|
||||
const returnValue = cb();
|
||||
|
||||
if (_.isNil(returnValue)) return true;
|
||||
|
||||
return returnValue === false;
|
||||
} catch (_) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
type ValidationAttrs = {
|
||||
feedback: string;
|
||||
validationStatus: string | undefined;
|
||||
};
|
||||
|
||||
export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: UseValidationRule<T>[] }) {
|
||||
const state = reactive<{
|
||||
message: string;
|
||||
status: undefined | 'error';
|
||||
isValid: boolean;
|
||||
attrs: ValidationAttrs;
|
||||
}>({
|
||||
message: '',
|
||||
status: undefined,
|
||||
isValid: false,
|
||||
attrs: {
|
||||
validationStatus: undefined,
|
||||
feedback: '',
|
||||
},
|
||||
});
|
||||
|
||||
watch([source], () => {
|
||||
state.message = '';
|
||||
state.status = undefined;
|
||||
watch(
|
||||
[source],
|
||||
() => {
|
||||
state.message = '';
|
||||
state.status = undefined;
|
||||
|
||||
for (const rule of rules) {
|
||||
if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
|
||||
state.message = rule.message;
|
||||
state.status = 'error';
|
||||
for (const rule of rules) {
|
||||
if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
|
||||
state.message = rule.message;
|
||||
state.status = 'error';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
state.isValid = state.status !== 'error';
|
||||
state.attrs.feedback = state.message;
|
||||
state.attrs.validationStatus = state.status;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
return state;
|
||||
}
|
||||
|
@@ -4,14 +4,14 @@ import { h } from 'vue';
|
||||
import { RouterLink, useRoute } from 'vue-router';
|
||||
import { Heart, Menu2, Home2 } from '@vicons/tabler';
|
||||
import { toolsByCategory } from '@/tools';
|
||||
import SearchBar from '../components/SearchBar.vue';
|
||||
import { useStyleStore } from '@/stores/style.store';
|
||||
import HeroGradient from '../assets/hero-gradient.svg?component';
|
||||
import MenuLayout from '../components/MenuLayout.vue';
|
||||
import NavbarButtons from '../components/NavbarButtons.vue';
|
||||
import { config } from '@/config';
|
||||
import MenuIconItem from '@/components/MenuIconItem.vue';
|
||||
import type { ITool } from '@/tools/tool';
|
||||
import SearchBar from '../components/SearchBar.vue';
|
||||
import HeroGradient from '../assets/hero-gradient.svg?component';
|
||||
import MenuLayout from '../components/MenuLayout.vue';
|
||||
import NavbarButtons from '../components/NavbarButtons.vue';
|
||||
|
||||
const themeVars = useThemeVars();
|
||||
const route = useRoute();
|
||||
|
@@ -1,10 +1,10 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
import BaseLayout from './base.layout.vue';
|
||||
import { useHead } from '@vueuse/head';
|
||||
import type { HeadObject } from '@vueuse/head';
|
||||
import { computed } from 'vue';
|
||||
import { useThemeVars } from 'naive-ui';
|
||||
import BaseLayout from './base.layout.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const theme = useThemeVars();
|
||||
|
@@ -1,6 +1,7 @@
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import { createHead } from '@vueuse/head';
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import { registerSW } from 'virtual:pwa-register';
|
||||
import { plausible } from './plugins/plausible.plugin';
|
||||
|
||||
|
@@ -47,7 +47,7 @@ useHead({ title: 'About - IT Tools' });
|
||||
file of the repository.
|
||||
</n-p>
|
||||
|
||||
<n-h2>Found a bug ? A tool is missing ?</n-h2>
|
||||
<n-h2>Found a bug? A tool is missing?</n-h2>
|
||||
<n-p>
|
||||
If you need a tool that is currently not present here, and you think can be relevant, you are welcome to submit a
|
||||
feature request in the
|
||||
|
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { toolsWithCategory } from '@/tools';
|
||||
import ToolCard from '../components/ToolCard.vue';
|
||||
import { useHead } from '@vueuse/head';
|
||||
import ToolCard from '../components/ToolCard.vue';
|
||||
|
||||
useHead({ title: 'IT Tools - Handy online tools for developers' });
|
||||
</script>
|
||||
@@ -9,13 +9,7 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
||||
<n-gi
|
||||
v-for="tool in [
|
||||
...toolsWithCategory.filter(({ isNew }) => isNew),
|
||||
...toolsWithCategory.filter(({ isNew }) => !isNew),
|
||||
]"
|
||||
:key="tool.name"
|
||||
>
|
||||
<n-gi v-for="tool in toolsWithCategory" :key="tool.name">
|
||||
<tool-card :tool="tool" />
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
@@ -1,5 +1,5 @@
|
||||
import { layouts } from './layouts/index';
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { layouts } from './layouts/index';
|
||||
import HomePage from './pages/Home.page.vue';
|
||||
import NotFound from './pages/404.page.vue';
|
||||
import { tools } from './tools';
|
||||
|
@@ -1,9 +1,16 @@
|
||||
<template>
|
||||
<n-card title="Text to base64">
|
||||
<n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." />
|
||||
<n-input :value="textBase64" type="textarea" readonly />
|
||||
<n-card title="Base64 to file">
|
||||
<n-form-item
|
||||
:feedback="base64InputValidation.message"
|
||||
:validation-status="base64InputValidation.status"
|
||||
:show-label="false"
|
||||
>
|
||||
<n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
|
||||
</n-form-item>
|
||||
<n-space justify="center">
|
||||
<n-button secondary @click="copyTextBase64()"> Copy </n-button>
|
||||
<n-button :disabled="base64Input === '' || !base64InputValidation.isValid" secondary @click="downloadFile()">
|
||||
Download file
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
@@ -17,7 +24,7 @@
|
||||
</n-upload-dragger>
|
||||
</n-upload>
|
||||
|
||||
<n-input :value="fileBase64" type="textarea" readonly />
|
||||
<n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
|
||||
<n-space justify="center">
|
||||
<n-button secondary @click="copyFileBase64()"> Copy </n-button>
|
||||
</n-space>
|
||||
@@ -26,14 +33,35 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import { useBase64 } from '@vueuse/core';
|
||||
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
|
||||
import { useValidation } from '@/composable/validation';
|
||||
import { isValidBase64 } from '@/utils/base64';
|
||||
import { Upload } from '@vicons/tabler';
|
||||
import { ref, type Ref } from 'vue';
|
||||
import { useBase64 } from '@vueuse/core';
|
||||
import type { UploadFileInfo } from 'naive-ui';
|
||||
import { ref, type Ref } from 'vue';
|
||||
|
||||
const textInput = ref('');
|
||||
const { base64: textBase64 } = useBase64(textInput);
|
||||
const { copy: copyTextBase64 } = useCopy({ source: textBase64, text: 'Base64 string copied to the clipboard' });
|
||||
const base64Input = ref('');
|
||||
const { download } = useDownloadFileFromBase64({ source: base64Input });
|
||||
const base64InputValidation = useValidation({
|
||||
source: base64Input,
|
||||
rules: [
|
||||
{
|
||||
message: 'Invalid base 64 string',
|
||||
validator: (value) => isValidBase64(value.trim()),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
function downloadFile() {
|
||||
if (!base64InputValidation.isValid) return;
|
||||
|
||||
try {
|
||||
download();
|
||||
} catch (_) {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
const fileList = ref();
|
||||
const fileInput = ref() as Ref<File>;
|
@@ -2,11 +2,10 @@ import { FileDigit } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Base64 converter',
|
||||
path: '/base64-converter',
|
||||
name: 'Base64 file converter',
|
||||
path: '/base64-file-converter',
|
||||
description: "Convert string, files or images into a it's base64 representation.",
|
||||
keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
|
||||
component: () => import('./base64-converter.vue'),
|
||||
component: () => import('./base64-file-converter.vue'),
|
||||
icon: FileDigit,
|
||||
redirectFrom: ['/file-to-base64', '/base64-string-converter'],
|
||||
});
|
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<n-card title="String to base64">
|
||||
<n-form-item label="String to encode">
|
||||
<n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="Base64 of string">
|
||||
<n-input
|
||||
:value="base64Output"
|
||||
type="textarea"
|
||||
readonly
|
||||
placeholder="The base64 encoding of your string will be here"
|
||||
rows="5"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-space justify="center">
|
||||
<n-button secondary @click="copyTextBase64()"> Copy base64 </n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<n-card title="Base64 to string">
|
||||
<n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
|
||||
<n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="Decoded string">
|
||||
<n-input :value="textOutput" type="textarea" readonly placeholder="The decoded string will be here" rows="5" />
|
||||
</n-form-item>
|
||||
|
||||
<n-space justify="center">
|
||||
<n-button secondary @click="copyText()"> Copy decoded string </n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<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(() => textToBase64(textInput.value));
|
||||
const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 string copied to the clipboard' });
|
||||
|
||||
const base64Input = ref('');
|
||||
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) => isValidBase64(value.trim()) }],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
12
src/tools/base64-string-converter/index.ts
Normal file
12
src/tools/base64-string-converter/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { FileDigit } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Base64 string encoder/decoder',
|
||||
path: '/base64-string-converter',
|
||||
description: 'Simply encode and decode string into a their base64 representation.',
|
||||
keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa'],
|
||||
component: () => import('./base64-string-converter.vue'),
|
||||
icon: FileDigit,
|
||||
redirectFrom: ['/file-to-base64', '/base64-converter'],
|
||||
});
|
@@ -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>
|
||||
|
@@ -59,24 +59,25 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useValidation } from '@/composable/validation';
|
||||
import { withDefaultOnError } from '@/utils/defaults';
|
||||
import {
|
||||
entropyToMnemonic,
|
||||
englishWordList,
|
||||
chineseSimplifiedWordList,
|
||||
chineseTraditionalWordList,
|
||||
czechWordList,
|
||||
englishWordList,
|
||||
entropyToMnemonic,
|
||||
frenchWordList,
|
||||
generateEntropy,
|
||||
italianWordList,
|
||||
japaneseWordList,
|
||||
koreanWordList,
|
||||
mnemonicToEntropy,
|
||||
portugueseWordList,
|
||||
spanishWordList,
|
||||
generateEntropy,
|
||||
mnemonicToEntropy,
|
||||
} from '@it-tools/bip39';
|
||||
import { Copy, Refresh } from '@vicons/tabler';
|
||||
import { useValidation } from '@/composable/validation';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const languages = {
|
||||
English: englishWordList,
|
||||
@@ -105,12 +106,7 @@ const passphrase = computed({
|
||||
},
|
||||
set(value: string) {
|
||||
passphraseInput.value = value;
|
||||
|
||||
try {
|
||||
entropy.value = mnemonicToEntropy(value, languages[language.value]);
|
||||
} catch (_) {
|
||||
entropy.value = '';
|
||||
}
|
||||
entropy.value = withDefaultOnError(() => mnemonicToEntropy(value, languages[language.value]), '');
|
||||
},
|
||||
});
|
||||
|
||||
@@ -123,7 +119,7 @@ const entropyValidation = useValidation({
|
||||
},
|
||||
{
|
||||
validator: (value) => /^[a-fA-F0-9]*$/.test(value),
|
||||
message: 'Entropy should an hexadecimal number',
|
||||
message: 'Entropy should be an hexadecimal string',
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -134,7 +130,7 @@ const mnemonicValidation = useValidation({
|
||||
{
|
||||
validator: (value) => {
|
||||
try {
|
||||
mnemonicToEntropy(value);
|
||||
mnemonicToEntropy(value, languages[language.value]);
|
||||
return true;
|
||||
} catch (_) {
|
||||
return false;
|
||||
|
@@ -46,8 +46,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
|
||||
import {
|
||||
camelCase,
|
||||
capitalCase,
|
||||
@@ -61,6 +59,7 @@ import {
|
||||
sentenceCase,
|
||||
snakeCase,
|
||||
} from 'change-case';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
|
||||
const input = ref('lorem ipsum dolor sit amet');
|
||||
</script>
|
||||
|
@@ -1,12 +1,13 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { formatChronometerTime } from './chronometer.service';
|
||||
import { formatMs } from './chronometer.service';
|
||||
|
||||
describe('chronometer', () => {
|
||||
describe('formatChronometerTime', () => {
|
||||
it('format the elapsed time', () => {
|
||||
expect(formatChronometerTime({ elapsed: 123456 })).toEqual('02:03.456');
|
||||
expect(formatChronometerTime({ elapsed: 123456, msPerUnit: 100 })).toEqual('03:25:45.600');
|
||||
expect(formatChronometerTime({ elapsed: 12345600 })).toEqual('03:25:45.600');
|
||||
expect(formatMs(0)).toEqual('00:00.000');
|
||||
expect(formatMs(1)).toEqual('00:00.001');
|
||||
expect(formatMs(123456)).toEqual('02:03.456');
|
||||
expect(formatMs(12345600)).toEqual('03:25:45.600');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@@ -1,10 +1,8 @@
|
||||
export function formatChronometerTime({ elapsed, msPerUnit = 1 }: { elapsed: number; msPerUnit?: number }) {
|
||||
const elapsedMs = elapsed * msPerUnit;
|
||||
|
||||
const ms = elapsedMs % 1000;
|
||||
const secs = ((elapsedMs - ms) / 1000) % 60;
|
||||
const mins = (((elapsedMs - ms) / 1000 - secs) / 60) % 60;
|
||||
const hrs = (((elapsedMs - ms) / 1000 - secs) / 60 - mins) / 60;
|
||||
export function formatMs(msTotal: number) {
|
||||
const ms = msTotal % 1000;
|
||||
const secs = ((msTotal - ms) / 1000) % 60;
|
||||
const mins = (((msTotal - ms) / 1000 - secs) / 60) % 60;
|
||||
const hrs = (((msTotal - ms) / 1000 - secs) / 60 - mins) / 60;
|
||||
const hrsString = hrs > 0 ? `${hrs.toString().padStart(2, '0')}:` : '';
|
||||
|
||||
return `${hrsString}${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}.${ms
|
||||
|
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<div class="duration">{{ formatChronometerTime({ elapsed: counter, msPerUnit }) }}</div>
|
||||
<div class="duration">{{ formatMs(counter) }}</div>
|
||||
</n-card>
|
||||
<br />
|
||||
<n-space justify="center">
|
||||
<n-button v-if="!isActive" secondary type="primary" @click="resume">Start</n-button>
|
||||
<n-button v-if="!isRunning" secondary type="primary" @click="resume">Start</n-button>
|
||||
<n-button v-else secondary type="warning" @click="pause">Stop</n-button>
|
||||
|
||||
<n-button secondary @click="counter = 0">Reset</n-button>
|
||||
@@ -14,12 +14,33 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useInterval } from '@vueuse/core';
|
||||
import { formatChronometerTime } from './chronometer.service';
|
||||
import { useRafFn } from '@vueuse/core';
|
||||
import { ref } from 'vue';
|
||||
import { formatMs } from './chronometer.service';
|
||||
|
||||
const msPerUnit = 10;
|
||||
const isRunning = ref(false);
|
||||
const counter = ref(0);
|
||||
|
||||
const { counter, pause, resume, isActive } = useInterval(msPerUnit, { controls: true, immediate: false });
|
||||
let previousRafDate = Date.now();
|
||||
const { pause: pauseRaf, resume: resumeRaf } = useRafFn(
|
||||
() => {
|
||||
const deltaMs = Date.now() - previousRafDate;
|
||||
previousRafDate = Date.now();
|
||||
counter.value += deltaMs;
|
||||
},
|
||||
{ immediate: false },
|
||||
);
|
||||
|
||||
function resume() {
|
||||
previousRafDate = Date.now();
|
||||
resumeRaf();
|
||||
isRunning.value = true;
|
||||
}
|
||||
|
||||
function pause() {
|
||||
pauseRaf();
|
||||
isRunning.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
@@ -36,12 +36,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { colord, extend } from 'colord';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
|
||||
import cmykPlugin from 'colord/plugins/cmyk';
|
||||
import hwbPlugin from 'colord/plugins/hwb';
|
||||
import namesPlugin from 'colord/plugins/names';
|
||||
import lchPlugin from 'colord/plugins/lch';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
|
||||
extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin]);
|
||||
|
||||
|
@@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<n-card v-for="{ name, information } in sections" :key="name" :title="name">
|
||||
<n-grid cols="1 400:2" x-gap="12" y-gap="12">
|
||||
<n-gi v-for="{ label, value } in information" :key="label" class="information">
|
||||
<n-gi v-for="{ label, value: { value } } in information" :key="label" class="information">
|
||||
<n-card :bordered="false" embedded>
|
||||
<div class="label">
|
||||
{{ label }}
|
||||
</div>
|
||||
|
||||
<div class="value">
|
||||
<n-ellipsis>
|
||||
{{ value.value }}
|
||||
<n-ellipsis v-if="value">
|
||||
{{ value }}
|
||||
</n-ellipsis>
|
||||
<div v-else class="undefined-value">unknown</div>
|
||||
</div>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
@@ -89,7 +90,10 @@ const sections = [
|
||||
.value {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.undefined-value {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@@ -11,7 +11,7 @@
|
||||
<div>
|
||||
<n-space item-style="flex:1 1 0">
|
||||
<n-form-item label="Amount of element to consume">
|
||||
<n-input-number v-model:value="unitCount" />
|
||||
<n-input-number v-model:value="unitCount" :min="1" />
|
||||
</n-form-item>
|
||||
<n-form-item label="The consumption started at">
|
||||
<n-date-picker v-model:value="startedAt" type="datetime" />
|
||||
@@ -19,10 +19,10 @@
|
||||
</n-space>
|
||||
|
||||
<n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
|
||||
<n-input-number v-model:value="unitPerTimeSpan" />
|
||||
<n-input-number v-model:value="unitPerTimeSpan" :min="1" />
|
||||
<span style="margin: 0 10px">in</span>
|
||||
<n-input-group>
|
||||
<n-input-number v-model:value="timeSpan" />
|
||||
<n-input-number v-model:value="timeSpan" :min="1" />
|
||||
<n-select
|
||||
v-model:value="timeSpanUnitMultiplier"
|
||||
:options="[
|
||||
@@ -51,7 +51,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Duplicate issue with sub directory
|
||||
// eslint-disable-next-line import/no-duplicates
|
||||
import { addMilliseconds, formatRelative } from 'date-fns';
|
||||
// eslint-disable-next-line import/no-duplicates
|
||||
import { enGB } from 'date-fns/locale';
|
||||
import { computed, ref } from 'vue';
|
||||
import { formatMsDuration } from './eta-calculator.service';
|
||||
|
@@ -5,8 +5,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Memo from './git-memo.md';
|
||||
import { useThemeVars } from 'naive-ui';
|
||||
import Memo from './git-memo.md';
|
||||
|
||||
const themeVars = useThemeVars();
|
||||
</script>
|
||||
|
15
src/tools/hash-text/hash-text.service.test.ts
Normal file
15
src/tools/hash-text/hash-text.service.test.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { convertHexToBin } from './hash-text.service';
|
||||
|
||||
describe('hash text', () => {
|
||||
describe('convertHexToBin', () => {
|
||||
it('convert hex to bin', () => {
|
||||
expect(convertHexToBin('')).toEqual('');
|
||||
expect(convertHexToBin('FF')).toEqual('11111111');
|
||||
expect(convertHexToBin('F'.repeat(200))).toEqual('1111'.repeat(200));
|
||||
expect(convertHexToBin('2123006AD00F694CE120')).toEqual(
|
||||
'00100001001000110000000001101010110100000000111101101001010011001110000100100000',
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
7
src/tools/hash-text/hash-text.service.ts
Normal file
7
src/tools/hash-text/hash-text.service.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export function convertHexToBin(hex: string) {
|
||||
return hex
|
||||
.trim()
|
||||
.split('')
|
||||
.map((byte) => parseInt(byte, 16).toString(2).padStart(4, '0'))
|
||||
.join('');
|
||||
}
|
@@ -1,10 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card>
|
||||
<n-input v-model:value="clearText" type="textarea" placeholder="Your string..." :autosize="{ minRows: 3 }" />
|
||||
<n-input v-model:value="clearText" type="textarea" placeholder="Your string to hash..." rows="3" />
|
||||
|
||||
<n-divider />
|
||||
|
||||
<n-form-item label="Digest encoding">
|
||||
<n-select
|
||||
v-model:value="encoding"
|
||||
:options="[
|
||||
{
|
||||
label: 'Binary (base 2)',
|
||||
value: 'Bin',
|
||||
},
|
||||
{
|
||||
label: 'Hexadecimal (base 16)',
|
||||
value: 'Hex',
|
||||
},
|
||||
{
|
||||
label: 'Base64 (base 64)',
|
||||
value: 'Base64',
|
||||
},
|
||||
{
|
||||
label: 'Base64url (base 64 with url safe chars)',
|
||||
value: 'Base64url',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<div v-for="algo in algoNames" :key="algo" style="margin: 5px 0">
|
||||
<n-input-group>
|
||||
<n-input-group-label style="flex: 0 0 120px"> {{ algo }} </n-input-group-label>
|
||||
@@ -16,9 +40,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
import { enc, lib, MD5, RIPEMD160, SHA1, SHA224, SHA256, SHA3, SHA384, SHA512 } from 'crypto-js';
|
||||
import { ref } from 'vue';
|
||||
import { MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3, RIPEMD160 } from 'crypto-js';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
import { convertHexToBin } from './hash-text.service';
|
||||
|
||||
const algos = {
|
||||
MD5,
|
||||
@@ -32,10 +57,18 @@ const algos = {
|
||||
} as const;
|
||||
|
||||
type AlgoNames = keyof typeof algos;
|
||||
type Encoding = keyof typeof enc | 'Bin';
|
||||
const algoNames = Object.keys(algos) as AlgoNames[];
|
||||
const encoding = ref<Encoding>('Hex');
|
||||
const clearText = ref('');
|
||||
|
||||
const clearText = ref(
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus metus blandit dolor lacus natoque ad fusce aliquam velit.',
|
||||
);
|
||||
const hashText = (algo: AlgoNames, value: string) => algos[algo](value).toString();
|
||||
function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
|
||||
if (encoding === 'Bin') {
|
||||
return convertHexToBin(words.toString(enc.Hex));
|
||||
}
|
||||
|
||||
return words.toString(enc[encoding]);
|
||||
}
|
||||
|
||||
const hashText = (algo: AlgoNames, value: string) => formatWithEncoding(algos[algo](value), encoding.value);
|
||||
</script>
|
||||
|
98
src/tools/hmac-generator/hmac-generator.vue
Normal file
98
src/tools/hmac-generator/hmac-generator.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-form-item label="Plain text to compute the hash">
|
||||
<n-input v-model:value="plainText" type="textarea" placeholder="Enter the text to compute the hash..." />
|
||||
</n-form-item>
|
||||
<n-form-item label="Secret key">
|
||||
<n-input v-model:value="secret" placeholder="Enter the secret key..." />
|
||||
</n-form-item>
|
||||
<n-space item-style="flex:1 1 0">
|
||||
<n-form-item label="Hashing function">
|
||||
<n-select
|
||||
v-model:value="hashFunction"
|
||||
placeholder="Select an hashing function..."
|
||||
:options="Object.keys(algos).map((label) => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="Output encoding">
|
||||
<n-select
|
||||
v-model:value="encoding"
|
||||
placeholder="Select the result encoding..."
|
||||
:options="[
|
||||
{
|
||||
label: 'Binary (base 2)',
|
||||
value: 'Bin',
|
||||
},
|
||||
{
|
||||
label: 'Hexadecimal (base 16)',
|
||||
value: 'Hex',
|
||||
},
|
||||
{
|
||||
label: 'Base64 (base 64)',
|
||||
value: 'Base64',
|
||||
},
|
||||
{
|
||||
label: 'Base64-url (base 64 with url safe chars)',
|
||||
value: 'Base64url',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
<n-form-item label="HMAC of your text">
|
||||
<n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
|
||||
</n-form-item>
|
||||
<n-space justify="center">
|
||||
<n-button secondary @click="copy()">Copy HMAC</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import {
|
||||
enc,
|
||||
HmacMD5,
|
||||
HmacRIPEMD160,
|
||||
HmacSHA1,
|
||||
HmacSHA224,
|
||||
HmacSHA256,
|
||||
HmacSHA3,
|
||||
HmacSHA384,
|
||||
HmacSHA512,
|
||||
lib,
|
||||
} from 'crypto-js';
|
||||
import { computed, ref } from 'vue';
|
||||
import { convertHexToBin } from '../hash-text/hash-text.service';
|
||||
|
||||
const algos = {
|
||||
MD5: HmacMD5,
|
||||
RIPEMD160: HmacRIPEMD160,
|
||||
SHA1: HmacSHA1,
|
||||
SHA3: HmacSHA3,
|
||||
SHA224: HmacSHA224,
|
||||
SHA256: HmacSHA256,
|
||||
SHA384: HmacSHA384,
|
||||
SHA512: HmacSHA512,
|
||||
} as const;
|
||||
|
||||
type Encoding = keyof typeof enc | 'Bin';
|
||||
|
||||
function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
|
||||
if (encoding === 'Bin') {
|
||||
return convertHexToBin(words.toString(enc.Hex));
|
||||
}
|
||||
return words.toString(enc[encoding]);
|
||||
}
|
||||
|
||||
const plainText = ref('');
|
||||
const secret = ref('');
|
||||
const hashFunction = ref<keyof typeof algos>('SHA256');
|
||||
const encoding = ref<Encoding>('Hex');
|
||||
const hmac = computed(() =>
|
||||
formatWithEncoding(algos[hashFunction.value](plainText.value, secret.value), encoding.value),
|
||||
);
|
||||
const { copy } = useCopy({ source: hmac });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
12
src/tools/hmac-generator/index.ts
Normal file
12
src/tools/hmac-generator/index.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { ShortTextRound } from '@vicons/material';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Hmac generator',
|
||||
path: '/hmac-generator',
|
||||
description:
|
||||
'Computes a hash-based message authentication code (HMAC) using a secret key and your favorite hashing function.',
|
||||
keywords: ['hmac', 'generator', 'MD5', 'SHA1', 'SHA256', 'SHA224', 'SHA512', 'SHA384', 'SHA3', 'RIPEMD160'],
|
||||
component: () => import('./hmac-generator.vue'),
|
||||
icon: ShortTextRound,
|
||||
});
|
@@ -1,7 +1,8 @@
|
||||
import { LockOpen } from '@vicons/tabler';
|
||||
import type { ToolCategory } from './tool';
|
||||
|
||||
import { tool as base64Converter } from './base64-converter';
|
||||
import { tool as base64FileConverter } from './base64-file-converter';
|
||||
import { tool as base64StringConverter } from './base64-string-converter';
|
||||
import { tool as basicAuthGenerator } from './basic-auth-generator';
|
||||
import { tool as bcrypt } from './bcrypt';
|
||||
import { tool as bip39 } from './bip39-generator';
|
||||
@@ -15,6 +16,7 @@ import { tool as cypher } from './encryption';
|
||||
import { tool as etaCalculator } from './eta-calculator';
|
||||
import { tool as gitMemo } from './git-memo';
|
||||
import { tool as hashText } from './hash-text';
|
||||
import { tool as hmacGenerator } from './hmac-generator';
|
||||
import { tool as htmlEntities } from './html-entities';
|
||||
import { tool as baseConverter } from './integer-base-converter';
|
||||
import { tool as jsonViewer } from './json-viewer';
|
||||
@@ -24,6 +26,7 @@ import { tool as qrCodeGenerator } from './qr-code-generator';
|
||||
import { tool as randomPortGenerator } from './random-port-generator';
|
||||
import { tool as romanNumeralConverter } from './roman-numeral-converter';
|
||||
import { tool as sqlPrettify } from './sql-prettify';
|
||||
import { tool as svgPlaceholderGenerator } from './svg-placeholder-generator';
|
||||
import { tool as textStatistics } from './text-statistics';
|
||||
import { tool as tokenGenerator } from './token-generator';
|
||||
import { tool as urlEncoder } from './url-encoder';
|
||||
@@ -34,7 +37,7 @@ export const toolsByCategory: ToolCategory[] = [
|
||||
{
|
||||
name: 'Crypto',
|
||||
icon: LockOpen,
|
||||
components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39],
|
||||
components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator],
|
||||
},
|
||||
{
|
||||
name: 'Converter',
|
||||
@@ -43,7 +46,8 @@ export const toolsByCategory: ToolCategory[] = [
|
||||
dateTimeConverter,
|
||||
baseConverter,
|
||||
romanNumeralConverter,
|
||||
base64Converter,
|
||||
base64StringConverter,
|
||||
base64FileConverter,
|
||||
colorConverter,
|
||||
caseConverter,
|
||||
],
|
||||
@@ -51,7 +55,12 @@ export const toolsByCategory: ToolCategory[] = [
|
||||
{
|
||||
name: 'Web',
|
||||
icon: LockOpen,
|
||||
components: [urlEncoder, htmlEntities, qrCodeGenerator, urlParser, deviceInformation, basicAuthGenerator],
|
||||
components: [urlEncoder, htmlEntities, urlParser, deviceInformation, basicAuthGenerator],
|
||||
},
|
||||
{
|
||||
name: 'Images',
|
||||
icon: LockOpen,
|
||||
components: [qrCodeGenerator, svgPlaceholderGenerator],
|
||||
},
|
||||
{
|
||||
name: 'Development',
|
||||
|
@@ -67,9 +67,9 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useStyleStore } from '@/stores/style.store';
|
||||
import { convertBase } from './integer-base-converter.model';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
import { useStyleStore } from '@/stores/style.store';
|
||||
|
||||
const styleStore = useStyleStore();
|
||||
|
||||
|
@@ -17,44 +17,28 @@
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="Prettify version of your json">
|
||||
<n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
|
||||
<n-config-provider :hljs="hljs">
|
||||
<n-code :code="cleanJson" language="json" :trim="false" />
|
||||
</n-config-provider>
|
||||
<n-button v-if="cleanJson" class="copy-button" secondary @click="copy">Copy</n-button>
|
||||
</n-card>
|
||||
<textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
|
||||
</n-form-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
||||
import { useValidation } from '@/composable/validation';
|
||||
import { useElementSize } from '@vueuse/core';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import json from 'highlight.js/lib/languages/json';
|
||||
import { withDefaultOnError } from '@/utils/defaults';
|
||||
import JSON5 from 'json5';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
hljs.registerLanguage('json', json);
|
||||
const inputElement = ref<HTMLElement>();
|
||||
const { height: inputElementHeight } = useElementSize(inputElement);
|
||||
|
||||
const rawJson = ref('{"hello": "world"}');
|
||||
const cleanJson = computed(() => {
|
||||
try {
|
||||
return JSON.stringify(JSON.parse(rawJson.value), null, 3);
|
||||
} catch (_) {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
const { copy } = useCopy({ source: cleanJson });
|
||||
const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 3), ''));
|
||||
|
||||
const rawJsonValidation = useValidation({
|
||||
source: rawJson,
|
||||
rules: [
|
||||
{
|
||||
validator: (v) => v === '' || JSON.parse(v),
|
||||
message: 'Invalid json',
|
||||
validator: (v) => v === '' || JSON5.parse(v),
|
||||
message: 'Provided JSON is not valid.',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
@@ -30,8 +30,8 @@
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import { ref, computed } from 'vue';
|
||||
import { generateLoremIpsum } from './lorem-ipsum-generator.service';
|
||||
import { randIntFromInterval } from '@/utils/random';
|
||||
import { generateLoremIpsum } from './lorem-ipsum-generator.service';
|
||||
|
||||
const paragraphs = ref(1);
|
||||
const sentences = ref([3, 8]);
|
||||
|
@@ -21,18 +21,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { withDefaultOnError } from '@/utils/defaults';
|
||||
import { evaluate } from 'mathjs';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const expression = ref('');
|
||||
|
||||
const result = computed(() => {
|
||||
try {
|
||||
return evaluate(expression.value) ?? '';
|
||||
} catch (_) {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
const result = computed(() => withDefaultOnError(() => evaluate(expression.value) ?? '', ''));
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
@@ -32,9 +32,9 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
|
||||
import { useQRCode } from './useQRCode';
|
||||
import { ref } from 'vue';
|
||||
import type { QRCodeErrorCorrectionLevel } from 'qrcode';
|
||||
import { useQRCode } from './useQRCode';
|
||||
|
||||
const foreground = ref('#000000ff');
|
||||
const background = ref('#ffffffff');
|
||||
|
@@ -58,27 +58,17 @@
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="Prettify version of your query">
|
||||
<n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
|
||||
<n-config-provider :hljs="hljs">
|
||||
<n-code :code="prettySQL" language="sql" :trim="false" />
|
||||
</n-config-provider>
|
||||
<n-button v-if="prettySQL" class="copy-button" secondary @click="copy">Copy</n-button>
|
||||
</n-card>
|
||||
<textarea-copyable :value="prettySQL" language="sql" :follow-height-of="inputElement" />
|
||||
</n-form-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
||||
import { useStyleStore } from '@/stores/style.store';
|
||||
import { useElementSize } from '@vueuse/core';
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import sqlHljs from 'highlight.js/lib/languages/sql';
|
||||
import { format as formatSQL, type FormatFnOptions } from 'sql-formatter';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
hljs.registerLanguage('sql', sqlHljs);
|
||||
|
||||
const inputElement = ref<HTMLElement>();
|
||||
const { height: inputElementHeight } = useElementSize(inputElement);
|
||||
const styleStore = useStyleStore();
|
||||
const config = reactive<Partial<FormatFnOptions>>({
|
||||
keywordCase: 'upper',
|
||||
@@ -90,7 +80,6 @@ const config = reactive<Partial<FormatFnOptions>>({
|
||||
|
||||
const rawSQL = ref('select field1,field2,field3 from my_table where my_condition;');
|
||||
const prettySQL = computed(() => formatSQL(rawSQL.value, config));
|
||||
const { copy } = useCopy({ source: prettySQL });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
11
src/tools/svg-placeholder-generator/index.ts
Normal file
11
src/tools/svg-placeholder-generator/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { ImageOutlined } from '@vicons/material';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'SVG placeholder generator',
|
||||
path: '/svg-placeholder-generator',
|
||||
description: 'Generate svg images to use as placeholder in your applications.',
|
||||
keywords: ['svg', 'placeholder', 'generator', 'image', 'size', 'mockup'],
|
||||
component: () => import('./svg-placeholder-generator.vue'),
|
||||
icon: ImageOutlined,
|
||||
});
|
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-form label-placement="left" label-width="100">
|
||||
<n-space item-style="flex:1 1 0">
|
||||
<n-form-item label="Width (in px)">
|
||||
<n-input-number v-model:value="width" placeholder="SVG width..." min="1" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Background">
|
||||
<n-color-picker v-model:value="bgColor" :modes="['hex']" />
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
<n-space item-style="flex:1 1 0">
|
||||
<n-form-item label="Height (in px)">
|
||||
<n-input-number v-model:value="height" placeholder="SVG height..." min="1" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Text color">
|
||||
<n-color-picker v-model:value="fgColor" :modes="['hex']" />
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
<n-space item-style="flex:1 1 0">
|
||||
<n-form-item label="Font size">
|
||||
<n-input-number v-model:value="fontSize" placeholder="Font size..." min="1" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Custom text">
|
||||
<n-input v-model:value="customText" :placeholder="`Default is ${width}x${height}`" />
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
<n-form-item label="Use exact size" label-placement="left">
|
||||
<n-switch v-model:value="useExactSize" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<n-form-item label="SVG HTML element">
|
||||
<textarea-copyable :value="svgString" copy-placement="none" />
|
||||
</n-form-item>
|
||||
<n-form-item label="SVG in Base64">
|
||||
<textarea-copyable :value="base64" copy-placement="none" />
|
||||
</n-form-item>
|
||||
|
||||
<n-space justify="center">
|
||||
<n-button secondary @click="copySVG()">Copy svg</n-button>
|
||||
<n-button secondary @click="copyBase64()">Copy base64</n-button>
|
||||
<n-button secondary @click="download()">Download svg</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
|
||||
<n-space vertical justify="start">
|
||||
<img :src="base64" alt="Image" />
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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);
|
||||
const height = ref(350);
|
||||
const fontSize = ref(26);
|
||||
const bgColor = ref('#cccccc');
|
||||
const fgColor = ref('#333333');
|
||||
const useExactSize = ref(true);
|
||||
const customText = ref('');
|
||||
const svgString = computed(() => {
|
||||
const w = width.value;
|
||||
const h = height.value;
|
||||
const text = customText.value.length > 0 ? customText.value : `${w}x${h}`;
|
||||
const size = useExactSize.value ? ` width="${w}" height="${h}"` : '';
|
||||
|
||||
return `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${w} ${h}"${size}>
|
||||
<rect width="${w}" height="${h}" fill="${bgColor.value}"></rect>
|
||||
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="${fontSize.value}px" fill="${fgColor.value}">${text}</text>
|
||||
</svg>
|
||||
`.trim();
|
||||
});
|
||||
const base64 = computed(() => 'data:image/svg+xml;base64,' + textToBase64(svgString.value));
|
||||
|
||||
const { copy: copySVG } = useCopy({ source: svgString });
|
||||
const { copy: copyBase64 } = useCopy({ source: base64 });
|
||||
const { download } = useDownloadFileFromBase64({ source: base64 });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.n-input-number {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
@@ -60,16 +60,11 @@
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import { useValidation } from '@/composable/validation';
|
||||
import { withDefaultOnError } from '@/utils/defaults';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const encodeInput = ref('Hello world :)');
|
||||
const encodeOutput = computed(() => {
|
||||
try {
|
||||
return encodeURIComponent(encodeInput.value);
|
||||
} catch (_) {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
const encodeOutput = computed(() => withDefaultOnError(() => encodeURIComponent(encodeInput.value), ''));
|
||||
|
||||
const encodedValidation = useValidation({
|
||||
source: encodeInput,
|
||||
@@ -91,14 +86,7 @@ const encodedValidation = useValidation({
|
||||
const { copy: copyEncoded } = useCopy({ source: encodeOutput, text: 'Encoded string copied to the clipboard' });
|
||||
|
||||
const decodeInput = ref('Hello%20world%20%3A)');
|
||||
|
||||
const decodeOutput = computed(() => {
|
||||
try {
|
||||
return decodeURIComponent(decodeInput.value);
|
||||
} catch (_) {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
const decodeOutput = computed(() => withDefaultOnError(() => decodeURIComponent(decodeInput.value), ''));
|
||||
|
||||
const decodeValidation = useValidation({
|
||||
source: encodeInput,
|
||||
|
@@ -29,17 +29,13 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { SubdirectoryArrowRightRound } from '@vicons/material';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
import { useValidation } from '@/composable/validation';
|
||||
import { withDefaultOnError } from '@/utils/defaults';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
|
||||
const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash');
|
||||
const urlParsed = computed<URL | undefined>(() => {
|
||||
try {
|
||||
return new URL(urlToParse.value);
|
||||
} catch (_) {
|
||||
return undefined;
|
||||
}
|
||||
});
|
||||
|
||||
const urlParsed = computed(() => withDefaultOnError(() => new URL(urlToParse.value), undefined));
|
||||
const validation = useValidation({
|
||||
source: urlToParse,
|
||||
rules: [
|
||||
|
69
src/utils/base64.test.ts
Normal file
69
src/utils/base64.test.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { base64ToText, isValidBase64, removePotentialDataAndMimePrefix, textToBase64 } from './base64';
|
||||
|
||||
describe('base64 utils', () => {
|
||||
describe('textToBase64', () => {
|
||||
it('should convert string into base64', () => {
|
||||
expect(textToBase64('')).to.eql('');
|
||||
expect(textToBase64('a')).to.eql('YQ==');
|
||||
expect(textToBase64('lorem ipsum')).to.eql('bG9yZW0gaXBzdW0=');
|
||||
expect(textToBase64('-1')).to.eql('LTE=');
|
||||
});
|
||||
});
|
||||
|
||||
describe('base64ToText', () => {
|
||||
it('should convert base64 into text', () => {
|
||||
expect(base64ToText('')).to.eql('');
|
||||
expect(base64ToText('YQ==')).to.eql('a');
|
||||
expect(base64ToText('bG9yZW0gaXBzdW0=')).to.eql('lorem ipsum');
|
||||
expect(base64ToText('data:text/plain;base64,bG9yZW0gaXBzdW0=')).to.eql('lorem ipsum');
|
||||
expect(base64ToText('LTE=')).to.eql('-1');
|
||||
});
|
||||
|
||||
it('should throw for incorrect base64 string', () => {
|
||||
expect(() => base64ToText('a')).to.throw('Incorrect base64 string');
|
||||
expect(() => base64ToText(' ')).to.throw('Incorrect base64 string');
|
||||
expect(() => base64ToText('é')).to.throw('Incorrect base64 string');
|
||||
// missing final '='
|
||||
expect(() => base64ToText('bG9yZW0gaXBzdW0')).to.throw('Incorrect base64 string');
|
||||
});
|
||||
});
|
||||
|
||||
describe('isValidBase64', () => {
|
||||
it('should return true for correct base64 string', () => {
|
||||
expect(isValidBase64('')).to.eql(true);
|
||||
expect(isValidBase64('bG9yZW0gaXBzdW0=')).to.eql(true);
|
||||
expect(isValidBase64('LTE=')).to.eql(true);
|
||||
expect(isValidBase64('YQ==')).to.eql(true);
|
||||
expect(isValidBase64('data:text/plain;base64,YQ==')).to.eql(true);
|
||||
});
|
||||
|
||||
it('should return false for incorrect base64 string', () => {
|
||||
expect(isValidBase64('a')).to.eql(false);
|
||||
expect(isValidBase64(' ')).to.eql(false);
|
||||
expect(isValidBase64('é')).to.eql(false);
|
||||
expect(isValidBase64('data:text/plain;notbase64,YQ==')).to.eql(false);
|
||||
// missing final '='
|
||||
expect(isValidBase64('bG9yZW0gaXBzdW0')).to.eql(false);
|
||||
});
|
||||
|
||||
it('should return false for untrimmed correct base64 string', () => {
|
||||
expect(isValidBase64('bG9yZW0gaXBzdW0= ')).to.eql(false);
|
||||
expect(isValidBase64(' LTE=')).to.eql(false);
|
||||
expect(isValidBase64(' YQ== ')).to.eql(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('removePotentialDataAndMimePrefix', () => {
|
||||
it('should remove data prefix of string', () => {
|
||||
expect(removePotentialDataAndMimePrefix('')).to.eql('');
|
||||
expect(removePotentialDataAndMimePrefix('lorem ipsum')).to.eql('lorem ipsum');
|
||||
expect(removePotentialDataAndMimePrefix('bG9yZW0gaXBzdW0=')).to.eql('bG9yZW0gaXBzdW0=');
|
||||
expect(removePotentialDataAndMimePrefix('data:image/jpeg;base64,lorem')).to.eql('lorem');
|
||||
expect(removePotentialDataAndMimePrefix('data:image/jpeg;notbase64,lorem')).to.eql(
|
||||
'data:image/jpeg;notbase64,lorem',
|
||||
);
|
||||
expect(removePotentialDataAndMimePrefix('data:unknownmime;base64,lorem')).to.eql('lorem');
|
||||
});
|
||||
});
|
||||
});
|
33
src/utils/base64.ts
Normal file
33
src/utils/base64.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
export { textToBase64, base64ToText, isValidBase64, removePotentialDataAndMimePrefix };
|
||||
|
||||
function textToBase64(str: string) {
|
||||
return window.btoa(str);
|
||||
}
|
||||
|
||||
function base64ToText(str: string) {
|
||||
if (!isValidBase64(str)) {
|
||||
throw new Error('Incorrect base64 string');
|
||||
}
|
||||
|
||||
const cleanStr = removePotentialDataAndMimePrefix(str);
|
||||
|
||||
try {
|
||||
return window.atob(cleanStr);
|
||||
} catch (_) {
|
||||
throw new Error('Incorrect base64 string');
|
||||
}
|
||||
}
|
||||
|
||||
function removePotentialDataAndMimePrefix(str: string) {
|
||||
return str.replace(/^data:.*?;base64,/, '');
|
||||
}
|
||||
|
||||
function isValidBase64(str: string) {
|
||||
const cleanStr = removePotentialDataAndMimePrefix(str);
|
||||
|
||||
try {
|
||||
return window.btoa(window.atob(cleanStr)) === cleanStr;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}
|
16
src/utils/defaults.test.ts
Normal file
16
src/utils/defaults.test.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { withDefaultOnError } from './defaults';
|
||||
|
||||
describe('defaults util', () => {
|
||||
describe('withDefaultOnError', () => {
|
||||
it('should return the callback or the default one if the callback throws', () => {
|
||||
expect(withDefaultOnError(() => 'original', 'default')).to.eql('original');
|
||||
});
|
||||
|
||||
expect(
|
||||
withDefaultOnError(() => {
|
||||
throw '';
|
||||
}, 'default'),
|
||||
).to.eql('default');
|
||||
});
|
||||
});
|
9
src/utils/defaults.ts
Normal file
9
src/utils/defaults.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export { withDefaultOnError };
|
||||
|
||||
function withDefaultOnError<A, B>(cb: () => A, defaultValue: B): A | B {
|
||||
try {
|
||||
return cb();
|
||||
} catch (_) {
|
||||
return defaultValue;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user