Merge branch 'settings-page' into develop

15 files changed, 503 insertions, 452 deletions

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..e5d8513944 100644
--- a/webclient/app.js
+++ b/webclient/app.js
@@ -19,7 +19,8 @@ var matrixWebClient = angular.module('matrixWebClient', [
     'MatrixWebClientController',
     'LoginController',
     'RoomController',
-    'RoomsController',
+    'HomeController',
+    'SettingsController',
     'UserController',
     'matrixService',
     'eventStreamService',
@@ -44,16 +45,20 @@ matrixWebClient.config(['$routeProvider', '$provide', '$httpProvider',
                 templateUrl: 'room/room.html',
                 controller: 'RoomController'
             }).
-            when('/rooms', {
-                templateUrl: 'rooms/rooms.html',
-                controller: 'RoomsController'
+            when('/home', {
+                templateUrl: 'home/home.html',
+                controller: 'HomeController'
+            }).
+            when('/settings', {
+                templateUrl: 'settings/settings.html',
+                controller: 'SettingsController'
             }).
             when('/user/:user_matrix_id', {
                 templateUrl: 'user/user.html',
                 controller: 'UserController'
             }).
             otherwise({
-                redirectTo: '/rooms'
+                redirectTo: '/home'
             });
             
         $provide.factory('AccessTokenInterceptor', ['$q', '$rootScope', 
diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js
new file mode 100644
index 0000000000..35d0ef1654
--- /dev/null
+++ b/webclient/home/home-controller.js
@@ -0,0 +1,162 @@
+/*
+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('HomeController', ['matrixService', 'mFileInput', 'mFileUpload', 'eventHandlerService'])
+.controller('HomeController', ['$scope', '$location', 'matrixService', 'mFileUpload', 'eventHandlerService', 'eventStreamService', 
+                               function($scope, $location, matrixService, mFileUpload, eventHandlerService, eventStreamService) {
+
+    $scope.config = matrixService.config();
+    $scope.rooms = {};
+    $scope.public_rooms = [];
+    $scope.newRoomId = "";
+    $scope.feedback = "";
+    
+    $scope.newRoom = {
+        room_id: "",
+        private: false
+    };
+    
+    $scope.goToRoom = {
+        room_id: "",
+    };
+
+    $scope.joinAlias = {
+        room_alias: "",
+    };
+    
+    $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) {
+        var config = matrixService.config();
+        if (event.target_user_id === config.user_id && event.content.membership === "invite") {
+            console.log("Invited to room " + event.room_id);
+            // FIXME push membership to top level key to match /im/sync
+            event.membership = event.content.membership;
+            // FIXME bodge a nicer name than the room ID for this invite.
+            event.room_display_name = event.user_id + "'s room";
+            $scope.rooms[event.room_id] = event;
+        }
+    });
+    
+    var assignRoomAliases = function(data) {
+        for (var i=0; i<data.length; i++) {
+            var alias = matrixService.getRoomIdToAliasMapping(data[i].room_id);
+            if (alias) {
+                // use the existing alias from storage
+                data[i].room_alias = alias;
+                data[i].room_display_name = alias;
+            }
+            else if (data[i].aliases && data[i].aliases[0]) {
+                // save the mapping
+                // TODO: select the smarter alias from the array
+                matrixService.createRoomIdToAliasMapping(data[i].room_id, data[i].aliases[0]);
+                data[i].room_display_name = data[i].aliases[0];
+            }
+            else if (data[i].membership == "invite" && "inviter" in data[i]) {
+                data[i].room_display_name = data[i].inviter + "'s room"
+            }
+            else {
+                // last resort use the room id
+                data[i].room_display_name = data[i].room_id;
+            }
+        }
+        return data;
+    };
+
+    $scope.refresh = function() {
+        // List all rooms joined or been invited to
+        matrixService.rooms().then(
+            function(response) {
+                var data = assignRoomAliases(response.data.rooms);
+                $scope.feedback = "Success";
+                for (var i=0; i<data.length; i++) {
+                    $scope.rooms[data[i].room_id] = data[i];
+                }
+
+                var presence = response.data.presence;
+                for (var i = 0; i < presence.length; ++i) {
+                    eventHandlerService.handleEvent(presence[i], false);
+                }
+            },
+            function(error) {
+                $scope.feedback = "Failure: " + error.data;
+            });
+        
+        matrixService.publicRooms().then(
+            function(response) {
+                $scope.public_rooms = assignRoomAliases(response.data.chunk);
+            }
+        );
+
+        eventStreamService.resume();
+    };
+    
+    $scope.createNewRoom = function(room_id, isPrivate) {
+        
+        var visibility = "public";
+        if (isPrivate) {
+            visibility = "private";
+        }
+        
+        matrixService.create(room_id, visibility).then(
+            function(response) { 
+                // This room has been created. Refresh the rooms list
+                console.log("Created room " + response.data.room_alias + " with id: "+
+                response.data.room_id);
+                matrixService.createRoomIdToAliasMapping(
+                    response.data.room_id, response.data.room_alias);
+                $scope.refresh();
+            },
+            function(error) {
+                $scope.feedback = "Failure: " + error.data;
+            });
+    };
+    
+    // Go to a room
+    $scope.goToRoom = function(room_id) {
+        // Simply open the room page on this room id
+        //$location.url("room/" + room_id);
+        matrixService.join(room_id).then(
+            function(response) {
+                if (response.data.hasOwnProperty("room_id")) {
+                    if (response.data.room_id != room_id) {
+                        $location.url("room/" + response.data.room_id);
+                        return;
+                     }
+                }
+
+                $location.url("room/" + room_id);
+            },
+            function(error) {
+                $scope.feedback = "Can't join room: " + error.data;
+            }
+        );
+    };
+
+    $scope.joinAlias = function(room_alias) {
+        matrixService.joinAlias(room_alias).then(
+            function(response) {
+                // Go to this room
+                $location.url("room/" + room_alias);
+            },
+            function(error) {
+                $scope.feedback = "Can't join room: " + error.data;
+            }
+        );
+    };
+ 
+    $scope.refresh();
+}]);
diff --git a/webclient/home/home.html b/webclient/home/home.html
new file mode 100644
index 0000000000..4818d414b6
--- /dev/null
+++ b/webclient/home/home.html
@@ -0,0 +1,63 @@
+<div ng-controller="HomeController">
+
+    <div id="page">
+    <div id="wrapper">
+        
+    <div>
+        <form>
+            <table>
+                <tr>
+                    <td>
+                        <div class="profile-avatar">
+                            <img ng-src="{{ config.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>
+                    </td>
+                </tr>
+            </table>
+        </form>
+    </div>
+    
+    <h3>My rooms</h3>
+    
+    <div class="rooms" ng-repeat="(rm_id, room) in rooms">
+        <div>
+            <a href="#/room/{{ room.room_alias ? room.room_alias : rm_id }}" >{{ room.room_display_name }}</a> {{room.membership === 'invite' ? ' (invited)' : ''}}
+        </div>
+    </div>
+    <br/>
+
+    <h3>Public rooms</h3>
+    
+    <div class="public_rooms" ng-repeat="room in public_rooms">
+        <div>
+            <a href="#/room/{{ room.room_alias ? room.room_alias : room.room_id }}" >{{ room.room_alias }}</a>
+        </div>
+    </div>
+    <br/>
+    
+    <div>
+        <form>
+            <input size="40" ng-model="newRoom.room_id" ng-enter="createNewRoom(newRoom.room_id, newRoom.private)" placeholder="(e.g. foo_channel)"/>
+            <input type="checkbox" ng-model="newRoom.private">private
+            <button ng-disabled="!newRoom.room_id" ng-click="createNewRoom(newRoom.room_id, newRoom.private)">Create room</button>    
+        </form>
+    </div>
+    <div>
+        <form>
+            <input size="40" ng-model="joinAlias.room_alias" ng-enter="joinAlias(joinAlias.room_alias)" placeholder="(e.g. #foo_channel:example.org)"/>
+            <button ng-disabled="!joinAlias.room_alias" ng-click="joinAlias(joinAlias.room_alias)">Join room</button>    
+        </form>
+    </div>
+    <br/>
+    
+    {{ feedback }}
+
+    </div>    
+    </div>
+</div>
diff --git a/webclient/index.html b/webclient/index.html
index 27d9208193..ed1d9bb031 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -15,10 +15,11 @@
     <script src="app-controller.js"></script>
     <script src="app-directive.js"></script>
     <script src="app-filter.js"></script>
+    <script src="home/home-controller.js"></script>
     <script src="login/login-controller.js"></script>
     <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/login/login-controller.js b/webclient/login/login-controller.js
index e3d0eca946..51f9a3bdf4 100644
--- a/webclient/login/login-controller.js
+++ b/webclient/login/login-controller.js
@@ -53,7 +53,7 @@ angular.module('LoginController', ['matrixService'])
                 matrixService.saveConfig();
                 eventStreamService.resume();
                  // Go to the user's rooms list page
-                $location.url("rooms");
+                $location.url("home");
             },
             function(error) {
                 if (error.data) {
@@ -86,7 +86,7 @@ angular.module('LoginController', ['matrixService'])
                     });
                     matrixService.saveConfig();
                     eventStreamService.resume();
-                    $location.url("rooms");
+                    $location.url("home");
                 }
                 else {
                     $scope.feedback = "Failed to login: " + JSON.stringify(response.data);
diff --git a/webclient/nbproject/licenseheader.txt b/webclient/nbproject/licenseheader.txt
new file mode 100644
index 0000000000..36e6dcf181
--- /dev/null
+++ b/webclient/nbproject/licenseheader.txt
@@ -0,0 +1,16 @@
+/*
+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.
+*/
+
diff --git a/webclient/nbproject/private/private.properties b/webclient/nbproject/private/private.properties
new file mode 100644
index 0000000000..3b1a22e6c9
--- /dev/null
+++ b/webclient/nbproject/private/private.properties
@@ -0,0 +1 @@
+browser=Chrome.INTEGRATED
diff --git a/webclient/nbproject/private/private.xml b/webclient/nbproject/private/private.xml
new file mode 100644
index 0000000000..75bc70106a
--- /dev/null
+++ b/webclient/nbproject/private/private.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project-private xmlns="http://www.netbeans.org/ns/project-private/1">
+    <editor-bookmarks xmlns="http://www.netbeans.org/ns/editor-bookmarks/2" lastBookmarkId="0"/>
+    <open-files xmlns="http://www.netbeans.org/ns/projectui-open-files/2">
+        <group>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/components/matrix/matrix-service.js</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/app.css</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/components/matrix/event-handler-service.js</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/app-controller.js</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/room/room.html</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/login/login.html</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/components/matrix/event-stream-service.js</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/components/fileUpload/file-upload-service.js</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/index.html</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/room/room-controller.js</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/rooms/rooms.html</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/app.js</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/rooms/rooms-controller.js</file>
+            <file>file:/Users/manu/UC/matrix/github/synapse/webclient/components/fileInput/file-input-directive.js</file>
+        </group>
+    </open-files>
+</project-private>
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 58ba432ce5..3311618825 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -372,7 +372,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
         matrixService.leave($scope.room_id).then(
             function(response) {
                 console.log("Left room ");
-                $location.url("rooms");
+                $location.url("home");
             },
             function(error) {
                 $scope.feedback = "Failed to leave room: " + error.data.error;
diff --git a/webclient/rooms/rooms-controller.js b/webclient/rooms/rooms-controller.js
deleted file mode 100644
index d9c8baff47..0000000000
--- a/webclient/rooms/rooms-controller.js
+++ /dev/null
@@ -1,300 +0,0 @@
-/*
-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('RoomsController', ['matrixService', 'mFileInput', 'mFileUpload', 'eventHandlerService'])
-.controller('RoomsController', ['$scope', '$location', 'matrixService', 'mFileUpload', 'eventHandlerService', 'eventStreamService', 
-                               function($scope, $location, matrixService, mFileUpload, eventHandlerService, eventStreamService) {
-                                   
-    $scope.rooms = {};
-    $scope.public_rooms = [];
-    $scope.newRoomId = "";
-    $scope.feedback = "";
-    
-    $scope.newRoom = {
-        room_id: "",
-        private: false
-    };
-    
-    $scope.goToRoom = {
-        room_id: "",
-    };
-
-    $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
-        clientSecret: undefined, // our client secret
-        sendAttempt: 1,
-        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();
-        if (event.target_user_id === config.user_id && event.content.membership === "invite") {
-            console.log("Invited to room " + event.room_id);
-            // FIXME push membership to top level key to match /im/sync
-            event.membership = event.content.membership;
-            // FIXME bodge a nicer name than the room ID for this invite.
-            event.room_display_name = event.user_id + "'s room";
-            $scope.rooms[event.room_id] = event;
-        }
-    });
-    
-    var assignRoomAliases = function(data) {
-        for (var i=0; i<data.length; i++) {
-            var alias = matrixService.getRoomIdToAliasMapping(data[i].room_id);
-            if (alias) {
-                // use the existing alias from storage
-                data[i].room_alias = alias;
-                data[i].room_display_name = alias;
-            }
-            else if (data[i].aliases && data[i].aliases[0]) {
-                // save the mapping
-                // TODO: select the smarter alias from the array
-                matrixService.createRoomIdToAliasMapping(data[i].room_id, data[i].aliases[0]);
-                data[i].room_display_name = data[i].aliases[0];
-            }
-            else if (data[i].membership == "invite" && "inviter" in data[i]) {
-                data[i].room_display_name = data[i].inviter + "'s room"
-            }
-            else {
-                // last resort use the room id
-                data[i].room_display_name = data[i].room_id;
-            }
-        }
-        return data;
-    };
-
-    $scope.refresh = function() {
-        // List all rooms joined or been invited to
-        matrixService.rooms().then(
-            function(response) {
-                var data = assignRoomAliases(response.data.rooms);
-                $scope.feedback = "Success";
-                for (var i=0; i<data.length; i++) {
-                    $scope.rooms[data[i].room_id] = data[i];
-                }
-
-                var presence = response.data.presence;
-                for (var i = 0; i < presence.length; ++i) {
-                    eventHandlerService.handleEvent(presence[i], false);
-                }
-            },
-            function(error) {
-                $scope.feedback = "Failure: " + error.data;
-            });
-        
-        matrixService.publicRooms().then(
-            function(response) {
-                $scope.public_rooms = assignRoomAliases(response.data.chunk);
-            }
-        );
-
-        eventStreamService.resume();
-    };
-    
-    $scope.createNewRoom = function(room_id, isPrivate) {
-        
-        var visibility = "public";
-        if (isPrivate) {
-            visibility = "private";
-        }
-        
-        matrixService.create(room_id, visibility).then(
-            function(response) { 
-                // This room has been created. Refresh the rooms list
-                console.log("Created room " + response.data.room_alias + " with id: "+
-                response.data.room_id);
-                matrixService.createRoomIdToAliasMapping(
-                    response.data.room_id, response.data.room_alias);
-                $scope.refresh();
-            },
-            function(error) {
-                $scope.feedback = "Failure: " + error.data;
-            });
-    };
-    
-    // Go to a room
-    $scope.goToRoom = function(room_id) {
-        // Simply open the room page on this room id
-        //$location.url("room/" + room_id);
-        matrixService.join(room_id).then(
-            function(response) {
-                if (response.data.hasOwnProperty("room_id")) {
-                    if (response.data.room_id != room_id) {
-                        $location.url("room/" + response.data.room_id);
-                        return;
-                     }
-                }
-
-                $location.url("room/" + room_id);
-            },
-            function(error) {
-                $scope.feedback = "Can't join room: " + error.data;
-            }
-        );
-    };
-
-    $scope.joinAlias = function(room_alias) {
-        matrixService.joinAlias(room_alias).then(
-            function(response) {
-                // Go to this room
-                $location.url("room/" + room_alias);
-            },
-            function(error) {
-                $scope.feedback = "Can't join room: " + error.data;
-            }
-        );
-    };
-
-    $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;
-            }
-        );
-    };
-
-    var generateClientSecret = function() {
-        var ret = "";
-        var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-
-        for (var i = 0; i < 32; i++) {
-            ret += chars.charAt(Math.floor(Math.random() * chars.length));
-        }
-
-        return ret;
-    };
-
-
-    $scope.linkEmail = function(email) {
-        if (email != $scope.linkedEmails.emailBeingAuthed) {
-            $scope.linkedEmails.clientSecret = generateClientSecret();
-            $scope.linkedEmails.sendAttempt = 1;
-        }
-        matrixService.linkEmail(email, $scope.linkedEmails.clientSecret, $scope.linkedEmails.sendAttempt).then(
-            function(response) {
-                if (response.data.success === true) {
-                    $scope.linkedEmails.authTokenId = response.data.sid;
-                    $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, $scope.linkedEmails.clientSecret).then(
-            function(response) {
-                if ("success" in response.data && response.data.success === false) {
-                    $scope.emailFeedback = "Failed to authenticate email.";
-                    return;
-                }
-                matrixService.bindEmail(matrixService.config().user_id, tokenId, $scope.linkedEmails.clientSecret).then(
-                    function(response) {
-                         var config = matrixService.config();
-                         var emailList = {};
-                         if ("emailList" in config) {
-                             emailList = config.emailList;
-                         }
-                         emailList[$scope.linkedEmails.emailBeingAuthed] = 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 link email: " + reason;
-                    }
-                );
-            },
-            function(reason) {
-                $scope.emailFeedback = "Failed to auth email: " + reason;
-            }
-        );
-    };
-    
-    $scope.refresh();
-}]);
diff --git a/webclient/rooms/rooms.html b/webclient/rooms/rooms.html
deleted file mode 100644
index ba3b7d8bad..0000000000
--- a/webclient/rooms/rooms.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<div ng-controller="RoomsController" class="rooms">
-
-    <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"/>
-                        </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>
-                    </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>
-    
-    <div class="rooms" ng-repeat="(rm_id, room) in rooms">
-        <div>
-            <a href="#/room/{{ room.room_alias ? room.room_alias : rm_id }}" >{{ room.room_display_name }}</a> {{room.membership === 'invite' ? ' (invited)' : ''}}
-        </div>
-    </div>
-    <br/>
-
-    <h3>Public rooms</h3>
-    
-    <div class="public_rooms" ng-repeat="room in public_rooms">
-        <div>
-            <a href="#/room/{{ room.room_alias ? room.room_alias : room.room_id }}" >{{ room.room_alias }}</a>
-        </div>
-    </div>
-    <br/>
-    
-    <div>
-        <form>
-            <input size="40" ng-model="newRoom.room_id" ng-enter="createNewRoom(newRoom.room_id, newRoom.private)" placeholder="(e.g. foo_channel)"/>
-            <input type="checkbox" ng-model="newRoom.private">private
-            <button ng-disabled="!newRoom.room_id" ng-click="createNewRoom(newRoom.room_id, newRoom.private)">Create room</button>    
-        </form>
-    </div>
-    <div>
-        <form>
-            <input size="40" ng-model="joinAlias.room_alias" ng-enter="joinAlias(joinAlias.room_alias)" placeholder="(e.g. #foo_channel:example.org)"/>
-            <button ng-disabled="!joinAlias.room_alias" ng-click="joinAlias(joinAlias.room_alias)">Join room</button>    
-        </form>
-    </div>
-    <br/>
-    
-    {{ feedback }}
-
-    </div>    
-    </div>
-</div>
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>