Move to real initial state API

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

lib/Provider/U2FProvider.php

@@ -23,6 +23,7 @@ use OCP\Authentication\TwoFactorAuth\ILoginSetupProvider;
 use OCP\Authentication\TwoFactorAuth\IPersonalProviderSettings;
 use OCP\Authentication\TwoFactorAuth\IProvidesIcons;
 use OCP\Authentication\TwoFactorAuth\IProvidesPersonalSettings;
+use OCP\IInitialStateService;
 use OCP\IL10N;
 use OCP\IUser;
 use OCP\Template;
@@ -38,12 +39,17 @@ class U2FProvider implements IActivatableAtLogin, IProvidesIcons, IProvidesPerso
 	/** @var IAppContainer */
 	private $container;
 
+	/** @var IInitialStateService */
+	private $initialStateService;
+
 	public function __construct(IL10N $l10n,
 								U2FManager $manager,
-								IAppContainer $container) {
+								IAppContainer $container,
+								IInitialStateService $initialStateService) {
 		$this->l10n = $l10n;
 		$this->manager = $manager;
 		$this->container = $container;
+		$this->initialStateService = $initialStateService;
 	}
 
 	/**
@@ -93,7 +99,8 @@ class U2FProvider implements IActivatableAtLogin, IProvidesIcons, IProvidesPerso
 	}
 
 	public function getPersonalSettings(IUser $user): IPersonalProviderSettings {
-		return new Personal($this->manager->getDevices($user));
+		$this->initialStateService->provideInitialState('twofactor_u2f', 'devices', $this->manager->getDevices($user));
+		return new Personal();
 	}
 
 	public function getLightIcon(): String {

lib/Settings/Personal.php

@@ -29,16 +29,7 @@ use OCP\Template;
 
 class Personal implements IPersonalProviderSettings {
 
-	/** @var array */
-	private $devices;
-
-	public function __construct(array $devices) {
-		$this->devices = $devices;
-	}
-
 	public function getBody(): Template {
-		$template = new Template('twofactor_u2f', 'personal');
-		$template->assign('state', json_encode($this->devices));
-		return $template;
+		return new Template('twofactor_u2f', 'personal');
 	}
 }

package-lock.json

@@ -2247,6 +2247,21 @@
         }
       }
     },
+    "@nextcloud/initial-state": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/initial-state/-/initial-state-0.2.0.tgz",
+      "integrity": "sha512-aFkEXxEchawyn1HWn/nStX25324/4+RcOHiHJ1gW/vVH6bPRW8suj9V1Rsi380mMRM7sjkICyeNPxOZ8f+WZrA==",
+      "requires": {
+        "core-js": "3.1.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.1.4",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.1.4.tgz",
+          "integrity": "sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ=="
+        }
+      }
+    },
     "@nextcloud/logger": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@nextcloud/logger/-/logger-0.1.0.tgz",

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@nextcloud/auth": "^0.3.1",
     "@nextcloud/axios": "^0.4.2",
+    "@nextcloud/initial-state": "^0.2.0",
     "@nextcloud/logger": "^0.1.0",
     "@nextcloud/password-confirmation": "^0.6.0",
     "@nextcloud/router": "^0.1.0",

src/main-settings.js

@@ -23,14 +23,12 @@ import store from './store'
 import Vue from 'vue'
 
 import Nextcloud from './mixins/Nextcloud'
+import { loadState } from '@nextcloud/initial-state'
 
 Vue.mixin(Nextcloud)
 
-const initialStateElement = document.getElementById('twofactor-u2f-initial-state')
-if (initialStateElement) {
-	const devices = JSON.parse(initialStateElement.value)
-	devices.sort()
-	devices.sort((d1, d2) => {
+const devices = loadState('twofactor_u2f', 'devices');
+devices.sort((d1, d2) => {
 	if (!d1.name) {
 		return 1
 	} else if (!d2.name) {
@@ -38,11 +36,10 @@ if (initialStateElement) {
 	} else {
 		return d1.name.localeCompare(d2.name)
 	}
-	})
-	store.replaceState({
+})
+store.replaceState({
 	devices
-	})
-}
+})
 
 import PersonalSettings from './components/PersonalSettings'
 

templates/personal.php

@@ -3,6 +3,4 @@ script('twofactor_u2f', 'settings');
 style('twofactor_u2f', 'style');
 ?>
 
-<input type="hidden" id="twofactor-u2f-initial-state" value="<?php p($_['state']); ?>">
-
 <div id="twofactor-u2f-settings"></div>

tests/Unit/Provider/U2FProviderTest.php

@@ -17,6 +17,7 @@ use OCA\TwoFactorU2F\Provider\U2FProvider;
 use OCA\TwoFactorU2F\Service\U2FManager;
 use OCA\TwoFactorU2F\Settings\Personal;
 use OCP\AppFramework\IAppContainer;
+use OCP\IInitialStateService;
 use OCP\IL10N;
 use OCP\IUser;
 use OCP\Template;
@@ -34,6 +35,9 @@ class U2FProviderTest extends TestCase {
 	/** @var IAppContainer|MockObject */
 	private $container;
 
+	/** @var IInitialStateService|MockObject */
+	private $initialState;
+
 	/** @var U2FProvider */
 	private $provider;
 
@@ -43,11 +47,13 @@ class U2FProviderTest extends TestCase {
 		$this->l10n = $this->createMock(IL10N::class);
 		$this->manager = $this->createMock(U2FManager::class);
 		$this->container = $this->createMock(IAppContainer::class);
+		$this->initialState = $this->createMock(IInitialStateService::class);
 
 		$this->provider = new U2FProvider(
 			$this->l10n,
 			$this->manager,
-			$this->container
+			$this->container,
+			$this->initialState
 		);
 	}
 
@@ -141,8 +147,18 @@ class U2FProviderTest extends TestCase {
 	}
 
 	public function testGetPersonalSettings() {
-		$expected = new Personal([]);
+		$expected = new Personal();
+		$this->initialState->expects($this->once())
+			->method('provideInitialState')
+			->with(
+				'twofactor_u2f',
+				'devices',
+				['my', 'devices']
+			);
+
 		$user = $this->createMock(IUser::class);
+		$this->manager->method('getDevices')
+			->willReturn(['my', 'devices']);
 
 		$settings = $this->provider->getPersonalSettings($user);