Get user display name and avatar from the server rather than storing them in the local storage

This commit is contained in:
Emmanuel ROHEE 2014-08-29 18:22:05 +02:00
parent b86d2a2d4f
commit 67f42b2f26
4 changed files with 68 additions and 21 deletions

View file

@ -37,6 +37,11 @@ angular.module('HomeController', ['matrixService', 'eventHandlerService', 'Recen
$scope.joinAlias = {
room_alias: ""
};
$scope.profile = {
displayName: "",
avatarUrl: ""
};
var refresh = function() {
@ -108,6 +113,28 @@ angular.module('HomeController', ['matrixService', 'eventHandlerService', 'Recen
};
$scope.onInit = function() {
// Load profile data
// Display name
matrixService.getDisplayName($scope.config.user_id).then(
function(response) {
$scope.profile.displayName = response.data.displayname;
$scope.profileOnServer.displayName = response.data.displayname;
},
function(error) {
$scope.feedback = "Can't load display name";
}
);
// Avatar
matrixService.getProfilePictureUrl($scope.config.user_id).then(
function(response) {
$scope.profile.avatarUrl = response.data.avatar_url;
$scope.profileOnServer.avatarUrl = response.data.avatar_url;
},
function(error) {
$scope.feedback = "Can't load avatar URL";
}
);
refresh();
};
}]);

View file

@ -9,13 +9,13 @@
<tr>
<td>
<div class="profile-avatar">
<img ng-src="{{ config.avatarUrl || 'img/default-profile.jpg' }}"/>
<img ng-src="{{ (null !== profile.avatarUrl) ? profile.avatarUrl : 'img/default-profile.jpg' }}"/>
</div>
</td>
<td>
<div id="user-ids">
<div id="user-displayname">{{ config.displayName }}</div>
<div>{{ config.user_id }}</div>
<div id="user-displayname">{{ profile.displayName }}</div>
<div>{{ config.user_id }}</div>
</div>
</td>
</tr>

View file

@ -22,10 +22,40 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
$scope.config = matrixService.config();
$scope.profile = {
displayName: $scope.config.displayName,
avatarUrl: $scope.config.avatarUrl
displayName: "",
avatarUrl: ""
};
// The profile as stored on the server
$scope.profileOnServer = {
displayName: "",
avatarUrl: ""
};
$scope.onInit = function() {
// Load profile data
// Display name
matrixService.getDisplayName($scope.config.user_id).then(
function(response) {
$scope.profile.displayName = response.data.displayname;
$scope.profileOnServer.displayName = response.data.displayname;
},
function(error) {
$scope.feedback = "Can't load display name";
}
);
// Avatar
matrixService.getProfilePictureUrl($scope.config.user_id).then(
function(response) {
$scope.profile.avatarUrl = response.data.avatar_url;
$scope.profileOnServer.avatarUrl = response.data.avatar_url;
},
function(error) {
$scope.feedback = "Can't load avatar URL";
}
);
};
$scope.$watch("profile.avatarFile", function(newValue, oldValue) {
if ($scope.profile.avatarFile) {
console.log("Uploading new avatar file...");
@ -41,10 +71,10 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
});
$scope.saveProfile = function() {
if ($scope.profile.displayName !== $scope.config.displayName) {
if ($scope.profile.displayName !== $scope.profileOnServer.displayName) {
setDisplayName($scope.profile.displayName);
}
if ($scope.profile.avatarUrl !== $scope.config.avatarUrl) {
if ($scope.profile.avatarUrl !== $scope.profileOnServer.avatarUrl) {
setAvatar($scope.profile.avatarUrl);
}
};
@ -53,11 +83,6 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
matrixService.setDisplayName(displayName).then(
function(response) {
$scope.feedback = "Updated display name.";
var config = matrixService.config();
config.displayName = displayName;
matrixService.setConfig(config);
matrixService.saveConfig();
},
function(error) {
$scope.feedback = "Can't update display name: " + error.data;
@ -71,11 +96,6 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu
function(response) {
console.log("Updated avatar");
$scope.feedback = "Updated avatar.";
var config = matrixService.config();
config.avatarUrl = avatarURL;
matrixService.setConfig(config);
matrixService.saveConfig();
},
function(error) {
$scope.feedback = "Can't update avatar: " + error.data;

View file

@ -1,4 +1,4 @@
<div ng-controller="SettingsController" class="user">
<div ng-controller="SettingsController" class="user" data-ng-init="onInit()">
<div id="page">
<div id="wrapper">
@ -10,7 +10,7 @@
<tr>
<td>
<div class="profile-avatar">
<img ng-src="{{ profile.avatarUrl || 'img/default-profile.jpg' }}" m-file-input="profile.avatarFile"/>
<img ng-src="{{ (null !== profile.avatarUrl) ? profile.avatarUrl : 'img/default-profile.jpg' }}" m-file-input="profile.avatarFile"/>
</div>
</td>
<td>
@ -19,7 +19,7 @@
</div>
</td>
<td>
<button ng-disabled="(profile.displayName == config.displayName) && (profile.avatarUrl == config.avatarUrl)"
<button ng-disabled="(profile.displayName == profileOnServer.displayName) && (profile.avatarUrl == profileOnServer.avatarUrl)"
ng-click="saveProfile()">Save</button>
</td>
</tr>