Add personal settings

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
2018-10-18 08:19:57 +02:00 · 2018-10-18 08:19:57 +02:00 · 9d1187370f
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@ -21,11 +21,6 @@

 return [
 	'routes' => [
-		[
-			'name' => 'Settings#getState',
-			'url' => '/settings/state',
-			'verb' => 'GET',
-		],
 		[
 			'name' => 'Settings#setState',
 			'url' => '/settings/state',
--- a/lib/Controller/SettingsController.php
+++ b/lib/Controller/SettingsController.php
@ -27,6 +27,7 @@ namespace OCA\TwoFactorNextcloudNotification\Controller;
 use OCA\TwoFactorNextcloudNotification\Event\StateChanged;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\DataResponse;
+use OCP\AppFramework\Http\JSONResponse;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\IUserSession;
@ -55,15 +56,14 @@ class SettingsController extends Controller {
 		$this->userSession = $userSession;
 	}

-	public function getState(): DataResponse {
-		return new DataResponse([
-			'enabled' => $this->config->getAppValue($this->appName, $this->userSession->getUser()->getUID() . '_enabled', '0') === '1',
-		]);
-	}
-
-	public function setState(bool $state): DataResponse {
+	/**
+	 * @NoAdminRequired
+	 */
+	public function setState(bool $state): JSONResponse {
 		$this->config->setAppValue($this->appName, $this->userSession->getUser()->getUID() . '_enabled', $state ? '1' : '0');
 		$this->dispatcher->dispatch(StateChanged::class, new StateChanged($this->userSession->getUser(), $state));
-		return new DataResponse();
+		return new JSONResponse([
+			'enabled' => $state
+		]);
 	}
 }
--- a/lib/Provider/NotificationProvider.php
+++ b/lib/Provider/NotificationProvider.php
@ -141,6 +141,8 @@ class NotificationProvider implements IProvider, IProvidesPersonalSettings {
 	}

 	public function getPersonalSettings(IUser $user): IPersonalProviderSettings {
-		return new Personal();
+		return new Personal(
+			$this->config->getAppValue(Application::APP_ID, $user->getUID() . '_enabled', '0') === '1'
+		);
 	}
 }
--- a/lib/Settings/Personal.php
+++ b/lib/Settings/Personal.php
@ -26,12 +26,23 @@ namespace OCA\TwoFactorNextcloudNotification\Settings;

 use OCA\TwoFactorNextcloudNotification\AppInfo\Application;
 use OCP\Authentication\TwoFactorAuth\IPersonalProviderSettings;
+use OCP\IConfig;
+use OCP\IUser;
 use OCP\Template;

 class Personal implements IPersonalProviderSettings {

+	/** @var bool */
+	private $enabled;
+
+	public function __construct(bool $enabled) {
+		$this->enabled = $enabled;
+	}
+
 	public function getBody(): Template {
-		return new Template(Application::APP_ID, 'personal');
+		$template = new Template(Application::APP_ID, 'personal');
+		$template->assign('enabled', $this->enabled);
+		return $template;
 	}

 }
--- a/package-lock.json
+++ b/package-lock.json
@ -3261,6 +3261,59 @@
        "is-buffer": "^1.1.5"
      }
    },
+    "babel-code-frame": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
+      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3",
+        "esutils": "^2.0.2",
+        "js-tokens": "^3.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
    "babel-helper-vue-jsx-merge-props": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@ -3891,6 +3944,77 @@
        "randomfill": "^1.0.3"
      }
    },
+    "css-loader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz",
+      "integrity": "sha512-tMXlTYf3mIMt3b0dDCOQFJiVvxbocJ5Ho577WiGPYPZcqVEO218L2iU22pDXzkTZCLDE+9AmGSUkWxeh/nZReA==",
+      "dev": true,
+      "requires": {
+        "babel-code-frame": "^6.26.0",
+        "css-selector-tokenizer": "^0.7.0",
+        "icss-utils": "^2.1.0",
+        "loader-utils": "^1.0.2",
+        "lodash.camelcase": "^4.3.0",
+        "postcss": "^6.0.23",
+        "postcss-modules-extract-imports": "^1.2.0",
+        "postcss-modules-local-by-default": "^1.2.0",
+        "postcss-modules-scope": "^1.1.0",
+        "postcss-modules-values": "^1.3.0",
+        "postcss-value-parser": "^3.3.0",
+        "source-list-map": "^2.0.0"
+      }
+    },
+    "css-selector-tokenizer": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz",
+      "integrity": "sha1-5piEdK6MlTR3v15+/s/OzNnPTIY=",
+      "dev": true,
+      "requires": {
+        "cssesc": "^0.1.0",
+        "fastparse": "^1.1.1",
+        "regexpu-core": "^1.0.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
+          "dev": true
+        },
+        "regexpu-core": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
+          "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
+          "dev": true,
+          "requires": {
+            "regenerate": "^1.2.1",
+            "regjsgen": "^0.2.0",
+            "regjsparser": "^0.1.4"
+          }
+        },
+        "regjsgen": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+          "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
+          "dev": true
+        },
+        "regjsparser": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
+          "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
+          "dev": true,
+          "requires": {
+            "jsesc": "~0.5.0"
+          }
+        }
+      }
+    },
+    "cssesc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
+      "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
+      "dev": true
+    },
    "cyclist": {
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@ -3903,6 +4027,12 @@
      "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
      "dev": true
    },
