Cleanup oauth2 admin settings

- Use more vue components
- Add link to doc

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

apps/oauth2/lib/Settings/Admin.php

@@ -28,21 +28,23 @@ namespace OCA\OAuth2\Settings;
 
 use OCA\OAuth2\Db\ClientMapper;
 use OCP\AppFramework\Http\TemplateResponse;
-use OCP\IInitialStateService;
+use OCP\AppFramework\Services\IInitialState;
 use OCP\Settings\ISettings;
+use OCP\IURLGenerator;
 
 class Admin implements ISettings {
+	private IInitialState $initialState;
+	private ClientMapper $clientMapper;
+	private IURLGenerator $urlGenerator;
 
-	/** @var IInitialStateService */
-	private $initialStateService;
-
-	/** @var ClientMapper */
-	private $clientMapper;
-
-	public function __construct(IInitialStateService $initialStateService,
-								ClientMapper $clientMapper) {
-		$this->initialStateService = $initialStateService;
+	public function __construct(
+		IInitialState $initialState,
+		ClientMapper $clientMapper,
+		IURLGenerator $urlGenerator
+	) {
+		$this->initialState = $initialState;
 		$this->clientMapper = $clientMapper;
+		$this->urlGenerator = $urlGenerator;
 	}
 
 	public function getForm(): TemplateResponse {
@@ -58,7 +60,8 @@ class Admin implements ISettings {
 				'clientSecret' => $client->getSecret(),
 			];
 		}
-		$this->initialStateService->provideInitialState('oauth2', 'clients', $result);
+		$this->initialState->provideInitialState('clients', $result);
+		$this->initialState->provideInitialState('oauth2-doc-link', $this->urlGenerator->linkToDocs('admin-oauth2'));
 
 		return new TemplateResponse(
 			'oauth2',

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>

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,

apps/oauth2/tests/Settings/AdminTest.php

@@ -26,7 +26,8 @@ namespace OCA\OAuth2\Tests\Settings;
 use OCA\OAuth2\Db\ClientMapper;
 use OCA\OAuth2\Settings\Admin;
 use OCP\AppFramework\Http\TemplateResponse;
-use OCP\IInitialStateService;
+use OCP\AppFramework\Services\IInitialState;
+use OCP\IURLGenerator;
 use PHPUnit\Framework\MockObject\MockObject;
 use Test\TestCase;
 
@@ -36,7 +37,7 @@ class AdminTest extends TestCase {
 	private $admin;
 
 	/** @var IInitialStateService|MockObject */
-	private $initialStateService;
+	private $initialState;
 
 	/** @var ClientMapper|MockObject */
 	private $clientMapper;
@@ -44,10 +45,10 @@ class AdminTest extends TestCase {
 	protected function setUp(): void {
 		parent::setUp();
 
-		$this->initialStateService = $this->createMock(IInitialStateService::class);
+		$this->initialState = $this->createMock(IInitialState::class);
 		$this->clientMapper = $this->createMock(ClientMapper::class);
 
-		$this->admin = new Admin($this->initialStateService, $this->clientMapper);
+		$this->admin = new Admin($this->initialState, $this->clientMapper, $this->createMock(IURLGenerator::class));
 	}
 
 	public function testGetForm() {