Client - add icon to copy client id & secret in clipboard

This commit is contained in:
Sam 2022-06-26 13:23:48 +02:00
parent d64fc19c2e
commit e425cf4ec0
3 changed files with 49 additions and 2 deletions

View File

@ -22,11 +22,30 @@
</div> </div>
<dl> <dl>
<dt>{{ $t('oauth2.APP.CLIENT_ID') }}:</dt> <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"> <dt v-if="afterCreation && client.client_secret">
{{ $t('oauth2.APP.CLIENT_SECRET') }}: {{ $t('oauth2.APP.CLIENT_SECRET') }}:
</dt> </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> <dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
<dd> <dd>
{{ {{
@ -125,6 +144,8 @@
) )
const displayModal: Ref<boolean> = ref(false) const displayModal: Ref<boolean> = ref(false)
const messageToDisplay: Ref<string | null> = ref(null) const messageToDisplay: Ref<string | null> = ref(null)
const idCopied: Ref<boolean> = ref(false)
const secretCopied: Ref<boolean> = ref(false)
onBeforeMount(() => { onBeforeMount(() => {
loadClient() loadClient()
@ -159,6 +180,24 @@
store.dispatch(OAUTH2_STORE.ACTIONS.REVOKE_ALL_TOKENS, clientId) 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(() => { onUnmounted(() => {
store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES) store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
store.commit(OAUTH2_STORE.MUTATIONS.EMPTY_CLIENT) store.commit(OAUTH2_STORE.MUTATIONS.EMPTY_CLIENT)
@ -183,6 +222,9 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: $default-padding; gap: $default-padding;
} }
.app-secret {
word-break: break-word;
}
.client-scopes { .client-scopes {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -190,6 +232,9 @@
padding-right: $default-padding * 1.5; padding-right: $default-padding * 1.5;
} }
} }
.fa-copy {
font-size: 0.9em;
}
.no-description { .no-description {
font-style: italic; font-style: italic;
} }

View File

@ -24,6 +24,7 @@
"APP_REQUESTING_ACCESS": "The application {0} is requesting:", "APP_REQUESTING_ACCESS": "The application {0} is requesting:",
"APPS_LIST": "OAuth2 applications", "APPS_LIST": "OAuth2 applications",
"AUTHORIZE_APP": "Authorize {0} to use your account?", "AUTHORIZE_APP": "Authorize {0} to use your account?",
"COPY_TO_CLIPBOARD": "copy to the clipboard",
"DELETE_APP": "Delete application", "DELETE_APP": "Delete application",
"NEW_APP": "New OAuth App", "NEW_APP": "New OAuth App",
"NO_DESCRIPTION": "no description", "NO_DESCRIPTION": "no description",

View File

@ -24,6 +24,7 @@
"APP_REQUESTING_ACCESS": "L'application {0} demande les accès suivants :", "APP_REQUESTING_ACCESS": "L'application {0} demande les accès suivants :",
"APPS_LIST": "Applications OAuth2", "APPS_LIST": "Applications OAuth2",
"AUTHORIZE_APP": "Autoriser {0} à utiliser votre compte ?", "AUTHORIZE_APP": "Autoriser {0} à utiliser votre compte ?",
"COPY_TO_CLIPBOARD": "copier dans le presse papier",
"DELETE_APP": "Supprimer l'application", "DELETE_APP": "Supprimer l'application",
"NEW_APP": "Ajouter une App OAuth", "NEW_APP": "Ajouter une App OAuth",
"NO_DESCRIPTION": "pas de description", "NO_DESCRIPTION": "pas de description",