+    "de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
+      "dev": true
+    },
    "debug": {
      "version": "3.2.6",
      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
@ -4320,6 +4450,12 @@
      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
      "dev": true
    },
+    "fastparse": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz",
+      "integrity": "sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg=",
+      "dev": true
+    },
    "fill-range": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@ -5054,6 +5190,23 @@
        "function-bind": "^1.1.1"
      }
    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        }
+      }
+    },
    "has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@ -5124,6 +5277,12 @@
        "minimalistic-assert": "^1.0.1"
      }
    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -5141,6 +5300,21 @@
      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
      "dev": true
    },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+      "dev": true
+    },
+    "icss-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
+      "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1"
+      }
+    },
    "ieee754": {
      "version": "1.1.12",
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
@ -5551,6 +5725,12 @@
      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
      "dev": true
    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
+      "dev": true
+    },
    "lodash.debounce": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@ -6177,6 +6357,45 @@
        }
      }
    },
+    "postcss-modules-extract-imports": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz",
+      "integrity": "sha1-ZhQOzs447wa/DT41XWm/WdFB6oU=",
+      "dev": true,
+      "requires": {
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-modules-local-by-default": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+      "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+      "dev": true,
+      "requires": {
+        "css-selector-tokenizer": "^0.7.0",
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+      "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+      "dev": true,
+      "requires": {
+        "css-selector-tokenizer": "^0.7.0",
+        "postcss": "^6.0.1"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
+      "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+      "dev": true,
+      "requires": {
+        "icss-replace-symbols": "^1.1.0",
+        "postcss": "^6.0.1"
+      }
+    },
    "postcss-selector-parser": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
@ -6188,6 +6407,12 @@
        "uniq": "^1.0.1"
      }
    },
+    "postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "dev": true
+    },
    "prettier": {
      "version": "1.13.7",
      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.13.7.tgz",
@ -7276,12 +7501,27 @@
        "loader-utils": "^1.0.2"
      }
    },
+    "vue-template-compiler": {
+      "version": "2.5.17",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.17.tgz",
+      "integrity": "sha512-63uI4syCwtGR5IJvZM0LN5tVsahrelomHtCxvRkZPJ/Tf3ADm1U1wG6KWycK3qCfqR+ygM5vewUvmJ0REAYksg==",
+      "dev": true,
+      "requires": {
+        "de-indent": "^1.0.2",
+        "he": "^1.1.0"
+      }
+    },
    "vue-template-es2015-compiler": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz",
      "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
      "dev": true
    },
+    "vuex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
+    },
    "watchpack": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
