extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-23 05:21:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move the copy button to a standalone component

Browse Source
This commit is contained in:
Bubka 2024-01-19 17:06:16 +01:00
parent 342448b352
commit 5249b2ab97
2 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/js/components/CopyButton.vue Normal file
View File

@ -0,0 +1,21 @@
<script setup>
import { useNotifyStore } from '@/stores/notify'
const notify = useNotifyStore()
const { copy } = useClipboard({ legacy: true })
const props = defineProps({
token: String,
})
function copyToClipboard() {
copy(props.token)
notify.success({ text: trans('commons.copied_to_clipboard') })
}
</script>
<template>
<button :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard()">
<FontAwesomeIcon :icon="['fas', 'copy']" />
</button>
</template>

21
resources/js/views/About.vue
View File

@ -1,12 +1,10 @@
<script setup> <script setup>
import systemService from '@/services/systemService' import systemService from '@/services/systemService'
import { useNotifyStore } from '@/stores/notify'
import { UseColorMode } from '@vueuse/components' import { UseColorMode } from '@vueuse/components'
import CopyButton from '@/components/CopyButton.vue'
const $2fauth = inject('2fauth') const $2fauth = inject('2fauth')
const router = useRouter() const router = useRouter()
const notify = useNotifyStore()
const { copy } = useClipboard({ legacy: true })
const returnTo = router.options.history.state.back const returnTo = router.options.history.state.back
const infos = ref() const infos = ref()
@ -32,11 +30,6 @@
infos.value = null infos.value = null
}) })
}) })
function copyToClipboard(data) {
copy(data)
notify.success({ text: trans('commons.copied_to_clipboard') })
}
</script> </script>
<template> <template>
@ -98,9 +91,7 @@
{{ $t('commons.environment') }} {{ $t('commons.environment') }}
</h2> </h2>
<div v-if="infos" class="about-debug box is-family-monospace is-size-7"> <div v-if="infos" class="about-debug box is-family-monospace is-size-7">
<button id="btnCopyEnvVars" :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard(listInfos.innerText)"> <CopyButton id="btnCopyEnvVars" :token="listInfos?.innerText" />
<FontAwesomeIcon :icon="['fas', 'copy']" />
</button>
<ul ref="listInfos" id="listInfos"> <ul ref="listInfos" id="listInfos">
<li v-for="(value, key) in infos" :value="value" :key="key"><b>{{key}}</b>: {{value}}</li> <li v-for="(value, key) in infos" :value="value" :key="key"><b>{{key}}</b>: {{value}}</li>
</ul> </ul>
@ -112,9 +103,7 @@
{{ $t('settings.admin_settings') }} {{ $t('settings.admin_settings') }}
</h2> </h2>
<div v-if="adminSettings" class="about-debug box is-family-monospace is-size-7"> <div v-if="adminSettings" class="about-debug box is-family-monospace is-size-7">
<button id="btnCopyAdminSettings" :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard(listAdminSettings.innerText)"> <CopyButton id="btnCopyAdminSettings" :token="listAdminSettings?.innerText" />
<FontAwesomeIcon :icon="['fas', 'copy']" />
</button>
<ul ref="listAdminSettings" id="listAdminSettings"> <ul ref="listAdminSettings" id="listAdminSettings">
<li v-for="(value, setting) in adminSettings" :value="value" :key="setting"><b>{{setting}}</b>: {{value}}</li> <li v-for="(value, setting) in adminSettings" :value="value" :key="setting"><b>{{setting}}</b>: {{value}}</li>
</ul> </ul>
@ -123,9 +112,7 @@
{{ $t('settings.user_preferences') }} {{ $t('settings.user_preferences') }}
</h2> </h2>
<div v-if="userPreferences" class="about-debug box is-family-monospace is-size-7"> <div v-if="userPreferences" class="about-debug box is-family-monospace is-size-7">
<button id="btnCopyUserPreferences" :aria-label="$t('commons.copy_to_clipboard')" class="button is-like-text is-pulled-right is-small is-text" @click.stop="copyToClipboard(listUserPreferences.innerText)"> <CopyButton id="btnCopyUserPreferences" :token="listUserPreferences?.innerText" />
<FontAwesomeIcon :icon="['fas', 'copy']" />
</button>
<ul ref="listUserPreferences" id="listUserPreferences"> <ul ref="listUserPreferences" id="listUserPreferences">
<li v-for="(value, preference) in userPreferences" :value="value" :key="preference"><b>{{preference}}</b>: {{value}}</li> <li v-for="(value, preference) in userPreferences" :value="value" :key="preference"><b>{{preference}}</b>: {{value}}</li>
</ul> </ul>