refactor(twofactor_backupcodes): migrate to Typescript and Vue 3

apps/twofactor_backupcodes/lib/Settings/Personal.php

@@ -9,13 +9,17 @@
 
 namespace OCA\TwoFactorBackupCodes\Settings;
 
+use OCA\TwoFactorBackupCodes\AppInfo\Application;
 use OCP\Authentication\TwoFactorAuth\IPersonalProviderSettings;
 use OCP\Server;
 use OCP\Template\ITemplate;
 use OCP\Template\ITemplateManager;
 
 class Personal implements IPersonalProviderSettings {
 	public function getBody(): ITemplate {
-		return Server::get(ITemplateManager::class)->getTemplate('twofactor_backupcodes', 'personal');
+		\OCP\Util::addScript(Application::APP_ID, 'settings-personal');
+		\OCP\Util::addStyle(Application::APP_ID, 'settings-personal');
+		return Server::get(ITemplateManager::class)
+			->getTemplate('twofactor_backupcodes', 'personal');
 	}
 }

apps/twofactor_backupcodes/src/service/BackupCodesService.ts

@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+export interface ITwoFactorBackupCodesState {
+	enabled: boolean
+	total: number
+	used: number
+}
+
+export interface IApiResponse {
+	codes: string[]
+	state: ITwoFactorBackupCodesState
+}
+
+/**
+ * Generate new backup codes
+ */
+export async function generateCodes(): Promise<IApiResponse> {
+	const url = generateUrl('/apps/twofactor_backupcodes/settings/create')
+
+	const { data } = await axios.post<IApiResponse>(url)
+	return data
+}

apps/twofactor_backupcodes/src/service/PrintService.ts

@@ -0,0 +1,39 @@
+/*!
+ * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getCapabilities } from '@nextcloud/capabilities'
+import { showError } from '@nextcloud/dialogs'
+import { t } from '@nextcloud/l10n'
+
+/**
+ * Open a new tab and print the given backup codes
+ *
+ * @param data - The backup codes to print
+ */
+export function print(data: string[]): void {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const name = (getCapabilities() as any).theming.name || 'Nextcloud'
+	const newTab = window.open('', t('twofactor_backupcodes', '{name} backup codes', { name }))
+	if (!newTab) {
+		showError(t('twofactor_backupcodes', 'Unable to open a new tab for printing'))
+		throw new Error('Unable to open a new tab for printing')
+	}
+
+	const heading = newTab.document.createElement('h1')
+	heading.textContent = t('twofactor_backupcodes', '{name} backup codes', { name })
+	const pre = newTab.document.createElement('pre')
+	for (const code of data) {
+		const codeLine = newTab.document.createTextNode(code)
+		pre.appendChild(codeLine)
+		pre.appendChild(newTab.document.createElement('br'))
+	}
+
+	newTab.document.body.innerHTML = ''
+	newTab.document.body.appendChild(heading)
+	newTab.document.body.appendChild(pre)
+
+	newTab.print()
+	newTab.close()
+}

apps/twofactor_backupcodes/src/logger.ts → apps/twofactor_backupcodes/src/service/logger.ts

@@ -8,3 +8,4 @@ import { getLoggerBuilder } from '@nextcloud/logger'
 export const logger = getLoggerBuilder()
 	.detectLogLevel()
 	.setApp('twofactor_backupcodes')
+	.build()

apps/twofactor_backupcodes/src/settings-personal.ts

@@ -0,0 +1,13 @@
+/**
+ * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import PersonalSettings from './views/PersonalSettings.vue'
+
+const pinia = createPinia()
+const app = createApp(PersonalSettings)
+app.use(pinia)
+app.mount('#twofactor-backupcodes-settings')

apps/twofactor_backupcodes/src/store/index.ts

@@ -0,0 +1,42 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { ITwoFactorBackupCodesState } from '../service/BackupCodesService.ts'
+
+import { loadState } from '@nextcloud/initial-state'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { generateCodes } from '../service/BackupCodesService.ts'
+
+const initialState = loadState<ITwoFactorBackupCodesState>('twofactor_backupcodes', 'state')
+
+export const useStore = defineStore('twofactor_backupcodes', () => {
+	const enabled = ref(initialState.enabled)
+	const total = ref(initialState.total)
+	const used = ref(initialState.used)
+	const codes = ref<string[]>([])
+
+	/**
+	 * Generate new backup codes and update the store state
+	 */
+	async function generate(): Promise<void> {
+		enabled.value = false
+
+		const { codes: newCodes, state } = await generateCodes()
+		enabled.value = state.enabled
+		total.value = state.total
+		used.value = state.used
+		codes.value = newCodes
+	}
+
+	return {
+		enabled,
+		total,
+		used,
+		codes,
+
+		generate,
+	}
+})