Skip to content

Migrate to Vue 3 + nc/vue 9 #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
julien-nc merged 4 commits into from
Dec 19, 2025
Merged

Migrate to Vue 3 + nc/vue 9 #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c89bcdd
migrate to vue 3 + nc/vue 9.2
julien-nc Nov 18, 2025
ba01de9
use new components in the settings
julien-nc Nov 18, 2025
861a951
fix v-deep warnings
julien-nc Nov 18, 2025
381d8e7
remove an unused method in the permalink widget
julien-nc Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6,463 changes: 2,688 additions & 3,775 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,27 +38,27 @@
},
"dependencies": {
"@alchemyalcove/rgb-to-hsl": "^1.0.5",
"@highlightjs/vue-plugin": "^2.1.0",
"@nextcloud/auth": "^2.4.0",
"@nextcloud/axios": "^2.5.1",
"@nextcloud/dialogs": "^5.1.2",
"@nextcloud/initial-state": "^2.2.0",
"@nextcloud/dialogs": "^7.1.0",
"@nextcloud/initial-state": "^3.0.0",
"@nextcloud/l10n": "^3.2.0",
"@nextcloud/moment": "^1.3.2",
"@nextcloud/password-confirmation": "^5.3.1",
"@nextcloud/password-confirmation": "^6.0.2",
"@nextcloud/router": "^3.0.1",
"@nextcloud/vue": "^8.24.0",
"@nextcloud/vue": "^9.2.0",
"highlight.js": "^11.11.1",
"vue": "^2.7.16",
"vue-highlightjs": "^1.3.3",
"vue": "^3.5.24",
"vue-material-design-icons": "^5.3.1"
},
"devDependencies": {
"@nextcloud/babel-config": "^1.2.0",
"@nextcloud/browserslist-config": "^3.0.1",
"@nextcloud/eslint-config": "^8.4.2",
"@nextcloud/stylelint-config": "^3.0.1",
"@nextcloud/vite-config": "^1.4.2",
"@nextcloud/vite-config": "^2.5.2",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-stylelint": "^5.3.1"
"vite-plugin-stylelint": "^6.0.2"
}
}
9 changes: 5 additions & 4 deletions src/adminSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

import Vue from 'vue'
import './bootstrap.js'
import { createApp } from 'vue'
import AdminSettings from './components/AdminSettings.vue'

const View = Vue.extend(AdminSettings)
new View().$mount('#github_prefs')
const app = createApp(AdminSettings)

app.mixin({ methods: { t, n } })
app.mount('#github_prefs')
11 changes: 0 additions & 11 deletions src/bootstrap.js
View file
Open in desktop

This file was deleted.

