diff --git a/webclient/app-controller.js b/webclient/app-controller.js
index 92ad01e4f9..84cb94dc74 100644
--- a/webclient/app-controller.js
+++ b/webclient/app-controller.js
@@ -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
diff --git a/webclient/app.css b/webclient/app.css
index 207f35f5f3..72b38cd950 100644
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -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;
diff --git a/webclient/app.js b/webclient/app.js
index 944b8ec270..f666a63bf8 100644
--- a/webclient/app.js
+++ b/webclient/app.js
@@ -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'
diff --git a/webclient/index.html b/webclient/index.html
index 27d9208193..95f682580e 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -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>
diff --git a/webclient/rooms/rooms-controller.js b/webclient/rooms/rooms-controller.js
index 557fbe2378..d891558be5 100644
--- a/webclient/rooms/rooms-controller.js
+++ b/webclient/rooms/rooms-controller.js
@@ -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();
}]);
diff --git a/webclient/rooms/rooms.html b/webclient/rooms/rooms.html
index ba3b7d8bad..2e25c0f084 100644
--- a/webclient/rooms/rooms.html
+++ b/webclient/rooms/rooms.html
@@ -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>
diff --git a/webclient/settings/settings-controller.js b/webclient/settings/settings-controller.js
new file mode 100644
index 0000000000..5d3f7cb2b8
--- /dev/null
+++ b/webclient/settings/settings-controller.js
@@ -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;
+ }
+ );
+ };
+}]);
\ No newline at end of file
diff --git a/webclient/settings/settings.html b/webclient/settings/settings.html
new file mode 100644
index 0000000000..63b12c8f56
--- /dev/null
+++ b/webclient/settings/settings.html
@@ -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>
|
