mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-08 15:15:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(new-tool): added otp generator

Browse source
This commit is contained in:
Corentin Thomasset 2022-08-24 00:10:53 +02:00
parent ea5e7a7fc7
commit 5f16885923
No known key found for this signature in database
GPG key ID: DBD997E935996158
6 changed files with 506 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/tools/otp-code-generator-and-validator/token-display.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<div>
<n-space class="labels" item-style="flex: 1 1 0" style="width: 100%" align="center">
<div style="text-align: left">Previous</div>
<div style="text-align: center">Current OTP</div>
<div style="text-align: right">Next</div>
</n-space>
<n-input-group>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<n-button secondary @click.prevent="copyPrevious(tokens.previous)">{{ tokens.previous }}</n-button>
</template>
<div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
</n-tooltip>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<n-button tertiary type="primary" class="current-otp" @click.prevent="copyCurrent(tokens.current)">
{{ tokens.current }}
</n-button>
</template>
<div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
</n-tooltip>
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<n-button secondary @click.prevent="copyNext(tokens.next)">{{ tokens.next }}</n-button>
</template>
<div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
</n-tooltip>
</n-input-group>
</div>
</template>
<script setup lang="ts">
import { useClipboard } from '@vueuse/core';
import { toRefs } from 'vue';
const { copy: copyPrevious, copied: previousCopied } = useClipboard();
const { copy: copyCurrent, copied: currentCopied } = useClipboard();
const { copy: copyNext, copied: nextCopied } = useClipboard();
const props = defineProps<{ tokens: { previous: string; current: string; next: string } }>();
const { tokens } = toRefs(props);
</script>
<style scoped lang="less">
.current-otp {
font-size: 22px;
flex: 1 0 35% !important;
}
.n-button {
height: 45px;
}
.labels {
div {
text-align: center;
padding: 0 2px 6px 2px;
line-height: 1.25;
}
}
.n-input-group > * {
flex: 1 0 0;
}
</style>