Migrate backup codes settings to Vue

Fixes #11034.

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

apps/twofactor_backupcodes/js/service/BackupCodesService.js

@@ -0,0 +1,21 @@
+import axio from 'axios';
+
+export function getState () {
+	const url = OC.generateUrl('/apps/twofactor_backupcodes/settings/state');
+
+	return axio.get(url, {
+		headers: {
+			requesttoken: OC.requestToken
+		}
+	}).then(resp => resp.data);
+}
+
+export function generateCodes () {
+	const url = OC.generateUrl('/apps/twofactor_backupcodes/settings/create');
+
+	return axio.post(url, {}, {
+		headers: {
+			requesttoken: OC.requestToken
+		}
+	}).then(resp => resp.data)
+}

apps/twofactor_backupcodes/js/service/PrintService.js

@@ -0,0 +1,7 @@
+export function print (data) {
+	const newTab = window.open('', t('twofactor_backupcodes', 'Nextcloud backup codes'));
+	newTab.document.write('<h1>' + t('twofactor_backupcodes', 'Nextcloud backup codes') + '</h1>');
+	newTab.document.write(data);
+	newTab.print();
+	newTab.close();
+}

apps/twofactor_backupcodes/js/settings.js

@@ -1,16 +1,9 @@
-/* global OC */
+import Vue from 'vue';
+import PersonalSettings from './views/PersonalSettings';
 
-(function (OC) {
-    'use strict';
-
-    OC.Settings = OC.Settings || {};
-    OC.Settings.TwoFactorBackupCodes = OC.Settings.TwoFactorBackupCodes || {};
-
-    $(function () {
-        var view = new OC.Settings.TwoFactorBackupCodes.View({
-            el: $('#twofactor-backupcodes-settings')
-        });
-        view.render();
-    });
-})(OC);
+Vue.prototype.t = t;
 
+export default new Vue({
+	el: '#twofactor-backupcodes-settings',
+	render: h => h(PersonalSettings)
+});

apps/twofactor_backupcodes/js/views/PersonalSettings.vue

@@ -0,0 +1,102 @@
+<template>
+	<div>
+		<button v-if="!enabled"
+				id="generate-backup-codes">{{ t('twofactor_backupcodes', 'Generate backup codes') }}</button>
+		<p v-else>
+			<template v-if="!codes">
+				{{ t('twofactor_backupcodes', 'Backup codes have been generated. {used} of {total} codes have been used.', {used, total}) }}
+			</template>
+			<template v-else>
+				{{ t('twofactor_backupcodes', 'These are your backup codes. Please save and/or print them as you will not be able to read the codes again later') }}
+				<ul>
+				<li v-for="code in codes" class="backup-code">{{code}}</li>
+				</ul>
+				<a :href="downloadUrl"
+				   class="button"
+				   download="Nextcloud-backup-codes.txt">{{ t('twofactor_backupcodes', 'Save backup codes') }}</a>
+				<button class="button"
+						v-on:click="printCodes">{{ t('twofactor_backupcodes', 'Print backup codes') }}</button>
+			</template>
+		</p>
+		<p>
+			<button id="generate-backup-codes"
+					:class="{'icon-loading-small': generatingCodes}"
+					v-on:click="generateBackupCodes">{{ t('twofactor_backupcodes', 'Regenerate backup codes') }}</button>
+		</p>
+		<p>
+			{{ t('twofactor_backupcodes', 'If you regenerate backup codes, you automatically invalidate old codes.') }}
+		</p>
+	</div>
+</template>
+
+<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: {
+			downloadUrl: function() {
+				if (!this.codes) {
+					return '';
+				}
+				return 'data:text/plain,' + encodeURIComponent(this.codes.reduce((prev, code) => {
+					return prev + code + '\r\n';
+				}, ''));
+			}
+		},
+		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.generatingCodes = false;
+					}).catch(err => {
+						OC.Notification.showTemporary(t('twofactor_backupcodes', 'An error occurred while generating your backup codes'));
+						this.generatingCodes = false;
+						throw err;
+					});
+				}).catch(console.error.bind(this));
+			},
+
+			getPrintData: function(codes) {
+				if (!codes) {
+					return '';
+				}
+				return codes.reduce((prev, code) => {
+					return prev + code + "<br>";
+				}, '');
+			},
+
+			printCodes: function() {
+				print(this.getPrintData(this.codes));
+			}
+		}
+	}
+</script>