Add eslint global nextcloud config

.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+	globals: {
+		__webpack_nonce__: true,
+		__webpack_public_path__: true,
+		_: true,
+		$: true,
+		moment: true,
+		escapeHTML: true,
+		oc_userconfig: true
+	},
+	extends: ['nextcloud']
+}

Makefile

@@ -1,13 +1,15 @@
 all: clean dev-setup build-js-production
 
-dev-setup: clean-dev npm-init
+# Dev env management
+dev-setup: clean clean-dev npm-init
 
 npm-init:
 	npm install
 
 npm-update:
 	npm update
 
+# Building
 build-js:
 	npm run dev
 
@@ -17,22 +19,30 @@ build-js-production:
 watch-js:
 	npm run watch
 
-clean-dev:
-	rm -rf node_modules
+# Linting
+lint-fix:
+	npm run lint:fix
+
+lint-fix-watch:
+	npm run lint:fix-watch
 
+# Cleaning
 clean:
 	rm -rf apps/accessibility/js/
 	rm -rf apps/comments/js/
 	rm -rf apps/files_sharing/js/dist/
 	rm -rf apps/files_trashbin/js/
 	rm -rf apps/files_versions/js/
 	rm -rf apps/oauth2/js/
+	rm -rf apps/settings/js/vue-*
 	rm -rf apps/systemtags/js/systemtags.*
 	rm -rf apps/twofactor_backupcodes/js
 	rm -rf apps/updatenotification/js/updatenotification.*
 	rm -rf apps/workflowengine/js/
 	rm -rf core/js/dist
-	rm -rf settings/js/vue-*
+
+clean-dev:
+	rm -rf node_modules
 
 clean-git: clean
 	git checkout -- apps/accessibility/js/
@@ -41,9 +51,9 @@ clean-git: clean
 	git checkout -- apps/files_trashbin/js/
 	git checkout -- apps/files_versions/js/
 	git checkout -- apps/oauth2/js/
+	git checkout -- apps/settings/js/vue-*
 	git checkout -- apps/systemtags/js/systemtags.*
 	git checkout -- apps/twofactor_backupcodes/js
 	git checkout -- apps/updatenotification/js/updatenotification.*
 	git checkout -- apps/workflowengine/js/
 	git checkout -- core/js/dist
-	git checkout -- settings/js/vue-*

apps/accessibility/src/App.vue → apps/accessibility/src/Accessibility.vue

@@ -1,60 +1,56 @@
 <template>
 	<div id="accessibility" class="section">
-		<h2>{{t('accessibility', 'Accessibility')}}</h2>
+		<h2>{{ t('accessibility', 'Accessibility') }}</h2>
 		<p v-html="description" />
 		<p v-html="descriptionDetail" />
 
 		<div class="preview-list">
-			<preview :preview="highcontrast"
-				 :key="highcontrast.id" :selected="selected.highcontrast"
-				 v-on:select="selectHighContrast"></preview>
-			<preview v-for="preview in themes" :preview="preview"
-				 :key="preview.id" :selected="selected.theme"
-				 v-on:select="selectTheme"></preview>
-			<preview v-for="preview in fonts" :preview="preview"
-				 :key="preview.id" :selected="selected.font"
-				 v-on:select="selectFont"></preview>
+			<ItemPreview :key="highcontrast.id"
+				:preview="highcontrast"
+				:selected="selected.highcontrast"
+				@select="selectHighContrast" />
+			<ItemPreview v-for="preview in themes"
+				:key="preview.id"
+				:preview="preview"
+				:selected="selected.theme"
+				@select="selectTheme" />
+			<ItemPreview v-for="preview in fonts"
+				:key="preview.id"
+				:preview="preview"
+				:selected="selected.font"
+				@select="selectFont" />
 		</div>
 	</div>
 </template>
 
 <script>
