Skip to content

Commit d9d8449

Browse files
susnuxsusnux
authored
Merge pull request #57012 from nextcloud/refactor/oauth2-to-vue3
refactor(oauth2): migrate to Typescript and Vue 3
2 parents 09dfa96 + ad23c85 commit d9d8449

File tree

127 files changed

+546
-566
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

127 files changed

+546
-566
lines changed

‎apps/oauth2/lib/Settings/Admin.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ public function getForm(): TemplateResponse {
4545
$this->initialState->provideInitialState('clients', $result);
4646
$this->initialState->provideInitialState('oauth2-doc-link', $this->urlGenerator->linkToDocs('admin-oauth2'));
4747

48+
\OCP\Util::addStyle('oauth2', 'settings-admin');
49+
\OCP\Util::addScript('oauth2', 'settings-admin', 'core');
4850
return new TemplateResponse(
4951
'oauth2',
5052
'admin',

‎apps/oauth2/src/App.vue‎

Lines changed: 0 additions & 173 deletions
This file was deleted.

‎apps/oauth2/src/components/OAuthItem.vue‎

Lines changed: 52 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -2,120 +2,71 @@
22
- SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
5+
6+
<script setup lang="ts">
7+
import type { IOauthClient } from '../views/AdminSettings.vue'
8+
9+
import { t } from '@nextcloud/l10n'
10+
import NcButton from '@nextcloud/vue/components/NcButton'
11+
import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
12+
import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
13+
14+
defineProps<{
15+
/**
16+
* The OAuth client to display
17+
*/
18+
client: IOauthClient
19+
}>()
20+
21+
defineEmits<{
22+
delete: []
23+
}>()
24+
</script>
25+
526
<template>
627
<tr>
7-
<td>{{ name }}</td>
8-
<td>{{ redirectUri }}</td>
9-
<td><code>{{ clientId }}</code></td>
28+
<td>{{ client.name }}</td>
1029
<td>
11-
<div class="action-secret">
12-
<code>{{ renderedSecret }}</code>
13-
<NcButton
14-
v-if="clientSecret !== ''"
15-
variant="tertiary-no-background"
16-
:aria-label="toggleAriaLabel"
17-
@click="toggleSecret">
18-
<template #icon>
19-
<EyeOutline :size="20" />
20-
</template>
21-
</NcButton>
22-
</div>
30+
<code :class="$style.oAuthItem__code">{{ client.redirectUri }}</code>
2331
</td>
24-
<td class="action-column">
32+
<td>
33+
<code :class="$style.oAuthItem__code">{{ client.clientId }}</code>
34+
</td>
35+
<td>
36+
<NcPasswordField
37+
v-if="client.clientSecret"
38+
:class="$style.oAuthItem__clientSecret"
39+
:aria-label="t('oauth2', 'Secret key')"
40+
as-text
41+
:model-value="client.clientSecret"
42+
show-trailing-button />
43+
<span v-else>*****</span>
44+
</td>
45+
<td>
2546
<NcButton
26-
variant="tertiary-no-background"
2747
:aria-label="t('oauth2', 'Delete')"
28-
@click="$emit('delete', id)">
48+
:title="t('oauth2', 'Delete')"
49+
variant="error"
50+
@click="$emit('delete')">
2951
<template #icon>
30-
<Delete
31-
:size="20"
32-
:title="t('oauth2', 'Delete')" />
52+
<IconTrashCanOutline :size="20" />
3353
</template>
3454
</NcButton>
3555
</td>
3656
</tr>
3757
</template>
3858

39-
<script>
40-
41-
import NcButton from '@nextcloud/vue/components/NcButton'
42-
import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
43-
import Delete from 'vue-material-design-icons/TrashCanOutline.vue'
44-
45-
export default {
46-
name: 'OAuthItem',
47-
components: {
48-
Delete,
49-
NcButton,
50-
EyeOutline,
51-
},
52-
53-
props: {
54-
client: {
55-
type: Object,
56-
required: true,
57-
},
58-
},
59-
60-
data() {
61-
return {
62-
id: this.client.id,
63-
name: this.client.name,
64-
redirectUri: this.client.redirectUri,
65-
clientId: this.client.clientId,
66-
clientSecret: this.client.clientSecret,
67-
renderSecret: false,
68-
}
69-
},
70-
71-
computed: {
72-
renderedSecret() {
73-
if (this.renderSecret) {
74-
return this.clientSecret
75-
} else {
76-
return '****'
77-
}
78-
},
79-
80-
toggleAriaLabel() {
81-
if (!this.renderSecret) {
82-
return t('oauth2', 'Show client secret')
83-
}
84-
return t('oauth2', 'Hide client secret')
85-
},
86-
},
87-
88-
methods: {
89-
toggleSecret() {
90-
this.renderSecret = !this.renderSecret
91-
},
92-
},
59+
<style module>
60+
.oAuthItem__code {
61+
display: inline-block;
62+
overflow-x: scroll;
63+
padding-block: var(--default-grid-baseline);
64+
text-wrap: nowrap;
65+
vertical-align: middle;
66+
width: 100%;
9367
}
94-
</script>
95-
96-
<style scoped>
97-
.action-secret {
98-
display: flex;
99-
align-items: center;
100-
}
101-
102-
.action-secret code {
103-
padding-top: 5px;
104-
}
10568
106-
td code {
107-
display: inline-block;
108-
vertical-align: middle;
109-
}
110-
111-
table.inline td {
112-
border: none;
113-
padding: 5px;
114-
}
115-
116-
.action-column {
117-
display: flex;
118-
justify-content: flex-end;
119-
padding-inline-end: 0;
120-
}
69+
.oAuthItem__clientSecret {
70+
min-width: 200px;
71+
}
12172
</style>

apps/oauth2/src/main.js renamed to apps/oauth2/src/settings-admin.ts

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,14 @@
44
*/
55

66
import { loadState } from '@nextcloud/initial-state'
7-
import Vue from 'vue'
8-
import App from './App.vue'
7+
import { createApp } from 'vue'
8+
import AdminSettings from './views/AdminSettings.vue'
99

10-
Vue.prototype.t = t
11-
Vue.prototype.OC = OC
10+
import 'vite/modulepreload-polyfill'
1211

1312
const clients = loadState('oauth2', 'clients')
1413

15-
const View = Vue.extend(App)
16-
const oauth = new View({
17-
propsData: {
18-
clients,
19-
},
14+
const app = createApp(AdminSettings, {
15+
modelValue: clients,
2016
})
21-
oauth.$mount('#oauth2')
17+
app.mount('#oauth2')

0 commit comments

Comments
 (0)