Move actual password reset to vue

Signed-off-by: Julius Härtl <jus@bitgrid.net>

core/Controller/LostController.php

@@ -40,6 +40,7 @@ use OCP\AppFramework\Utility\ITimeFactory;
 use OCP\Defaults;
 use OCP\Encryption\IEncryptionModule;
 use OCP\Encryption\IManager;
+use OCP\IInitialStateService;
 use OCP\ILogger;
 use \OCP\IURLGenerator;
 use \OCP\IRequest;
@@ -88,6 +89,8 @@ class LostController extends Controller {
 	private $logger;
 	/** @var Manager */
 	private $twoFactorManager;
+	/** @var IInitialStateService */
+	private $initialStateService;
 
 	/**
 	 * @param string $appName
@@ -118,7 +121,8 @@ class LostController extends Controller {
 								ITimeFactory $timeFactory,
 								ICrypto $crypto,
 								ILogger $logger,
-								Manager $twoFactorManager) {
+								Manager $twoFactorManager,
+								IInitialStateService $initialStateService) {
 		parent::__construct($appName, $request);
 		$this->urlGenerator = $urlGenerator;
 		$this->userManager = $userManager;
@@ -133,6 +137,7 @@ class LostController extends Controller {
 		$this->crypto = $crypto;
 		$this->logger = $logger;
 		$this->twoFactorManager = $twoFactorManager;
+		$this->initialStateService = $initialStateService;
 	}
 
 	/**
@@ -164,13 +169,15 @@ class LostController extends Controller {
 				'guest'
 			);
 		}
+		$this->initialStateService->provideInitialState('core', 'resetPasswordUser', $userId);
+		$this->initialStateService->provideInitialState('core', 'resetPasswordTarget',
+			$this->urlGenerator->linkToRouteAbsolute('core.lost.setPassword', ['userId' => $userId, 'token' => $token])
+		);
 
 		return new TemplateResponse(
 			'core',
-			'lostpassword/resetpassword',
-			array(
-				'link' => $this->urlGenerator->linkToRouteAbsolute('core.lost.setPassword', array('userId' => $userId, 'token' => $token)),
-			),
+			'login',
+			[],
 			'guest'
 		);
 	}

core/src/components/login/UpdatePassword.vue

@@ -0,0 +1,139 @@
+<!--
+  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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>
+	<form @submit.prevent="submit">
+		<fieldset>
+			<p>
+				<label for="password" class="infield">{{ t('core', 'New password') }}</label>
+				<input type="password" name="password"
+					   id="password" v-model="password" required
+					   :placeholder="t('core', 'New password')" />
+			</p>
+
+			<div v-if="encrypted" class="update">
+				<p>
+					{{ t('core', 'Your files are encrypted. There will be no way to get your data back after your password is reset. If you are not sure what to do, please contact your administrator before you continue. Do you really want to continue?') }}
+				</p>
+				<input type="checkbox" class="checkbox"
+					   id="encrypted-continue" v-model="proceed" />
+				<label for="encrypted-continue">
+					{{ t('core', 'I know what I\'m doing') }}
+				</label>
+			</div>
+
+			<div id="submit-wrapper">
+				<input type="submit"
+					   id="submit"
+					   class="login primary"
+					   title=""
+					   :value="!loading ? t('core', 'Reset password') : t('core', 'Resetting password')" />
+				<div class="submit-icon" :class="{
+					'icon-loading-small': loading && invertedColors,
+					'icon-loading-small-dark': loading && !invertedColors
+				}"></div>
+			</div>
+
+			<p v-if="error && message" :class="{warning: error}">
+				{{ message }}
+			</p>
+		</fieldset>
+	</form>
+</template>
+
+<script>
+	import Axios from 'nextcloud-axios'
+
+	export default {
+		name: 'UpdatePassword',
+		props: {
+			username: {
+				type: String,
+				required: true,
+			},
+			resetPasswordTarget: {
+				type: String,
+				required: true,
+			},
+			invertedColors: {
+				type: Boolean,
+				default: false,
+			}
+		},
+		data() {
+			return {
+				error: false,
+				loading: false,
+				message: undefined,
+				user: this.username,
+				password: '',
+				encrypted: false,
+				proceed: false
+			}
+		},
+		watch: {
+			username (value) {
+				this.user = value
+			}
+		},
+		methods: {
+			async submit () {
+				this.loading = true
+				this.error = false
+				this.message = ''
+
+				try {
+					const { data } = await Axios.post(this.resetPasswordTarget, {
+						password: this.user,
+						proceed: this.proceed
+					})
+					if (data && data.status === 'success') {
+						this.message = 'send-success'
+						this.$emit('update:username', this.user)
+						this.$emit('done')
+					} else if (data && data.encryption) {
+						this.encrypted = true
+					} else if (data && data.msg) {
+						throw new Error(data.msg)
+					} else {
+						throw new Error()
+					}
+				} catch (e) {
+					this.error = true
+					this.message = e.message ? e.message : t('core', 'Password can not be changed. Please contact your administrator.')
+				} finally {
+					this.loading = false
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	fieldset {
+		text-align: center;
+	}
+
+	input[type=submit] {
+		margin-top: 20px;
+	}
+</style>

core/src/login.js

@@ -59,5 +59,7 @@ new View({
 		canResetPassword: fromStateOr('loginCanResetPassword', false),
 		resetPasswordLink: fromStateOr('loginResetPasswordLink', ''),
 		autoCompleteAllowed: fromStateOr('loginAutocomplete', true),
+		resetPasswordTarget: fromStateOr('resetPasswordTarget', ''),
+		resetPasswordUser: fromStateOr('resetPasswordUser', ''),
 	}
 }).$mount('#login');

core/src/views/Login.vue

@@ -22,7 +22,7 @@
 <template>
 	<div>
 		<transition name="fade" mode="out-in">
-			<div v-if="!resetPassword"
+			<div v-if="!resetPassword && resetPasswordTarget === ''"
 				 key="login">
 				<LoginForm
 					:username.sync="user"
@@ -56,6 +56,12 @@
 								   @abort="resetPassword = false"/>
 				</div>
 			</div>
+			<div v-else-if="resetPasswordTarget !== ''">
+				<UpdatePassword :username.sync="user"
+							   :reset-password-target="resetPasswordTarget"
+							   :inverted-colors="invertedColors"
+							   @done="passwordResetFinished"/>
+			</div>
 		</transition>
 	</div>
 </template>
@@ -63,6 +69,7 @@
 <script>
 	import LoginForm from '../components/login/LoginForm.vue'
 	import ResetPassword from '../components/login/ResetPassword.vue'
+	import UpdatePassword from '../components/login/UpdatePassword.vue'
 
 	export default {
 		name: 'Login',
@@ -92,6 +99,9 @@
 			resetPasswordLink: {
 				type: String,
 			},
+			resetPasswordTarget: {
+				type: String,
+			},
 			invertedColors: {
 				type: Boolean,
 				default: false,
@@ -104,6 +114,7 @@
 		components: {
 			LoginForm,
 			ResetPassword,
+			UpdatePassword,
 		},
 		data () {
 			return {
@@ -111,6 +122,11 @@
 				user: this.username,
 				resetPassword: false,
 			}
+		},
+		methods: {
+			passwordResetFinished() {
+				this.resetPasswordTarget = ''
+			}
 		}
 	}
 </script>

core/templates/lostpassword/resetpassword.php

@@ -1,40 +0,0 @@
-<?php
-/**
- * @author Jan-Christoph Borchardt <hey@jancborchardt.net>
- * @author Lukas Reschke <lukas@owncloud.com>
- * @author Michael Gapczynski <GapczynskiM@gmail.com>
- * @author Morris Jobke <hey@morrisjobke.de>
- * @author Victor Dubiniuk <dubiniuk@owncloud.com>
- *
- * @copyright Copyright (c) 2016, ownCloud, Inc.
- * @license AGPL-3.0
- *
- * This code is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License, version 3,
- * as published by the Free Software Foundation.
- *
- * 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, version 3,
- * along with this program.  If not, see <http://www.gnu.org/licenses/>
- *
- */
-style('core', 'lostpassword/resetpassword');
-script('core', 'lostpassword');
-?>
-
-<form action="<?php print_unescaped($_['link']) ?>" id="reset-password" method="post">
-	<fieldset>
-		<p>
-			<label for="password" class="infield"><?php p($l->t('New password')); ?></label>
-			<input type="password" name="password" id="password" value="" placeholder="<?php p($l->t('New Password')); ?>" required />
-		</p>
-		<input class="primary" type="submit" id="submit" value="<?php p($l->t('Reset password')); ?>" />
-		<p class="text-center">
-			<img class="hidden" id="float-spinner" src="<?php p(image_path('core', 'loading-dark.gif'));?>"/>
-		</p>
-	</fieldset>
-</form>

tests/Core/Controller/LostControllerTest.php

@@ -31,6 +31,7 @@ use OCP\Defaults;
 use OCP\Encryption\IEncryptionModule;
 use OCP\Encryption\IManager;
 use OCP\IConfig;
+use OCP\IInitialStateService;
 use OCP\IL10N;
 use OCP\ILogger;
 use OCP\IRequest;
@@ -80,6 +81,8 @@ class LostControllerTest extends \Test\TestCase {
 	private $logger;
 	/** @var Manager|\PHPUnit_Framework_MockObject_MockObject */
 	private $twofactorManager;
+	/** @var IInitialStateService|\PHPUnit_Framework_MockObject_MockObject */
+	private $initialStateService;
 
 	protected function setUp() {
 		parent::setUp();
@@ -132,6 +135,7 @@ class LostControllerTest extends \Test\TestCase {
 		$this->crypto = $this->createMock(ICrypto::class);
 		$this->logger = $this->createMock(ILogger::class);
 		$this->twofactorManager = $this->createMock(Manager::class);
+		$this->initialStateService = $this->createMock(IInitialStateService::class);
 		$this->lostController = new LostController(
 			'Core',
 			$this->request,
@@ -147,7 +151,8 @@ class LostControllerTest extends \Test\TestCase {
 			$this->timeFactory,
 			$this->crypto,
 			$this->logger,
-			$this->twofactorManager
+			$this->twofactorManager,
+			$this->initialStateService
 		);
 	}
 
@@ -254,12 +259,17 @@ class LostControllerTest extends \Test\TestCase {
 			->with('core.lost.setPassword', array('userId' => 'ValidTokenUser', 'token' => 'TheOnlyAndOnlyOneTokenToResetThePassword'))
 			->will($this->returnValue('https://example.tld/index.php/lostpassword/'));
 
+		$this->initialStateService->expects($this->at(0))
+			->method('provideInitialState')
+			->with('core', 'resetPasswordUser', 'ValidTokenUser');
+		$this->initialStateService->expects($this->at(1))
+			->method('provideInitialState')
+			->with('core', 'resetPasswordTarget', 'https://example.tld/index.php/lostpassword/');
+
 		$response = $this->lostController->resetform('TheOnlyAndOnlyOneTokenToResetThePassword', 'ValidTokenUser');
 		$expectedResponse = new TemplateResponse('core',
-			'lostpassword/resetpassword',
-			array(
-				'link' => 'https://example.tld/index.php/lostpassword/',
-			),
+			'login',
+			[],
 			'guest');
 		$this->assertEquals($expectedResponse, $response);
 	}