Create semantically right table for the "OAuth 2.0 clients"

Adapt styles

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

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">
-&nbsp;
+					<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)

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,13 +53,15 @@
 <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 {
 	name: 'OAuthItem',
 	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>

apps/settings/css/settings.scss

@@ -3,7 +3,7 @@
  See the COPYING-README file. */
 @use 'variables';
 @use 'sass:math';
-@import 'functions';	
+@import 'functions';
 
 input {
 	&#openid, &#webdav {
@@ -478,18 +478,15 @@ table.grid {
 
 	th {
 		height: 2em;
-		color: #999;
+		padding: 0 1em 0 0;
 		border-bottom: 1px solid var(--color-border);
-		padding: 0 .5em;
-		padding-left: .8em;
 		text-align: left;
 		font-weight: normal;
 	}
 
 	td {
 		border-bottom: 1px solid var(--color-border);
-		padding: 0 .5em;
-		padding-left: .8em;
+		padding: 0 1em 0 0;
 		text-align: left;
 		font-weight: normal;
 	}