Merge pull request #22502 from nextcloud/fix/12302/oauth2_table

Pimp Oauth2 table
nextcloud · Aug 31, 2020 · 8c9f3a5 · 8c9f3a5
2 parents 5fb1d8d + 5659e69
commit 8c9f3a5
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 18 deletions.
diff --git a/apps/oauth2/js/oauth2.js b/apps/oauth2/js/oauth2.js
diff --git a/apps/oauth2/js/oauth2.js.map b/apps/oauth2/js/oauth2.js.map
diff --git a/apps/oauth2/src/App.vue b/apps/oauth2/src/App.vue
@@ -28,17 +28,8 @@
 		<table v-if="clients.length > 0" class="grid">
 			<thead>
 				<tr>
-					<th id="headerName" scope="col">
-						{{ 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 id="headerContent">
+
 					</th>
 					<th id="headerRemove">
 &nbsp;
@@ -127,3 +118,8 @@ export default {
 	},
 }
 </script>
+<style scoped>
+	table {
+		max-width: 800px;
+	}
+</style>
diff --git a/apps/oauth2/src/components/OAuthItem.vue b/apps/oauth2/src/components/OAuthItem.vue
@@ -21,10 +21,26 @@
   -->
 <template>
 	<tr>
-		<td>{{ name }}</td>
-		<td>{{ redirectUri }}</td>
-		<td><code>{{ clientId }}</code></td>
-		<td><code>{{ renderedSecret }}</code><a class="icon-toggle has-tooltip" :title="t('oauth2', 'Show client secret')" @click="toggleSecret" /></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>
+		</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>