217 changes: 115 additions & 102 deletions src/components/AdminSettings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,122 +8,126 @@
<GithubIcon class="icon" />
{{ t('integration_github', 'GitHub integration') }}
</h2>
<p class="settings-hint">
{{ t('integration_github', 'If you want to allow your Nextcloud users to use OAuth to authenticate to https://github.com, create an OAuth application in your GitHub settings.') }}
<a href="https://github.com/settings/developers" class="external">{{ t('integration_github', 'GitHub OAuth settings') }}</a>
</p>
<p class="settings-hint">
{{ t('integration_github', 'Set "Application name", "Homepage URL" and "Application description" to values that will make sense to your Nextcloud users as they will see them when connecting to GitHub using your OAuth app.') }}
</p>
<br>
<p class="settings-hint">
<InformationOutlineIcon :size="20" class="icon" />
{{ t('integration_github', 'Make sure you set the "Authorization callback URL" to') }}
</p>
<strong>{{ redirect_uri }}</strong>
<br><br>
<p class="settings-hint">
{{ t('integration_github', 'Put the OAuth app "Client ID" and "Client secret" below.') }}
</p>
<p class="settings-hint">
{{ t('integration_github', 'Your Nextcloud users will then see a "Connect to GitHub" button in their personal settings.') }}
</p>
<div id="github-content">
<div class="line">
<label for="github-client-id">
<KeyIcon :size="20" class="icon" />
{{ t('integration_github', 'Client ID') }}
</label>
<input id="github-client-id"
v-model="state.client_id"
type="password"
:readonly="readonly"
:placeholder="t('integration_github', 'Client ID of your GitHub application')"
@focus="readonly = false"
@input="onInput">
</div>
<div class="line">
<label for="github-client-secret">
<KeyIcon :size="20" class="icon" />
{{ t('integration_github', 'Client secret') }}
</label>
<input id="github-client-secret"
v-model="state.client_secret"
type="password"
:readonly="readonly"
:placeholder="t('integration_github', 'Client secret of your GitHub application')"
@input="onInput"
@focus="readonly = false">
</div>
<NcNoteCard type="info">
{{ t('integration_github', 'If you want to allow your Nextcloud users to use OAuth to authenticate to {githubUrl}, create an OAuth application in your GitHub settings.', { githubUrl: 'https://github.com' }) }}
<br>
<a href="https://github.com/settings/developers" class="external" target="_blank">
{{ t('integration_github', 'GitHub OAuth settings') }}
</a>
<br>
{{ t('integration_github', 'Set "Application name", "Homepage URL" and "Application description" to values that will make sense to your Nextcloud users as they will see them when connecting to GitHub using your OAuth app.') }}
<br>
{{ t('integration_github', 'Make sure you set the "Authorization callback URL" to') }}
<br>
<strong>{{ redirect_uri }}</strong>
<br>
{{ t('integration_github', 'Put the OAuth app "Client ID" and "Client secret" below.') }}
{{ t('integration_github', 'Your Nextcloud users will then see a "Connect to GitHub" button in their personal settings.') }}
</NcNoteCard>
<NcTextField
v-model="state.client_id"
class="input"
type="password"
:label="t('integration_github', 'Client ID')"
:placeholder="t('integration_github', 'Client ID of your GitHub application')"
:readonly="readonly"
:show-trailing-button="!!state.client_id"
@trailing-button-click="state.client_id = ''"
@focus="readonly = false"
@update:model-value="onInput">
<template #icon>
<KeyIcon :size="20" />
</template>
</NcTextField>
<NcTextField
v-model="state.client_secret"
class="input"
type="password"
:label="t('integration_github', 'Client secret')"
:placeholder="t('integration_github', 'Client secret of your GitHub application')"
:readonly="readonly"
:show-trailing-button="!!state.client_secret"
@trailing-button-click="state.client_secret = ''"
@focus="readonly = false"
@update:model-value="onInput">
<template #icon>
<KeyIcon :size="20" />
</template>
</NcTextField>
<br>
<p class="settings-hint">
<AlertIcon :size="20" class="icon" />
<NcNoteCard type="warning">
{{ t('integration_github', 'The default access token will be used for link previews and unified search by users who didn\'t connect to GitHub.') }}
</p>
</NcNoteCard>
<NcTextField
v-model="state.default_link_token"
class="input"
type="password"
:label="t('integration_github', 'Default access token')"
:placeholder="t('integration_github', 'personal access token')"
:readonly="readonly"
:show-trailing-button="!!state.default_link_token"
@trailing-button-click="state.default_link_token = ''"
@focus="readonly = false"
@update:model-value="onInput">
<template #icon>
<KeyIcon :size="20" />
</template>
</NcTextField>
<div v-if="defaultTokenConnected" class="line">
<label style="width: 100%; margin-bottom: 0.5em;">
<label style="width: 100%; margin-top: 0.5em;">
<CheckIcon :size="20" class="icon" />
{{ t('integration_github', 'Connected as {user}', { user: connectedAs }) }}
</label>
</div>
<div class="line">
<label for="github-link-token">
<KeyIcon :size="20" class="icon" />
{{ t('integration_github', 'Default access token') }}
{{ t('integration_github', 'Connected with the default access token as {user}', { user: connectedAs }) }}
</label>
<input id="github-link-token"
v-model="state.default_link_token"
type="password"
:readonly="readonly"
:placeholder="t('integration_github', 'personal access token')"
@input="onInput"
@focus="readonly = false">
</div>
<NcCheckboxRadioSwitch
:checked="state.allow_default_link_token_to_anonymous"
:disabled="!state.default_link_token"
@update:checked="onCheckboxChanged($event, 'allow_default_link_token_to_anonymous')">
{{ t('integration_github', 'Use default access token for anonymous users') }}
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch
:checked="state.allow_default_link_token_to_guests"
:disabled="!state.default_link_token"
@update:checked="onCheckboxChanged($event, 'allow_default_link_token_to_guests')">
{{ t('integration_github', 'Use default access token for guest users') }}
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch
:checked="state.use_popup"
@update:checked="onCheckboxChanged($event, 'use_popup')">
{{ t('integration_github', 'Use a pop-up for OAuth authentication') }}
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch
:checked="state.link_preview_enabled"
@update:checked="onCheckboxChanged($event, 'link_preview_enabled')">
{{ t('integration_github', 'Enable GitHub link previews') }}
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch
:checked="state.dashboard_enabled"
@update:checked="onCheckboxChanged($event, 'dashboard_enabled')">
{{ t('integration_github', 'Enable GitHub dashboard widget') }}
</NcCheckboxRadioSwitch>
<NcCheckboxRadioSwitch
:checked="state.issue_notifications_enabled"
@update:checked="onCheckboxChanged($event, 'issue_notifications_enabled')">
{{ t('integration_github', 'Enable notifications for new unread GitHub notifications') }}
</NcCheckboxRadioSwitch>
<br>
<NcFormBox>
<NcFormBoxSwitch :model-value="state.allow_default_link_token_to_anonymous"
:disabled="!state.default_link_token"
@update:model-value="onCheckboxChanged($event, 'allow_default_link_token_to_anonymous')">
{{ t('integration_github', 'Use default access token for anonymous users') }}
</NcFormBoxSwitch>
<NcFormBoxSwitch
:model-value="state.allow_default_link_token_to_guests"
:disabled="!state.default_link_token"
@update:model-value="onCheckboxChanged($event, 'allow_default_link_token_to_guests')">
{{ t('integration_github', 'Use default access token for guest users') }}
</NcFormBoxSwitch>
<NcFormBoxSwitch
:model-value="state.use_popup"
@update:model-value="onCheckboxChanged($event, 'use_popup')">
{{ t('integration_github', 'Use a pop-up for OAuth authentication') }}
</NcFormBoxSwitch>
<NcFormBoxSwitch
:model-value="state.link_preview_enabled"
@update:model-value="onCheckboxChanged($event, 'link_preview_enabled')">
{{ t('integration_github', 'Enable GitHub link previews') }}
</NcFormBoxSwitch>
<NcFormBoxSwitch
:model-value="state.dashboard_enabled"
@update:model-value="onCheckboxChanged($event, 'dashboard_enabled')">
{{ t('integration_github', 'Enable GitHub dashboard widget') }}
</NcFormBoxSwitch>
<NcFormBoxSwitch
:model-value="state.issue_notifications_enabled"
@update:model-value="onCheckboxChanged($event, 'issue_notifications_enabled')">
{{ t('integration_github', 'Enable notifications for new unread GitHub notifications') }}
</NcFormBoxSwitch>
</NcFormBox>
</div>
</div>
</template>

