diff options
Diffstat (limited to 'apps/oauth2/src/components/OAuthItem.vue')
| -rw-r--r-- | apps/oauth2/src/components/OAuthItem.vue | 102 |
1 files changed, 56 insertions, 46 deletions
diff --git a/apps/oauth2/src/components/OAuthItem.vue b/apps/oauth2/src/components/OAuthItem.vue index 72d04d2aac3..5a8f1556203 100644 --- a/apps/oauth2/src/components/OAuthItem.vue +++ b/apps/oauth2/src/components/OAuthItem.vue @@ -1,55 +1,51 @@ <!-- - - @copyright Copyright (c) 2018 Roeland Jago Douma <roeland@famdouma.nl> - - - - @author Roeland Jago Douma <roeland@famdouma.nl> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <tr> + <td>{{ name }}</td> + <td>{{ redirectUri }}</td> + <td><code>{{ clientId }}</code></td> <td> - <table class="inline"> - <tr> - <td>{{ t('oauth2', 'Name') }}</td> - <td>{{ name }}</td> - </tr> - <tr> - <td>{{ t('oauth2', 'Redirection URI') }}</td> - <td>{{ redirectUri }}</td> - </tr> - <tr> - <td>{{ t('oauth2', 'Client Identifier') }}</td> - <td><code>{{ clientId }}</code></td> - </tr> - <tr> - <td>{{ t('oauth2', 'Secret') }}</td> - <td><code>{{ renderedSecret }}</code><a class="icon-toggle has-tooltip" :title="t('oauth2', 'Show client secret')" @click="toggleSecret" /></td> - </tr> - </table> + <div class="action-secret"> + <code>{{ renderedSecret }}</code> + <NcButton v-if="clientSecret !== ''" + type="tertiary-no-background" + :aria-label="toggleAriaLabel" + @click="toggleSecret"> + <template #icon> + <EyeOutline :size="20" /> + </template> + </NcButton> + </div> </td> <td class="action-column"> - <span><a class="icon-delete has-tooltip" :title="t('oauth2', 'Delete')" @click="$emit('delete', id)" /></span> + <NcButton type="tertiary-no-background" + :aria-label="t('oauth2', 'Delete')" + @click="$emit('delete', id)"> + <template #icon> + <Delete :size="20" + :title="t('oauth2', 'Delete')" /> + </template> + </NcButton> </td> </tr> </template> <script> + +import Delete from 'vue-material-design-icons/DeleteOutline.vue' +import EyeOutline from 'vue-material-design-icons/EyeOutline.vue' +import NcButton from '@nextcloud/vue/components/NcButton' + export default { name: 'OAuthItem', + components: { + Delete, + NcButton, + EyeOutline, + }, props: { client: { type: Object, @@ -74,6 +70,12 @@ export default { return '****' } }, + toggleAriaLabel() { + if (!this.renderSecret) { + return t('oauth2', 'Show client secret') + } + return t('oauth2', 'Hide client secret') + }, }, methods: { toggleSecret() { @@ -84,20 +86,28 @@ export default { </script> <style scoped> - .icon-toggle, - .icon-delete { - display: inline-block; - width: 16px; - height: 16px; - padding: 10px; - vertical-align: middle; + .action-secret { + display: flex; + align-items: center; } + + .action-secret code { + padding-top: 5px; + } + td code { display: inline-block; vertical-align: middle; } + table.inline td { border: none; padding: 5px; } + + .action-column { + display: flex; + justify-content: flex-end; + padding-inline-end: 0; + } </style> |