aboutsummaryrefslogtreecommitdiffstats
path: root/apps/oauth2/src
diff options
context:
space:
mode:
Diffstat (limited to 'apps/oauth2/src')
-rw-r--r--apps/oauth2/src/App.vue90
-rw-r--r--apps/oauth2/src/components/OAuthItem.vue89
-rw-r--r--apps/oauth2/src/main.js23
3 files changed, 98 insertions, 104 deletions
diff --git a/apps/oauth2/src/App.vue b/apps/oauth2/src/App.vue
index 28b1f9182e2..941317a3e64 100644
--- a/apps/oauth2/src/App.vue
+++ b/apps/oauth2/src/App.vue
@@ -1,34 +1,28 @@
<!--
- - @copyright Copyright (c) 2018 Roeland Jago Douma <roeland@famdouma.nl>
- -
- - @author Roeland Jago Douma <roeland@famdouma.nl>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
+ - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
<template>
- <NcSettingsSection :title="t('oauth2', 'OAuth 2.0 clients')"
+ <NcSettingsSection :name="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>
- <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>
@@ -39,21 +33,29 @@
@delete="deleteClient" />
</tbody>
</table>
+ <NcNoteCard v-if="showSecretWarning"
+ type="warning">
+ {{ t('oauth2', 'Make sure you store the secret key, it cannot be recovered.') }}
+ </NcNoteCard>
<br>
<h3>{{ t('oauth2', 'Add client') }}</h3>
<span v-if="newClient.error" class="msg error">{{ newClient.errorMsg }}</span>
- <form @submit.prevent="addClient">
- <input id="name"
- v-model="newClient.name"
+ <form class="oauth2-form" @submit.prevent="addClient">
+ <NcTextField id="name"
+ :value.sync="newClient.name"
type="text"
+ class="oauth2-form--input"
name="name"
- :placeholder="t('oauth2', 'Name')">
- <input id="redirectUri"
- v-model="newClient.redirectUri"
+ :label="t('oauth2', 'Name')"
+ :placeholder="t('oauth2', 'Name')" />
+ <NcTextField id="redirectUri"
+ :value.sync="newClient.redirectUri"
type="url"
+ class="oauth2-form--input"
name="redirectUri"
- :placeholder="t('oauth2', 'Redirection URI')">
+ :label="t('oauth2', 'Redirection URI')"
+ :placeholder="t('oauth2', 'Redirection URI')" />
<NcButton native-type="submit" class="inline-button">
{{ t('oauth2', 'Add') }}
</NcButton>
@@ -63,12 +65,14 @@
<script>
import axios from '@nextcloud/axios'
-import OAuthItem from './components/OAuthItem'
+import OAuthItem from './components/OAuthItem.vue'
import { generateUrl } from '@nextcloud/router'
import { getCapabilities } from '@nextcloud/capabilities'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
import { loadState } from '@nextcloud/initial-state'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
export default {
name: 'App',
@@ -76,6 +80,8 @@ export default {
OAuthItem,
NcSettingsSection,
NcButton,
+ NcTextField,
+ NcNoteCard,
},
props: {
clients: {
@@ -92,6 +98,7 @@ export default {
error: false,
},
oauthDocLink: loadState('oauth2', 'oauth2-doc-link'),
+ showSecretWarning: false,
}
},
computed: {
@@ -102,7 +109,7 @@ export default {
methods: {
deleteClient(id) {
axios.delete(generateUrl('apps/oauth2/clients/{id}', { id }))
- .then((response) => {
+ .then(() => {
// eslint-disable-next-line vue/no-mutating-props
this.clients = this.clients.filter(client => client.id !== id)
})
@@ -115,10 +122,11 @@ 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)
+ this.showSecretWarning = true
this.newClient.name = ''
this.newClient.redirectUri = ''
@@ -140,4 +148,14 @@ export default {
min-height: 34px !important;
display: inline-flex !important;
}
+
+ .oauth2-form {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .oauth2-form--input {
+ max-width: 200px;
+ margin-inline-end: 10px;
+ }
</style>
diff --git a/apps/oauth2/src/components/OAuthItem.vue b/apps/oauth2/src/components/OAuthItem.vue
index 41874b1f02b..5a8f1556203 100644
--- a/apps/oauth2/src/components/OAuthItem.vue
+++ b/apps/oauth2/src/components/OAuthItem.vue
@@ -1,45 +1,24 @@
<!--
- - @copyright Copyright (c) 2018 Roeland Jago Douma <roeland@famdouma.nl>
- -
- - @author Roeland Jago Douma <roeland@famdouma.nl>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
+ - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
<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 v-if="clientSecret !== ''"
+ type="tertiary-no-background"
+ :aria-label="toggleAriaLabel"
+ @click="toggleSecret">
+ <template #icon>
+ <EyeOutline :size="20" />
+ </template>
+ </NcButton>
+ </div>
</td>
<td class="action-column">
<NcButton type="tertiary-no-background"
@@ -56,14 +35,16 @@
<script>
-import Delete from 'vue-material-design-icons/Delete'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import Delete from 'vue-material-design-icons/DeleteOutline.vue'
+import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
export default {
name: 'OAuthItem',
components: {
Delete,
NcButton,
+ EyeOutline,
},
props: {
client: {
@@ -89,6 +70,12 @@ export default {
return '****'
}
},
+ toggleAriaLabel() {
+ if (!this.renderSecret) {
+ return t('oauth2', 'Show client secret')
+ }
+ return t('oauth2', 'Hide client secret')
+ },
},
methods: {
toggleSecret() {
@@ -99,20 +86,28 @@ 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;
vertical-align: middle;
}
+
table.inline td {
border: none;
padding: 5px;
}
+
+ .action-column {
+ display: flex;
+ justify-content: flex-end;
+ padding-inline-end: 0;
+ }
</style>
diff --git a/apps/oauth2/src/main.js b/apps/oauth2/src/main.js
index 64a936bea40..10d537455df 100644
--- a/apps/oauth2/src/main.js
+++ b/apps/oauth2/src/main.js
@@ -1,25 +1,6 @@
/**
- * @copyright Copyright (c) 2018 Roeland Jago Douma <roeland@famdouma.nl>
- *
- * @author Christoph Wurst <christoph@winzerhof-wurst.at>
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- * @author Roeland Jago Douma <roeland@famdouma.nl>
- *
- * @license AGPL-3.0-or-later
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- *
+ * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
*/
import Vue from 'vue'
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-15 07:27:20 +0000