From da3e9a80d36a06d022609f1d49df836a4b0e2e75 Mon Sep 17 00:00:00 2001
From: knrt10 <tripathi.kautilya@gmail.com>
Date: Sun, 24 Mar 2019 17:16:37 +0530
Subject: [PATCH] Fixes #12312

---
 app/ui-flextab/client/tabs/userEdit.html | 78 +++++++++++++++-----
 app/ui-flextab/client/tabs/userEdit.js   | 90 +++++++++++++++++++++++-
 server/methods/resetAvatar.js            | 22 ++++--
 server/methods/setAvatarFromService.js   |  7 +-
 4 files changed, 168 insertions(+), 29 deletions(-)

diff --git a/app/ui-flextab/client/tabs/userEdit.html b/app/ui-flextab/client/tabs/userEdit.html
index 41285ff3a39e1..df585f4cda0e3 100644
--- a/app/ui-flextab/client/tabs/userEdit.html
+++ b/app/ui-flextab/client/tabs/userEdit.html
@@ -3,25 +3,65 @@
 		<p class="secondary-font-color">{{_ "You_are_not_authorized_to_view_this_page"}}</p>
 	{{else}}
 	<form class="" action="index.html" method="post" autocomplete="off">
-		<div class="rc-input rc-form-group rc-form-group--small">
-			<label class="rc-input__label">
-				<div class="rc-input__title">{{_ "Name"}}</div>
-				<div class="rc-input__wrapper">
-					<input name="name" type="text" class="rc-input__element rc-input__element--small" id="name" autocomplete="off" value="{{user.name}}"/>
-				</div>
-			</label>
-		</div>
-		<div class="rc-input rc-form-group rc-form-group--small">
-			<label class="rc-input__label">
-				<div class="rc-input__title">{{_ "Username"}}</div>
-				<div class="rc-input__wrapper">
-					<div class="rc-input__icon">
-						{{> icon icon='at' }}
-					</div>
-					<input name="name" type="text" class="rc-input__element rc-input__element--small" id="username" autocomplete="off" value="{{user.username}}"/>
-				</div>
-			</label>
-		</div>
+    <div class="rc-form-group rc-form-group--small">
+      <label class="rc-form-label">{{_ "Profile_picture"}}</label>
+      <div class="rc-select-avatar">
+        <div class="rc-select-avatar__preview">
+          {{# unless avatarPreview}}
+          {{> avatar username=user.username}}
+          {{else}}
+          {{> avatar url=avatarPreview.blob}}
+          {{/unless}}
+        </div>
+
+        <div class="rc-select-avatar__list">
+          <div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-initials" aria-label="{{_ "initials_avatar" }}">
+            {{> avatar username=initialsUsername }}
+          </div>
+          <div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-upload" aria-label="{{_ "Upload_user_avatar" }}">
+            <label class="rc-select-avatar__upload-label avatar" for="upload-avatar">
+              {{> icon block="rc-select-avatar__upload-icon" icon="upload"}}
+            </label>
+            <input type="file" name="" value="" id="upload-avatar" style="display:none;" accept="image/x-png,image/gif,image/jpeg">
+          </div>
+          <div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-url {{selectUrl}}" aria-label="{{_ "Use_url_for_avatar" }}">
+            <label class="rc-select-avatar__upload-label avatar">
+              {{> icon block="rc-select-avatar__upload-icon" icon="permalink"}}
+            </label>
+          </div>
+
+          <div class="rc-input">
+          
+            <label class="rc-input__label">
+              <div class="rc-input__title">{{_ "Use_url_for_avatar"}}</div>
+              <div class="rc-input__wrapper">
+                <input name="avatar_url" class="rc-input__element js-avatar-url-input" placeholder="{{_ "Use_url_for_avatar"}}">
+              </div>
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="rc-input rc-form-group rc-form-group--small">
+        <label class="rc-input__label">
+          <div class="rc-input__title">{{_ "Name"}}</div>
+          <div class="rc-input__wrapper">
+            <input name="name" type="text" class="rc-input__element rc-input__element--small" id="name" autocomplete="off" value="{{user.name}}"/>
+          </div>
+        </label>
+      </div>
+      <div class="rc-input rc-form-group rc-form-group--small">
+        <label class="rc-input__label">
+          <div class="rc-input__title">{{_ "Username"}}</div>
+          <div class="rc-input__wrapper">
+            <div class="rc-input__icon">
+              {{> icon icon='at' }}
+            </div>
+            <input name="name" type="text" class="rc-input__element rc-input__element--small" id="username" autocomplete="off" value="{{user.username}}"/>
+          </div>
+        </label>
+      </div>
+    </div>
 		<div class="rc-form-group rc-form-group--small">
 			<div class="rc-input">
 				<label class="rc-input__label">
diff --git a/app/ui-flextab/client/tabs/userEdit.js b/app/ui-flextab/client/tabs/userEdit.js
index 2e7e4afa08daa..32faff9430d39 100644
--- a/app/ui-flextab/client/tabs/userEdit.js
+++ b/app/ui-flextab/client/tabs/userEdit.js
@@ -5,10 +5,22 @@ import { Template } from 'meteor/templating';
 import { TAPi18n } from 'meteor/tap:i18n';
 import { t, handleError } from '../../../utils';
 import { Roles } from '../../../models';
+import { Notifications } from '../../../notifications';
 import { hasAtLeastOnePermission } from '../../../authorization';
 import toastr from 'toastr';
+import { callbacks } from '../../../callbacks';
 import s from 'underscore.string';
 
+const setAvatar = function(event, template) {
+	const { blob, contentType, service } = this.suggestion;
+
+	template.avatar.set({
+		service,
+		contentType,
+		blob,
+	});
+};
+
 Template.userEdit.helpers({
 
 	disabled(cursor) {
@@ -18,10 +30,23 @@ Template.userEdit.helpers({
 		return (Template.instance().user && hasAtLeastOnePermission('edit-other-user-info')) || (!Template.instance().user && hasAtLeastOnePermission('create-user'));
 	},
 
+	selectUrl() {
+		return Template.instance().url.get().trim() ? '' : 'disabled';
+	},
+
 	user() {
 		return Template.instance().user;
 	},
 
+	initialsUsername() {
+		const { user } = Template.instance();
+		return `@${ user && user.username }`;
+	},
+
+	avatarPreview() {
+		return Template.instance().avatar.get();
+	},
+
 	requirePasswordChange() {
 		return !Template.instance().user || Template.instance().user.requirePasswordChange;
 	},
@@ -41,6 +66,52 @@ Template.userEdit.helpers({
 });
 
 Template.userEdit.events({
+	'click .js-select-avatar-initials'() {
+		Meteor.call('resetAvatar', Template.instance().user, function() {
+			toastr.success(t('Avatar_changed_successfully'));
+			callbacks.run('userAvatarSet', 'initials');
+		});
+	},
+	'click .js-select-avatar-url'(e, instance, ...args) {
+		const url = instance.url.get().trim();
+		if (!url) {
+			return;
+		}
+		setAvatar.apply({
+			suggestion: {
+				service: 'url',
+				blob: url,
+				contentType: '',
+			},
+		}, [e, instance, ...args]);
+	},
+	'input .js-avatar-url-input'(e, instance) {
+		const text = e.target.value;
+		instance.url.set(text);
+	},
+	'change .js-select-avatar-upload [type=file]'(event, template) {
+		const e = event.originalEvent || event;
+		let { files } = e.target;
+		if (!files || files.length === 0) {
+			files = (e.dataTransfer && e.dataTransfer.files) || [];
+		}
+		Object.keys(files).forEach((key) => {
+			const blob = files[key];
+			if (!/image\/.+/.test(blob.type)) {
+				return;
+			}
+			const reader = new FileReader();
+			reader.readAsDataURL(blob);
+			reader.onloadend = function() {
+				template.avatar.set({
+					service: 'upload',
+					contentType: blob.type,
+					blob: reader.result,
+				});
+				callbacks.run('userAvatarSet', 'upload');
+			};
+		});
+	},
 	'click .cancel'(e, t) {
 		e.stopPropagation();
 		e.preventDefault();
@@ -98,7 +169,9 @@ Template.userEdit.events({
 Template.userEdit.onCreated(function() {
 	this.user = this.data != null ? this.data.user : undefined;
 	this.roles = this.user ? new ReactiveVar(this.user.roles) : new ReactiveVar([]);
-
+	this.avatar = new ReactiveVar;
+	this.url = new ReactiveVar('');
+	Notifications.onLogged('updateAvatar', () => this.avatar.set());
 
 	const { tabBar } = Template.currentData();
 
@@ -162,7 +235,7 @@ Template.userEdit.onCreated(function() {
 			return;
 		}
 		const userData = this.getUserData();
-
+		const avatar = this.avatar.get();
 		if (this.user != null) {
 			for (const key in userData) {
 				if (key) {
@@ -176,6 +249,19 @@ Template.userEdit.onCreated(function() {
 			}
 		}
 
+		if (avatar) {
+			const params = [avatar.blob];
+
+			params.push(avatar.contentType);
+
+			params.push(avatar.service);
+			params.push(Template.instance().user);
+			Meteor.call('setAvatarFromService', ...params, function() {
+				toastr.success(t('Avatar_changed_successfully'));
+				callbacks.run('userAvatarSet', avatar.service);
+			});
+		}
+
 		Meteor.call('insertOrUpdateUser', userData, (error) => {
 			if (error) {
 				return handleError(error);
diff --git a/server/methods/resetAvatar.js b/server/methods/resetAvatar.js
index 06dc8160c4426..f7954cda19139 100644
--- a/server/methods/resetAvatar.js
+++ b/server/methods/resetAvatar.js
@@ -6,7 +6,7 @@ import { settings } from '../../app/settings';
 import { Notifications } from '../../app/notifications';
 
 Meteor.methods({
-	resetAvatar() {
+	resetAvatar(args) {
 		if (!Meteor.userId()) {
 			throw new Meteor.Error('error-invalid-user', 'Invalid user', {
 				method: 'resetAvatar',
@@ -19,12 +19,20 @@ Meteor.methods({
 			});
 		}
 
-		const user = Meteor.user();
-		FileUpload.getStore('Avatars').deleteByName(user.username);
-		Users.unsetAvatarOrigin(user._id);
-		Notifications.notifyLogged('updateAvatar', {
-			username: user.username,
-		});
+		if (args) {
+			FileUpload.getStore('Avatars').deleteByName(args.username);
+			Users.unsetAvatarOrigin(args._id);
+			Notifications.notifyLogged('updateAvatar', {
+				username: args.username,
+			});
+		} else {
+			const user = Meteor.user();
+			FileUpload.getStore('Avatars').deleteByName(user.username);
+			Users.unsetAvatarOrigin(user._id);
+			Notifications.notifyLogged('updateAvatar', {
+				username: user.username,
+			});
+		}
 	},
 });
 
diff --git a/server/methods/setAvatarFromService.js b/server/methods/setAvatarFromService.js
index dc8ce21cd727e..3ce94332f484f 100644
--- a/server/methods/setAvatarFromService.js
+++ b/server/methods/setAvatarFromService.js
@@ -5,10 +5,11 @@ import { settings } from '../../app/settings';
 import { setUserAvatar } from '../../app/lib';
 
 Meteor.methods({
-	setAvatarFromService(dataURI, contentType, service) {
+	setAvatarFromService(dataURI, contentType, service, userData) {
 		check(dataURI, String);
 		check(contentType, Match.Optional(String));
 		check(service, Match.Optional(String));
+		check(userData, Match.Optional(Object));
 
 		if (!Meteor.userId()) {
 			throw new Meteor.Error('error-invalid-user', 'Invalid user', {
@@ -22,6 +23,10 @@ Meteor.methods({
 			});
 		}
 
+		if (userData) {
+			return setUserAvatar(userData, dataURI, contentType, service);
+		}
+
 		const user = Meteor.user();
 
 		return setUserAvatar(user, dataURI, contentType, service);