fix(theming): user background picker

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

apps/theming/src/admin-settings.js

@@ -19,10 +19,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
+import { getRequestToken } from '@nextcloud/auth'
 import Vue from 'vue'
-import App from './AdminTheming.vue'
+
 import { refreshStyles } from './helpers/refreshStyles.js'
+import App from './AdminTheming.vue'
+
+// eslint-disable-next-line camelcase
+__webpack_nonce__ = btoa(getRequestToken())
 
 Vue.prototype.OC = OC
 Vue.prototype.t = t

apps/theming/src/components/BackgroundSettings.vue

@@ -91,17 +91,18 @@
 
 <script>
 import { generateFilePath, generateRemoteUrl, generateUrl } from '@nextcloud/router'
+import { getCurrentUser } from '@nextcloud/auth'
+import { getFilePickerBuilder, showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
+import { Palette } from 'node-vibrant/lib/color.js'
 import axios from '@nextcloud/axios'
-import Check from 'vue-material-design-icons/Check.vue'
-import Close from 'vue-material-design-icons/Close.vue'
-import ImageEdit from 'vue-material-design-icons/ImageEdit.vue'
 import debounce from 'debounce'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
 import Vibrant from 'node-vibrant'
-import { Palette } from 'node-vibrant/lib/color.js'
-import { getFilePickerBuilder } from '@nextcloud/dialogs'
-import { getCurrentUser } from '@nextcloud/auth'
+
+import Check from 'vue-material-design-icons/Check.vue'
+import Close from 'vue-material-design-icons/Close.vue'
+import ImageEdit from 'vue-material-design-icons/ImageEdit.vue'
 
 const backgroundImage = loadState('theming', 'backgroundImage')
 const shippedBackgroundList = loadState('theming', 'shippedBackgrounds')
@@ -109,11 +110,6 @@ const themingDefaultBackground = loadState('theming', 'themingDefaultBackground'
 const defaultShippedBackground = loadState('theming', 'defaultShippedBackground')
 
 const prefixWithBaseUrl = (url) => generateFilePath('theming', '', 'img/background/') + url
-const picker = getFilePickerBuilder(t('theming', 'Select a background from your files'))
-	.setMultiSelect(false)
-	.setType(1)
-	.setMimeTypeFilter(['image/png', 'image/gif', 'image/jpeg', 'image/svg+xml', 'image/svg'])
-	.build()
 
 export default {
 	name: 'BackgroundSettings',
@@ -255,8 +251,30 @@ export default {
 			this.pickColor(...args)
 		}, 200),
 
-		async pickFile() {
-			const path = await picker.pick()
+		pickFile() {
+			const picker = getFilePickerBuilder(t('theming', 'Select a background from your files'))
+				.allowDirectories(false)
+				.setMimeTypeFilter(['image/png', 'image/gif', 'image/jpeg', 'image/svg+xml', 'image/svg'])
+				.setMultiSelect(false)
+				.addButton({
+					id: 'select',
+					label: t('theming', 'Select background'),
+					callback: (nodes) => {
+						this.applyFile(nodes[0]?.path)
+					},
+					type: 'primary',
+				})
+				.build()
+			picker.pick()
+		},
+
+		async applyFile(path) {
+			if (!path || typeof path !== 'string' || path.trim().length === 0 || path === '/') {
+				console.error('No valid background have been selected', { path })
+				showError(t('theming', 'No background have been selected'))
+				return
+			}
+
 			this.loading = 'custom'
 
 			// Extract primary color from image

apps/theming/src/personal-settings.js

@@ -19,10 +19,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
+import { getRequestToken } from '@nextcloud/auth'
 import Vue from 'vue'
-import App from './UserThemes.vue'
+
 import { refreshStyles } from './helpers/refreshStyles.js'
+import App from './UserThemes.vue'
+
+// eslint-disable-next-line camelcase
+__webpack_nonce__ = btoa(getRequestToken())
 
 Vue.prototype.OC = OC
 Vue.prototype.t = t

package-lock.json

@@ -19,7 +19,7 @@
         "@nextcloud/capabilities": "^1.0.4",
         "@nextcloud/dialogs": "^5.0.0-beta.2",
         "@nextcloud/event-bus": "^3.1.0",
-        "@nextcloud/files": "3.0.0-beta.18",
+        "@nextcloud/files": "^3.0.0-beta.19",
         "@nextcloud/initial-state": "^2.0.0",
         "@nextcloud/l10n": "^2.1.0",
         "@nextcloud/logger": "^2.5.0",
@@ -3872,9 +3872,9 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/@nextcloud/files": {
-      "version": "3.0.0-beta.18",
-      "resolved": "https://registry.npmjs.org/@nextcloud/files/-/files-3.0.0-beta.18.tgz",
-      "integrity": "sha512-uu+55g21ps7ZtoVqFNliShtHclWO3p7mHv1Sy0qGjwWmQPu4fKjixgQ9SscdLL+9tXSmDR94qB3XuKe4EZ8hNQ==",
+      "version": "3.0.0-beta.19",
+      "resolved": "https://registry.npmjs.org/@nextcloud/files/-/files-3.0.0-beta.19.tgz",
+      "integrity": "sha512-4VYTlscjR7f4svcZbSjrZrq+KKi3GYPels8PvyolYqMOBLWC4xjOrp5HFa20D7hnL/2Ynwymz3WeJBMP5YW1AQ==",
       "dependencies": {
         "@nextcloud/auth": "^2.1.0",
         "@nextcloud/l10n": "^2.2.0",

package.json

@@ -45,7 +45,7 @@
     "@nextcloud/capabilities": "^1.0.4",
     "@nextcloud/dialogs": "^5.0.0-beta.2",
     "@nextcloud/event-bus": "^3.1.0",
-    "@nextcloud/files": "3.0.0-beta.18",
+    "@nextcloud/files": "^3.0.0-beta.19",
     "@nextcloud/initial-state": "^2.0.0",
     "@nextcloud/l10n": "^2.1.0",
     "@nextcloud/logger": "^2.5.0",