Merge pull request #71 from nextcloud/fix/environment/packages

Update configs and removed unused dependencies

.babelrc.js

@@ -2,12 +2,7 @@ module.exports = {
 	plugins: ['@babel/plugin-syntax-dynamic-import'],
 	presets: [
 		[
-			'@babel/preset-env',
+			'@babel/preset-env'
-			{
-				targets: {
-					browsers: ['last 2 versions', 'ie >= 11']
-				}
-			}
 		]
 	]
 }

.gitignore

@@ -5,6 +5,7 @@
 build/
 css/*.map
 js/*forms.*
+js/chunks/
 js/*.svg
 nbproject/
 node_modules/
@@ -19,3 +20,4 @@ yarn-error.log
 *.sln
 *.suo
 .svn
+vendor/

.stylelintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+	extends: 'stylelint-config-recommended-scss',
+	rules: {
+		indentation: 'tab',
+		'selector-type-no-unknown': null,
+		'number-leading-zero': null,
+		'rule-empty-line-before': [
+			'always',
+			{
+				ignore: ['after-comment', 'inside-block']
+			}
+		],
+		'declaration-empty-line-before': [
+			'never',
+			{
+				ignore: ['after-declaration']
+			}
+		],
+		'comment-empty-line-before': null,
+		'selector-type-case': null,
+		'selector-list-comma-newline-after': null,
+		'no-descending-specificity': null,
+		'string-quotes': 'single'
+	},
+	plugins: ['stylelint-scss']
+}

Makefile

@@ -9,7 +9,6 @@
 # * npm
 # * curl: used if phpunit and composer are not installed to fetch them from the web
 # * tar: for building the archive
-yarn_install=$(shell which yarn)
 app_name=forms
 
 project_dir=$(CURDIR)
@@ -21,17 +20,7 @@ appstore_package_name=$(appstore_build_dir)/$(app_name)
 nc_cert_dir=$(HOME)/.nextcloud/certificates
 composer=$(shell which composer 2> /dev/null)
 
-all: dev-setup appstore
+all: dev-setup lint build-js-production test
-
-# Dev environment setup
-dev-setup: clean-dev npm-init composer
-
-npm-init:
-ifeq (,$(yarn_install))
-	npm install
-else
-	yarn
-endif
 
 # a copy is fetched from the web
 .PHONY: composer
@@ -48,28 +37,51 @@ else
 	composer update --prefer-dist
 endif
 
-# Lint
+# Dev env management
+dev-setup: clean clean-dev composer npm-init
+
+npm-init:
+	npm install
+
+npm-update:
+	npm update
+
+# Building
+build-js:
+	npm run dev
+
+build-js-production:
+	npm run build
+
+watch-js:
+	npm run watch
+
+# Linting
 lint:
 	npm run lint
 
 lint-fix:
 	npm run lint:fix
 
-# Removes the appstore build and compiled js files
+# Style linting
+stylelint:
+	npm run stylelint
+
+stylelint-fix:
+	npm run stylelint:fix
+
+# Cleaning
 .PHONY: clean
 clean:
 	rm -rf $(build_dir)
+	rm -rf js/chunks
 	rm -f js/forms.js
 	rm -f js/forms.js.map
 
-clean-dev: clean
+clean-dev:
 	rm -rf node_modules
-	rm -rf ./vendor
+	rm -rf vendor
 
-# Build js
-# Installs and updates the composer dependencies. If composer is not installed
-build-js-production:
-		npm run build
 
 # Builds the source package for the app store, ignores php and js tests
 .PHONY: appstore

README.md

@@ -6,59 +6,44 @@ Forms allows the creation of shareable forms, with multiple question types and p
 **Note**: This app is tested with Apache2 webserver, MySQL database, and apt-get package manager. To use alternatives, replace the relevant commands with those of your technology. This document assumes that a working
 NextCloud development environment has been installed. See https://docs.nextcloud.com/server/stable/developer_manual/general/devenv.html for help with this.
 
-## Installation
+## Build the app
-### Download the Forms Codebase
 
-```sh
+``` bash
-$ cd /var/www/html/nextcloud/apps
+# set up and build for production
-$ git clone https://github.com/nextcloud/forms.git
+make
+
+# install dependencies
+make dev-setup
+
+# build for dev and watch changes
+make watch-js
+
+# build for dev
+make build-js
+
+# build for production with minification
+make build-js-production
+
+```
+## Running tests
+You can use the provided Makefile to run all tests by using:
+
+_ps: only works if you're using php locally and have forms installed info your apps default folder_
+
+```
+make test
 ```
 
-### Install Prerequisites and Dependencies
+## :v: Code of conduct
-#### Install NPM
-```sh
-$ apt-get npm
-```
 
-#### Install Yarn
+The Nextcloud community has core values that are shared between all members during conferences,
-```sh
+hackweeks and on all interactions in online platforms including [Github](https://github.com/nextcloud) and [Forums](https://help.nextcloud.com).
-$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
+If you contribute, participate or interact with this community, please respect [our shared values](https://nextcloud.com/code-of-conduct/). :relieved:
-$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
-$ apt update
-$ apt install yarn
-```
-#### Update NodeJS
-```sh
-$ npm install -g n
-$ n stable
-```
-### Build the App
-```sh
-$ cd /var/www/html/nextcloud/apps/forms
-$ make all
-```
 
-### Start Webserver / Database
+## :heart: How to create a pull request
-```sh
-$ service apache2 start
-$ service mysql start
-```
 
-### Enable the App
+This guide will help you get started: 
-- Open NextCloud in your browser of choice
+- :dancer: :smile: [Opening a pull request](https://opensource.guide/how-to-contribute/#opening-a-pull-request) 
-- Click on the user icon in the top right of the screen, and select Apps from the drop down menu
--	Find the Forms app in the list and click enable
--	The app will now be fully functional! The forms icon will appear on the top toolbar of NextCloud after it has been enabled
-
-
-### To Rebuild
-```
-$ cd /var/www/html/nextcloud/apps/forms
-$ npm run build
-$ service Apache2 restart
-$ service mysql restart
-```
-Refresh the page in your browser to reflect the changes.
 
 ## Code Overview
 The following are the most important code files for development of the Forms App.

css/colors.scss

@@ -10,22 +10,24 @@ $fg-unvoted: #f0db98;
 $fg-yes: #49bc49;
 
 // Icon definitions
-@mixin icon-color($icon, $dir, $color, $version: 1, $core: false)
+@include icon-black-white('app', 'forms', 2);
-.icon-app {
+
-	@include icon-color('app','forms',$color-text-maxcontrast)
-}
 .icon-yes {
-	@include icon-color('checkmark','actions',$fg-yes,1,true)
+	@include icon-color('checkmark', 'actions', $fg-yes, 1, true);
 }
+
 .icon-comment-yes {
-	@include icon-color('comment','actions',$fg-yes,1,true)
+	@include icon-color('comment', 'actions', $fg-yes, 1, true);
 }
+
 .icon-comment-no {
-	@include icon-color('comment','actions',$fg-no,1,true)
+	@include icon-color('comment', 'actions', $fg-no, 1, true);
 }
+
 .icon-no {
-	@include icon-color('close','actions',$fg-no,1,true)
+	@include icon-color('close', 'actions', $fg-no, 1, true);
 }
+
 .icon-maybe {
-	@include icon-color('maybe-vote-variant','forms',$fg-maybe)
+	@include icon-color('maybe-vote-variant', 'forms', $fg-maybe);
 }

css/main.scss

@@ -16,7 +16,7 @@ h1 {
 }
 
 #controls {
-    // adopted from NC13 for compatibily with OC10 and NC11-NC12
+	// adopted from NC13 for compatibily with OC10 and NC11-NC12
 	width: 100%;
 	position: relative;
 	top: 4px;
@@ -33,10 +33,9 @@ h1 {
 			flex-shrink: 0;
 		}
 	}
-
 }
 
-input[type="text"] {
+input[type='text'] {
 	display: block;
 	width: 100%;
 }

css/public.scss

@@ -1,6 +1,8 @@
-#header {	
+#header {
-	#appmenu,.header-right, nav {
+	#appmenu,
-	display:none;
+	.header-right,
+	nav {
+		display: none;
 	}
 }
 

css/sidebar.scss

@@ -12,202 +12,203 @@ $user-column-width: 265px;
 	border-left: 1px solid var(--color-border);
 	transition: margin-right 300ms;
 	z-index: 500;
-	> div, > ul {
+	> div,
+	> ul {
 		padding: 8px;
 	}
 }
 
-
+.authorRow {
-	.authorRow {
+	align-items: center;
-		align-items: center;
+	.author {
-		.author {
+		margin-left: 8px;
-			margin-left: 8px;
+		opacity: 0.5;
-			opacity: .5;
+		flex-grow: 1;
-			flex-grow: 1;
+		&.external {
-			&.external {
+			margin-right: 33px;
-				margin-right: 33px;
+			opacity: 1;
-				opacity: 1;
+			> input {
-				> input {
+				width: 100%;
-					width: 100%
-				}
 			}
 		}
 	}
+}
 
-	.detailsView  {
+.detailsView {
-		z-index: 1000 !important;
+	z-index: 1000 !important;
-		.close.flex-row {
+	.close.flex-row {
-			justify-content: flex-end;
+		justify-content: flex-end;
-			margin: 8px 8px 0 0;
+		margin: 8px 8px 0 0;
+	}
+
+	.header.flex-row {
+		flex-direction: row;
+		flex-grow: 0;
+		align-items: flex-start;
+		margin-left: 0;
+		margin-top: 0;
+		padding: 0 17px;
+	}
+
+	.formInformation {
+		width: 220px;
+		flex-grow: 1;
+		flex-shrink: 1;
+		padding-right: 15px;
+
+		.authorRow {
+			.leftLabel {
+				margin-right: 4px;
+			}
 		}
 
-		.header.flex-row {
+		.cloud {
-			flex-direction: row;
+			margin: 4px 0;
-			flex-grow: 0;
+
-			align-items: flex-start;
+			> span {
-			margin-left: 0;
+				color: var(--color-primary-text);
-			margin-top: 0;
+				margin: 2px;
-			padding: 0 17px;
+				padding: 2px 4px;
+				border-radius: var(--border-radius);
+				float: left;
+				text-shadow: 1px 1px var(--color-box-shadow);
+				background-color: var(--color-loading-light);
+			}
+			.open {
+				background-color: $fg-yes;
+			}
+			.expired {
+				background-color: $fg-no;
+			}
+			.information {
+				background-color: $bg-information;
+			}
+		}
+	}
+	#expired_info {
+		margin: 0 15px;
+	}
+
+	.formActions {
+		display: flex;
+		flex-direction: column;
+		margin-right: 15px;
+
+		.close {
+			margin: 15px;
+			background-position: right top;
+			height: 30px;
 		}
 
-		.formInformation {
+		> ul > li {
-			width: 220px;
+			&:focus,
+			&:hover,
+			&.active,
+			a.selected {
+				&,
+				> a {
+					opacity: 1;
+					box-shadow: inset 4px 0 var(--color-primary);
+				}
+			}
+
+			> a[class*='icon-'],
+			> ul > li > a[class*='icon-'],
+			> a[style*='background-image'],
+			> ul > li > a[style*='background-image'] {
+				padding-left: 44px;
+			}
+
+			> a,
+			> ul > li > a {
+				background-size: 16px 16px;
+				background-position: 14px center;
+				background-repeat: no-repeat;
+				display: block;
+				justify-content: space-between;
+				line-height: 44px;
+				min-height: 44px;
+				padding: 0 12px;
+				overflow: hidden;
+				box-sizing: border-box;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				color: var(--color-main-text);
+				opacity: 0.57;
+				flex: 1 1 0;
+				z-index: 100;
+			}
+			a,
+			.app-navigation-entry-deleted {
+				padding-left: 44px !important;
+			}
+		}
+	}
+	#configurationsTabView {
+		.configBox {
+			padding: 8px 8px;
+
+			> .title {
+				font-weight: bold;
+				margin-bottom: 4px;
+			}
+
+			> div {
+				padding-left: 4px;
+			}
+
+			input.hasDatepicker {
+				margin-left: 17px;
+			}
+			&.oneline {
+				width: 100%;
+			}
+		}
+	}
+	#commentsTabView {
+		.newCommentForm div.message:empty:before {
+			content: attr(data-placeholder);
+			color: grey;
+		}
+		#commentBox {
+			border: 1px solid var(--color-border-dark);
+			border-radius: var(--border-radius);
+			padding: 7px 6px;
+			margin: 3px 3px 3px 40px;
+			cursor: text;
+		}
+		.comment {
+			margin-bottom: 30px;
+
+			.date {
+				right: 0;
+				top: 5px;
+				opacity: 0.5;
+			}
+		}
+
+		.message {
+			margin-left: 40px;
 			flex-grow: 1;
 			flex-shrink: 1;
-			padding-right: 15px;
-
-			.authorRow {
-				.leftLabel {
-					margin-right: 4px;
-				}
-			}
-
-			.cloud {
-				margin: 4px 0;
-
-				> span {
-					color: var(--color-primary-text);
-					margin: 2px;
-					padding: 2px 4px;
-					border-radius: var(--border-radius);
-					float: left;
-					text-shadow: 1px 1px var(--color-box-shadow);
-					background-color: var(--color-loading-light);
-
-				}
-				.open {
-					background-color: $fg-yes;
-				}
-				.expired {
-					background-color: $fg-no;
-				}
-				.information {
-					background-color: $bg-information;
-				}
-			}
-		}
-		#expired_info {
-			margin: 0 15px;
 		}
 
-		.formActions {
+		.new-comment {
-			display: flex;
+			.submitComment {
-			flex-direction: column;
+				align-self: last baseline;
-			margin-right: 15px;
+				width: 30px;
-
+				margin: 0;
-			.close {
+				padding: 7px 9px;
-				margin: 15px;
+				background-color: transparent;
-				background-position: right top;
+				border: none;
-				height: 30px;
+				opacity: 0.3;
 			}
 
-			> ul > li {
+			.icon-loading-small {
-				&:focus, &:hover, &.active, a.selected {
+				float: left;
-					&, > a {
+				margin-top: 10px;
-						opacity: 1;
+				display: none;
-						box-shadow: inset 4px 0 var(--color-primary);
-					}
-				}
-
-				> a[class*="icon-"],
-				> ul > li > a[class*="icon-"],
-				> a[style*="background-image"],
-				> ul > li > a[style*="background-image"] {
-					padding-left: 44px;
-				}
-
-				> a,
-				> ul > li > a {
-					background-size: 16px 16px;
-					background-position: 14px center;
-					background-repeat: no-repeat;
-					display: block;
-					justify-content: space-between;
-					line-height: 44px;
-					min-height: 44px;
-					padding: 0 12px;
-					overflow: hidden;
-					box-sizing: border-box;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					color: var(--color-main-text);
-					opacity: 0.57;
-					flex: 1 1 0;
-					z-index: 100;
-				}
-				a,
-				.app-navigation-entry-deleted {
-					padding-left: 44px !important;
-				}
-			}
-		}
-		#configurationsTabView {
-			.configBox {
-				padding: 8px 8px;
-
-				> .title {
-					font-weight: bold;
-					margin-bottom: 4px;
-				}
-
-				> div {
-					padding-left: 4px;
-				}
-
-				input.hasDatepicker {
-					margin-left:17px;
-				}
-				&.oneline {
-					width: 100%;
-				}
-			}
-		}
-		#commentsTabView {
-
-			.newCommentForm div.message:empty:before {
-				content: attr(data-placeholder);
-				color: grey;
-			}
-			#commentBox {
-				border: 1px solid var(--color-border-dark);
-				border-radius: var(--border-radius);
-				padding: 7px 6px;
-				margin: 3px 3px 3px 40px;
-				cursor: text;
-			}
-			.comment {
-				margin-bottom: 30px;
-
-				.date {
-					right: 0;
-					top: 5px;
-					opacity: .5;
-				}
-			}
-
-			.message {
-				margin-left: 40px;
-				flex-grow: 1;
-				flex-shrink: 1;
-			}
-
-
-			.new-comment {
-				.submitComment {
-					align-self: last baseline;
-					width: 30px;
-					margin: 0;
-					padding: 7px 9px;
-					background-color: transparent;
-					border: none;
-					opacity: .3;
-				}
-
-				.icon-loading-small {
-					float: left;
-					margin-top: 10px;
-					display: none;
-				}
 			}
 		}
 	}
+}

css/vote.scss

@@ -4,39 +4,40 @@
 	margin-top: 20px;
 }
 
-.sv-q-description{
+.sv-q-description {
-    font-size: 420px;
+	font-size: 420px;
 }
 
-.sv_container{
+.sv_container {
-    h3 {
+	h3 {
-        width: 400px;
+		width: 400px;
-        font-size: 30px;
+		font-size: 30px;
-    }
+	}
 }
 
 .sv_qstn .sq-root {
-    border: 1px solid gray;
+	border: 1px solid gray;
-    border-left: 4px solid #18a689;
+	border-left: 4px solid #18a689;
-    border-radius: 5px;
+	border-radius: 5px;
-    padding: 20px;
+	padding: 20px;
-    width: 400px;
+	width: 400px;
-    margin-bottom: 30px;
+	margin-bottom: 30px;
-		font-size: 18px;
+	font-size: 18px;
 }
 
 .sq-title {
-    font-size: 20px;
+	font-size: 20px;
-    margin-left: 20px;
+	margin-left: 20px;
 }
 
 .sq-title-required {
-    color: black;
+	color: black;
 }
 
 .sq-label {
-    margin-left: 30px;
+	margin-left: 30px;
 }
+
 .sq-item:nth-child(1) {
-    margin-bottom: 5px;
+	margin-bottom: 5px;
 }

package.json

@@ -58,11 +58,13 @@
 	"private": true,
 	"main": "src/js/main.js",
 	"scripts": {
-		"dev": "webpack --config webpack.dev.js",
+		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.js",
-		"watch": "webpack --progress --watch --config src/webpack.dev.js",
+		"dev": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js",
-		"build": "webpack --progress --hide-modules --config src/webpack.prod.js",
+		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
+		"stylelint": "stylelint src",
+		"stylelint:fix": "stylelint src --fix",
 		"test": "jest",
 		"test:coverage": "jest --coverage"
 	},
@@ -71,17 +73,12 @@
 		"moment": "^2.23.0",
 		"nextcloud-axios": "^0.2.1",
 		"nextcloud-vue": "^0.12.3",
-		"v-click-outside": "^2.0.2",
+		"vue": "^2.6.10",
-		"v-tooltip": "^2.0.0-rc.33",
-		"vue": "^2.6.8",
-		"vue-click-outside": "^1.0.7",
 		"vue-clipboard2": "^0.3.1",
 		"vue-router": "^3.1.3"
 	},
 	"browserslist": [
-		"> 1%",
+		"extends browserslist-config-nextcloud"
-		"last 2 versions",
-		"not ie <= 11"
 	],
 	"engines": {
 		"node": ">=10.0.0"
@@ -92,32 +89,30 @@
 		"@babel/preset-env": "^7.6.0",
 		"babel-eslint": "^10.0.1",
 		"babel-loader": "^8.0.4",
+		"browserslist-config-nextcloud": "0.0.1",
 		"css-loader": "^3.2.0",
-		"eslint": "^5.14.1",
+		"eslint": "^5.16.0",
 		"eslint-config-standard": "^12.0.0",
-		"eslint-friendly-formatter": "^4.0.1",
+		"eslint-import-resolver-webpack": "^0.11.1",
 		"eslint-loader": "^3.0.0",
-		"eslint-plugin-import": "^2.16.0",
+		"eslint-plugin-import": "^2.18.2",
-		"eslint-plugin-node": "^10.0.0",
+		"eslint-plugin-nextcloud": "^0.3.0",
-		"eslint-plugin-promise": "^4.0.1",
+		"eslint-plugin-node": "^9.2.0",
-		"eslint-plugin-standard": "^4.0.0",
+		"eslint-plugin-promise": "^4.2.1",
-		"eslint-plugin-vue": "^5.2.2",
+		"eslint-plugin-standard": "^4.0.1",
-		"extract-text-webpack-plugin": "^3.0.2",
+		"eslint-plugin-vue": "^5.2.3",
 		"file-loader": "^4.2.0",
-		"mini-css-extract-plugin": "^0.8.0",
+		"node-sass": "^4.12.0",
-		"node-sass": "^4.11.0",
+		"sass-loader": "^7.3.1",
-		"prettier-eslint": "^9.0.0",
+		"stylelint": "^8.4.0",
-		"raw-loader": "^3.1.0",
+		"stylelint-config-recommended-scss": "^3.3.0",
-		"sass-loader": "^7.1.0",
-		"stylelint": "^10.1.0",
-		"stylelint-config-recommended-scss": "^3.2.0",
 		"stylelint-scss": "^3.10.1",
 		"stylelint-webpack-plugin": "^0.10.5",
-		"vue-loader": "^15.7.0",
+		"vue-loader": "^15.7.1",
 		"vue-style-loader": "^4.1.1",
-		"vue-template-compiler": "^2.6.8",
+		"vue-template-compiler": "^2.6.10",
-		"webpack": "^4.31.0",
+		"webpack": "^4.39.3",
 		"webpack-cli": "^3.3.8",
-		"webpack-merge": "^4.1.5"
+		"webpack-merge": "^4.2.2"
 	}
 }

src/App.vue

@@ -32,14 +32,14 @@ export default {
 }
 </script>
 
-<style  lang="scss">
+<style lang="scss">
 #app-forms {
 	width: 100%;
 	display: flex;
 }
 
 #app-content {
-    width: 100%;
+	width: 100%;
-    display: flex;
+	display: flex;
 }
 </style>

src/components/shareDiv.vue

@@ -65,6 +65,7 @@
 
 <script>
 import { Multiselect } from 'nextcloud-vue'
+import axios from 'nextcloud-axios'
 
 export default {
 	components: {
@@ -127,7 +128,7 @@ export default {
 		loadUsersAsync(query) {
 			this.isLoading = false
 			this.siteUsersListOptions.query = query
-			this.$http.post(OC.generateUrl('apps/forms/get/siteusers'), this.siteUsersListOptions)
+			axios.post(OC.generateUrl('apps/forms/get/siteusers'), this.siteUsersListOptions)
 				.then((response) => {
 					this.users = response.data.siteusers
 					this.isLoading = false

src/main.js

@@ -23,9 +23,7 @@
 
 import Vue from 'vue'
 import router from './router'
-import axios from 'nextcloud-axios'
 import App from './App.vue'
-import vClickOutside from 'v-click-outside'
 import VueClipboard from 'vue-clipboard2'
 
 import { DatetimePicker, PopoverMenu, Tooltip } from 'nextcloud-vue'
@@ -38,8 +36,6 @@ import SideBarClose from './components/sideBarClose'
 import ShareDiv from './components/shareDiv'
 import LoadingOverlay from './components/_base-LoadingOverlay'
 
-Vue.config.debug = true
-Vue.config.devTools = true
 Vue.component('Controls', Controls)
 Vue.component('PopoverMenu', PopoverMenu)
 Vue.component('DatePicker', DatetimePicker)
@@ -51,13 +47,11 @@ Vue.component('LoadingOverlay', LoadingOverlay)
 
 Vue.directive('tooltip', Tooltip)
 
-Vue.use(vClickOutside)
 Vue.use(VueClipboard)
 Vue.use(Modal)
 
 Vue.prototype.t = t
 Vue.prototype.n = n
-Vue.prototype.$http = axios
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 

src/views/Create.vue

@@ -187,6 +187,7 @@
 <script>
 import moment from 'moment'
 import QuizFormItem from '../components/quizFormItem'
+import axios from 'nextcloud-axios'
 
 export default {
 	name: 'Create',
@@ -469,7 +470,7 @@ export default {
 				this.titleEmpty = false
 				// this.form.event.expirationDate = moment(this.form.event.expirationDate).utc()
 
-				this.$http.post(OC.generateUrl('apps/forms/write/form'), this.form)
+				axios.post(OC.generateUrl('apps/forms/write/form'), this.form)
 					.then((response) => {
 						this.form.mode = 'edit'
 						this.form.event.hash = response.data.hash
@@ -490,7 +491,7 @@ export default {
 
 		loadForm(hash) {
 			this.loadingForm = true
-			this.$http.get(OC.generateUrl('apps/forms/get/form/' + hash))
+			axios.get(OC.generateUrl('apps/forms/get/form/' + hash))
 				.then((response) => {
 					this.form = response.data
 					if (this.form.event.expirationDate !== null) {

src/views/List.vue

@@ -90,7 +90,7 @@ export default {
 	methods: {
 		loadForms() {
 			this.loading = true
-			this.$http.get(OC.generateUrl('apps/forms/get/forms'))
+			axios.get(OC.generateUrl('apps/forms/get/forms'))
 				.then((response) => {
 					this.forms = response.data
 					this.loading = false

src/views/Results.vue

@@ -62,6 +62,7 @@
 // import lodash from 'lodash'
 import resultItem from '../components/resultItem'
 import json2csvParser from 'json2csv'
+import axios from 'nextcloud-axios'
 
 export default {
 	name: 'Results',
@@ -119,7 +120,7 @@ export default {
 	methods: {
 		loadForms() {
 			this.loading = true
-			this.$http.get(OC.generateUrl('apps/forms/get/votes/' + this.$route.params.hash))
+			axios.get(OC.generateUrl('apps/forms/get/votes/' + this.$route.params.hash))
 				.then((response) => {
 					if (response.data == null) {
 						this.votes = null
@@ -145,7 +146,7 @@ export default {
 		download() {
 
 			this.loading = true
-			this.$http.get(OC.generateUrl('apps/forms/get/event/' + this.$route.params.hash))
+			axios.get(OC.generateUrl('apps/forms/get/event/' + this.$route.params.hash))
 				.then((response) => {
 					this.json2csvParser = ['userId', 'voteOptionId', 'voteOptionText', 'voteAnswer']
 					var element = document.createElement('a')

src/webpack.common.js

@@ -1,56 +0,0 @@
-/** jshint esversion: 6 */
-const path = require('path')
-const { VueLoaderPlugin } = require('vue-loader')
-
-module.exports = {
-	entry: {
-		'forms': path.join(__dirname, 'main.js')
-	},
-	output: {
-		path: path.resolve(__dirname, '../js'),
-		publicPath: '/js/',
-		filename: '[name].js'
-	},
-	module: {
-		rules: [
-			{
-				test: /\.css$/,
-				use: [
-					'vue-style-loader',
-					'css-loader'
-				]
-			},
-			{
-				test: /\.scss$/,
-				use: [
-					'vue-style-loader',
-					'css-loader',
-					'sass-loader'
-				]
-			},
-			{
-				test: /\.vue$/,
-				loader: 'vue-loader'
-			},
-			{
-				test: /\.js$/,
-				loader: 'babel-loader',
-				exclude: /node_modules/
-			},
-			{
-				test: /\.(png|jpg|gif|svg)$/,
-				loader: 'file-loader',
-				options: {
-					name: '[name].[ext]?[hash]'
-				}
-			}
-		]
-	},
-	plugins: [new VueLoaderPlugin()],
-	resolve: {
-		alias: {
-			vue$: 'vue/dist/vue.esm.js'
-		},
-		extensions: ['*', '.js', '.vue', '.json']
-	}
-}

webpack.common.js

@@ -0,0 +1,55 @@
+const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader')
+const StyleLintPlugin = require('stylelint-webpack-plugin')
+
+module.exports = {
+	entry: path.join(__dirname, 'src', 'main.js'),
+	output: {
+		path: path.resolve(__dirname, './js'),
+		publicPath: '/js/',
+		filename: 'forms.js',
+		chunkFilename: 'chunks/[name].js'
+	},
+	module: {
+		rules: [
+			{
+				test: /\.css$/,
+				use: ['vue-style-loader', 'css-loader']
+			},
+			{
+				test: /\.scss$/,
+				use: ['vue-style-loader', 'css-loader', 'sass-loader']
+			},
+			{
+				test: /\.(js|vue)$/,
+				use: 'eslint-loader',
+				exclude: /node_modules/,
+				enforce: 'pre'
+			},
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.js$/,
+				loader: 'babel-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.(png|jpg|gif|svg)$/,
+				loader: 'file-loader',
+				options: {
+					name: '[name].[ext]?[hash]'
+				}
+			}
+		]
+	},
+	plugins: [
+		new VueLoaderPlugin(),
+		new StyleLintPlugin()
+	],
+	resolve: {
+		extensions: ['*', '.js', '.vue']
+	}
+}