aboutsummaryrefslogtreecommitdiff
path: root/src/tools/otp-code-generator-and-validator/token-display.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/tools/otp-code-generator-and-validator/token-display.vue')
-rw-r--r--src/tools/otp-code-generator-and-validator/token-display.vue76
1 files changed, 20 insertions, 56 deletions
diff --git a/src/tools/otp-code-generator-and-validator/token-display.vue b/src/tools/otp-code-generator-and-validator/token-display.vue
index 5313b0b..317f083 100644
--- a/src/tools/otp-code-generator-and-validator/token-display.vue
+++ b/src/tools/otp-code-generator-and-validator/token-display.vue
@@ -11,7 +11,7 @@ const { tokens } = toRefs(props);
<template>
<div>
- <div class="labels" w-full flex items-center>
+ <div mb-5px w-full flex items-center>
<div flex-1 text-left>
Previous
</div>
@@ -22,60 +22,24 @@ const { tokens } = toRefs(props);
Next
</div>
</div>
- <n-input-group>
- <n-tooltip trigger="hover" placement="bottom">
- <template #trigger>
- <c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
- {{ tokens.previous }}
- </c-button>
- </template>
- <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
- </n-tooltip>
- <n-tooltip trigger="hover" placement="bottom">
- <template #trigger>
- <c-button
- data-test-id="current-otp"
- class="current-otp"
- important:h-12
- @click.prevent="copyCurrent(tokens.current)"
- >
- {{ tokens.current }}
- </c-button>
- </template>
- <div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
- </n-tooltip>
- <n-tooltip trigger="hover" placement="bottom">
- <template #trigger>
- <c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">
- {{
- tokens.next
- }}
- </c-button>
- </template>
- <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
- </n-tooltip>
- </n-input-group>
+ <div flex items-center>
+ <c-tooltip :tooltip="previousCopied ? 'Copied !' : 'Copy previous OTP'" position="bottom" flex-1>
+ <c-button data-test-id="previous-otp" w-full important:h-12 important:rounded-r-none important:font-mono @click.prevent="copyPrevious(tokens.previous)">
+ {{ tokens.previous }}
+ </c-button>
+ </c-tooltip>
+ <c-tooltip :tooltip="currentCopied ? 'Copied !' : 'Copy current OTP'" position="bottom" flex-1 flex-basis-5xl>
+ <c-button
+ data-test-id="current-otp" w-full important:border-x="1px solid gray op-40" important:h-12 important:rounded-0 important:text-22px @click.prevent="copyCurrent(tokens.current)"
+ >
+ {{ tokens.current }}
+ </c-button>
+ </c-tooltip>
+ <c-tooltip :tooltip="nextCopied ? 'Copied !' : 'Copy next OTP'" position="bottom" flex-1>
+ <c-button data-test-id="next-otp" w-full important:h-12 important:rounded-l-none @click.prevent="copyNext(tokens.next)">
+ {{ tokens.next }}
+ </c-button>
+ </c-tooltip>
+ </div>
</div>
</template>
-
-<style scoped lang="less">
-.current-otp {
- font-size: 22px;
- flex: 1 0 35% !important;
-}
-
-.n-button {
- height: 45px;
-}
-
-.labels {
- div {
- padding: 0 2px 6px 2px;
- line-height: 1.25;
- }
-}
-
-.n-input-group > * {
- flex: 1 0 0;
-}
-</style>