Pimp Oauth2 table

Fixes #12302

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>

apps/oauth2/src/App.vue

@@ -28,17 +28,8 @@
 		<table v-if="clients.length > 0" class="grid">
 			<thead>
 				<tr>
-					<th id="headerName" scope="col">
+					<th id="headerContent">
-						{{ t('oauth2', 'Name') }}
+
-					</th>
-					<th id="headerRedirectUri" scope="col">
-						{{ t('oauth2', 'Redirection URI') }}
-					</th>
-					<th id="headerClientIdentifier" scope="col">
-						{{ t('oauth2', 'Client Identifier') }}
-					</th>
-					<th id="headerSecret" scope="col">
-						{{ t('oauth2', 'Secret') }}
 					</th>
 					<th id="headerRemove">
 &nbsp;
@@ -127,3 +118,8 @@ export default {
 	},
 }
 </script>
+<style scoped>
+	table {
+		max-width: 800px;
+	}
+</style>

apps/oauth2/src/components/OAuthItem.vue

@@ -21,10 +21,26 @@
   -->
 <template>
 	<tr>
-		<td>{{ name }}</td>
+		<td>
-		<td>{{ redirectUri }}</td>
+			<table class="inline">
-		<td><code>{{ clientId }}</code></td>
+				<tr>
-		<td><code>{{ renderedSecret }}</code><a class="icon-toggle has-tooltip" :title="t('oauth2', 'Show client secret')" @click="toggleSecret" /></td>
+					<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>
+		</td>
 		<td class="action-column">
 			<span><a class="icon-delete has-tooltip" :title="t('oauth2', 'Delete')" @click="$emit('delete', id)" /></span>
 		</td>
@@ -79,6 +95,9 @@ export default {
 	td code {
 		display: inline-block;
 		vertical-align: middle;
-		padding: 3px;
+	}
+	table.inline td {
+		border: none;
+		padding: 5px;
 	}
 </style>