diff options
| author | julia.kirschenheuter <julia.kirschenheuter@nextcloud.com> | 2023-10-26 17:27:21 +0200 |
|---|---|---|
| committer | julia.kirschenheuter <julia.kirschenheuter@nextcloud.com> | 2023-10-27 09:55:45 +0200 |
| commit | fbc970855fce4e122c404679c1cc61dbb0ce7afc (patch) | |
| tree | f3e667a55900d3eed41a353caaa9d84c1ba45538 /apps/oauth2/src | |
| parent | ee1480cefc342578a2ee7539e4761abf59ac4a96 (diff) | |
| download | nextcloud-server-fbc970855fce4e122c404679c1cc61dbb0ce7afc.tar.gz nextcloud-server-fbc970855fce4e122c404679c1cc61dbb0ce7afc.zip | |
Create semantically right table for the "OAuth 2.0 clients"
Adapt styles
Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
Diffstat (limited to 'apps/oauth2/src')
| -rw-r--r-- | apps/oauth2/src/App.vue | 19 | ||||
| -rw-r--r-- | apps/oauth2/src/components/OAuthItem.vue | 53 |
2 files changed, 43 insertions, 29 deletions
diff --git a/apps/oauth2/src/App.vue b/apps/oauth2/src/App.vue index 5fb60df0120..71cf22dbf89 100644 --- a/apps/oauth2/src/App.vue +++ b/apps/oauth2/src/App.vue @@ -26,9 +26,20 @@ <table v-if="clients.length > 0" class="grid"> <thead> <tr> - <th id="headerContent" /> - <th id="headerRemove"> - + <th> + {{ t('oauth2', 'Name') }} + </th> + <th> + {{ t('oauth2', 'Redirection URI') }} + </th> + <th> + {{ t('oauth2', 'Client Identifier') }} + </th> + <th> + {{ t('oauth2', 'Secret key') }} + </th> + <th> + {{ t('oauth2', 'Delete client') }} </th> </tr> </thead> @@ -121,7 +132,7 @@ export default { { name: this.newClient.name, redirectUri: this.newClient.redirectUri, - } + }, ).then(response => { // eslint-disable-next-line vue/no-mutating-props this.clients.push(response.data) diff --git a/apps/oauth2/src/components/OAuthItem.vue b/apps/oauth2/src/components/OAuthItem.vue index a759af56906..fcceade4082 100644 --- a/apps/oauth2/src/components/OAuthItem.vue +++ b/apps/oauth2/src/components/OAuthItem.vue @@ -21,25 +21,21 @@ --> <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 type="tertiary-no-background" + :aria-label="t('oauth2', 'Show client secret')" + @click="toggleSecret"> + <template #icon> + <EyeOutline :size="20" + :title="t('oauth2', 'Show client secret')" /> + </template> + </NcButton> + </div> </td> <td class="action-column"> <NcButton type="tertiary-no-background" @@ -57,6 +53,7 @@ <script> import Delete from 'vue-material-design-icons/Delete.vue' +import EyeOutline from 'vue-material-design-icons/EyeOutline.vue' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' export default { @@ -64,6 +61,7 @@ export default { components: { Delete, NcButton, + EyeOutline, }, props: { client: { @@ -99,13 +97,12 @@ 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; @@ -115,4 +112,10 @@ export default { border: none; padding: 5px; } + + .action-column { + display: flex; + justify-content: flex-end; + padding-right: 0; + } </style> |