completing PersonalInfo

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

7 files changed, 591 insertions, 9 deletions

diff --git a/lib/private/Server.php b/lib/private/Server.php
index 489683aa127..262f9f00a71 100644
--- a/lib/private/Server.php
+++ b/lib/private/Server.php
@@ -42,6 +42,7 @@
 namespace OC;
 
 use bantu\IniGetWrapper\IniGetWrapper;
+use OC\Accounts\AccountManager;
 use OC\App\AppManager;
 use OC\App\AppStore\Bundles\BundleFetcher;
 use OC\App\AppStore\Fetcher\AppFetcher;
@@ -970,7 +971,11 @@ class Server extends ServerContainer implements IServerContainer {
 				$c->getLockingProvider(),
 				$c->getRequest(),
 				new \OC\Settings\Mapper($c->getDatabaseConnection()),
-				$c->getURLGenerator()
+				$c->getURLGenerator(),
+				$c->query(AccountManager::class),
+				$c->getGroupManager(),
+				$c->getL10NFactory(),
+				$c->getThemingDefaults()
 			);
 			return $manager;
 		});
diff --git a/lib/private/Settings/Manager.php b/lib/private/Settings/Manager.php
index a307261c83f..d6b3398d0fc 100644
--- a/lib/private/Settings/Manager.php
+++ b/lib/private/Settings/Manager.php
@@ -23,15 +23,18 @@
 
 namespace OC\Settings;
 
+use OC\Accounts\AccountManager;
 use OCP\AppFramework\QueryException;
 use OCP\Encryption\IManager as EncryptionManager;
 use OCP\IConfig;
 use OCP\IDBConnection;
+use OCP\IGroupManager;
 use OCP\IL10N;
 use OCP\ILogger;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserManager;
+use OCP\L10N\IFactory;
 use OCP\Lock\ILockingProvider;
 use OCP\Settings\ISettings;
 use OCP\Settings\IManager;
