Provide initial state for backupcodes in template

This saves a direct request to the server when loading the backup codes.
There is no need for this as the data is already known.

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>

4 files changed, 92 insertions, 30 deletions

diff --git a/apps/twofactor_backupcodes/src/service/BackupCodesService.js b/apps/twofactor_backupcodes/src/service/BackupCodesService.js
index 62e69ead68f..a42b7b8b5ad 100644
--- a/apps/twofactor_backupcodes/src/service/BackupCodesService.js
+++ b/apps/twofactor_backupcodes/src/service/BackupCodesService.js
@@ -1,11 +1,5 @@
 import Axios from 'nextcloud-axios'
 
-export function getState () {
-	const url = OC.generateUrl('/apps/twofactor_backupcodes/settings/state');
-
-	return Axios.get(url).then(resp => resp.data);
-}
-
 export function generateCodes () {
 	const url = OC.generateUrl('/apps/twofactor_backupcodes/settings/create');
 
diff --git a/apps/twofactor_backupcodes/src/settings.js b/apps/twofactor_backupcodes/src/settings.js
index 9534d802824..00b28bfde63 100644
--- a/apps/twofactor_backupcodes/src/settings.js
+++ b/apps/twofactor_backupcodes/src/settings.js
@@ -1,9 +1,15 @@
 import Vue from 'vue';
 import PersonalSettings from './views/PersonalSettings';
+import store from './store';
 
 Vue.prototype.t = t;
 
-export default new Vue({
-	el: '#twofactor-backupcodes-settings',
-	render: h => h(PersonalSettings)
-});
+const initialStateElem = JSON.parse(atob(document.getElementById('twofactor-backupcodes-initial-state').value));
+store.replaceState(
+	initialStateElem
+)
+
+const View = Vue.extend(PersonalSettings)
+new View({
+	store
+}).$mount('#twofactor-backupcodes-settings')
diff --git a/apps/twofactor_backupcodes/src/store.js b/apps/twofactor_backupcodes/src/store.js
new file mode 100644
index 00000000000..3af299ca619
--- /dev/null
+++ b/apps/twofactor_backupcodes/src/store.js
@@ -0,0 +1,69 @@
+/*
+ * @copyright 2019 Roeland Jago Douma <roeland@famdouma.nl>
+ *
+ * @author 2019 Roeland Jago Douma <roeland@famdouma.nl>
+ *
+ * @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 {generateCodes} from './service/BackupCodesService'
+
+Vue.use(Vuex)
+
+export const mutations = {
+	setEnabled(state, enabled) {
+		Vue.set(state, 'enabled', enabled)
+	},
+	setTotal(state, total) {
+		Vue.set(state, 'total', total)
+	},
+	setUsed(state, used) {
+		Vue.set(state, 'used', used)
+	},
+	setCodes(state, codes) {
+		Vue.set(state, 'codes', codes)
+	}
+}
+
+export const actions = {
+	generate ({commit}) {
+		commit('setEnabled', false);
+
+		return generateCodes()
+			.then(({codes, state})  => {
+				commit('setEnabled', state.enabled);
+				commit('setTotal', state.total);
+				commit('setUsed', state.used);
+				commit('setCodes', codes);
+				return true;
+			});
+	}
+}
+
+export default new Vuex.Store({
+	strict: process.env.NODE_ENV !== 'production',
+	state: {
+		enabled: false,
+		total: 0,
+		used: 0,
+		codes: undefined
+	},
+	mutations,
+	actions
+})
diff --git a/apps/twofactor_backupcodes/src/views/PersonalSettings.vue b/apps/twofactor_backupcodes/src/views/PersonalSettings.vue
index 0a9ac4b1d48..2ca389461c8 100644
--- a/apps/twofactor_backupcodes/src/views/PersonalSettings.vue
+++ b/apps/twofactor_backupcodes/src/views/PersonalSettings.vue
@@ -34,17 +34,13 @@
 
 <script>
 	import confirmPassword from 'nextcloud-password-confirmation';
-
-	import {getState, generateCodes} from '../service/BackupCodesService';
 	import {print} from '../service/PrintService';
 
 	export default {
 		name: "PersonalSettings",
 		data() {
 			return {
-				enabled: false,
 				generatingCodes: false,
-				codes: undefined
 			};
 		},
 		computed: {
@@ -55,30 +51,27 @@
 				return 'data:text/plain,' + encodeURIComponent(this.codes.reduce((prev, code) => {
 					return prev + code + '\r\n';
 				}, ''));
+			},
+			enabled: function() {
+				return this.$store.state.enabled
+			},
+			total: function() {
+				return this.$store.state.total
+			},
+			used: function() {
+				return this.$store.state.used
+			},
+			codes: function() {
+				return this.$store.state.codes
 			}
 		},
-		created: function() {
-			getState()
-				.then(state => {
-					this.enabled = state.enabled;
-					this.total = state.total;
-					this.used = state.used;
-				})
-				.catch(console.error.bind(this));
-		},
 		methods: {
 			generateBackupCodes: function() {
 				confirmPassword().then(() => {
 					// Hide old codes
-					this.enabled = false;
 					this.generatingCodes = true;
 
-					generateCodes().then(data => {
-						this.enabled = data.state.enabled;
-						this.total = data.state.total;
-						this.used = data.state.used;
-						this.codes = data.codes;
-
+					this.$store.dispatch('generate').then(data => {
 						this.generatingCodes = false;
 					}).catch(err => {
 						OC.Notification.showTemporary(t('twofactor_backupcodes', 'An error occurred while generating your backup codes'));