jingrow
79b92e7aae
- Remove First Name and Last Name fields from Update Profile Information dialog - Add i18n support for copy button messages (Copied to clipboard, Copy failed) - Add Chinese translation for 'Update Profile Information' - Fix QR code centering in 2FA dialog - Fix disable account dialog formatting with proper line breaks - Change disable account dialog icon type to warning for semantic correctness
80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
Vue
<template>
|
|
<div class="click-to-copy-field">
|
|
<n-input
|
|
:value="textContent"
|
|
readonly
|
|
:placeholder="placeholder"
|
|
class="copy-input"
|
|
>
|
|
<template #suffix>
|
|
<n-button
|
|
quaternary
|
|
size="small"
|
|
@click="handleCopy"
|
|
:loading="copying"
|
|
class="copy-button"
|
|
>
|
|
<template #icon>
|
|
<n-icon>
|
|
<Icon :icon="copied ? 'tabler:check' : 'tabler:copy'" />
|
|
</n-icon>
|
|
</template>
|
|
</n-button>
|
|
</template>
|
|
</n-input>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { NInput, NButton, NIcon, useMessage } from 'naive-ui'
|
|
import { Icon } from '@iconify/vue'
|
|
import { t } from '../i18n'
|
|
|
|
interface Props {
|
|
textContent: string
|
|
placeholder?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
placeholder: ''
|
|
})
|
|
|
|
const message = useMessage()
|
|
const copying = ref(false)
|
|
const copied = ref(false)
|
|
|
|
const handleCopy = async () => {
|
|
if (!props.textContent) return
|
|
|
|
copying.value = true
|
|
try {
|
|
await navigator.clipboard.writeText(props.textContent)
|
|
copied.value = true
|
|
message.success(t('Copied to clipboard'))
|
|
setTimeout(() => {
|
|
copied.value = false
|
|
}, 2000)
|
|
} catch (error) {
|
|
message.error(t('Copy failed'))
|
|
} finally {
|
|
copying.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.click-to-copy-field {
|
|
width: 100%;
|
|
}
|
|
|
|
.copy-input {
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.copy-button {
|
|
margin-right: 4px;
|
|
}
|
|
</style>
|