@@ -61,6 +64,14 @@ class Manager implements IManager {
 	private $request;
 	/** @var IURLGenerator */
 	private $url;
+	/** @var AccountManager */
+	private $accountManager;
+	/** @var IGroupManager */
+	private $groupManager;
+	/** @var IFactory */
+	private $l10nFactory;
+	/** @var \OC_Defaults */
+	private $defaults;
 
 	/**
 	 * @param ILogger $log
@@ -73,6 +84,9 @@ class Manager implements IManager {
 	 * @param IRequest $request
 	 * @param Mapper $mapper
 	 * @param IURLGenerator $url
+	 * @param AccountManager $accountManager
+	 * @param IGroupManager $groupManager
+	 * @param IFactory $l10nFactory
 	 */
 	public function __construct(
 		ILogger $log,
@@ -84,7 +98,11 @@ class Manager implements IManager {
 		ILockingProvider $lockingProvider,
 		IRequest $request,
 		Mapper $mapper,
-		IURLGenerator $url
+		IURLGenerator $url,
+		AccountManager $accountManager,
+		IGroupManager $groupManager,
+		IFactory $l10nFactory,
+		\OC_Defaults $defaults
 	) {
 		$this->log = $log;
 		$this->dbc = $dbc;
@@ -96,6 +114,10 @@ class Manager implements IManager {
 		$this->lockingProvider = $lockingProvider;
 		$this->request = $request;
 		$this->url = $url;
+		$this->accountManager = $accountManager;
+		$this->groupManager = $groupManager;
+		$this->l10nFactory = $l10nFactory;
+		$this->defaults = $defaults;
 	}
 
 	/**
@@ -346,7 +368,7 @@ class Manager implements IManager {
 		try {
 			if ($section === 'personal-info') {
 				/** @var ISettings $form */
-				$form = new Personal\PersonalInfo();
+				$form = new Personal\PersonalInfo($this->config, $this->userManager, $this->groupManager, $this->accountManager, $this->l10nFactory, $this->defaults);
 				$forms[$form->getPriority()] = [$form];
 			}
 		} catch (QueryException $e) {
diff --git a/lib/private/Settings/Mapper.php b/lib/private/Settings/Mapper.php
index 2525f2c9854..7dea1fe3d81 100644
--- a/lib/private/Settings/Mapper.php
+++ b/lib/private/Settings/Mapper.php
@@ -143,10 +143,10 @@ class Mapper {
 	}
 
 	/**
-	 * @param $table Mapper::TABLE_ADMIN_SECTIONS or Mapper::TABLE_ADMIN_SETTINGS
-	 * @param $idCol
-	 * @param $id
-	 * @param $values
+	 * @param string $table Mapper::TABLE_ADMIN_SECTIONS or Mapper::TABLE_ADMIN_SETTINGS
+	 * @param string $idCol
+	 * @param string $id
+	 * @param array $values
 	 */
 	public function update($table, $idCol, $id, $values) {
 		$query = $this->dbc->getQueryBuilder();
diff --git a/lib/private/Settings/Personal/PersonalInfo.php b/lib/private/Settings/Personal/PersonalInfo.php
index 6815b7390b6..c1b2e8acc70 100644
--- a/lib/private/Settings/Personal/PersonalInfo.php
+++ b/lib/private/Settings/Personal/PersonalInfo.php
@@ -24,17 +24,108 @@
 
 namespace OC\Settings\Personal;
 
+use OC\Accounts\AccountManager;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\IConfig;
+use OCP\IGroupManager;
+use OCP\IUser;
+use OCP\IUserManager;
+use OCP\L10N\IFactory;
 use OCP\Settings\ISettings;
 
 class PersonalInfo implements ISettings {
+	/** @var IConfig */
+	private $config;
+	/** @var IUserManager */
+	private $userManager;
+	/** @var AccountManager */
+	private $accountManager;
+	/** @var IGroupManager */
+	private $groupManager;
+	/** @var IFactory */
+	private $l10nFactory;
+
+	const COMMON_LANGUAGE_CODES = [
+		'en', 'es', 'fr', 'de', 'de_DE', 'ja', 'ar', 'ru', 'nl', 'it',
+		'pt_BR', 'pt_PT', 'da', 'fi_FI', 'nb_NO', 'sv', 'tr', 'zh_CN', 'ko'
+	];
+	/** @var \OC_Defaults */
+	private $defaults;
+
+	/**
+	 * @param IConfig $config
+	 * @param IUserManager $userManager
+	 * @param IGroupManager $groupManager
+	 * @param AccountManager $accountManager
+	 * @param IFactory $l10nFactory
+	 */
+	public function __construct(
+		IConfig $config,
+		IUserManager $userManager,
+		IGroupManager $groupManager,
+		AccountManager $accountManager,
+		IFactory $l10nFactory,
+		\OC_Defaults $defaults
+	) {
+		$this->config = $config;
+		$this->userManager = $userManager;
+		$this->accountManager = $accountManager;
+		$this->groupManager = $groupManager;
+		$this->l10nFactory = $l10nFactory;
+		$this->defaults = $defaults;
+	}
 
 	/**
 	 * @return TemplateResponse returns the instance with all parameters set, ready to be rendered
 	 * @since 9.1
 	 */
 	public function getForm() {
-		return new TemplateResponse('settings', 'settings/personal/personal.info');
+		$lookupServerUploadEnabled = $this->config->getAppValue('files_sharing', 'lookupServerUploadEnabled', 'yes');
+		$lookupServerUploadEnabled = $lookupServerUploadEnabled === 'yes';
+
+		$uid = \OC_User::getUser();
+		$user = $this->userManager->get($uid);
+
+		$userData = $this->accountManager->getUser($user);
+		list($activeLanguage, $commonLanguages, $languages) = $this->getLanguages($user);
+
+		//links to clients
+		$clients = [
+			'desktop' => $this->config->getSystemValue('customclient_desktop', $this->defaults->getSyncClientUrl()),
+			'android' => $this->config->getSystemValue('customclient_android', $this->defaults->getAndroidClientUrl()),
+			'ios'     => $this->config->getSystemValue('customclient_ios', $this->defaults->getiOSClientUrl())
+		];
+
+		$parameters = [
+			'avatarChangeSupported' => \OC_User::canUserChangeAvatar($uid),
+			'lookupServerUploadEnabled' => $lookupServerUploadEnabled,
+			'avatar_scope' => $userData[AccountManager::PROPERTY_AVATAR]['scope'],
+			'displayNameChangeSupported' => \OC_User::canUserChangeDisplayName($uid),
+			'displayName' => $userData[AccountManager::PROPERTY_DISPLAYNAME]['value'],
+			'email' => $userData[AccountManager::PROPERTY_EMAIL]['value'],
+			'emailScope' => $userData[AccountManager::PROPERTY_EMAIL]['scope'],
+			'emailMesage' => '',
+			'emailVerification' => $userData[AccountManager::PROPERTY_EMAIL]['verified'],
+			'phone' => $userData[AccountManager::PROPERTY_PHONE]['value'],
+			'phoneScope' => $userData[AccountManager::PROPERTY_PHONE]['scope'],
+			'address', $userData[AccountManager::PROPERTY_ADDRESS]['value'],
+			'addressScope', $userData[AccountManager::PROPERTY_ADDRESS]['scope'],
+			'website' =>  $userData[AccountManager::PROPERTY_WEBSITE]['value'],
+			'websiteScope' =>  $userData[AccountManager::PROPERTY_WEBSITE]['scope'],
+			'websiteVerification' => $userData[AccountManager::PROPERTY_WEBSITE]['verified'],
+			'twitter' => $userData[AccountManager::PROPERTY_TWITTER]['value'],
+			'twitterScope' => $userData[AccountManager::PROPERTY_TWITTER]['scope'],
+			'twitterVerification' => $userData[AccountManager::PROPERTY_TWITTER]['verified'],
+			'groups' => $this->groupManager->getUserGroups($user),
+			'passwordChangeSupported' => \OC_User::canUserChangePassword($uid),
+			'activelanguage' => $activeLanguage,
+			'commonlanguages' => $commonLanguages,
+			'languages' => $languages,
+			'clients' => $clients,
+		];
+
+
+		return new TemplateResponse('settings', 'settings/personal/personal.info', $parameters, '');
 	}
 
 	/**
@@ -56,4 +147,60 @@ class PersonalInfo implements ISettings {
 	public function getPriority() {
 		return 10;
 	}
+
+	private function getLanguages(IUser $user) {
+		$uid = $user->getUID();
+
+		$commonLanguages = [];
+		$userLang = $this->config->getUserValue($uid, 'core', 'lang', $this->l10nFactory->findLanguage());
+		$languageCodes = $this->l10nFactory->findAvailableLanguages();
+		foreach($languageCodes as $lang) {
+			$l = \OC::$server->getL10N('settings', $lang);
+			// TRANSLATORS this is the language name for the language switcher in the personal settings and should be the localized version
+			$potentialName = (string) $l->t('__language_name__');
+			if($l->getLanguageCode() === $lang && substr($potentialName, 0, 1) !== '_') {//first check if the language name is in the translation file
+				$ln = array('code' => $lang, 'name' => $potentialName);
+			} elseif ($lang === 'en') {
+				$ln = ['code' => $lang, 'name' => 'English (US)'];
+			}else{//fallback to language code
+				$ln=array('code'=>$lang, 'name'=>$lang);
+			}
+
+			// put appropriate languages into appropriate arrays, to print them sorted
+			// used language -> common languages -> divider -> other languages
+			if ($lang === $userLang) {
+				$userLang = $ln;
+			} elseif (in_array($lang, self::COMMON_LANGUAGE_CODES)) {
+				$commonLanguages[array_search($lang, self::COMMON_LANGUAGE_CODES)]=$ln;
+			} else {
+				$languages[]=$ln;
+			}
+		}
+
+		// if user language is not available but set somehow: show the actual code as name
+		if (!is_array($userLang)) {
+			$userLang = [
+				'code' => $userLang,
+				'name' => $userLang,
+			];
+		}
+
+		ksort($commonLanguages);
+
+		// sort now by displayed language not the iso-code
+		usort( $languages, function ($a, $b) {
+			if ($a['code'] === $a['name'] && $b['code'] !== $b['name']) {
+				// If a doesn't have a name, but b does, list b before a
+				return 1;
+			}
+			if ($a['code'] !== $a['name'] && $b['code'] === $b['name']) {
+				// If a does have a name, but b doesn't, list a before b
+				return -1;
+			}
+			// Otherwise compare the names
+			return strcmp($a['name'], $b['name']);
+		});
+
+		return [$userLang, $commonLanguages, $languages];
+	}
 }
diff --git a/settings/js/settings/personalInfo.js b/settings/js/settings/personalInfo.js
new file mode 100644
index 00000000000..9496f65a8f3
--- /dev/null
+++ b/settings/js/settings/personalInfo.js
@@ -0,0 +1,392 @@
+/* global OC */
+
+/**
+ * Copyright (c) 2011, Robin Appelman <icewind1991@gmail.com>
+ *               2013, Morris Jobke <morris.jobke@gmail.com>
+ *               2016, Christoph Wurst <christoph@owncloud.com>
+ *               2017, Arthur Schiwon <blizzz@arthur-schiwon.de>
+ * This file is licensed under the Affero General Public License version 3 or later.
+ * See the COPYING-README file.
+ */
+
+OC.Settings = OC.Settings || {};
+
+/**
+ * The callback will be fired as soon as enter is pressed by the
+ * user or 1 second after the last data entry
+ *
+ * @param callback
+ * @param allowEmptyValue if this is set to true the callback is also called when the value is empty
+ */
+jQuery.fn.keyUpDelayedOrEnter = function (callback, allowEmptyValue) {
+	var cb = callback;
+	var that = this;
+
+	this.on('input', _.debounce(function (event) {
+		// enter is already handled in keypress
+		if (event.keyCode === 13) {
+			return;
+		}
+		if (allowEmptyValue || that.val() !== '') {
+			cb(event);
+		}
+	}, 1000));
+
+	this.keypress(function (event) {
+		if (event.keyCode === 13 && (allowEmptyValue || that.val() !== '')) {
+			event.preventDefault();
+			cb(event);
+		}
+	});
+};
+
+function updateAvatar (hidedefault) {
+	var $headerdiv = $('#header .avatardiv');
+	var $displaydiv = $('#displayavatar .avatardiv');
+
+	//Bump avatar avatarversion
+	oc_userconfig.avatar.version = -(Math.floor(Math.random() * 1000));
+
+	if (hidedefault) {
+		$headerdiv.hide();
+		$('#header .avatardiv').removeClass('avatardiv-shown');
+	} else {
+		$headerdiv.css({'background-color': ''});
+		$headerdiv.avatar(OC.currentUser, 32, true);
+		$('#header .avatardiv').addClass('avatardiv-shown');
+	}
+	$displaydiv.css({'background-color': ''});
+	$displaydiv.avatar(OC.currentUser, 145, true, null, function() {
+		$displaydiv.removeClass('loading');
+		$('#displayavatar img').show();
+		if($('#displayavatar img').length === 0) {
+			$('#removeavatar').removeClass('inlineblock').addClass('hidden');
+		} else {
+			$('#removeavatar').removeClass('hidden').addClass('inlineblock');
+		}
+	});
+}
+
+function showAvatarCropper () {
+	var $cropper = $('#cropper');
+	var $cropperImage = $('<img/>');
+	$cropperImage.css('opacity', 0); // prevent showing the unresized image
+	$cropper.children('.inner-container').prepend($cropperImage);
+
+	$cropperImage.attr('src',
+		OC.generateUrl('/avatar/tmp') + '?requesttoken=' + encodeURIComponent(oc_requesttoken) + '#' + Math.floor(Math.random() * 1000));
+
+	$cropperImage.load(function () {
+		var img = $cropperImage.get()[0];
+		var selectSize = Math.min(img.width, img.height);
+		var offsetX = (img.width - selectSize) / 2;
+		var offsetY = (img.height - selectSize) / 2;
+		$cropperImage.Jcrop({
+			onChange: saveCoords,
+			onSelect: saveCoords,
+			aspectRatio: 1,
+			boxHeight: Math.min(500, $('#app-content').height() -100),
+			boxWidth: Math.min(500, $('#app-content').width()),
+			setSelect: [offsetX, offsetY, selectSize, selectSize]
+		}, function() {
+			$cropper.show();
+		});
+	});
+}
+
+function sendCropData () {
+	cleanCropper();
+
+	var cropperData = $('#cropper').data();
+	var data = {
+		x: cropperData.x,
+		y: cropperData.y,
+		w: cropperData.w,
+		h: cropperData.h
+	};
+	$.post(OC.generateUrl('/avatar/cropped'), {crop: data}, avatarResponseHandler);
+}
+
+function saveCoords (c) {
+	$('#cropper').data(c);
+}
+
+function cleanCropper () {
+	var $cropper = $('#cropper');
+	$('#displayavatar').show();
+	$cropper.hide();
+	$('.jcrop-holder').remove();
+	$('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src');
+	$('#cropper img').remove();
+}
+
+function avatarResponseHandler (data) {
+	if (typeof data === 'string') {
+		data = JSON.parse(data);
+	}
+	var $warning = $('#avatarform .warning');
+	$warning.hide();
+	if (data.status === "success") {
+		updateAvatar();
+	} else if (data.data === "notsquare") {
+		showAvatarCropper();
+	} else {
+		$warning.show();
+		$warning.text(data.data.message);
+	}
+}
+
+$(document).ready(function () {
+	if($('#pass2').length) {
+		$('#pass2').showPassword().keyup();
+	}
+
+	var removeloader = function () {
+		setTimeout(function(){
+			if ($('.password-state').length > 0) {
+				$('.password-state').remove();
+			}
+		}, 5000)
+	};
+
+	$("#passwordbutton").click(function () {
+		var isIE8or9 = $('html').hasClass('lte9');
+		// FIXME - TODO - once support for IE8 and IE9 is dropped
+		// for IE8 and IE9 this will check additionally if the typed in password
+		// is different from the placeholder, because in IE8/9 the placeholder
+		// is simply set as the value to look like a placeholder
+		if ($('#pass1').val() !== '' && $('#pass2').val() !== ''
+			&& !(isIE8or9 && $('#pass2').val() === $('#pass2').attr('placeholder'))) {
+			// Serialize the data
+			var post = $("#passwordform").serialize();
+			$('#passwordchanged').hide();
+			$('#passworderror').hide();
+			$("#passwordbutton").attr('disabled', 'disabled');
+			$("#passwordbutton").after("<span class='password-loading icon icon-loading-small-dark password-state'></span>");
+			$(".personal-show-label").hide();
+			// Ajax foo
+			$.post(OC.generateUrl('/settings/personal/changepassword'), post, function (data) {
+				if (data.status === "success") {
+					$("#passwordbutton").after("<span class='checkmark icon icon-checkmark password-state'></span>");
+					removeloader();
+					$(".personal-show-label").show();
+					$('#pass1').val('');
+					$('#pass2').val('').change();
+				}
+				if (typeof(data.data) !== "undefined") {
+					OC.msg.finishedSaving('#password-error-msg', data);
+				} else {
+					OC.msg.finishedSaving('#password-error-msg',
+						{
+							'status' : 'error',
+							'data' : {
+								'message' : t('core', 'Unable to change password')
+							}
+						}
+					);
+				}
+				$(".password-loading").remove();
+				$("#passwordbutton").removeAttr('disabled');
+			});
+			return false;
+		} else {
+			OC.msg.finishedSaving('#password-error-msg',
+				{
+					'status' : 'error',
+					'data' : {
+						'message' : t('core', 'Unable to change password')
+					}
+				}
+			);
+			return false;
+		}
+	});
+
+	var showVerifyDialog = function(dialog, howToVerify, verificationCode) {
+		var dialogContent = dialog.children('.verification-dialog-content');
+		dialogContent.children(".explainVerification").text(howToVerify);
+		dialogContent.children(".verificationCode").text(verificationCode);
+		dialog.css('display', 'block');
+	};
+
+	$(".verify").click(function (event) {
+
+		event.stopPropagation();
+
+		var verify = $(this);
+		var indicator = $(this).children('img');
+		var accountId = indicator.attr('id');
+		var status = indicator.data('status');
+
+		var onlyVerificationCode = false;
+		if (parseInt(status) === 1) {
+			onlyVerificationCode = true;
+		}
+
+		if (indicator.hasClass('verify-action')) {
+			$.ajax(
+				OC.generateUrl('/settings/users/{account}/verify', {account: accountId}),
+				{
+					method: 'GET',
+					data: {onlyVerificationCode: onlyVerificationCode}
+				}
+			).done(function (data) {
+				var dialog = verify.children('.verification-dialog');
+				showVerifyDialog($(dialog), data.msg, data.code);
+				indicator.attr('data-origin-title', t('core', 'Verifying …'));
+				indicator.attr('src', OC.imagePath('core', 'actions/verifying.svg'));
+				indicator.data('status', '1');
+			});
+		}
+
+	});
+
+	// When the user clicks anywhere outside of the verification dialog we close it
+	$(document).click(function(event){
+		var element = event.target;
+		var isDialog = $(element).hasClass('verificationCode')
+			|| $(element).hasClass('explainVerification')
+			|| $(element).hasClass('verification-dialog-content')
+			|| $(element).hasClass('verification-dialog');
+		if (!isDialog) {
+			$(document).find('.verification-dialog').css('display', 'none');
+		}
+	});
+
+
+	var federationSettingsView = new OC.Settings.FederationSettingsView({
+		el: '#personal-settings'
+	});
+	federationSettingsView.render();
+
+	$("#languageinput").change(function () {
+		// Serialize the data
+		var post = $("#languageinput").serialize();
+		// Ajax foo
+		$.ajax(
+			'ajax/setlanguage.php',
+			{
+				method: 'POST',
+				data: post
+			}
+		).done(function() {
+			location.reload();
+		}).fail(function(jqXHR) {
+			$('#passworderror').text(jqXHR.responseJSON.message);
+		});
+		return false;
+	});
+
+	var uploadparms = {
+		pasteZone: null,
+		done: function (e, data) {
+			var response = data;
+			if (typeof data.result === 'string') {
+				response = JSON.parse(data.result);
+			} else if (data.result && data.result.length) {
+				// fetch response from iframe
+				response = JSON.parse(data.result[0].body.innerText);
+			} else {
+				response = data.result;
+			}
+			avatarResponseHandler(response);
+		},
+		submit: function(e, data) {
+			$('#displayavatar img').hide();
+			$('#displayavatar .avatardiv').addClass('loading');
+			data.formData = _.extend(data.formData || {}, {
+				requesttoken: OC.requestToken
+			});
+		},
+		fail: function (e, data){
+			var msg = data.jqXHR.statusText + ' (' + data.jqXHR.status + ')';
+			if (!_.isUndefined(data.jqXHR.responseJSON) &&
+				!_.isUndefined(data.jqXHR.responseJSON.data) &&
+				!_.isUndefined(data.jqXHR.responseJSON.data.message)
+			) {
+				msg = data.jqXHR.responseJSON.data.message;
+			}
+			avatarResponseHandler({
+				data: {
+					message: msg
+				}
+			});
+		}
+	};
+
+	$('#uploadavatar').fileupload(uploadparms);
+
+	$('#selectavatar').click(function () {
+		OC.dialogs.filepicker(
+			t('settings', "Select a profile picture"),
+			function (path) {
+				$('#displayavatar img').hide();
+				$('#displayavatar .avatardiv').addClass('loading');
+				$.ajax({
+					type: "POST",
+					url: OC.generateUrl('/avatar/'),
+					data: { path: path }
+				}).done(avatarResponseHandler)
+					.fail(function(jqXHR) {
+						var msg = jqXHR.statusText + ' (' + jqXHR.status + ')';
+						if (!_.isUndefined(jqXHR.responseJSON) &&
+							!_.isUndefined(jqXHR.responseJSON.data) &&
+							!_.isUndefined(jqXHR.responseJSON.data.message)
+						) {
+							msg = jqXHR.responseJSON.data.message;
+						}
+						avatarResponseHandler({
+							data: {
+								message: msg
+							}
+						});
+					});
+			},
+			false,
+			["image/png", "image/jpeg"]
+		);
+	});
+
+	$('#removeavatar').click(function () {
+		$.ajax({
+			type: 'DELETE',
+			url: OC.generateUrl('/avatar/'),
+			success: function () {
+				updateAvatar(true);
+			}
+		});
+	});
+
+	$('#abortcropperbutton').click(function () {
+		$('#displayavatar .avatardiv').removeClass('loading');
+		$('#displayavatar img').show();
+		cleanCropper();
+	});
+
+	$('#sendcropperbutton').click(function () {
+		sendCropData();
+	});
+
+	$('#pass2').strengthify({
+		zxcvbn: OC.linkTo('core','vendor/zxcvbn/dist/zxcvbn.js'),
+		titles: [
+			t('core', 'Very weak password'),
+			t('core', 'Weak password'),
+			t('core', 'So-so password'),
+			t('core', 'Good password'),
+			t('core', 'Strong password')
+		],
+		drawTitles: true,
+	});
+
+	// Load the big avatar
+	$('#avatarform .avatardiv').avatar(OC.currentUser, 145, true, null, function() {
+		if($('#displayavatar img').length === 0) {
+			$('#removeavatar').removeClass('inlineblock').addClass('hidden');
+		} else {
+			$('#removeavatar').removeClass('hidden').addClass('inlineblock');
+		}
+	});
+});
+
+OC.Settings.updateAvatar = updateAvatar;
diff --git a/settings/routes.php b/settings/routes.php
index 52523ff50c6..12da950ed2f 100644
--- a/settings/routes.php
+++ b/settings/routes.php
@@ -65,7 +65,7 @@ $application->registerRoutes($this, [
 		['name' => 'Certificate#removePersonalRootCertificate', 'url' => '/settings/personal/certificate/{certificateIdentifier}', 'verb' => 'DELETE'],
 		['name' => 'Certificate#addSystemRootCertificate', 'url' => '/settings/admin/certificate', 'verb' => 'POST'],
 		['name' => 'Certificate#removeSystemRootCertificate', 'url' => '/settings/admin/certificate/{certificateIdentifier}', 'verb' => 'DELETE'],
-		['name' => 'PersonalSettings#index', 'url' => '/settings/personal/{section}', 'verb' => 'GET', 'defaults' => ['section' => 'personal-info']],
+		['name' => 'PersonalSettings#index', 'url' => '/settings/user/{section}', 'verb' => 'GET', 'defaults' => ['section' => 'personal-info']],
 		['name' => 'AdminSettings#index', 'url' => '/settings/admin/{section}', 'verb' => 'GET', 'defaults' => ['section' => 'server']],
 		['name' => 'AdminSettings#form', 'url' => '/settings/admin/{section}', 'verb' => 'GET'],
 		['name' => 'ChangePassword#changePersonalPassword', 'url' => '/settings/personal/changepassword', 'verb' => 'POST'],
diff --git a/settings/templates/settings/personal/personal.info.php b/settings/templates/settings/personal/personal.info.php
index 7a19752912c..eb1bb43d267 100644
--- a/settings/templates/settings/personal/personal.info.php
+++ b/settings/templates/settings/personal/personal.info.php
@@ -24,6 +24,22 @@
 /** @var \OCP\IL10N $l */
 /** @var array $_ */
 
+script('settings', [
+	'usersettings',
+	'federationsettingsview',
+	'federationscopemenu',
+	'settings/personalInfo',
+]);
+style('settings', 'settings');
+vendor_script('strengthify/jquery.strengthify');
+vendor_style('strengthify/strengthify');
+script('files', 'jquery.fileupload');
+vendor_script('jcrop/js/jquery.Jcrop');
+vendor_style('jcrop/css/jquery.Jcrop');
+
+//TODO: delete js/personal.js once the Encryption and AuthToken things are,
+// where they belong
+
 ?>
 
 <div id="personal-settings">