From fbc970855fce4e122c404679c1cc61dbb0ce7afc Mon Sep 17 00:00:00 2001
From: "julia.kirschenheuter" <julia.kirschenheuter@nextcloud.com>
Date: Thu, 26 Oct 2023 17:27:21 +0200
Subject: 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                  | 19 +++++++++---
 apps/oauth2/src/components/OAuthItem.vue | 53 +++++++++++++++++---------------
 2 files changed, 43 insertions(+), 29 deletions(-)

(limited to 'apps/oauth2/src')

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">
-&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)
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>
-- 
cgit v1.2.3