-import preview from './components/itemPreview';
-import axios from 'nextcloud-axios';
+import ItemPreview from './components/ItemPreview'
+import axios from 'nextcloud-axios'
 
 export default {
 	name: 'Accessibility',
-	components: { preview },
-	beforeMount() {
-		// importing server data into the app
-		const serverDataElmt = document.getElementById('serverData');
-		if (serverDataElmt !== null) {
-			this.serverData = JSON.parse(
-				document.getElementById('serverData').dataset.server
-			);
-		}
-	},
+	components: { ItemPreview },
 	data() {
 		return {
 			serverData: []
-		};
+		}
 	},
 	computed: {
 		themes() {
-			return this.serverData.themes;
+			return this.serverData.themes
 		},
 		highcontrast() {
-			return this.serverData.highcontrast;
+			return this.serverData.highcontrast
 		},
 		fonts() {
-			return this.serverData.fonts;
+			return this.serverData.fonts
 		},
 		selected() {
 			return {
 				theme: this.serverData.selected.theme,
 				highcontrast: this.serverData.selected.highcontrast,
 				font: this.serverData.selected.font
-			};
+			}
 		},
 		description() {
 			// using the `t` replace method escape html, we have to do it manually :/
@@ -66,7 +62,7 @@ export default {
 				We aim to be compliant with the {guidelines} 2.1 on AA level,
 				with the high contrast theme even on AAA level.`
 			)
-			.replace('{guidelines}', this.guidelinesLink)
+				.replace('{guidelines}', this.guidelinesLink)
 		},
 		guidelinesLink() {
 			return `<a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">${t('accessibility', 'Web Content Accessibility Guidelines')}</a>`
@@ -77,8 +73,8 @@ export default {
 				`If you find any issues, don’t hesitate to report them on {issuetracker}.
 				And if you want to get involved, come join {designteam}!`
 			)
-			.replace('{issuetracker}', this.issuetrackerLink)
-			.replace('{designteam}', this.designteamLink)
+				.replace('{issuetracker}', this.issuetrackerLink)
+				.replace('{designteam}', this.designteamLink)
 		},
 		issuetrackerLink() {
 			return `<a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">${t('accessibility', 'our issue tracker')}</a>`
@@ -87,19 +83,28 @@ export default {
 			return `<a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">${t('accessibility', 'our design team')}</a>`
 		}
 	},
+	beforeMount() {
+		// importing server data into the app
+		const serverDataElmt = document.getElementById('serverData')
+		if (serverDataElmt !== null) {
+			this.serverData = JSON.parse(
+				document.getElementById('serverData').dataset.server
+			)
+		}
+	},
 	methods: {
 		selectHighContrast(id) {
-			this.selectItem('highcontrast', id);
+			this.selectItem('highcontrast', id)
 		},
 		selectTheme(id, idSelectedBefore) {
-			this.selectItem('theme', id);
-			document.body.classList.remove(idSelectedBefore);
+			this.selectItem('theme', id)
+			document.body.classList.remove(idSelectedBefore)
 			if (id) {
-				document.body.classList.add(id);
+				document.body.classList.add(id)
 			}
 		},
 		selectFont(id) {
-			this.selectItem('font', id);
+			this.selectItem('font', id)
 		},
 
 		/**
@@ -110,43 +115,40 @@ export default {
 		 * @param {string} id the data of the change
 		 */
 		selectItem(type, id) {
-			axios.post(
-					OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type,
-					{ value: id }
-				)
+			axios.post(OC.linkToOCS('apps/accessibility/api/v1/config', 2) + type, { value: id })
 				.then(response => {
-					this.serverData.selected[type] = id;
+					this.serverData.selected[type] = id
 
 					// Remove old link
-					let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]');
+					let link = document.querySelector('link[rel=stylesheet][href*=accessibility][href*=user-]')
 					if (!link) {
 						// insert new css
-						let link = document.createElement('link');
-						link.rel = 'stylesheet';
-						link.href = OC.generateUrl('/apps/accessibility/css/user-style.css') + '?v=' + new Date().getTime();
-						document.head.appendChild(link);
+						let link = document.createElement('link')
+						link.rel = 'stylesheet'
+						link.href = OC.generateUrl('/apps/accessibility/css/user-style.css') + '?v=' + new Date().getTime()
+						document.head.appendChild(link)
 					} else {
 						// compare arrays
 						if (
-							JSON.stringify(Object.values(this.selected)) ===
-							JSON.stringify([false, false])
+							JSON.stringify(Object.values(this.selected))
+							=== JSON.stringify([false, false])
 						) {
 							// if nothing is selected, blindly remove the css
-							link.remove();
+							link.remove()
 						} else {
 							// force update
-							link.href =
-								link.href.split('?')[0] +
-								'?v=' +
-								new Date().getTime();
+							link.href
+								= link.href.split('?')[0]
+								+ '?v='
+								+ new Date().getTime()
 						}
 					}
 				})
 				.catch(err => {
-					console.log(err, err.response);
-					OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.'));
-				});
+					console.error(err, err.response)
+					OC.Notification.showTemporary(t('accessibility', err.response.data.ocs.meta.message + '. Unable to apply the setting.'))
+				})
 		}
 	}
-};
+}
 </script>

apps/accessibility/src/components/ItemPreview.vue

@@ -0,0 +1,40 @@
+<template>
+	<div :class="{preview: true}">
+		<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}" />
+		<div class="preview-description">
+			<h3>{{ preview.title }}</h3>
+			<p>{{ preview.text }}</p>
+			<input :id="'accessibility-' + preview.id"
+				v-model="checked"
+				type="checkbox"
+				class="checkbox">
+			<label :for="'accessibility-' + preview.id">{{ t('accessibility', 'Enable') }} {{ preview.title.toLowerCase() }}</label>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ItemPreview',
+	props: {
+		preview: {
+			type: Object,
+			required: true
+		},
+		selected: {
+			type: String,
+			default: null
+		}
+	},
+	computed: {
+		checked: {
+			get() {
+				return this.selected === this.preview.id
+			},
+			set(checked) {
+				this.$emit('select', checked ? this.preview.id : false,	this.selected)
+			}
+		}
+	}
+}
+</script>

apps/accessibility/src/main.js

@@ -1,12 +1,12 @@
-import Vue from 'vue';
-import App from './App.vue';
+import Vue from 'vue'
+import App from './Accessibility.vue'
 
 /* global t */
 // bind to window
-Vue.prototype.OC = OC;
-Vue.prototype.t = t;
+Vue.prototype.OC = OC
+Vue.prototype.t = t
 
-new Vue({
+export default new Vue({
 	el: '#accessibility',
 	render: h => h(App)
-});
+})