<script>
import InformationOutlineIcon from 'vue-material-design-icons/InformationOutline.vue'
import AlertIcon from 'vue-material-design-icons/Alert.vue'
import KeyIcon from 'vue-material-design-icons/Key.vue'
import CheckIcon from 'vue-material-design-icons/Check.vue'

import GithubIcon from './icons/GithubIcon.vue'

import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
import NcTextField from '@nextcloud/vue/components/NcTextField'
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
import NcFormBox from '@nextcloud/vue/components/NcFormBox'
import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'

import { loadState } from '@nextcloud/initial-state'
import { generateUrl } from '@nextcloud/router'
Expand All @@ -138,10 +142,11 @@ export default {

components: {
GithubIcon,
NcCheckboxRadioSwitch,
NcTextField,
NcNoteCard,
NcFormBox,
NcFormBoxSwitch,
KeyIcon,
AlertIcon,
InformationOutlineIcon,
CheckIcon,
},

Expand Down Expand Up @@ -227,6 +232,10 @@ export default {
#github_prefs {
#github-content {
margin-left: 40px;
max-width: 800px;
}
h2 {
justify-content: start;
}
h2,
.line,
Expand All @@ -242,6 +251,10 @@ export default {
margin-right: 8px;
}

.input {
width: 100%;
}

.line {
> label {
width: 300px;
Expand Down
Loading