mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-23 00:06:15 -04:00
86e964a274
* fix(copy): prevent shorthand copy if source is present in useCopy * refactor(copy): normalized copy usage
46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { useCopy } from '@/composable/copy';
|
|
import { textToBase64 } from '@/utils/base64';
|
|
|
|
const username = ref('');
|
|
const password = ref('');
|
|
const header = computed(() => `Authorization: Basic ${textToBase64(`${username.value}:${password.value}`)}`);
|
|
|
|
const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard' });
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<c-input-text v-model:value="username" label="Username" placeholder="Your username..." clearable raw-text mb-5 />
|
|
<c-input-text
|
|
v-model:value="password"
|
|
label="Password"
|
|
placeholder="Your password..."
|
|
clearable
|
|
raw-text
|
|
mb-2
|
|
type="password"
|
|
/>
|
|
|
|
<c-card>
|
|
<n-statistic label="Authorization header:" class="header">
|
|
<n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
|
|
{{ header }}
|
|
</n-scrollbar>
|
|
</n-statistic>
|
|
</c-card>
|
|
<div mt-5 flex justify-center>
|
|
<c-button @click="copy()">
|
|
Copy header
|
|
</c-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
::v-deep(.n-statistic-value__content) {
|
|
font-family: monospace;
|
|
font-size: 17px !important;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|