Cleanup oauth2 admin settings

- Use more vue components
- Add link to doc

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

2 files changed, 41 insertions, 8 deletions

diff --git a/apps/oauth2/src/App.vue b/apps/oauth2/src/App.vue
index afb98ed77d2..3636a532ce1 100644
--- a/apps/oauth2/src/App.vue
+++ b/apps/oauth2/src/App.vue
@@ -20,11 +20,9 @@
   -
   -->
 <template>
-	<div id="oauth2" class="section">
-		<h2>{{ t('oauth2', 'OAuth 2.0 clients') }}</h2>
-		<p class="settings-hint">
-			{{ t('oauth2', 'OAuth 2.0 allows external services to request access to {instanceName}.', { instanceName: OC.theme.name}) }}
-		</p>
+	<SettingsSection :title="t('oauth2', 'OAuth 2.0 clients')"
+		:description="t('oauth2', 'OAuth 2.0 allows external services to request access to {instanceName}.', { instanceName })"
+		:doc-url="oauthDocLink">
 		<table v-if="clients.length > 0" class="grid">
 			<thead>
 				<tr>
@@ -56,20 +54,28 @@
 				type="url"
 				name="redirectUri"
 				:placeholder="t('oauth2', 'Redirection URI')">
-			<input type="submit" class="button" :value="t('oauth2', 'Add')">
+			<Button class="inline-button">
+				{{ t('oauth2', 'Add') }}
+			</Button>
 		</form>
-	</div>
+	</SettingsSection>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
 import OAuthItem from './components/OAuthItem'
 import { generateUrl } from '@nextcloud/router'
+import { getCapabilities } from '@nextcloud/capabilities'
+import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
+import Button from '@nextcloud/vue/dist/Components/Button'
+import { loadState } from '@nextcloud/initial-state'
 
 export default {
 	name: 'App',
 	components: {
 		OAuthItem,
+		SettingsSection,
+		Button,
 	},
 	props: {
 		clients: {
@@ -85,8 +91,14 @@ export default {
 				errorMsg: '',
 				error: false,
 			},
+			oauthDocLink: loadState('oauth2', 'oauth2-doc-link'),
 		}
 	},
+	computed: {
+		instanceName() {
+			return getCapabilities().theming.name
+		},
+	},
 	methods: {
 		deleteClient(id) {
 			axios.delete(generateUrl('apps/oauth2/clients/{id}', { id }))
@@ -122,4 +134,10 @@ export default {
 	table {
 		max-width: 800px;
 	}
+
+	/** Overwrite button height and position to be aligned with the text input */
+	.inline-button {
+		min-height: 34px !important;
+		display: inline-flex !important;
+	}
 </style>
diff --git a/apps/oauth2/src/components/OAuthItem.vue b/apps/oauth2/src/components/OAuthItem.vue
index 72d04d2aac3..6f4c5ad0f7e 100644
--- a/apps/oauth2/src/components/OAuthItem.vue
+++ b/apps/oauth2/src/components/OAuthItem.vue
@@ -42,14 +42,29 @@
 			</table>
 		</td>
 		<td class="action-column">
-			<span><a class="icon-delete has-tooltip" :title="t('oauth2', 'Delete')" @click="$emit('delete', id)" /></span>
+			<Button type="tertiary-no-background"
+				:aria-label="t('oauth2', 'Delete')"
+				@click="$emit('delete', id)">
+				<template #icon>
+					<Delete :size="20"
+						:title="t('oauth2', 'Delete')" />
+				</template>
+			</Button>
 		</td>
 	</tr>
 </template>
 
 <script>
+
+import Delete from 'vue-material-design-icons/Delete'
+import Button from '@nextcloud/vue/dist/Components/Button'
+
 export default {
 	name: 'OAuthItem',
+	components: {
+		Delete,
+		Button,
+	},
 	props: {
 		client: {
 			type: Object,