Merge pull request #435 from RocketChat/user-settings

User settings

client/routes/router.coffee

@@ -45,6 +45,15 @@ FlowRouter.route '/settings/:group?',
 	action: ->
 		BlazeLayout.render 'main', {center: 'settings'}
 
+FlowRouter.route '/usersettings/:group?',
+	name: 'userSettings'
+
+	action: (params) ->
+		unless params.group
+			params.group = 'Profile'
+		params.group = _.capitalize params.group, true
+		BlazeLayout.render 'main', { center: "userSettings#{params.group}" }
+
 FlowRouter.route '/history/private',
 	name: 'privateHistory'
 

client/startup/startup.coffee

@@ -17,16 +17,18 @@ Meteor.startup ->
 			lng = lng.replace re, (match, parts...) -> return parts[0] + parts[1].toUpperCase()
 		return lng
 
-	if localStorage.getItem("userLanguage")
-		userLanguage = localStorage.getItem("userLanguage")
-	else
-		userLanguage = defaultUserLanguage()
-	localStorage.setItem("userLanguage", userLanguage)
+	languageComputation = Tracker.autorun ->
+		if Meteor.user()?.language
+			userLanguage = Meteor.user().language
+			languageComputation.stop()
+		else
+			userLanguage = defaultUserLanguage()
+		localStorage.setItem("userLanguage", userLanguage)
 
-	userLanguage = userLanguage.split('-').shift()
-	TAPi18n.setLanguage(userLanguage)
+		userLanguage = userLanguage.split('-').shift()
+		TAPi18n.setLanguage(userLanguage)
 
-	filename = "/moment-locales/#{userLanguage.toLowerCase()}.js"
-	if filename isnt '/moment-locales/en.js'
-		$.getScript filename, (data) ->
-			moment.locale(userLanguage)
+		filename = "/moment-locales/#{userLanguage.toLowerCase()}.js"
+		if filename isnt '/moment-locales/en.js'
+			$.getScript filename, (data) ->
+				moment.locale(userLanguage)

client/views/app/sideNav/userSettingsFlex.coffee

-Template.userSettingsFlex.helpers
-	languages: ->
-		languages = TAPi18n.getLanguages()
-		result = []
-		for key, language of languages
-			result.push _.extend(language, { key: key })
-		return _.sortBy(result, 'key')
-
-	userLanguage: (key) ->
-		return localStorage.getItem('userLanguage')?.split('-').shift().toLowerCase() is key
-
-Template.userSettingsFlex.events
-	'mouseenter header': ->
-		SideNav.overArrow()
-
-	'mouseleave header': ->
-		SideNav.leaveArrow()
-
-	'click header': ->
-		SideNav.closeFlex()
-
-	'click .cancel-settings': ->
-		SideNav.closeFlex()
-
-	'click .input-submit .save': (e, instance) ->
-		selectedLanguage = $('#language').val()
-		if localStorage.getItem('userLanguage') isnt selectedLanguage
-			localStorage.setItem 'userLanguage', selectedLanguage
-			Meteor._reload.reload()
-
-		if $('#password').val()
-			Meteor.call 'setPassword', $('#password').val(), (err, results) ->
-				if results 
-					toastr.success t('Password_changed_successfully')
-				if err
-					toastr.error error.reason
-
-
-		SideNav.closeFlex()
-		instance.clearForm()
-
-Template.userSettingsFlex.onCreated ->
-	instance = this
-	
-	@clearForm = ->
-		instance.find('#language').value = localStorage.getItem('userLanguage')
-		instance.find('#password').value = ''

client/views/app/sideNav/userSettingsFlex.html

