diff options
Diffstat (limited to 'apps/oauth2/src/App.vue')
| -rw-r--r-- | apps/oauth2/src/App.vue | 32 |
1 files changed, 25 insertions, 7 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> |