+
Skip to content

feat(new tool): string obfuscator #575

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 16, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ declare module '@vue/runtime-core' {
HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
'IconMdi:copy': typeof import('~icons/mdi/copy')['default']
'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
IconMdiCamera: typeof import('~icons/mdi/camera')['default']
Expand Down Expand Up @@ -170,6 +172,7 @@ declare module '@vue/runtime-core' {
SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
StringObfuscator: typeof import('./src/tools/string-obfuscator/string-obfuscator.vue')['default']
SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
Expand Down
3 changes: 2 additions & 1 deletion src/tools/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
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 stringObfuscator } from './string-obfuscator';
import { tool as emojiPicker } from './emoji-picker';
import { tool as passwordStrengthAnalyser } from './password-strength-analyser';
import { tool as yamlToToml } from './yaml-to-toml';
Expand Down Expand Up @@ -145,7 +146,7 @@ export const toolsByCategory: ToolCategory[] = [
},
{
name: 'Text',
components: [loremIpsumGenerator, textStatistics, emojiPicker],
components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator],
},
{
name: 'Data',
Expand Down
12 changes: 12 additions & 0 deletions src/tools/string-obfuscator/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { EyeOff } from '@vicons/tabler';
import { defineTool } from '../tool';

export const tool = defineTool({
name: 'String obfuscator',
path: '/string-obfuscator',
description: 'Obfuscate a string (like a secret, an IBAN, or a token) to make it shareable and identifiable without revealing its content.',
keywords: ['string', 'obfuscator', 'secret', 'token', 'hide', 'obscure', 'mask', 'masking'],
component: () => import('./string-obfuscator.vue'),
icon: EyeOff,
createdAt: new Date('2023-08-16'),
});
20 changes: 20 additions & 0 deletions src/tools/string-obfuscator/string-obfuscator.model.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { describe, expect, it } from 'vitest';
import { obfuscateString } from './string-obfuscator.model';

describe('string-obfuscator model', () => {
describe('obfuscateString', () => {
it('the characters in the middle of the string are replaced by the replacement character', () => {
expect(obfuscateString('1234567890')).toBe('1234******');
expect(obfuscateString('1234567890', { replacementChar: 'x' })).toBe('1234xxxxxx');
expect(obfuscateString('1234567890', { keepFirst: 5 })).toBe('12345*****');
expect(obfuscateString('1234567890', { keepFirst: 0, keepLast: 5 })).toBe('*****67890');
expect(obfuscateString('1234567890', { keepFirst: 5, keepLast: 5 })).toBe('1234567890');
expect(obfuscateString('1234567890', { keepFirst: 2, keepLast: 2, replacementChar: 'x' })).toBe('12xxxxxx90');
});

it('by default, the spaces are kept, they can be removed with the keepSpace option', () => {
expect(obfuscateString('12345 67890')).toBe('1234* *****');
expect(obfuscateString('12345 67890', { keepSpace: false })).toBe('1234*******');
});
});
});
35 changes: 35 additions & 0 deletions src/tools/string-obfuscator/string-obfuscator.model.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { get } from '@vueuse/core';
import { type MaybeRef, computed } from 'vue';

export { obfuscateString, useObfuscateString };

function obfuscateString(
str: string,
{ replacementChar = '*', keepFirst = 4, keepLast = 0, keepSpace = true }: { replacementChar?: string; keepFirst?: number; keepLast?: number; keepSpace?: boolean } = {}): string {
return str
.split('')
.map((char, index, array) => {
if (keepSpace && char === ' ') {
return char;
}

return (index < keepFirst || index >= array.length - keepLast) ? char : replacementChar;
})
.join('');
}

function useObfuscateString(
str: MaybeRef<string>,
config: { replacementChar?: MaybeRef<string>; keepFirst?: MaybeRef<number>; keepLast?: MaybeRef<number>; keepSpace?: MaybeRef<boolean> } = {},

) {
return computed(() => obfuscateString(
get(str),
{
replacementChar: get(config.replacementChar),
keepFirst: get(config.keepFirst),
keepLast: get(config.keepLast),
keepSpace: get(config.keepSpace),
},
));
}
47 changes: 47 additions & 0 deletions src/tools/string-obfuscator/string-obfuscator.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script setup lang="ts">
import { useObfuscateString } from './string-obfuscator.model';
import { useCopy } from '@/composable/copy';

const str = ref('Lorem ipsum dolor sit amet');
const keepFirst = ref(4);
const keepLast = ref(4);
const keepSpace = ref(true);

const obfuscatedString = useObfuscateString(str, { keepFirst, keepLast, keepSpace });
const { copy } = useCopy({ source: obfuscatedString });
</script>

<template>
<div>
<c-input-text v-model:value="str" raw-text placeholder="Enter string to obfuscate" label="String to obfuscate:" clearable multiline />

<div mt-4 flex gap-10px>
<div>
<div>Keep first:</div>
<n-input-number v-model:value="keepFirst" min="0" />
</div>

<div>
<div>Keep last:</div>
<n-input-number v-model:value="keepLast" min="0" />
</div>

<div>
<div mb-5px>
Keep&nbsp;spaces:
</div>
<n-switch v-model:value="keepSpace" />
</div>
</div>

<c-card v-if="obfuscatedString" mt-60px max-w-600px flex items-center gap-5px font-mono>
<div break-anywhere text-wrap>
{{ obfuscatedString }}
</div>

<c-button @click="copy">
<icon-mdi:content-copy />
</c-button>
</c-card>
</div>
</template>
点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载