Move profile parts of the rooms page and the config content into a new page: settings
This commit is contained in:
Emmanuel ROHEE
parent
dde50d4245
commit
aaf623fa53
|
|
@ -31,31 +31,15 @@ angular.module('MatrixWebClientController', ['matrixService'])
|
|||
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
|
||||
$scope.location = $location.path();
|
||||
});
|
||||
|
||||
|
||||
// Manage the display of the current config
|
||||
$scope.config;
|
||||
|
||||
// Toggles the config display
|
||||
$scope.showConfig = function() {
|
||||
if ($scope.config) {
|
||||
$scope.config = undefined;
|
||||
}
|
||||
else {
|
||||
$scope.config = matrixService.config();
|
||||
}
|
||||
};
|
||||
|
||||
$scope.closeConfig = function() {
|
||||
if ($scope.config) {
|
||||
$scope.config = undefined;
|
||||
}
|
||||
};
|
||||
|
||||
if (matrixService.isUserLoggedIn()) {
|
||||
// eventStreamService.resume();
|
||||
}
|
||||
|
||||
$scope.go = function(url) {
|
||||
$location.url(url);
|
||||
};
|
||||
|
||||
// Logs the user out
|
||||
$scope.logout = function() {
|
||||
// kill the event stream
|
||||
|
|
|
|||
|
|
@ -308,18 +308,6 @@ h1 {
|
|||
float: right;
|
||||
}
|
||||
|
||||
#config {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 100px;
|
||||
left: 50%;
|
||||
width: 500px;
|
||||
margin-left: -250px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.text_entry_section {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ var matrixWebClient = angular.module('matrixWebClient', [
|
|||
'LoginController',
|
||||
'RoomController',
|
||||
'RoomsController',
|
||||
'SettingsController',
|
||||
'UserController',
|
||||
'matrixService',
|
||||
'eventStreamService',
|
||||
|
|
@ -48,6 +49,10 @@ matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider',
|
|||
templateUrl: 'rooms/rooms.html',
|
||||
controller: 'RoomsController'
|
||||
}).
|
||||
when('/settings', {
|
||||
templateUrl: 'settings/settings.html',
|
||||
controller: 'SettingsController'
|
||||
}).
|
||||
when('/user/:user_matrix_id', {
|
||||
templateUrl: 'user/user.html',
|
||||
controller: 'UserController'
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
<script src="room/room-controller.js"></script>
|
||||
<script src="room/room-directive.js"></script>
|
||||
<script src="rooms/rooms-controller.js"></script>
|
||||
<script src="settings/settings-controller.js"></script>
|
||||
<script src="user/user-controller.js"></script>
|
||||
<script src="components/matrix/matrix-service.js"></script>
|
||||
<script src="components/matrix/event-stream-service.js"></script>
|
||||
|
|
@ -33,22 +34,13 @@
|
|||
<header id="header">
|
||||
<!-- Do not show buttons on the login page -->
|
||||
<div id="header-buttons" ng-hide="'/login' == location ">
|
||||
<button ng-click="showConfig()">Config</button>
|
||||
<button ng-click='go("settings")'>Settings</button>
|
||||
<button ng-click="logout()">Log out</button>
|
||||
</div>
|
||||
|
||||
<h1>[matrix]</h1>
|
||||
</header>
|
||||
|
||||
<div id="config" ng-hide="!config">
|
||||
<div>Home server: {{ config.homeserver }} </div>
|
||||
<div>User ID: {{ config.user_id }} </div>
|
||||
<div>Access token: {{ config.access_token }} </div>
|
||||
<div><button ng-click="requestNotifications()">Request notifications</button></div>
|
||||
<div><button ng-click="closeConfig()">Close</button></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-view></div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@ limitations under the License.
|
|||
angular.module('RoomsController', ['matrixService', 'mFileInput', 'mFileUpload', 'eventHandlerService'])
|
||||
.controller('RoomsController', ['$scope', '$location', 'matrixService', 'mFileUpload', 'eventHandlerService', 'eventStreamService',
|
||||
function($scope, $location, matrixService, mFileUpload, eventHandlerService, eventStreamService) {
|
||||
|
||||
|
||||
$scope.config = matrixService.config();
|
||||
$scope.rooms = {};
|
||||
$scope.public_rooms = [];
|
||||
$scope.newRoomId = "";
|
||||
|
|
@ -37,20 +38,6 @@ angular.module('RoomsController', ['matrixService', 'mFileInput', 'mFileUpload',
|
|||
$scope.joinAlias = {
|
||||
room_alias: "",
|
||||
};
|
||||
|
||||
$scope.newProfileInfo = {
|
||||
name: matrixService.config().displayName,
|
||||
avatar: matrixService.config().avatarUrl,
|
||||
avatarFile: undefined
|
||||
};
|
||||
|
||||
$scope.linkedEmails = {
|
||||
linkNewEmail: "", // the email entry box
|
||||
emailBeingAuthed: undefined, // to populate verification text
|
||||
authTokenId: undefined, // the token id from the IS
|
||||
emailCode: "", // the code entry box
|
||||
linkedEmailList: matrixService.config().emailList // linked email list
|
||||
};
|
||||
|
||||
$scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) {
|
||||
var config = matrixService.config();
|
||||
|
|
@ -170,107 +157,6 @@ angular.module('RoomsController', ['matrixService', 'mFileInput', 'mFileUpload',
|
|||
}
|
||||
);
|
||||
};
|
||||
|
||||
$scope.setDisplayName = function(newName) {
|
||||
matrixService.setDisplayName(newName).then(
|
||||
function(response) {
|
||||
$scope.feedback = "Updated display name.";
|
||||
var config = matrixService.config();
|
||||
config.displayName = newName;
|
||||
matrixService.setConfig(config);
|
||||
matrixService.saveConfig();
|
||||
},
|
||||
function(error) {
|
||||
$scope.feedback = "Can't update display name: " + error.data;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
$scope.$watch("newProfileInfo.avatarFile", function(newValue, oldValue) {
|
||||
if ($scope.newProfileInfo.avatarFile) {
|
||||
console.log("Uploading new avatar file...");
|
||||
mFileUpload.uploadFile($scope.newProfileInfo.avatarFile).then(
|
||||
function(url) {
|
||||
$scope.newProfileInfo.avatar = url;
|
||||
$scope.setAvatar($scope.newProfileInfo.avatar);
|
||||
},
|
||||
function(error) {
|
||||
$scope.feedback = "Can't upload image";
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
$scope.setAvatar = function(newUrl) {
|
||||
console.log("Updating avatar to "+newUrl);
|
||||
matrixService.setProfilePictureUrl(newUrl).then(
|
||||
function(response) {
|
||||
console.log("Updated avatar");
|
||||
$scope.feedback = "Updated avatar.";
|
||||
var config = matrixService.config();
|
||||
config.avatarUrl = newUrl;
|
||||
matrixService.setConfig(config);
|
||||
matrixService.saveConfig();
|
||||
},
|
||||
function(error) {
|
||||
$scope.feedback = "Can't update avatar: " + error.data;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
$scope.linkEmail = function(email) {
|
||||
matrixService.linkEmail(email).then(
|
||||
function(response) {
|
||||
if (response.data.success === true) {
|
||||
$scope.linkedEmails.authTokenId = response.data.tokenId;
|
||||
$scope.emailFeedback = "You have been sent an email.";
|
||||
$scope.linkedEmails.emailBeingAuthed = email;
|
||||
}
|
||||
else {
|
||||
$scope.emailFeedback = "Failed to send email.";
|
||||
}
|
||||
},
|
||||
function(error) {
|
||||
$scope.emailFeedback = "Can't send email: " + error.data;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
$scope.submitEmailCode = function(code) {
|
||||
var tokenId = $scope.linkedEmails.authTokenId;
|
||||
if (tokenId === undefined) {
|
||||
$scope.emailFeedback = "You have not requested a code with this email.";
|
||||
return;
|
||||
}
|
||||
matrixService.authEmail(matrixService.config().user_id, tokenId, code).then(
|
||||
function(response) {
|
||||
if ("success" in response.data && response.data.success === false) {
|
||||
$scope.emailFeedback = "Failed to authenticate email.";
|
||||
return;
|
||||
}
|
||||
var config = matrixService.config();
|
||||
var emailList = {};
|
||||
if ("emailList" in config) {
|
||||
emailList = config.emailList;
|
||||
}
|
||||
emailList[response.address] = response;
|
||||
// save the new email list
|
||||
config.emailList = emailList;
|
||||
matrixService.setConfig(config);
|
||||
matrixService.saveConfig();
|
||||
// invalidate the email being authed and update UI.
|
||||
$scope.linkedEmails.emailBeingAuthed = undefined;
|
||||
$scope.emailFeedback = "";
|
||||
$scope.linkedEmails.linkedEmailList = emailList;
|
||||
$scope.linkedEmails.linkNewEmail = "";
|
||||
$scope.linkedEmails.emailCode = "";
|
||||
},
|
||||
function(reason) {
|
||||
$scope.emailFeedback = "Failed to auth email: " + reason;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
$scope.refresh();
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -2,64 +2,26 @@
|
|||
|
||||
<div id="page">
|
||||
<div id="wrapper">
|
||||
|
||||
|
||||
<div>
|
||||
<form>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="profile-avatar">
|
||||
<img ng-src="{{ newProfileInfo.avatar || 'img/default-profile.jpg' }}" m-file-input="newProfileInfo.avatarFile"/>
|
||||
<img ng-src="{{ config.avatarUrl || 'img/default-profile.jpg' }}"/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<!-- TODO: To enable once we have an upload server
|
||||
<button m-file-input="newProfileInfo.avatarFile">Upload new Avatar</button>
|
||||
or use an existing image URL:
|
||||
-->
|
||||
<div>
|
||||
<input size="40" ng-model="newProfileInfo.avatar" ng-enter="setAvatar(newProfileInfo.avatar)" placeholder="Image URL"/>
|
||||
<button ng-disabled="!newProfileInfo.avatar" ng-click="setAvatar(newProfileInfo.avatar)">Update Avatar</button>
|
||||
<div id="user-ids">
|
||||
<div id="user-displayname">{{ config.displayName }}</div>
|
||||
<div>{{ config.user_id }}</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<form>
|
||||
<input size="40" ng-model="newProfileInfo.name" ng-enter="setDisplayName(newProfileInfo.name)" />
|
||||
<button ng-disabled="!newProfileInfo.name" ng-click="setDisplayName(newProfileInfo.name)">Update Name</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
<form>
|
||||
<input size="40" ng-model="linkedEmails.linkNewEmail" ng-enter="linkEmail(linkedEmails.linkNewEmail)" />
|
||||
<button ng-disabled="!linkedEmails.linkNewEmail" ng-click="linkEmail(linkedEmails.linkNewEmail)">
|
||||
Link Email
|
||||
</button>
|
||||
{{ emailFeedback }}
|
||||
</form>
|
||||
<form ng-hide="!linkedEmails.emailBeingAuthed">
|
||||
Enter validation token for {{ linkedEmails.emailBeingAuthed }}:
|
||||
<br />
|
||||
<input size="20" ng-model="linkedEmails.emailCode" ng-enter="submitEmailCode(linkedEmails.emailCode)" />
|
||||
<button ng-disabled="!linkedEmails.emailCode || !linkedEmails.linkNewEmail" ng-click="submitEmailCode(linkedEmails.emailCode)">
|
||||
Submit Code
|
||||
</button>
|
||||
</form>
|
||||
Linked emails:
|
||||
<table>
|
||||
<tr ng-repeat="(address, info) in linkedEmails.linkedEmailList">
|
||||
<td>{{address}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<h3>My rooms</h3>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
/*
|
||||
Copyright 2014 matrix.org
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
angular.module('SettingsController', ['matrixService', 'mFileUpload'])
|
||||
.controller('SettingsController', ['$scope', 'matrixService', 'mFileUpload',
|
||||
function($scope, matrixService, mFileUpload) {
|
||||
$scope.config = matrixService.config();
|
||||
|
||||
$scope.profile = {
|
||||
displayName: $scope.config.displayName,
|
||||
avatarUrl: $scope.config.avatarUrl
|
||||
};
|
||||
|
||||
$scope.$watch("profile.avatarFile", function(newValue, oldValue) {
|
||||
if ($scope.profile.avatarFile) {
|
||||
console.log("Uploading new avatar file...");
|
||||
mFileUpload.uploadFile($scope.profile.avatarFile).then(
|
||||
function(url) {
|
||||
$scope.profile.avatarUrl = url;
|
||||
},
|
||||
function(error) {
|
||||
$scope.feedback = "Can't upload image";
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
$scope.saveProfile = function() {
|
||||
if ($scope.profile.displayName !== $scope.config.displayName) {
|
||||
setDisplayName($scope.profile.displayName);
|
||||
}
|
||||
if ($scope.profile.avatarUrl !== $scope.config.avatarUrl) {
|
||||
setAvatar($scope.profile.avatarUrl);
|
||||
}
|
||||
};
|
||||
|
||||
var setDisplayName = function(displayName) {
|
||||
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;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
var setAvatar = function(avatarURL) {
|
||||
console.log("Updating avatar to " + avatarURL);
|
||||
matrixService.setProfilePictureUrl(avatarURL).then(
|
||||
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;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
$scope.linkedEmails = {
|
||||
linkNewEmail: "", // the email entry box
|
||||
emailBeingAuthed: undefined, // to populate verification text
|
||||
authTokenId: undefined, // the token id from the IS
|
||||
emailCode: "", // the code entry box
|
||||
linkedEmailList: matrixService.config().emailList // linked email list
|
||||
};
|
||||
|
||||
$scope.linkEmail = function(email) {
|
||||
matrixService.linkEmail(email).then(
|
||||
function(response) {
|
||||
if (response.data.success === true) {
|
||||
$scope.linkedEmails.authTokenId = response.data.tokenId;
|
||||
$scope.emailFeedback = "You have been sent an email.";
|
||||
$scope.linkedEmails.emailBeingAuthed = email;
|
||||
}
|
||||
else {
|
||||
$scope.emailFeedback = "Failed to send email.";
|
||||
}
|
||||
},
|
||||
function(error) {
|
||||
$scope.emailFeedback = "Can't send email: " + error.data;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
$scope.submitEmailCode = function(code) {
|
||||
var tokenId = $scope.linkedEmails.authTokenId;
|
||||
if (tokenId === undefined) {
|
||||
$scope.emailFeedback = "You have not requested a code with this email.";
|
||||
return;
|
||||
}
|
||||
matrixService.authEmail(matrixService.config().user_id, tokenId, code).then(
|
||||
function(response) {
|
||||
if ("success" in response.data && response.data.success === false) {
|
||||
$scope.emailFeedback = "Failed to authenticate email.";
|
||||
return;
|
||||
}
|
||||
var config = matrixService.config();
|
||||
var emailList = {};
|
||||
if ("emailList" in config) {
|
||||
emailList = config.emailList;
|
||||
}
|
||||
emailList[response.address] = response;
|
||||
// save the new email list
|
||||
config.emailList = emailList;
|
||||
matrixService.setConfig(config);
|
||||
matrixService.saveConfig();
|
||||
// invalidate the email being authed and update UI.
|
||||
$scope.linkedEmails.emailBeingAuthed = undefined;
|
||||
$scope.emailFeedback = "";
|
||||
$scope.linkedEmails.linkedEmailList = emailList;
|
||||
$scope.linkedEmails.linkNewEmail = "";
|
||||
$scope.linkedEmails.emailCode = "";
|
||||
},
|
||||
function(reason) {
|
||||
$scope.emailFeedback = "Failed to auth email: " + reason;
|
||||
}
|
||||
);
|
||||
};
|
||||
}]);
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<div ng-controller="SettingsController" class="user">
|
||||
|
||||
<div id="page">
|
||||
<div id="wrapper">
|
||||
|
||||
<h3>Me</h3>
|
||||
<div>
|
||||
<form>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="profile-avatar">
|
||||
<img ng-src="{{ profile.avatarUrl || 'img/default-profile.jpg' }}" m-file-input="profile.avatarFile"/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="user-ids">
|
||||
<input size="40" ng-model="profile.displayName"/>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button ng-disabled="(profile.displayName == config.displayName) && (profile.avatarUrl == config.avatarUrl)"
|
||||
ng-click="saveProfile()">Save</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<h3>Linked emails</h3>
|
||||
<div>
|
||||
<form>
|
||||
<input size="40" ng-model="linkedEmails.linkNewEmail" ng-enter="linkEmail(linkedEmails.linkNewEmail)" />
|
||||
<button ng-disabled="!linkedEmails.linkNewEmail" ng-click="linkEmail(linkedEmails.linkNewEmail)">
|
||||
Link Email
|
||||
</button>
|
||||
{{ emailFeedback }}
|
||||
</form>
|
||||
<form ng-hide="!linkedEmails.emailBeingAuthed">
|
||||
Enter validation token for {{ linkedEmails.emailBeingAuthed }}:
|
||||
<br />
|
||||
<input size="20" ng-model="linkedEmails.emailCode" ng-enter="submitEmailCode(linkedEmails.emailCode)" />
|
||||
<button ng-disabled="!linkedEmails.emailCode || !linkedEmails.linkNewEmail" ng-click="submitEmailCode(linkedEmails.emailCode)">
|
||||
Submit Code
|
||||
</button>
|
||||
</form>
|
||||
<table>
|
||||
<tr ng-repeat="(address, info) in linkedEmails.linkedEmailList">
|
||||
<td>{{address}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<h3>Configuration</h3>
|
||||
<div>
|
||||
<div>Home server: {{ config.homeserver }} </div>
|
||||
<div>User ID: {{ config.user_id }} </div>
|
||||
<div>Access token: {{ config.access_token }} </div>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
<div><button ng-click="requestNotifications()">Request notifications</button></div>
|
||||
</div>
|
||||
<br/>
|
||||
|
||||
{{ feedback }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue