add verification dialog

Signed-off-by: Bjoern Schiessle <bjoern@schiessle.org>

settings/Controller/UsersController.php

@@ -34,6 +34,7 @@ use OC\Accounts\AccountManager;
 use OC\AppFramework\Http;
 use OC\ForbiddenException;
 use OC\Settings\Mailer\NewUserMailHelper;
+use OC\Security\IdentityProof\Manager;
 use OCP\App\IAppManager;
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\DataResponse;
@@ -82,6 +83,13 @@ class UsersController extends Controller {
 	private $secureRandom;
 	/** @var NewUserMailHelper */
 	private $newUserMailHelper;
+	/** @var ITimeFactory */
+	private $timeFactory;
+	/** @var ICrypto */
+	private $crypto;
+	/** @var Manager */
+	private $keyManager;
+
 
 	/**
 	 * @param string $appName
@@ -100,6 +108,9 @@ class UsersController extends Controller {
 	 * @param AccountManager $accountManager
 	 * @param ISecureRandom $secureRandom
 	 * @param NewUserMailHelper $newUserMailHelper
+	 * @param ITimeFactory $timeFactory
+	 * @param ICrypto $crypto
+	 * @param Manager $keyManager
 	 */
 	public function __construct($appName,
 								IRequest $request,
@@ -116,7 +127,10 @@ class UsersController extends Controller {
 								IAvatarManager $avatarManager,
 								AccountManager $accountManager,
 								ISecureRandom $secureRandom,
-								NewUserMailHelper $newUserMailHelper) {
+								NewUserMailHelper $newUserMailHelper,
+								ITimeFactory $timeFactory,
+								ICrypto $crypto,
+								Manager $keyManager) {
 		parent::__construct($appName, $request);
 		$this->userManager = $userManager;
 		$this->groupManager = $groupManager;
@@ -130,6 +144,9 @@ class UsersController extends Controller {
 		$this->accountManager = $accountManager;
 		$this->secureRandom = $secureRandom;
 		$this->newUserMailHelper = $newUserMailHelper;
+		$this->timeFactory = $timeFactory;
+		$this->crypto = $crypto;
+		$this->keyManager = $keyManager;
 
 		// check for encryption state - TODO see formatUserForIndex
 		$this->isEncryptionAppEnabled = $appManager->isEnabledForUser('encryption');
@@ -488,6 +505,42 @@ class UsersController extends Controller {
 		);
 	}
 
+	/**
+	 * @NoAdminRequired
+	 * @NoSubadminRequired
+	 * @PasswordConfirmationRequired
+	 *
+	 * @param string $account
+	 * @return DataResponse
+	 */
+	public function getVerificationCode($account) {
+
+		$user = $this->userSession->getUser();
+		$cloudId = $user->getCloudId();
+		$message = "Use my Federated Cloud ID to share with me: " . $cloudId;
+		$privateKey = $this->keyManager->getKey($user)->getPrivate();
+		openssl_sign(json_encode($message), $signature, $privateKey, OPENSSL_ALGO_SHA512);
+		$signatureBase64 = base64_encode($signature);
+
+		$code = $message . ' ' . $signatureBase64;
+		$codeMd5 = $message . ' ' . md5($signatureBase64);
+
+		switch ($account) {
+			case 'verify-twitter':
+				$msg = $this->l10n->t('In order to verify your Twitter account post following tweet on Twitter:');
+				$code = $codeMd5;
+				break;
+			case 'verify-website':
+				$msg = $this->l10n->t('In order to verify your Website store following content in your webroot at \'CloudIdVerificationCode.txt\':');
+				break;
+			default:
+				return new DataResponse([], Http::STATUS_BAD_REQUEST);
+				break;
+		}
+
+		return new DataResponse(['msg' => $msg, 'code' => $code]);
+	}
+
 	/**
 	 * @NoAdminRequired
 	 * @NoSubadminRequired

settings/css/settings.css

@@ -138,6 +138,16 @@ input#openid, input#webdav { width:20em; }
 	top: 82px;
 	pointer-events: none;
 }
+
+#personal-settings-container .verify {
+	float: right;
+	padding-top: 10px;
+}
+
+#personal-settings-container .verify:hover {
+	cursor: pointer;
+}
+
 .federationScopeMenu {
 	top: 44px;
 	margin: -5px 0px 0;
@@ -1016,4 +1026,49 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 	margin-top: -12px;
 	margin-bottom: 12px;
 	opacity: .7;
+/* verify accounts */
+#verification-dialog {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+.verification-dialog-content {
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    width: 60%; /* Could be more or less, depending on screen size */
+}
+
+#verify-dialog-close {
+	float: right;
+	width: 34px;
+	border: none;
+	background-color: transparent;
+	margin: 0 !important;
+	border-radius: 0;
+	right: 0;
+	opacity: 0.3;
+}
+
+#verify-dialog-close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#verification-dialog .verificationCode {
+	font-family: monospace;
+	white-space: nowrap;
+	display: block;
+	overflow-y: scroll;
+	padding: 10px;
+	margin: 20px 20px 20px 0;
 }

