mirror of
https://github.com/CorentinTh/it-tools.git
synced 2024-09-19 09:37:30 +03:00
Merge bda56ac263
into e1b4f9aafe
This commit is contained in:
commit
f0e4b29104
5
components.d.ts
vendored
5
components.d.ts
vendored
@ -132,6 +132,7 @@ declare module '@vue/runtime-core' {
|
|||||||
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
||||||
NDivider: typeof import('naive-ui')['NDivider']
|
NDivider: typeof import('naive-ui')['NDivider']
|
||||||
NEllipsis: typeof import('naive-ui')['NEllipsis']
|
NEllipsis: typeof import('naive-ui')['NEllipsis']
|
||||||
|
NForm: typeof import('naive-ui')['NForm']
|
||||||
NFormItem: typeof import('naive-ui')['NFormItem']
|
NFormItem: typeof import('naive-ui')['NFormItem']
|
||||||
NGi: typeof import('naive-ui')['NGi']
|
NGi: typeof import('naive-ui')['NGi']
|
||||||
NGrid: typeof import('naive-ui')['NGrid']
|
NGrid: typeof import('naive-ui')['NGrid']
|
||||||
@ -143,8 +144,12 @@ declare module '@vue/runtime-core' {
|
|||||||
NLayout: typeof import('naive-ui')['NLayout']
|
NLayout: typeof import('naive-ui')['NLayout']
|
||||||
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
NLayoutSider: typeof import('naive-ui')['NLayoutSider']
|
||||||
NMenu: typeof import('naive-ui')['NMenu']
|
NMenu: typeof import('naive-ui')['NMenu']
|
||||||
|
NP: typeof import('naive-ui')['NP']
|
||||||
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
||||||
|
NSlider: typeof import('naive-ui')['NSlider']
|
||||||
|
NSpace: typeof import('naive-ui')['NSpace']
|
||||||
NSpin: typeof import('naive-ui')['NSpin']
|
NSpin: typeof import('naive-ui')['NSpin']
|
||||||
|
NSwitch: typeof import('naive-ui')['NSwitch']
|
||||||
NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
|
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']
|
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']
|
PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import { useRouteQuery } from '@vueuse/router';
|
import { useRouteQuery } from '@vueuse/router';
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
import { useStorage } from '@vueuse/core';
|
||||||
|
|
||||||
export { useQueryParam };
|
export { useQueryParam, useQueryParamOrStorage };
|
||||||
|
|
||||||
const transformers = {
|
const transformers = {
|
||||||
number: {
|
number: {
|
||||||
@ -16,6 +17,12 @@ const transformers = {
|
|||||||
fromQuery: (value: string) => value.toLowerCase() === 'true',
|
fromQuery: (value: string) => value.toLowerCase() === 'true',
|
||||||
toQuery: (value: boolean) => (value ? 'true' : 'false'),
|
toQuery: (value: boolean) => (value ? 'true' : 'false'),
|
||||||
},
|
},
|
||||||
|
object: {
|
||||||
|
fromQuery: (value: string) => {
|
||||||
|
return JSON.parse(value);
|
||||||
|
},
|
||||||
|
toQuery: (value: object) => JSON.stringify(value),
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
|
function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
|
||||||
@ -33,3 +40,27 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue: T }) {
|
||||||
|
const type = typeof defaultValue;
|
||||||
|
const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
|
||||||
|
|
||||||
|
const storageRef = useStorage(storageName, defaultValue);
|
||||||
|
const proxyDefaultValue = transformer.toQuery(defaultValue as never);
|
||||||
|
const proxy = useRouteQuery(name, proxyDefaultValue);
|
||||||
|
|
||||||
|
const r = ref(defaultValue);
|
||||||
|
|
||||||
|
watch(r,
|
||||||
|
(value) => {
|
||||||
|
proxy.value = transformer.toQuery(value as never);
|
||||||
|
storageRef.value = value as never;
|
||||||
|
},
|
||||||
|
{ deep: true });
|
||||||
|
|
||||||
|
r.value = (proxy.value && proxy.value !== proxyDefaultValue
|
||||||
|
? transformer.fromQuery(proxy.value) as unknown as T
|
||||||
|
: storageRef.value as T) as never;
|
||||||
|
|
||||||
|
return r;
|
||||||
|
}
|
||||||
|
@ -94,5 +94,19 @@ describe('token-generator', () => {
|
|||||||
expect(token).toHaveLength(256);
|
expect(token).toHaveLength(256);
|
||||||
expect(token).toMatch(/^[a-zA-Z]+$/);
|
expect(token).toMatch(/^[a-zA-Z]+$/);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should generate a random string with just numbers except 1 and 2 if only withNumbers is set and deniedChars contains 1 and 2', () => {
|
||||||
|
const token = createToken({
|
||||||
|
withLowercase: false,
|
||||||
|
withUppercase: false,
|
||||||
|
withNumbers: true,
|
||||||
|
withSymbols: false,
|
||||||
|
length: 256,
|
||||||
|
deniedChars: '12',
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(token).toHaveLength(256);
|
||||||
|
expect(token).toMatch(/^[03456789]+$/);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -5,6 +5,7 @@ export function createToken({
|
|||||||
withLowercase = true,
|
withLowercase = true,
|
||||||
withNumbers = true,
|
withNumbers = true,
|
||||||
withSymbols = false,
|
withSymbols = false,
|
||||||
|
deniedChars = '',
|
||||||
length = 64,
|
length = 64,
|
||||||
alphabet,
|
alphabet,
|
||||||
}: {
|
}: {
|
||||||
@ -12,15 +13,16 @@ export function createToken({
|
|||||||
withLowercase?: boolean
|
withLowercase?: boolean
|
||||||
withNumbers?: boolean
|
withNumbers?: boolean
|
||||||
withSymbols?: boolean
|
withSymbols?: boolean
|
||||||
|
deniedChars?: string
|
||||||
length?: number
|
length?: number
|
||||||
alphabet?: string
|
alphabet?: string
|
||||||
}) {
|
}) {
|
||||||
const allAlphabet = alphabet ?? [
|
const allAlphabet = (alphabet ?? (
|
||||||
withUppercase ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : '',
|
(withUppercase ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : '')
|
||||||
withLowercase ? 'abcdefghijklmopqrstuvwxyz' : '',
|
+ (withLowercase ? 'abcdefghijklmopqrstuvwxyz' : '')
|
||||||
withNumbers ? '0123456789' : '',
|
+ (withNumbers ? '0123456789' : '')
|
||||||
withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '',
|
+ (withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '')
|
||||||
].join('');
|
)).split('').filter(c => !(deniedChars?.includes(c))).join('');
|
||||||
|
|
||||||
return shuffleString(allAlphabet.repeat(length)).substring(0, length);
|
return shuffleString(allAlphabet.repeat(length)).substring(0, length);
|
||||||
}
|
}
|
||||||
|
@ -1,75 +1,87 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { createToken } from './token-generator.service';
|
import { createToken } from './token-generator.service';
|
||||||
import { useCopy } from '@/composable/copy';
|
import { useCopy } from '@/composable/copy';
|
||||||
import { useQueryParam } from '@/composable/queryParams';
|
import { useQueryParamOrStorage } from '@/composable/queryParams';
|
||||||
import { computedRefreshable } from '@/composable/computedRefreshable';
|
import { computedRefreshable } from '@/composable/computedRefreshable';
|
||||||
|
|
||||||
const length = useQueryParam({ name: 'length', defaultValue: 64 });
|
const count = useQueryParamOrStorage({ name: 'count', storageName: 'token-generator:count', defaultValue: 1 });
|
||||||
const withUppercase = useQueryParam({ name: 'uppercase', defaultValue: true });
|
const length = useQueryParamOrStorage({ name: 'length', storageName: 'token-generator:length', defaultValue: 64 });
|
||||||
const withLowercase = useQueryParam({ name: 'lowercase', defaultValue: true });
|
const withUppercase = useQueryParamOrStorage({ name: 'uppercase', storageName: 'token-generator:uppercase', defaultValue: true });
|
||||||
const withNumbers = useQueryParam({ name: 'numbers', defaultValue: true });
|
const withLowercase = useQueryParamOrStorage({ name: 'lowercase', storageName: 'token-generator:lowercase', defaultValue: true });
|
||||||
const withSymbols = useQueryParam({ name: 'symbols', defaultValue: false });
|
const withNumbers = useQueryParamOrStorage({ name: 'numbers', storageName: 'token-generator:numbers', defaultValue: true });
|
||||||
|
const withSymbols = useQueryParamOrStorage({ name: 'symbols', storageName: 'token-generator:symbols', defaultValue: false });
|
||||||
|
const deniedChars = useQueryParamOrStorage({ name: 'deny', storageName: 'token-generator:deny', defaultValue: '' });
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
const [token, refreshToken] = computedRefreshable(() =>
|
const [tokens, refreshTokens] = computedRefreshable(() =>
|
||||||
createToken({
|
Array.from({ length: count.value },
|
||||||
length: length.value,
|
() => createToken({
|
||||||
withUppercase: withUppercase.value,
|
length: length.value,
|
||||||
withLowercase: withLowercase.value,
|
withUppercase: withUppercase.value,
|
||||||
withNumbers: withNumbers.value,
|
withLowercase: withLowercase.value,
|
||||||
withSymbols: withSymbols.value,
|
withNumbers: withNumbers.value,
|
||||||
}),
|
withSymbols: withSymbols.value,
|
||||||
|
deniedChars: deniedChars.value,
|
||||||
|
})).join('\n'),
|
||||||
);
|
);
|
||||||
|
|
||||||
const { copy } = useCopy({ source: token, text: t('tools.token-generator.copied') });
|
const { copy } = useCopy({ source: tokens, text: t('tools.token-generator.copied') });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<c-card>
|
<c-card>
|
||||||
<n-form label-placement="left" label-width="140">
|
<n-form label-placement="left" label-width="140">
|
||||||
<div flex justify-center>
|
<n-space justify="center">
|
||||||
<div>
|
<n-form-item :label="t('tools.token-generator.uppercase')">
|
||||||
<n-form-item :label="t('tools.token-generator.uppercase')">
|
<n-switch v-model:value="withUppercase" />
|
||||||
<n-switch v-model:value="withUppercase" />
|
</n-form-item>
|
||||||
</n-form-item>
|
|
||||||
|
|
||||||
<n-form-item :label="t('tools.token-generator.lowercase')">
|
<n-form-item :label="t('tools.token-generator.lowercase')">
|
||||||
<n-switch v-model:value="withLowercase" />
|
<n-switch v-model:value="withLowercase" />
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
</div>
|
<n-form-item :label="t('tools.token-generator.numbers')">
|
||||||
|
<n-switch v-model:value="withNumbers" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
<div>
|
<n-form-item :label="t('tools.token-generator.symbols')">
|
||||||
<n-form-item :label="t('tools.token-generator.numbers')">
|
<n-switch v-model:value="withSymbols" />
|
||||||
<n-switch v-model:value="withNumbers" />
|
</n-form-item>
|
||||||
</n-form-item>
|
</n-space>
|
||||||
|
|
||||||
<n-form-item :label="t('tools.token-generator.symbols')">
|
|
||||||
<n-switch v-model:value="withSymbols" />
|
|
||||||
</n-form-item>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</n-form>
|
</n-form>
|
||||||
|
|
||||||
|
<n-form-item label="Denied Characters (ie, visually similar { oO01lI } or punctuations)" label-placement="top">
|
||||||
|
<c-input-text
|
||||||
|
v-model:value="deniedChars"
|
||||||
|
placeholder="Put characters to deny from token"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
<n-form-item :label="`${t('tools.token-generator.length')} (${length})`" label-placement="left">
|
<n-form-item :label="`${t('tools.token-generator.length')} (${length})`" label-placement="left">
|
||||||
<n-slider v-model:value="length" :step="1" :min="1" :max="512" />
|
<n-slider v-model:value="length" :step="1" :min="1" :max="512" mr-2 />
|
||||||
|
<n-input-number v-model:value="length" size="small" />
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="Number of token to generate" label-placement="left">
|
||||||
|
<n-input-number v-model:value="count" size="small" />
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
|
|
||||||
<c-input-text
|
<c-input-text
|
||||||
v-model:value="token"
|
v-model:value="tokens"
|
||||||
multiline
|
multiline
|
||||||
:placeholder="t('tools.token-generator.tokenPlaceholder')"
|
:placeholder="t('tools.token-generator.tokenPlaceholder')"
|
||||||
readonly
|
readonly
|
||||||
rows="3"
|
rows="3"
|
||||||
autosize
|
autosize
|
||||||
class="token-display"
|
class="token-display"
|
||||||
|
word-wrap
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div mt-5 flex justify-center gap-3>
|
<div mt-5 flex justify-center gap-3>
|
||||||
<c-button @click="copy()">
|
<c-button @click="copy()">
|
||||||
{{ t('tools.token-generator.button.copy') }}
|
{{ t('tools.token-generator.button.copy') }}
|
||||||
</c-button>
|
</c-button>
|
||||||
<c-button @click="refreshToken">
|
<c-button @click="refreshTokens">
|
||||||
{{ t('tools.token-generator.button.refresh') }}
|
{{ t('tools.token-generator.button.refresh') }}
|
||||||
</c-button>
|
</c-button>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user