--- a/package.json
+++ b/package.json
@ -30,14 +30,18 @@
  "dependencies": {
    "nextcloud-axios": "^0.1.2",
    "promise-poller": "^1.6.0",
-    "vue": "^2.5.17"
+    "vue": "^2.5.17",
+    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@vue/babel-preset-app": "^3.0.5",
    "babel-loader": "^8.0.4",
+    "css-loader": "^1.0.0",
    "vue-loader": "^15.4.2",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2",
    "webpack-merge": "^4.1.4"
--- a/src/components/PersonalSettings.vue
+++ b/src/components/PersonalSettings.vue
@ -0,0 +1,74 @@
+<!--
+  - @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<div v-if="loading">
+		<span class="icon-loading-small loading"></span>
+		<span> {{ t('twofactor_nextcloud_notifications', 'Use two-factor authentication via Nextcloud notifications') }} </span>
+	</div>
+	<div v-else>
+		<input type="checkbox"
+			   id="twofactor-notifications-enabled"
+			   class="checkbox"
+			   v-model="enabled"
+			   @change="toggleEnabled"
+			   :disabled="loading">
+		<label for="twofactor-notifications-enabled">{{ t('twofactor_nextcloud_notifications',	'Use two-factor authentication via Nextcloud notifications') }}</label>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'PersonalSettings',
+		data () {
+			return {
+				enabled: this.$store.state.enabled,
+				loading: false,
+			}
+		},
+		methods: {
+			toggleEnabled () {
+				this.loading = true
+
+				let action
+				if (this.enabled) {
+					action = this.$store.dispatch('enable')
+				} else {
+					action = this.$store.dispatch('disable')
+				}
+
+				action
+					.then(enabled => this.enabled = enabled)
+					.catch(console.error.bind(this))
+					.then(() => this.loading = false)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.loading {
+		display: inline-block;
+		vertical-align: middle;
+		margin-left: -2px;
+		margin-right: 1px;
+	}
+</style>
--- a/src/main-challenge.js
+++ b/src/main-challenge.js
@ -21,6 +21,11 @@

 import Axios from 'nextcloud-axios'
 import promisPoller from 'promise-poller'
+import Vue from "vue";
+
+import Nextcloud from './mixins/Nextcloud'
+
+Vue.mixin(Nextcloud)

 const poll = (url) => () => {
 	return Axios.get(url, {})
--- a/src/main-settings.js
+++ b/src/main-settings.js
@ -0,0 +1,41 @@
+/*
+ * @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import Vue from 'vue'
+
+import Nextcloud from './mixins/Nextcloud'
+import PersonalSettings from './components/PersonalSettings.vue'
+import store from './store'
+
+Vue.mixin(Nextcloud)
+
+const initialStateElem = document.getElementById('twofactor-notifications-initial-state')
+if (initialStateElem) {
+	const enabled = initialStateElem.value === 'true'
+	store.replaceState({
+		enabled
+	})
+}
+
+const View = Vue.extend(PersonalSettings)
+new View({
+	store
+}).$mount('#twofactor-notification-settings')
--- a/src/mixins/Nextcloud.js
+++ b/src/mixins/Nextcloud.js
@ -0,0 +1,26 @@
+/*
+ * @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export default {
+	methods: {
+		t
+	}
+}
--- a/src/services/SettingsService.js
+++ b/src/services/SettingsService.js
@ -0,0 +1,32 @@
+/*
+ * @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import Axios from 'nextcloud-axios'
+
+export function persist (enabled) {
+	const url = OC.generateUrl('/apps/twofactor_nextcloud_notification/settings/state')
+	const data = {
+		state: enabled
+	}
+
+	return Axios.post(url, data)
+		.then(resp => resp.data)
+}
--- a/src/store.js
+++ b/src/store.js
@ -0,0 +1,60 @@
+/*
+ * @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import {persist} from './services/SettingsService'
+
+Vue.use(Vuex)
+
+export const mutations = {
+	setEnabled (state, enabled) {
+		state.enabled = enabled
+	}
+}
+
+export const actions = {
+	enable ({commit}) {
+		return persist(true)
+			.then(({enabled}) => {
+				commit('setEnabled', enabled)
+				return enabled
+			})
+	},
+
+	disable ({commit}) {
+		return persist(false)
+			.then(({enabled}) => {
+				commit('setEnabled', enabled)
+				return enabled
+			})
+	}
+}
+
+export default new Vuex.Store({
+	strict: process.env.NODE_ENV !== 'production',
+	state: {
+		enabled: false
+	},
+	mutations,
+	actions
+})
--- a/src/webpack.common.js
+++ b/src/webpack.common.js
@ -2,15 +2,20 @@ const path = require('path');
 const { VueLoaderPlugin } = require('vue-loader');

 module.exports = {
-	entry: [
-		path.join(__dirname, 'main-challenge.js')
-	],
+	entry: {
+		challenge: path.join(__dirname, 'main-challenge.js'),
+		settings: path.join(__dirname, 'main-settings.js')
+	},
 	output: {
 		path: path.resolve(__dirname, '../js'),
 		publicPath: '/js/'
 	},
 	module: {
 		rules: [
+			{
+				test: /\.css$/,
+				use: ['vue-style-loader', 'css-loader']
+			},
 			{
 				test: /\.vue$/,
 				loader: 'vue-loader'
--- a/templates/challenge.php
+++ b/templates/challenge.php
@ -1,5 +1,5 @@
 <?php
-script('twofactor_nextcloud_notification', 'main');
+script('twofactor_nextcloud_notification', 'challenge');
 ?>

 <input type="hidden" id="challenge-poll-token" value="<?php p($_['token']); ?>">
--- a/templates/personal.php
+++ b/templates/personal.php
@ -1,7 +1,7 @@
 <?php
-
+script('twofactor_nextcloud_notification', 'settings');
 ?>

-<div id="twofactor-notification-settings">
+<input type="hidden" id="twofactor-notifications-initial-state" value="<?php p($_['enabled'] ? 'true' : 'false'); ?>">

-</div>
+<div id="twofactor-notification-settings"></div>