settings/js/personal.js

@@ -201,6 +201,42 @@ $(document).ready(function () {
 		}
 	});
 
+	var showVerifyDialog = function(howToVerify, verificationCode) {
+		var dialog = document.getElementById('verification-dialog');
+		$(".verification-dialog-content span.explainVerification").text(howToVerify);
+		$(".verification-dialog-content span.verificationCode").text(verificationCode);
+		dialog.style.display = "block";
+	};
+
+	$(".verify").click(function () {
+		var account = $(this).attr('id');
+
+		// Add: make call to get content for verify dialog
+
+		$.ajax(
+			OC.generateUrl('/settings/users/{account}/verify', {account: account}),
+			{method: 'GET'}
+		).done(function(data) {
+			showVerifyDialog(data.msg, data.code);
+		});
+
+	});
+
+	// When the user clicks on <span> (x), close the modal
+	$("#verify-dialog-close").click(function() {
+		var dialog = document.getElementById('verification-dialog');
+		dialog.style.display = "none";
+	});
+
+	// When the user clicks anywhere outside of the modal, close it
+	window.onclick = function(event) {
+		var dialog = document.getElementById('verification-dialog');
+		if (event.target === dialog) {
+			dialog.style.display = "none";
+		}
+	};
+
+
 	var federationSettingsView = new OC.Settings.FederationSettingsView({
 		el: '#personal-settings'
 	});
@@ -334,7 +370,7 @@ $(document).ready(function () {
 			$('#removeavatar').removeClass('hidden').addClass('inlineblock');
 		}
 	});
-	
+
 
 	// Show token views
 	var collection = new OC.Settings.AuthTokenCollection();

settings/routes.php

@@ -52,6 +52,7 @@ $application->registerRoutes($this, [
 		['name' => 'Users#setDisplayName', 'url' => '/settings/users/{username}/displayName', 'verb' => 'POST'],
 		['name' => 'Users#setEMailAddress', 'url' => '/settings/users/{id}/mailAddress', 'verb' => 'PUT'],
 		['name' => 'Users#setUserSettings', 'url' => '/settings/users/{username}/settings', 'verb' => 'PUT'],
+		['name' => 'Users#getVerificationCode', 'url' => '/settings/users/{account}/verify', 'verb' => 'GET'],
 		['name' => 'Users#stats', 'url' => '/settings/users/stats', 'verb' => 'GET'],
 		['name' => 'LogSettings#setLogLevel', 'url' => '/settings/admin/log/level', 'verb' => 'POST'],
 		['name' => 'LogSettings#getEntries', 'url' => '/settings/admin/log/entries', 'verb' => 'GET'],

settings/templates/personal.php

@@ -8,6 +8,18 @@
 /** @var \OCP\Defaults $theme */
 ?>
 
+<div id="verification-dialog">
+
+	<!-- dialog used to verify personal information such as the users website, email address, etc -->
+	<div class="verification-dialog-content">
+		<button id="verify-dialog-close" class="icon-close svg"></button>
+		<span class="explainVerification">How to verify your account details</span><br />
+		<span class="verificationCode">verification code</span>
+		<p>It can take up to 24 hours before the account is displayed as verified.</p>
+	</div>
+
+</div>
+
 <div id="app-navigation">
 	<ul class="with-icon">
 	<?php foreach($_['forms'] as $form) {
@@ -99,6 +111,7 @@
 				<label for="email"><?php p($l->t('Email')); ?></label>
 				<span class="icon-password"/>
 			</h2>
+			<span class="verify" id="verify-email">Verify</span>
 			<input type="email" name="email" id="email" value="<?php p($_['email']); ?>"
 				<?php if(!$_['displayNameChangeSupported']) { print_unescaped('class="hidden"'); } ?>
 				placeholder="<?php p($l->t('Your email address')); ?>"
@@ -151,6 +164,7 @@
 				<label for="website"><?php p($l->t('Website')); ?></label>
 				<span class="icon-password"/>
 			</h2>
+			<span class="verify" id="verify-website">Verify</span>
 			<input type="text" name="website" id="website" value="<?php p($_['website']); ?>"
 			       placeholder="<?php p($l->t('Your website')); ?>"
 			       autocomplete="on" autocapitalize="none" autocorrect="off" />
@@ -164,6 +178,7 @@
 				<label for="twitter"><?php p($l->t('Twitter')); ?></label>
 				<span class="icon-password"/>
 			</h2>
+			<span class="verify" id="verify-twitter">Verify</span>
 			<input type="text" name="twitter" id="twitter" value="<?php p($_['twitter']); ?>"
 				   placeholder="<?php p($l->t('Your Twitter handle')); ?>"
 				   autocomplete="on" autocapitalize="none" autocorrect="off" />