Client - add icon to copy client id & secret in clipboard
This commit is contained in:
parent
d64fc19c2e
commit
e425cf4ec0
@ -22,11 +22,30 @@
|
||||
</div>
|
||||
<dl>
|
||||
<dt>{{ $t('oauth2.APP.CLIENT_ID') }}:</dt>
|
||||
<dd>{{ client.client_id }}</dd>
|
||||
<dd>
|
||||
{{ client.client_id }}
|
||||
<i
|
||||
v-if="afterCreation"
|
||||
:class="`fa fa-${idCopied ? 'check' : 'copy'}`"
|
||||
aria-hidden="true"
|
||||
:title="$t('oauth2.COPY_TO_CLIPBOARD')"
|
||||
@click="copyIdToClipboard"
|
||||
>
|
||||
</i>
|
||||
</dd>
|
||||
<dt v-if="afterCreation && client.client_secret">
|
||||
{{ $t('oauth2.APP.CLIENT_SECRET') }}:
|
||||
</dt>
|
||||
<dd>{{ client.client_secret }}</dd>
|
||||
<dd v-if="afterCreation && client.client_secret" class="app-secret">
|
||||
{{ client.client_secret }}
|
||||
<i
|
||||
:class="`fa fa-${secretCopied ? 'check' : 'copy'}`"
|
||||
aria-hidden="true"
|
||||
:title="$t('oauth2.COPY_TO_CLIPBOARD')"
|
||||
@click="copySecretToClipboard"
|
||||
>
|
||||
</i>
|
||||
</dd>
|
||||
<dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
|
||||
<dd>
|
||||
{{
|
||||
@ -125,6 +144,8 @@
|
||||
)
|
||||
const displayModal: Ref<boolean> = ref(false)
|
||||
const messageToDisplay: Ref<string | null> = ref(null)
|
||||
const idCopied: Ref<boolean> = ref(false)
|
||||
const secretCopied: Ref<boolean> = ref(false)
|
||||
|
||||
onBeforeMount(() => {
|
||||
loadClient()
|
||||
@ -159,6 +180,24 @@
|
||||
store.dispatch(OAUTH2_STORE.ACTIONS.REVOKE_ALL_TOKENS, clientId)
|
||||
}
|
||||
}
|
||||
function copyIdToClipboard() {
|
||||
navigator.clipboard.writeText(client.value.client_id)
|
||||
idCopied.value = true
|
||||
secretCopied.value = false
|
||||
setTimeout(() => {
|
||||
idCopied.value = false
|
||||
}, 3000)
|
||||
}
|
||||
function copySecretToClipboard() {
|
||||
if (client.value.client_secret) {
|
||||
navigator.clipboard.writeText(client.value.client_secret)
|
||||
secretCopied.value = true
|
||||
idCopied.value = false
|
||||
setTimeout(() => {
|
||||
secretCopied.value = false
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
onUnmounted(() => {
|
||||
store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
|
||||
store.commit(OAUTH2_STORE.MUTATIONS.EMPTY_CLIENT)
|
||||
@ -183,6 +222,9 @@
|
||||
flex-wrap: wrap;
|
||||
gap: $default-padding;
|
||||
}
|
||||
.app-secret {
|
||||
word-break: break-word;
|
||||
}
|
||||
.client-scopes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -190,6 +232,9 @@
|
||||
padding-right: $default-padding * 1.5;
|
||||
}
|
||||
}
|
||||
.fa-copy {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.no-description {
|
||||
font-style: italic;
|
||||
}
|
||||
|
@ -24,6 +24,7 @@
|
||||
"APP_REQUESTING_ACCESS": "The application {0} is requesting:",
|
||||
"APPS_LIST": "OAuth2 applications",
|
||||
"AUTHORIZE_APP": "Authorize {0} to use your account?",
|
||||
"COPY_TO_CLIPBOARD": "copy to the clipboard",
|
||||
"DELETE_APP": "Delete application",
|
||||
"NEW_APP": "New OAuth App",
|
||||
"NO_DESCRIPTION": "no description",
|
||||
|
@ -24,6 +24,7 @@
|
||||
"APP_REQUESTING_ACCESS": "L'application {0} demande les accès suivants :",
|
||||
"APPS_LIST": "Applications OAuth2",
|
||||
"AUTHORIZE_APP": "Autoriser {0} à utiliser votre compte ?",
|
||||
"COPY_TO_CLIPBOARD": "copier dans le presse papier",
|
||||
"DELETE_APP": "Supprimer l'application",
|
||||
"NEW_APP": "Ajouter une App OAuth",
|
||||
"NO_DESCRIPTION": "pas de description",
|
||||
|
Loading…
Reference in New Issue
Block a user