-<template name="userSettingsFlex">
-	<div class="content no-shadow">
-		<div class="wrapper">
-			<h4>{{_ "Settings"}}</h4>
-			<div class="input-line">
-				<label for="language">{{_ "Language"}}</label>
-				<div>
-					<select id="language" class="required">
-						{{#each languages}}
-						<option value="{{key}}" selected="{{userLanguage key}}" dir="auto">{{name}}</option>
-						{{/each}}
-					</select>
-				</div>
-			</div>
-			<div class="input-line">
-				<label for="password">{{_ "Password"}}</label>
-				<div>
-					<input type="password" name="password" id="password" />
-				</div>
-			</div>
-			<div class="input-submit">
-				<button class="button primary clean save">{{_ "Save"}}</button>
-				<button class="button clean cancel-settings">{{_ "Cancel" }}</button>
-			</div>
-		</div>
-	</div>
-</template>

client/views/app/sideNav/userStatus.coffee

@@ -37,9 +37,8 @@ Template.userStatus.events
 
 	'click #settings': (event) ->
 		SideNav.setFlex "userSettingsFlex"
-		setTimeout ->
-			SideNav.openFlex()
-		, 125
+		SideNav.openFlex()
+		FlowRouter.go 'userSettings'
 
 Template.userStatus.rendered = ->
 	AccountBox.init()

client/views/app/sideNav/userStatus.html

@@ -17,8 +17,7 @@
 					<a href="" data-status="away" class="status away"><span>{{_ "Away" context="male"}}</span></a>
 					<a href="" data-status="busy" class="status busy"><span>{{_ "Busy" context="male"}}</span></a>
 					<a href="" data-status="offline" class="status offline"><span>{{_ "Invisible"}}</span></a>
-					<a href="" id="avatar"><i class="icon-camera"></i><span>{{_ "Change_avatar"}}</span></a>
-					<a href="" id="settings"><i class="icon-sliders"></i><span>{{_ "Settings"}}</span></a>
+					<a href="" id="settings"><i class="icon-sliders"></i><span>{{_ "My_Account"}}</span></a>
 					<a href="" id="logout"><i class="icon-logout"></i><span>{{_ "Logout"}}</span></a>
 				</div>
 			</nav>

client/views/avatar/prompt.coffee → client/views/usersettings/avatar/prompt.coffee

@@ -12,6 +12,10 @@ Template.avatarPrompt.onCreated ->
 
 	self.getSuggestions()
 
+Template.avatarPrompt.onRendered ->
+	Tracker.afterFlush ->
+		SideNav.setFlex "userSettingsFlex"
+		SideNav.openFlex()
 
 Template.avatarPrompt.helpers
 	suggestions: ->
@@ -31,11 +35,11 @@ Template.avatarPrompt.events
 		if @service is 'initials'
 			Meteor.call 'resetAvatar'
 			updateAvatarOfUsername Meteor.user().username
-			FlowRouter.go 'home'
+			toastr.success t('Avatar_changed_successfully')
 		else
 			Meteor.call 'setAvatarFromService', @blob, @contentType, @service, ->
 				updateAvatarOfUsername Meteor.user().username
-				FlowRouter.go 'home'
+				toastr.success t('Avatar_changed_successfully')
 
 	'click .login-with-service': (event, template) ->
 		loginWithService = "loginWith#{_.capitalize(this)}"

client/views/usersettings/userSettings.coffee

+Template.userSettings.helpers
+	flexOpened: ->
+		return 'opened' if Session.equals('flexOpened', true)
+	arrowPosition: ->
+		console.log 'room.helpers arrowPosition' if window.rocketDebug
+		return 'left' unless Session.equals('flexOpened', true)
+
+Template.userSettings.onRendered ->
+	Tracker.afterFlush ->
+		SideNav.setFlex "userSettingsFlex"
+		SideNav.openFlex()

client/views/usersettings/userSettings.html

+<template name="userSettings">
+	<section class="page-container page-home page-static">
+		<head class="fixed-title">
+			{{> burger}}
+			<h2>
+				<span class="room-title">{{_ "User_Settings"}}</span>
+			</h2>
+		</head>
+	</section>
+</template>
\ No newline at end of file

client/views/usersettings/userSettingsFlex.coffee

+Template.userSettingsFlex.events
+	'mouseenter header': ->
+		SideNav.overArrow()
+
+	'mouseleave header': ->
+		SideNav.leaveArrow()
+
+	'click header': ->
+		SideNav.closeFlex()
+
+	'click .cancel-settings': ->
+		SideNav.closeFlex()

client/views/usersettings/userSettingsFlex.html

+<template name="userSettingsFlex">
+	<header>
+		<div>
+			<h4>{{_ "My_Account"}}</h4>
+		</div>
+	</header>
+	<div class="content">
+		<div class="wrapper">
+			<ul>
+				<li>
+					<a href="{{pathFor 'userSettings' group='profile'}}">{{_ "Profile"}}</a>
+					{{!-- <a href="{{pathFor 'userSettings' group='account'}}">{{_ "Account_Settings"}}</a> --}}
+					{{!-- <a href="{{pathFor 'userSettings' group='notification'}}">{{_ "Notification"}}</a> --}}
+					<a href="{{pathFor 'changeAvatar'}}">{{_ "Change_avatar"}}</a> {{!-- move this to profile --}}
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>

client/views/usersettings/userSettingsProfile.coffee

+Template.userSettingsProfile.helpers
+	flexOpened: ->
+		return 'opened' if Session.equals('flexOpened', true)
+	arrowPosition: ->
+		console.log 'room.helpers arrowPosition' if window.rocketDebug
+		return 'left' unless Session.equals('flexOpened', true)
+	languages: ->
+		languages = TAPi18n.getLanguages()
+		result = []
+		for key, language of languages
+			result.push _.extend(language, { key: key })
+		return _.sortBy(result, 'key')
+
+	userLanguage: (key) ->
+		return localStorage.getItem('userLanguage')?.split('-').shift().toLowerCase() is key
+
+Template.userSettingsProfile.onCreated ->
+	settingsTemplate = this.parentTemplate(3)
+	settingsTemplate.child ?= []
+	settingsTemplate.child.push this
+
+	@clearForm = ->
+		@find('#language').value = localStorage.getItem('userLanguage')
+		@find('#password').value = ''
+
+	@save = ->
+		instance = @
+		data = {}
+		reload = false
+		selectedLanguage = $('#language').val()
+		
+		if localStorage.getItem('userLanguage') isnt selectedLanguage
+			localStorage.setItem 'userLanguage', selectedLanguage
+			data.language = selectedLanguage
+			reload = true
+
+		if _.trim $('#password').val()
+			data.password = _.trim $('#password').val()
+
+		Meteor.call 'saveUserProfile', data, (error, results) ->
+			if results 
+				toastr.success t('Profile_saved_successfully')
+				instance.clearForm()
+				if reload
+					setTimeout -> 
+						Meteor._reload.reload()
+					, 1000
+
+			if error
+				toastr.error error.reason
+
+Template.userSettingsProfile.onRendered ->
+	Tracker.afterFlush ->
+		SideNav.setFlex "userSettingsFlex"
+		SideNav.openFlex()
+
+Template.userSettingsProfile.events
+	'click .submit button': (e, t) ->
+		t.save()

client/views/usersettings/userSettingsProfile.html

+<template name="userSettingsProfile">
+	<section class="page-container page-home page-static">
+		<head class="fixed-title">
+			{{> burger}}
+			<h2>
+				<span class="room-title">{{_ "Profile"}}</span>
+			</h2>
+		</head>
+		<div class="content">
+			<div class="rocket-form">
+				<fieldset>
+					<div class="input-line">
+						<label for="language">{{_ "Language"}}</label>
+						<div>
+							<select id="language" class="required">
+								{{#each languages}}
+								<option value="{{key}}" selected="{{userLanguage key}}" dir="auto">{{name}}</option>
+								{{/each}}
+							</select>
+						</div>
+					</div>
+					<div class="input-line">
+						<label for="password">{{_ "Password"}}</label>
+						<div>
+							<input type="password" name="password" id="password" />
+						</div>
+					</div>
+				</fieldset>
+				<div class="submit">
+					<button class="button"><i class="icon-send"></i><span>{{_ "Save_changes"}}</span></button>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>

i18n/en.i18n.json

@@ -5,6 +5,7 @@
   "Add_users" : "Add users",
   "All_channels" : "All channels",
   "App_Settings" : "App Settings",
+  "Avatar_changed_successfully" : "Avatar changed successfully",
   "and" : "and",
   "are_also_typing" : "are also typing",
   "are_typing" : "are typing",
@@ -93,6 +94,7 @@
   "More_channels" : "More channels",
   "Msgs" : "Msgs",
   "multi" : "multi",
+  "My_Account" : "My Account",
   "n_messages" : "%s messages",
   "Name" : "Name",
   "New_messages" : "New messages",
@@ -115,6 +117,8 @@
   "Powered_by" : "Powered by",
   "Privacy" : "Privacy",
   "Private_Groups" : "Private Groups",
+  "Profile": "Profile",
+  "Profile_saved_successfully": "Profile saved successfully",
   "Proudly_developed" : "Proudly developed with Meteor",
   "Quick_Search" : "Quick Search",
   "quote" : "quote",
@@ -127,6 +131,7 @@
   "Room_name_changed" : "Room name changed to: <em>__room_name__</em> by <em>__user_by__</em>",
   "Room_name_changed_successfully" : "Room name changed successfully",
   "Save" : "Save",
+  "Save_changes" : "Save changes",
   "Search" : "Search",
   "Search_settings" : "Search settings",
   "See_all" : "See all",
@@ -161,6 +166,7 @@
   "User_left_female" : "User <em>__user_left__</em> left.",
   "User_logged_out" : "User is logged out",
   "User_removed_by" : "User <em>__user_removed__</em> removed by <em>__user_by__</em>.",
+  "User_Settings" : "User Settings",
   "Username" : "Username",
   "Username_cant_be_empty" : "The username cannot be empty",
   "Username_description" : "The username is used to allow others to mention you in messages.",

server/methods/saveUserProfile.coffee

+Meteor.methods
+	saveUserProfile: (settings) ->
+		if Meteor.userId()
+			if settings.language?
+				Meteor.users.update Meteor.userId(), { $set: { language: settings.language } }
+
+			if settings.password?
+				Accounts.setPassword Meteor.userId(), settings.password, { logout: false }
+
+			profile = {}
+			
+			Meteor.users.update Meteor.userId(), { $set: { "settings.profile": profile } }
+
+			return true

server/publications/userData.coffee

@@ -14,3 +14,4 @@ Meteor.publish 'userData', ->
 			avatarOrigin: 1
 			admin: 1
 			utcOffset: 1
+			language: 1