diff options
Diffstat (limited to 'webclient')
24 files changed, 819 insertions, 282 deletions
diff --git a/webclient/CAPTCHA_SETUP b/webclient/CAPTCHA_SETUP new file mode 100644 index 0000000000..ebc8a5f3b0 --- /dev/null +++ b/webclient/CAPTCHA_SETUP @@ -0,0 +1,46 @@ +Captcha can be enabled for this web client / home server. This file explains how to do that. +The captcha mechanism used is Google's ReCaptcha. This requires API keys from Google. + +Getting keys +------------ +Requires a public/private key pair from: + +https://developers.google.com/recaptcha/ + + +Setting Private ReCaptcha Key +----------------------------- +The private key is a config option on the home server config. If it is not +visible, you can generate it via --generate-config. Set the following value: + + recaptcha_private_key: YOUR_PRIVATE_KEY + +In addition, you MUST enable captchas via: + + enable_registration_captcha: true + +Setting Public ReCaptcha Key +---------------------------- +The web client will look for the global variable webClientConfig for config +options. You should put your ReCaptcha public key there like so: + +webClientConfig = { + useCaptcha: true, + recaptcha_public_key: "YOUR_PUBLIC_KEY" +} + +This should be put in webclient/config.js which is already .gitignored, rather +than in the web client source files. You MUST set useCaptcha to true else a +ReCaptcha widget will not be generated. + +Configuring IP used for auth +---------------------------- +The ReCaptcha API requires that the IP address of the user who solved the +captcha is sent. If the client is connecting through a proxy or load balancer, +it may be required to use the X-Forwarded-For (XFF) header instead of the origin +IP address. This can be configured as an option on the home server like so: + + captcha_ip_origin_is_x_forwarded: true + + + diff --git a/webclient/README b/webclient/README index 0f893b1712..13224c3d07 100644 --- a/webclient/README +++ b/webclient/README @@ -1,12 +1,13 @@ Basic Usage ----------- -The Synapse web client needs to be hosted by a basic HTTP server. - -You can use the Python simple HTTP server:: +The web client should automatically run when running the home server. Alternatively, you can run +it stand-alone: $ python -m SimpleHTTPServer Then, open this URL in a WEB browser:: http://127.0.0.1:8000/ + + diff --git a/webclient/app-controller.js b/webclient/app-controller.js index ea48cbb011..064bde3ab2 100644 --- a/webclient/app-controller.js +++ b/webclient/app-controller.js @@ -21,8 +21,8 @@ limitations under the License. 'use strict'; angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'eventStreamService']) -.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService', - function($scope, $location, $rootScope, matrixService, mPresence, eventStreamService, matrixPhoneService) { +.controller('MatrixWebClientController', ['$scope', '$location', '$rootScope', '$timeout', '$animate', 'matrixService', 'mPresence', 'eventStreamService', 'matrixPhoneService', + function($scope, $location, $rootScope, $timeout, $animate, matrixService, mPresence, eventStreamService, matrixPhoneService) { // Check current URL to avoid to display the logout button on the login page $scope.location = $location.path(); @@ -89,6 +89,23 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even $scope.user_id = matrixService.config().user_id; }; + $rootScope.$watch('currentCall', function(newVal, oldVal) { + if (!$rootScope.currentCall) return; + + var roomMembers = angular.copy($rootScope.events.rooms[$rootScope.currentCall.room_id].members); + delete roomMembers[matrixService.config().user_id]; + + $rootScope.currentCall.user_id = Object.keys(roomMembers)[0]; + matrixService.getProfile($rootScope.currentCall.user_id).then( + function(response) { + $rootScope.currentCall.userProfile = response.data; + }, + function(error) { + $scope.feedback = "Can't load user profile"; + } + ); + }); + $rootScope.$on(matrixPhoneService.INCOMING_CALL_EVENT, function(ngEvent, call) { console.trace("incoming call"); call.onError = $scope.onCallError; @@ -97,12 +114,19 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even }); $scope.answerCall = function() { - $scope.currentCall.answer(); + $rootScope.currentCall.answer(); }; $scope.hangupCall = function() { - $scope.currentCall.hangup(); - $scope.currentCall = undefined; + $rootScope.currentCall.hangup(); + + $timeout(function() { + var icon = angular.element('#callEndedIcon'); + $animate.addClass(icon, 'callIconRotate'); + $timeout(function(){ + $rootScope.currentCall = undefined; + }, 2000); + }, 100); }; $rootScope.onCallError = function(errStr) { @@ -110,5 +134,12 @@ angular.module('MatrixWebClientController', ['matrixService', 'mPresence', 'even } $rootScope.onCallHangup = function() { + $timeout(function() { + var icon = angular.element('#callEndedIcon'); + $animate.addClass(icon, 'callIconRotate'); + $timeout(function(){ + $rootScope.currentCall = undefined; + }, 2000); + }, 100); } }]); diff --git a/webclient/app-filter.js b/webclient/app-filter.js index 27f435674f..ee9374668b 100644 --- a/webclient/app-filter.js +++ b/webclient/app-filter.js @@ -79,85 +79,4 @@ angular.module('matrixWebClient') return function(text) { return $sce.trustAsHtml(text); }; -}]) - -// Compute the room name according to information we have -.filter('roomName', ['$rootScope', 'matrixService', function($rootScope, matrixService) { - return function(room_id) { - var roomName; - - // If there is an alias, use it - // TODO: only one alias is managed for now - var alias = matrixService.getRoomIdToAliasMapping(room_id); - if (alias) { - roomName = alias; - } - - if (undefined === roomName) { - // Else, build the name from its users - var room = $rootScope.events.rooms[room_id]; - if (room) { - var room_name_event = room["m.room.name"]; - - if (room_name_event) { - roomName = room_name_event.content.name; - } - else if (room.members) { - // Limit the room renaming to 1:1 room - if (2 === Object.keys(room.members).length) { - for (var i in room.members) { - var member = room.members[i]; - if (member.state_key !== matrixService.config().user_id) { - - if (member.state_key in $rootScope.presence) { - // If the user is available in presence, use the displayname there - // as it is the most uptodate - roomName = $rootScope.presence[member.state_key].content.displayname; - } - else if (member.content.displayname) { - roomName = member.content.displayname; - } - else { - roomName = member.state_key; - } - } - } - } - else if (1 === Object.keys(room.members).length) { - // The other member may be in the invite list, get all invited users - var invitedUserIDs = []; - for (var i in room.messages) { - var message = room.messages[i]; - if ("m.room.member" === message.type && "invite" === message.membership) { - // Make sure there is no duplicate user - if (-1 === invitedUserIDs.indexOf(message.state_key)) { - invitedUserIDs.push(message.state_key); - } - } - } - - // For now, only 1:1 room needs to be renamed. It means only 1 invited user - if (1 === invitedUserIDs.length) { - var userID = invitedUserIDs[0]; - - // Try to resolve his displayname in presence global data - if (userID in $rootScope.presence) { - roomName = $rootScope.presence[userID].content.displayname; - } - else { - roomName = userID; - } - } - } - } - } - } - - if (undefined === roomName) { - // By default, use the room ID - roomName = room_id; - } - - return roomName; - }; -}]); +}]); \ No newline at end of file diff --git a/webclient/app.css b/webclient/app.css index 425d5bb11a..7698cb4fda 100755 --- a/webclient/app.css +++ b/webclient/app.css @@ -44,7 +44,49 @@ a:active { color: #000; } } #callBar { - float: left; + float: left; + height: 32px; + margin: auto; + text-align: right; + line-height: 16px; +} + +.callIcon { + margin-left: 4px; + margin-right: 4px; + margin-top: 8px; + -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; + transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; +} + +.callIconRotate { + -webkit-transform: rotateZ(45deg); + -moz-transform: rotateZ(45deg); + -ms-transform: rotateZ(45deg); + -o-transform: rotateZ(45deg); + transform: rotateZ(45deg); +} + +#callPeerImage { + width: 32px; + height: 32px; + border: none; + float: left; +} + +#callPeerNameAndState { + float: left; + margin-left: 4px; +} + +#callState { + font-size: 60%; +} + +#callPeerName { + font-size: 80%; } #headerContent { @@ -105,6 +147,10 @@ a:active { color: #000; } text-align: center; } +#recaptcha_area { + margin: auto +} + #loginForm { text-align: left; padding: 1em; @@ -251,12 +297,14 @@ a:active { color: #000; } .userAvatar .userAvatarImage { position: absolute; top: 0px; - object-fit: cover; + object-fit: cover; + width: 100%; } .userAvatar .userAvatarGradient { position: absolute; bottom: 20px; + width: 100%; } .userAvatar .userName { @@ -417,6 +465,13 @@ a:active { color: #000; } text-align: left ! important; } +.bubble .messagePending { + opacity: 0.3 +} +.messageUnSent { + color: #F00; +} + #room-fullscreen-image { position: absolute; top: 0px; diff --git a/webclient/components/matrix/event-handler-service.js b/webclient/components/matrix/event-handler-service.js index ee478d2eb0..d2bb31053f 100644 --- a/webclient/components/matrix/event-handler-service.js +++ b/webclient/components/matrix/event-handler-service.js @@ -41,6 +41,11 @@ angular.module('eventHandlerService', []) $rootScope.events = { rooms: {} // will contain roomId: { messages:[], members:{userid1: event} } }; + + // used for dedupping events - could be expanded in future... + // FIXME: means that we leak memory over time (along with lots of the rest + // of the app, given we never try to reap memory yet) + var eventMap = {}; $rootScope.presence = {}; @@ -66,11 +71,22 @@ angular.module('eventHandlerService', []) $rootScope.$broadcast(ROOM_CREATE_EVENT, event, isLiveEvent); }; + var handleRoomAliases = function(event, isLiveEvent) { + matrixService.createRoomIdToAliasMapping(event.room_id, event.content.aliases[0]); + }; + var handleMessage = function(event, isLiveEvent) { initRoom(event.room_id); if (isLiveEvent) { - $rootScope.events.rooms[event.room_id].messages.push(event); + if (event.user_id === matrixService.config().user_id && + (event.content.msgtype === "m.text" || event.content.msgtype === "m.emote") ) { + // assume we've already echoed it + // FIXME: track events by ID and ungrey the right message to show it's been delivered + } + else { + $rootScope.events.rooms[event.room_id].messages.push(event); + } } else { $rootScope.events.rooms[event.room_id].messages.unshift(event); @@ -87,6 +103,14 @@ angular.module('eventHandlerService', []) var handleRoomMember = function(event, isLiveEvent) { initRoom(event.room_id); + // if the server is stupidly re-relaying a no-op join, discard it. + if (event.prev_content && + event.content.membership === "join" && + event.content.membership === event.prev_content.membership) + { + return; + } + // add membership changes as if they were a room message if something interesting changed if (event.content.prev !== event.content.membership) { if (isLiveEvent) { @@ -137,40 +161,55 @@ angular.module('eventHandlerService', []) POWERLEVEL_EVENT: POWERLEVEL_EVENT, CALL_EVENT: CALL_EVENT, NAME_EVENT: NAME_EVENT, - handleEvent: function(event, isLiveEvent) { - switch(event.type) { - case "m.room.create": - handleRoomCreate(event, isLiveEvent); - break; - case "m.room.message": - handleMessage(event, isLiveEvent); - break; - case "m.room.member": - handleRoomMember(event, isLiveEvent); - break; - case "m.presence": - handlePresence(event, isLiveEvent); - break; - case 'm.room.ops_levels': - case 'm.room.send_event_level': - case 'm.room.add_state_level': - case 'm.room.join_rules': - case 'm.room.power_levels': - handlePowerLevels(event, isLiveEvent); - break; - case 'm.room.name': - handleRoomName(event, isLiveEvent); - break; - default: - console.log("Unable to handle event type " + event.type); - console.log(JSON.stringify(event, undefined, 4)); - break; + // FIXME: event duplication suppression is all broken as the code currently expect to handles + // events multiple times to get their side-effects... +/* + if (eventMap[event.event_id]) { + console.log("discarding duplicate event: " + JSON.stringify(event)); + return; } + else { + eventMap[event.event_id] = 1; + } +*/ if (event.type.indexOf('m.call.') === 0) { handleCallEvent(event, isLiveEvent); } + else { + switch(event.type) { + case "m.room.create": + handleRoomCreate(event, isLiveEvent); + break; + case "m.room.aliases": + handleRoomAliases(event, isLiveEvent); + break; + case "m.room.message": + handleMessage(event, isLiveEvent); + break; + case "m.room.member": + handleRoomMember(event, isLiveEvent); + break; + case "m.presence": + handlePresence(event, isLiveEvent); + break; + case 'm.room.ops_levels': + case 'm.room.send_event_level': + case 'm.room.add_state_level': + case 'm.room.join_rules': + case 'm.room.power_levels': + handlePowerLevels(event, isLiveEvent); + break; + case 'm.room.name': + handleRoomName(event, isLiveEvent); + break; + default: + console.log("Unable to handle event type " + event.type); + console.log(JSON.stringify(event, undefined, 4)); + break; + } + } }, // isLiveEvents determines whether notifications should be shown, whether diff --git a/webclient/components/matrix/event-stream-service.js b/webclient/components/matrix/event-stream-service.js index 1c0f7712b4..ed4f3b2ffc 100644 --- a/webclient/components/matrix/event-stream-service.js +++ b/webclient/components/matrix/event-stream-service.js @@ -110,6 +110,7 @@ angular.module('eventStreamService', []) var rooms = response.data.rooms; for (var i = 0; i < rooms.length; ++i) { var room = rooms[i]; + // console.log("got room: " + room.room_id); if ("state" in room) { eventHandlerService.handleEvents(room.state, false); } diff --git a/webclient/components/matrix/matrix-call.js b/webclient/components/matrix/matrix-call.js index 3e13e4e81f..3cb5e8b693 100644 --- a/webclient/components/matrix/matrix-call.js +++ b/webclient/components/matrix/matrix-call.js @@ -41,6 +41,7 @@ angular.module('MatrixCall', []) this.room_id = room_id; this.call_id = "c" + new Date().getTime(); this.state = 'fledgling'; + this.didConnect = false; } navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; @@ -52,6 +53,7 @@ angular.module('MatrixCall', []) matrixPhoneService.callPlaced(this); navigator.getUserMedia({audio: true, video: false}, function(s) { self.gotUserMediaForInvite(s); }, function(e) { self.getUserMediaFailed(e); }); self.state = 'wait_local_media'; + this.direction = 'outbound'; }; MatrixCall.prototype.initWithInvite = function(msg) { @@ -64,6 +66,7 @@ angular.module('MatrixCall', []) this.peerConn.onaddstream = function(s) { self.onAddStream(s); }; this.peerConn.setRemoteDescription(new RTCSessionDescription(this.msg.offer), self.onSetRemoteDescriptionSuccess, self.onSetRemoteDescriptionError); this.state = 'ringing'; + this.direction = 'inbound'; }; MatrixCall.prototype.answer = function() { @@ -204,10 +207,12 @@ angular.module('MatrixCall', []) }; MatrixCall.prototype.onIceConnectionStateChanged = function() { + if (this.state == 'ended') return; // because ICE can still complete as we're ending the call console.trace("Ice connection state changed to: "+this.peerConn.iceConnectionState); // ideally we'd consider the call to be connected when we get media but chrome doesn't implement nay of the 'onstarted' events yet if (this.peerConn.iceConnectionState == 'completed' || this.peerConn.iceConnectionState == 'connected') { this.state = 'connected'; + this.didConnect = true; $rootScope.$apply(); } }; diff --git a/webclient/components/matrix/matrix-filter.js b/webclient/components/matrix/matrix-filter.js new file mode 100644 index 0000000000..260e0827df --- /dev/null +++ b/webclient/components/matrix/matrix-filter.js @@ -0,0 +1,135 @@ +/* + Copyright 2014 OpenMarket Ltd + + 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('matrixFilter', []) + +// Compute the room name according to information we have +.filter('mRoomName', ['$rootScope', 'matrixService', function($rootScope, matrixService) { + return function(room_id) { + var roomName; + + // If there is an alias, use it + // TODO: only one alias is managed for now + var alias = matrixService.getRoomIdToAliasMapping(room_id); + if (alias) { + roomName = alias; + } + + if (undefined === roomName) { + // Else, build the name from its users + var room = $rootScope.events.rooms[room_id]; + if (room) { + var room_name_event = room["m.room.name"]; + + if (room_name_event) { + roomName = room_name_event.content.name; + } + else if (room.members) { + // Limit the room renaming to 1:1 room + if (2 === Object.keys(room.members).length) { + for (var i in room.members) { + var member = room.members[i]; + if (member.state_key !== matrixService.config().user_id) { + + if (member.state_key in $rootScope.presence) { + // If the user is available in presence, use the displayname there + // as it is the most uptodate + roomName = $rootScope.presence[member.state_key].content.displayname; + } + else if (member.content.displayname) { + roomName = member.content.displayname; + } + else { + roomName = member.state_key; + } + } + } + } + else if (1 === Object.keys(room.members).length) { + // The other member may be in the invite list, get all invited users + var invitedUserIDs = []; + for (var i in room.messages) { + var message = room.messages[i]; + if ("m.room.member" === message.type && "invite" === message.membership) { + // Make sure there is no duplicate user + if (-1 === invitedUserIDs.indexOf(message.state_key)) { + invitedUserIDs.push(message.state_key); + } + } + } + + // For now, only 1:1 room needs to be renamed. It means only 1 invited user + if (1 === invitedUserIDs.length) { + var userID = invitedUserIDs[0]; + + // Try to resolve his displayname in presence global data + if (userID in $rootScope.presence) { + roomName = $rootScope.presence[userID].content.displayname; + } + else { + roomName = userID; + } + } + } + } + } + } + + if (undefined === roomName) { + // By default, use the room ID + roomName = room_id; + } + + return roomName; + }; +}]) + +// Compute the user display name in a room according to the data already downloaded +.filter('mUserDisplayName', ['$rootScope', function($rootScope) { + return function(user_id, room_id) { + var displayName; + + // Try to find the user name among presence data + // Warning: that means we have received before a presence event for this + // user which cannot be guaranted. + // However, if we get the info by this way, we are sure this is the latest user display name + // See FIXME comment below + if (user_id in $rootScope.presence) { + displayName = $rootScope.presence[user_id].content.displayname; + } + + // FIXME: Would like to use the display name as defined in room members of the room. + // But this information is the display name of the user when he has joined the room. + // It does not take into account user display name update + if (room_id) { + var room = $rootScope.events.rooms[room_id]; + if (room && (user_id in room.members)) { + var member = room.members[user_id]; + if (member.content.displayname) { + displayName = member.content.displayname; + } + } + } + + if (undefined === displayName) { + // By default, use the user ID + displayName = user_id; + } + return displayName; + }; +}]); diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js index 25222a9e9e..3c28c52fbe 100644 --- a/webclient/components/matrix/matrix-service.js +++ b/webclient/components/matrix/matrix-service.js @@ -36,6 +36,9 @@ angular.module('matrixService', []) */ var config; + var roomIdToAlias = {}; + var aliasToRoomId = {}; + // Current version of permanent storage var configVersion = 0; var prefixPath = "/_matrix/client/api/v1"; @@ -84,15 +87,32 @@ angular.module('matrixService', []) prefix: prefixPath, // Register an user - register: function(user_name, password, threepidCreds) { + register: function(user_name, password, threepidCreds, useCaptcha) { // The REST path spec var path = "/register"; - - return doRequest("POST", path, undefined, { + + var data = { user_id: user_name, password: password, threepidCreds: threepidCreds - }); + }; + + if (useCaptcha) { + // Not all home servers will require captcha on signup, but if this flag is checked, + // send captcha information. + // TODO: Might be nice to make this a bit more flexible.. + var challengeToken = Recaptcha.get_challenge(); + var captchaEntry = Recaptcha.get_response(); + var captchaType = "m.login.recaptcha"; + + data.captcha = { + type: captchaType, + challenge: challengeToken, + response: captchaEntry + }; + } + + return doRequest("POST", path, undefined, data); }, // Create a room @@ -168,18 +188,20 @@ angular.module('matrixService', []) }, // Change the membership of an another user - setMembership: function(room_id, user_id, membershipValue) { + setMembership: function(room_id, user_id, membershipValue, reason) { + // The REST path spec var path = "/rooms/$room_id/state/m.room.member/$user_id"; path = path.replace("$room_id", encodeURIComponent(room_id)); path = path.replace("$user_id", user_id); return doRequest("PUT", path, undefined, { - membership: membershipValue + membership : membershipValue, + reason: reason }); }, - // Bans a user from from a room + // Bans a user from a room ban: function(room_id, user_id, reason) { var path = "/rooms/$room_id/ban"; path = path.replace("$room_id", encodeURIComponent(room_id)); @@ -189,7 +211,20 @@ angular.module('matrixService', []) reason: reason }); }, - + + // Unbans a user in a room + unban: function(room_id, user_id) { + // FIXME: To update when there will be homeserver API for unban + // For now, do an unban by resetting the user membership to "leave" + return this.setMembership(room_id, user_id, "leave"); + }, + + // Kicks a user from a room + kick: function(room_id, user_id, reason) { + // Set the user membership to "leave" to kick him + return this.setMembership(room_id, user_id, "leave", reason); + }, + // Retrieves the room ID corresponding to a room alias resolveRoomAlias:function(room_alias) { var path = "/_matrix/client/api/v1/directory/room/$room_alias"; @@ -280,6 +315,11 @@ angular.module('matrixService', []) return doRequest("GET", path); }, + // get a user's profile + getProfile: function(userId) { + return this.getProfileInfo(userId); + }, + // get a display name for this user ID getDisplayName: function(userId) { return this.getProfileInfo(userId, "displayname"); @@ -313,8 +353,8 @@ angular.module('matrixService', []) }, getProfileInfo: function(userId, info_segment) { - var path = "/profile/$user_id/" + info_segment; - path = path.replace("$user_id", userId); + var path = "/profile/"+userId + if (info_segment) path += '/' + info_segment; return doRequest("GET", path); }, @@ -485,18 +525,20 @@ angular.module('matrixService', []) room_alias: undefined, room_display_name: undefined }; - var alias = this.getRoomIdToAliasMapping(room.room_id); if (alias) { // use the existing alias from storage result.room_alias = alias; result.room_display_name = alias; } + // XXX: this only lets us learn aliases from our local HS - we should + // make the client stop returning this if we can trust m.room.aliases state events else if (room.aliases && room.aliases[0]) { // save the mapping // TODO: select the smarter alias from the array this.createRoomIdToAliasMapping(room.room_id, room.aliases[0]); result.room_display_name = room.aliases[0]; + result.room_alias = room.aliases[0]; } else if (room.membership === "invite" && "inviter" in room) { result.room_display_name = room.inviter + "'s room"; @@ -509,13 +551,22 @@ angular.module('matrixService', []) }, createRoomIdToAliasMapping: function(roomId, alias) { - localStorage.setItem(MAPPING_PREFIX+roomId, alias); + roomIdToAlias[roomId] = alias; + aliasToRoomId[alias] = roomId; + // localStorage.setItem(MAPPING_PREFIX+roomId, alias); }, getRoomIdToAliasMapping: function(roomId) { - return localStorage.getItem(MAPPING_PREFIX+roomId); + var alias = roomIdToAlias[roomId]; // was localStorage.getItem(MAPPING_PREFIX+roomId) + //console.log("looking for alias for " + roomId + "; found: " + alias); + return alias; }, + getAliasToRoomIdMapping: function(alias) { + var roomId = aliasToRoomId[alias]; + //console.log("looking for roomId for " + alias + "; found: " + roomId); + return roomId; + }, /****** Power levels management ******/ diff --git a/webclient/home/home.html b/webclient/home/home.html index c1f9643839..7240e79f86 100644 --- a/webclient/home/home.html +++ b/webclient/home/home.html @@ -26,7 +26,7 @@ <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> + <a href="#/room/{{ room.room_alias ? room.room_alias : room.room_id }}" >{{ room.room_display_name }}</a> </div> </div> <br/> diff --git a/webclient/img/green_phone.png b/webclient/img/green_phone.png new file mode 100644 index 0000000000..28807c749b --- /dev/null +++ b/webclient/img/green_phone.png Binary files differdiff --git a/webclient/img/red_phone.png b/webclient/img/red_phone.png new file mode 100644 index 0000000000..11fc44940c --- /dev/null +++ b/webclient/img/red_phone.png Binary files differdiff --git a/webclient/index.html b/webclient/index.html index f016dbb877..81c7c7d06c 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -10,12 +10,14 @@ <meta name="viewport" content="width=device-width"> - <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script> + <script type='text/javascript' src='js/jquery-1.8.3.min.js'></script> + <script type="text/javascript" src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js"></script> <script src="js/angular-sanitize.min.js"></script> <script type='text/javascript' src='js/ng-infinite-scroll-matrix.js'></script> <script src="app.js"></script> + <script src="config.js"></script> <script src="app-controller.js"></script> <script src="app-directive.js"></script> <script src="app-filter.js"></script> @@ -29,6 +31,7 @@ <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/matrix-filter.js"></script> <script src="components/matrix/matrix-call.js"></script> <script src="components/matrix/matrix-phone-service.js"></script> <script src="components/matrix/event-stream-service.js"></script> @@ -44,18 +47,29 @@ <div id="header"> <!-- Do not show buttons on the login page --> <div id="headerContent" ng-hide="'/login' == location || '/register' == location"> - <div id="callBar"> - <div ng-show="currentCall.state == 'ringing'"> - Incoming call from {{ currentCall.user_id }} - <button ng-click="answerCall()">Answer</button> - <button ng-click="hangupCall()">Reject</button> + <div id="callBar" ng-show="currentCall"> + <img id="callPeerImage" ng-show="currentCall.userProfile.avatar_url" ngSrc="{{ currentCall.userProfile.avatar_url }}" /> + <img class="callIcon" src="img/green_phone.png" ng-show="currentCall.state != 'ended'" /> + <img class="callIcon" id="callEndedIcon" src="img/red_phone.png" ng-show="currentCall.state == 'ended'" /> + <div id="callPeerNameAndState"> + <span id="callPeerName">{{ currentCall.userProfile.displayname }}</span> + <br /> + <span id="callState"> + <span ng-show="currentCall.state == 'invite_sent'">Calling...</span> + <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span> + <span ng-show="currentCall.state == 'connected'">Call Connected</span> + <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'outbound'">Call Rejected</span> + <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'outbound'">Call Ended</span> + <span ng-show="currentCall.state == 'ended' && !currentCall.didConnect && currentCall.direction == 'inbound'">Call Canceled</span> + <span ng-show="currentCall.state == 'ended' && currentCall.didConnect && currentCall.direction == 'inbound'">Call Ended</span> + <span ng-show="currentCall.state == 'wait_local_media'">Waiting for media permission...</span> + </span> </div> + <span ng-show="currentCall.state == 'ringing'"> + <button ng-click="answerCall()">Answer</button> + <button ng-click="hangupCall()">Reject</button> + </span> <button ng-click="hangupCall()" ng-show="currentCall && currentCall.state != 'ringing' && currentCall.state != 'ended' && currentCall.state != 'fledgling'">Hang up</button> - <span ng-show="currentCall.state == 'invite_sent'">Calling...</span> - <span ng-show="currentCall.state == 'connecting'">Call Connecting...</span> - <span ng-show="currentCall.state == 'connected'">Call Connected</span> - <span ng-show="currentCall.state == 'ended'">Call Ended</span> - <span style="display: none; ">{{ currentCall.state }}</span> </div> <a href id="headerUserId" ng-click='goToUserPage(user_id)'>{{ user_id }}</a> diff --git a/webclient/login/login.html b/webclient/login/login.html index 18e7a02815..6297ec4d42 100644 --- a/webclient/login/login.html +++ b/webclient/login/login.html @@ -39,8 +39,8 @@ Only http://matrix.org:8090 currently exists.</div> <br/> <br/> - <a href="#/register" style="padding-right: 3em">Create account</a> - <a href="#/reset_password">Forgotten password?</a> + <a href="#/register" style="padding-right: 0em">Create account</a> + <a href="#/reset_password" style="display: none; ">Forgotten password?</a> </div> </div> </form> diff --git a/webclient/login/register-controller.js b/webclient/login/register-controller.js index 5a14964248..b3c0c21335 100644 --- a/webclient/login/register-controller.js +++ b/webclient/login/register-controller.js @@ -19,6 +19,12 @@ angular.module('RegisterController', ['matrixService']) function($scope, $rootScope, $location, matrixService, eventStreamService) { 'use strict'; + var config = window.webClientConfig; + var useCaptcha = true; + if (config !== undefined) { + useCaptcha = config.useCaptcha; + } + // FIXME: factor out duplication with login-controller.js // Assume that this is hosted on the home server, in which case the URL @@ -87,9 +93,12 @@ angular.module('RegisterController', ['matrixService']) }; $scope.registerWithMxidAndPassword = function(mxid, password, threepidCreds) { - matrixService.register(mxid, password, threepidCreds).then( + matrixService.register(mxid, password, threepidCreds, useCaptcha).then( function(response) { $scope.feedback = "Success"; + if (useCaptcha) { + Recaptcha.destroy(); + } // Update the current config var config = matrixService.config(); angular.extend(config, { @@ -116,11 +125,21 @@ angular.module('RegisterController', ['matrixService']) }, function(error) { console.trace("Registration error: "+error); + if (useCaptcha) { + Recaptcha.reload(); + } if (error.data) { if (error.data.errcode === "M_USER_IN_USE") { $scope.feedback = "Username already taken."; $scope.reenter_username = true; } + else if (error.data.errcode == "M_CAPTCHA_INVALID") { + $scope.feedback = "Failed captcha."; + } + else if (error.data.errcode == "M_CAPTCHA_NEEDED") { + $scope.feedback = "Captcha is required on this home " + + "server."; + } } else if (error.status === 0) { $scope.feedback = "Unable to talk to the server."; @@ -142,6 +161,33 @@ angular.module('RegisterController', ['matrixService']) } ); }; + + var setupCaptcha = function() { + console.log("Setting up ReCaptcha") + var config = window.webClientConfig; + var public_key = undefined; + if (config === undefined) { + console.error("Couldn't find webClientConfig. Cannot get public key for captcha."); + } + else { + public_key = webClientConfig.recaptcha_public_key; + if (public_key === undefined) { + console.error("No public key defined for captcha!") + } + } + Recaptcha.create(public_key, + "regcaptcha", + { + theme: "red", + callback: Recaptcha.focus_response_field + }); + }; + $scope.init = function() { + if (useCaptcha) { + setupCaptcha(); + } + }; + }]); diff --git a/webclient/login/register.html b/webclient/login/register.html index 06a6526b70..a27f9ad4e8 100644 --- a/webclient/login/register.html +++ b/webclient/login/register.html @@ -12,7 +12,6 @@ <div style="text-align: center"> <br/> - <input ng-show="!wait_3pid_code" id="email" size="32" type="text" ng-focus="true" ng-model="account.email" placeholder="Email address (optional)"/> <div ng-show="!wait_3pid_code" class="smallPrint">Specifying an email address lets other users find you on Matrix more easily,<br/> and will give you a way to reset your password in the future</div> @@ -26,7 +25,10 @@ <input ng-show="!wait_3pid_code" id="displayName" size="32" type="text" ng-model="account.displayName" placeholder="Display name (e.g. Bob Obson)"/> <br ng-show="!wait_3pid_code" /> <br ng-show="!wait_3pid_code" /> - + + + <div id="regcaptcha" ng-init="init()" /> + <button ng-show="!wait_3pid_code" ng-click="register()" ng-disabled="!account.desired_user_id || !account.homeserver || !account.pwd1 || !account.pwd2 || account.pwd1 !== account.pwd2">Sign up</button> <div ng-show="wait_3pid_code"> diff --git a/webclient/recents/recents-controller.js b/webclient/recents/recents-controller.js index 3209f2cbdf..0f27f7a660 100644 --- a/webclient/recents/recents-controller.js +++ b/webclient/recents/recents-controller.js @@ -16,7 +16,7 @@ 'use strict'; -angular.module('RecentsController', ['matrixService', 'eventHandlerService']) +angular.module('RecentsController', ['matrixService', 'matrixFilter', 'eventHandlerService']) .controller('RecentsController', ['$scope', 'matrixService', 'eventHandlerService', function($scope, matrixService, eventHandlerService) { $scope.rooms = {}; @@ -28,13 +28,8 @@ angular.module('RecentsController', ['matrixService', 'eventHandlerService']) var listenToEventStream = function() { // Refresh the list on matrix invitation and message event $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) { - var config = matrixService.config(); - if (isLive && event.state_key === 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; - - $scope.rooms[event.room_id] = event; + if (isLive) { + $scope.rooms[event.room_id].lastMsg = event; } }); $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { diff --git a/webclient/recents/recents.html b/webclient/recents/recents.html index 9978e08b13..280d0632ab 100644 --- a/webclient/recents/recents.html +++ b/webclient/recents/recents.html @@ -6,7 +6,7 @@ ng-class="{'recentsRoomSelected': (room.room_id === recentsSelectedRoomID)}"> <tr> <td class="recentsRoomName"> - {{ room.room_id | roomName }} + {{ room.room_id | mRoomName }} </td> <td class="recentsRoomSummaryTS"> {{ (room.lastMsg.ts) | date:'MMM d HH:mm' }} @@ -16,27 +16,48 @@ <tr> <td colspan="2" class="recentsRoomSummary"> - <div ng-show="room.membership === 'invite'" > - {{ room.inviter }} invited you + <div ng-show="room.membership === 'invite'"> + {{ room.lastMsg.inviter | mUserDisplayName: room.room_id }} invited you </div> - - <div ng-hide="room.membership === 'invite'" ng-switch="room.lastMsg.type" > - <div ng-switch-when="m.room.member"> - {{ room.lastMsg.user_id }} - {{ {"join": "joined", "leave": "left", "invite": "invited", "ban": "banned"}[msg.content.membership] }} - {{ (msg.content.membership === "invite" || msg.content.membership === "ban") ? (msg.state_key || '') : '' }} + + <div ng-hide="room.membership === 'invite'" ng-switch="room.lastMsg.type"> + <div ng-switch-when="m.room.member"> + <span ng-if="'join' === room.lastMsg.content.membership"> + {{ room.lastMsg.state_key | mUserDisplayName: room.room_id}} joined + </span> + <span ng-if="'leave' === room.lastMsg.content.membership"> + <span ng-if="room.lastMsg.user_id === room.lastMsg.state_key"> + {{room.lastMsg.state_key | mUserDisplayName: room.room_id }} left + </span> + <span ng-if="room.lastMsg.user_id !== room.lastMsg.state_key"> + {{ room.lastMsg.user_id | mUserDisplayName: room.room_id }} + {{ {"join": "kicked", "ban": "unbanned"}[room.lastMsg.content.prev] }} + {{ room.lastMsg.state_key | mUserDisplayName: room.room_id }} + </span> + <span ng-if="'join' === room.lastMsg.content.prev && room.lastMsg.content.reason"> + : {{ room.lastMsg.content.reason }} + </span> + </span> + <span ng-if="'invite' === room.lastMsg.content.membership || 'ban' === room.lastMsg.content.membership"> + {{ room.lastMsg.user_id | mUserDisplayName: room.room_id }} + {{ {"invite": "invited", "ban": "banned"}[room.lastMsg.content.membership] }} + {{ room.lastMsg.state_key | mUserDisplayName: room.room_id }} + <span ng-if="'ban' === room.lastMsg.content.prev && room.lastMsg.content.reason"> + : {{ room.lastMsg.content.reason }} + </span> + </span> </div> <div ng-switch-when="m.room.message"> <div ng-switch="room.lastMsg.content.msgtype"> <div ng-switch-when="m.text"> - {{ room.lastMsg.user_id }} : + {{ room.lastMsg.user_id | mUserDisplayName: room.room_id }} : <span ng-bind-html="(room.lastMsg.content.body) | linky:'_blank'"> </span> </div> <div ng-switch-when="m.image"> - {{ room.lastMsg.user_id }} sent an image + {{ room.lastMsg.user_id | mUserDisplayName: room.room_id }} sent an image </div> <div ng-switch-when="m.emote"> @@ -51,7 +72,7 @@ </div> <div ng-switch-default> - <div ng-if="room.lastMsg.type.indexOf('m.call.') == 0"> + <div ng-if="room.lastMsg.type.indexOf('m.call.') === 0"> Call </div> </div> diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index c3f72c9d25..e69adb9b46 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -angular.module('RoomController', ['ngSanitize', 'mFileInput']) +angular.module('RoomController', ['ngSanitize', 'matrixFilter', 'mFileInput']) .controller('RoomController', ['$scope', '$timeout', '$routeParams', '$location', '$rootScope', 'matrixService', 'eventHandlerService', 'mFileUpload', 'mPresence', 'matrixPhoneService', 'MatrixCall', function($scope, $timeout, $routeParams, $location, $rootScope, matrixService, eventHandlerService, mFileUpload, mPresence, matrixPhoneService, MatrixCall) { 'use strict'; @@ -32,9 +32,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) first_pagination: true, // this is toggled off when the first pagination is done can_paginate: true, // this is toggled off when we run out of items paginating: false, // used to avoid concurrent pagination requests pulling in dup contents - stream_failure: undefined, // the response when the stream fails - // FIXME: sending has been disabled, as surely messages should be sent in the background rather than locking the UI synchronously --Matthew - sending: false // true when a message is being sent. It helps to disable the UI when a process is running + stream_failure: undefined // the response when the stream fails }; $scope.members = {}; $scope.autoCompleting = false; @@ -44,18 +42,25 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) $scope.imageURLToSend = ""; $scope.userIDToInvite = ""; - var scrollToBottom = function() { + var scrollToBottom = function(force) { console.log("Scrolling to bottom"); - $timeout(function() { - var objDiv = document.getElementById("messageTableWrapper"); - objDiv.scrollTop = objDiv.scrollHeight; - }, 0); + + // Do not autoscroll to the bottom to display the new event if the user is not at the bottom. + // Exception: in case where the event is from the user, we want to force scroll to the bottom + var objDiv = document.getElementById("messageTableWrapper"); + if ((objDiv.offsetHeight + objDiv.scrollTop >= objDiv.scrollHeight) || force) { + + $timeout(function() { + objDiv.scrollTop = objDiv.scrollHeight; + }, 0); + } }; $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { if (isLive && event.room_id === $scope.room_id) { - scrollToBottom(); + scrollToBottom(); + if (window.Notification) { // Show notification when the user is idle if (matrixService.presence.offline === mPresence.getState()) { @@ -76,6 +81,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) { if (isLive) { + scrollToBottom(); updateMemberList(event); } }); @@ -169,16 +175,18 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) var updateMemberList = function(chunk) { if (chunk.room_id != $scope.room_id) return; - // Ignore banned and kicked (leave) people - if ("ban" === chunk.membership || "leave" === chunk.membership) { - return; - } // set target_user_id to keep things clear var target_user_id = chunk.state_key; var isNewMember = !(target_user_id in $scope.members); if (isNewMember) { + + // Ignore banned and kicked (leave) people + if ("ban" === chunk.membership || "leave" === chunk.membership) { + return; + } + // FIXME: why are we copying these fields around inside chunk? if ("presence" in chunk.content) { chunk.presence = chunk.content.presence; @@ -202,6 +210,13 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) } else { // selectively update membership and presence else it will nuke the picture and displayname too :/ + + // Remove banned and kicked (leave) people + if ("ban" === chunk.membership || "leave" === chunk.membership) { + delete $scope.members[target_user_id]; + return; + } + var member = $scope.members[target_user_id]; member.membership = chunk.content.membership; if ("presence" in chunk.content) { @@ -256,7 +271,7 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) normaliseMembersPowerLevels(); } - } + }; // Normalise users power levels so that the user with the higher power level // will have a bar covering 100% of the width of his avatar @@ -277,104 +292,225 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) member.powerLevelNorm = (member.powerLevel * 100) / maxPowerLevel; } } - } + }; $scope.send = function() { if ($scope.textInput === "") { return; } - - $scope.state.sending = true; + + scrollToBottom(true); var promise; + var cmd; + var args; + var echo = false; // Check for IRC style commands first - if ($scope.textInput.indexOf("/") === 0) { - var args = $scope.textInput.split(' '); - var cmd = args[0]; + var line = $scope.textInput; + + // trim any trailing whitespace, as it can confuse the parser for IRC-style commands + line = line.replace(/\s+$/, ""); + + if (line[0] === "/" && line[1] !== "/") { + var bits = line.match(/^(\S+?)( +(.*))?$/); + cmd = bits[1]; + args = bits[3]; + + console.log("cmd: " + cmd + ", args: " + args); switch (cmd) { case "/me": - var emoteMsg = args.slice(1).join(' '); - promise = matrixService.sendEmoteMessage($scope.room_id, emoteMsg); + promise = matrixService.sendEmoteMessage($scope.room_id, args); + echo = true; break; case "/nick": // Change user display name - if (2 === args.length) { - promise = matrixService.setDisplayName(args[1]); + if (args) { + promise = matrixService.setDisplayName(args); + } + else { + $scope.feedback = "Usage: /nick <display_name>"; + } + break; + + case "/join": + // Join a room + if (args) { + var matches = args.match(/^(\S+)$/); + if (matches) { + var room_alias = matches[1]; + if (room_alias.indexOf(':') == -1) { + // FIXME: actually track the :domain style name of our homeserver + // with or without port as is appropriate and append it at this point + } + + var room_id = matrixService.getAliasToRoomIdMapping(room_alias); + console.log("joining " + room_alias + " id=" + room_id); + if ($rootScope.events.rooms[room_id]) { + // don't send a join event for a room you're already in. + $location.url("room/" + room_alias); + } + else { + promise = matrixService.joinAlias(room_alias).then( + function(response) { + $location.url("room/" + room_alias); + }, + function(error) { + $scope.feedback = "Can't join room: " + JSON.stringify(error.data); + } + ); + } + } + } + else { + $scope.feedback = "Usage: /join <room_alias>"; } break; case "/kick": - // Kick a user from the room - if (2 === args.length) { - var user_id = args[1]; + // Kick a user from the room with an optional reason + if (args) { + var matches = args.match(/^(\S+?)( +(.*))?$/); + if (matches) { + promise = matrixService.kick($scope.room_id, matches[1], matches[3]); + } + } - // Set his state in the room as leave - promise = matrixService.setMembership($scope.room_id, user_id, "leave"); + if (!promise) { + $scope.feedback = "Usage: /kick <userId> [<reason>]"; } break; - + case "/ban": - // Ban a user from the room - if (2 <= args.length) { - // TODO: The user may have entered the display name - // Need display name -> user_id resolution. Pb: how to manage user with same display names? - var user_id = args[1]; - - // Does the user provide a reason? - if (3 <= args.length) { - var reason = args.slice(2).join(' '); + // Ban a user from the room with an optional reason + if (args) { + var matches = args.match(/^(\S+?)( +(.*))?$/); + if (matches) { + promise = matrixService.ban($scope.room_id, matches[1], matches[3]); } - promise = matrixService.ban($scope.room_id, user_id, reason); } - break; + if (!promise) { + $scope.feedback = "Usage: /ban <userId> [<reason>]"; + } + break; + case "/unban": // Unban a user from the room - if (2 === args.length) { - var user_id = args[1]; - - // Reset the user membership to leave to unban him - promise = matrixService.setMembership($scope.room_id, user_id, "leave"); + if (args) { + var matches = args.match(/^(\S+)$/); + if (matches) { + // Reset the user membership to "leave" to unban him + promise = matrixService.unban($scope.room_id, matches[1]); + } + } + + if (!promise) { + $scope.feedback = "Usage: /unban <userId>"; } break; case "/op": // Define the power level of a user - if (3 === args.length) { - var user_id = args[1]; - var powerLevel = parseInt(args[2]); - promise = matrixService.setUserPowerLevel($scope.room_id, user_id, powerLevel); + if (args) { + var matches = args.match(/^(\S+?)( +(\d+))?$/); + var powerLevel = 50; // default power level for op + if (matches) { + var user_id = matches[1]; + if (matches.length === 4) { + powerLevel = parseInt(matches[3]); + } + if (powerLevel !== NaN) { + promise = matrixService.setUserPowerLevel($scope.room_id, user_id, powerLevel); + } + } + } + + if (!promise) { + $scope.feedback = "Usage: /op <userId> [<power level>]"; } break; case "/deop": // Reset the power level of a user - if (2 === args.length) { - var user_id = args[1]; - promise = matrixService.setUserPowerLevel($scope.room_id, user_id, undefined); + if (args) { + var matches = args.match(/^(\S+)$/); + if (matches) { + promise = matrixService.setUserPowerLevel($scope.room_id, args, undefined); + } } + + if (!promise) { + $scope.feedback = "Usage: /deop <userId>"; + } + break; + + default: + $scope.feedback = ("Unrecognised IRC-style command: " + cmd); break; } } - if (!promise) { - // Send the text message - promise = matrixService.sendTextMessage($scope.room_id, $scope.textInput); + // By default send this as a message unless it's an IRC-style command + if (!promise && !cmd) { + // Make the request + promise = matrixService.sendTextMessage($scope.room_id, line); + echo = true; } - promise.then( - function() { - console.log("Request successfully sent"); - $scope.textInput = ""; - $scope.state.sending = false; - }, - function(error) { - $scope.feedback = "Request failed: " + error.data.error; - $scope.state.sending = false; - }); + if (echo) { + // Echo the message to the room + // To do so, create a minimalist fake text message event and add it to the in-memory list of room messages + var echoMessage = { + content: { + body: (cmd === "/me" ? args : line), + hsob_ts: new Date().getTime(), // fake a timestamp + msgtype: (cmd === "/me" ? "m.emote" : "m.text"), + }, + room_id: $scope.room_id, + type: "m.room.message", + user_id: $scope.state.user_id, + // FIXME: re-enable echo_msg_state when we have a nice way to turn the field off again + // echo_msg_state: "messagePending" // Add custom field to indicate the state of this fake message to HTML + }; + + $scope.textInput = ""; + $rootScope.events.rooms[$scope.room_id].messages.push(echoMessage); + scrollToBottom(); + } + + if (promise) { + promise.then( + function() { + console.log("Request successfully sent"); + $scope.textInput = ""; +/* + if (echoMessage) { + // Remove the fake echo message from the room messages + // It will be replaced by the one acknowledged by the server + // ...except this causes a nasty flicker. So don't swap messages for now. --matthew + // var index = $rootScope.events.rooms[$scope.room_id].messages.indexOf(echoMessage); + // if (index > -1) { + // $rootScope.events.rooms[$scope.room_id].messages.splice(index, 1); + // } + } + else { + $scope.textInput = ""; + } +*/ + }, + function(error) { + $scope.feedback = "Request failed: " + error.data.error; + + if (echoMessage) { + // Mark the message as unsent for the rest of the page life + echoMessage.content.hsob_ts = "Unsent"; + echoMessage.echo_msg_state = "messageUnSent"; + } + }); + } }; $scope.onInit = function() { @@ -531,25 +667,20 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) }; $scope.sendImage = function(url, body) { - $scope.state.sending = true; - + scrollToBottom(true); + matrixService.sendImageMessage($scope.room_id, url, body).then( function() { console.log("Image sent"); - $scope.state.sending = false; }, function(error) { $scope.feedback = "Failed to send image: " + error.data.error; - $scope.state.sending = false; }); }; $scope.imageFileToSend; $scope.$watch("imageFileToSend", function(newValue, oldValue) { if ($scope.imageFileToSend) { - - $scope.state.sending = true; - // Upload this image with its thumbnail to Internet mFileUpload.uploadImageAndThumbnail($scope.imageFileToSend, THUMBNAIL_SIZE).then( function(imageMessage) { @@ -557,16 +688,13 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) matrixService.sendMessage($scope.room_id, undefined, imageMessage).then( function() { console.log("Image message sent"); - $scope.state.sending = false; }, function(error) { $scope.feedback = "Failed to send image message: " + error.data.error; - $scope.state.sending = false; }); }, function(error) { $scope.feedback = "Can't upload image"; - $scope.state.sending = false; } ); } @@ -582,6 +710,6 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput']) call.onHangup = $rootScope.onCallHangup; call.placeCall(); $rootScope.currentCall = call; - } + }; }]); diff --git a/webclient/room/room-directive.js b/webclient/room/room-directive.js index 659bcbc60f..e033b003e1 100644 --- a/webclient/room/room-directive.js +++ b/webclient/room/room-directive.js @@ -48,6 +48,9 @@ angular.module('RoomController') var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text); if (targetIndex === 0) { element[0].value = text; + + // Force angular to wake up and update the input ng-model by firing up input event + angular.element(element[0]).triggerHandler('input'); } else if (search && search[1]) { // console.log("search found: " + search); @@ -81,7 +84,10 @@ angular.module('RoomController') expansion += " "; element[0].value = text.replace(/@?([a-zA-Z0-9_\-:\.]+)$/, expansion); // cancel blink - element[0].className = ""; + element[0].className = ""; + + // Force angular to wake up and update the input ng-model by firing up input event + angular.element(element[0]).triggerHandler('input'); } else { // console.log("wrapped!"); @@ -91,6 +97,9 @@ angular.module('RoomController') }, 150); element[0].value = text; scope.tabCompleteIndex = 0; + + // Force angular to wake up and update the input ng-model by firing up input event + angular.element(element[0]).triggerHandler('input'); } } else { diff --git a/webclient/room/room.html b/webclient/room/room.html index 6732a7b3ae..5bd2cc92d5 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -3,7 +3,7 @@ <div id="roomHeader"> <a href ng-click="goToPage('/')"><img src="img/logo-small.png" width="100" height="43" alt="[matrix]"/></a> <div id="roomName"> - {{ room_id | roomName }} + {{ room_id | mRoomName }} </div> </div> @@ -40,7 +40,10 @@ ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item> <td class="leftBlock"> <div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div> - <div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}</div> + <div class="timestamp" + ng-class="msg.echo_msg_state"> + {{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }} + </div> </td> <td class="avatar"> <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.png' }}" width="32" height="32" @@ -59,15 +62,24 @@ {{ members[msg.user_id].displayname || msg.user_id }} {{ {"join": "kicked", "ban": "unbanned"}[msg.content.prev] }} {{ members[msg.state_key].displayname || msg.state_key }} + <span ng-if="'join' === msg.content.prev && msg.content.reason"> + : {{ msg.content.reason }} + </span> </span> </span> <span ng-if="'invite' === msg.content.membership || 'ban' === msg.content.membership"> {{ members[msg.user_id].displayname || msg.user_id }} {{ {"invite": "invited", "ban": "banned"}[msg.content.membership] }} {{ members[msg.state_key].displayname || msg.state_key }} - </span> + <span ng-if="'ban' === msg.content.prev && msg.content.reason"> + : {{ msg.content.reason }} + </span> + </span> + <span ng-show='msg.content.msgtype === "m.emote"' ng-bind-html="'* ' + (members[msg.user_id].displayname || msg.user_id) + ' ' + msg.content.body | linky:'_blank'"/> - <span ng-show='msg.content.msgtype === "m.text"' ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/> + <span ng-show='msg.content.msgtype === "m.text"' + ng-class="msg.echo_msg_state" + ng-bind-html="((msg.content.msgtype === 'm.text') ? msg.content.body : '') | linky:'_blank'"/> <div ng-show='msg.content.msgtype === "m.image"'> <div ng-hide='msg.content.thumbnail_url' ng-style="msg.content.body.h && { 'height' : (msg.content.body.h < 320) ? msg.content.body.h : 320}"> <img class="image" ng-src="{{ msg.content.url }}"/> diff --git a/webclient/settings/settings-controller.js b/webclient/settings/settings-controller.js index 7a26367a1b..8c877a24e9 100644 --- a/webclient/settings/settings-controller.js +++ b/webclient/settings/settings-controller.js @@ -19,6 +19,17 @@ limitations under the License. angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInput']) .controller('SettingsController', ['$scope', 'matrixService', 'mFileUpload', function($scope, matrixService, mFileUpload) { + // XXX: duplicated from register + 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.config = matrixService.config(); $scope.profile = { @@ -106,16 +117,22 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu $scope.linkedEmails = { linkNewEmail: "", // the email entry box emailBeingAuthed: undefined, // to populate verification text - authTokenId: undefined, // the token id from the IS + authSid: 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( + if (email != $scope.linkedEmails.emailBeingAuthed) { + $scope.linkedEmails.emailBeingAuthed = email; + $scope.clientSecret = generateClientSecret(); + $scope.sendAttempt = 0; + } + $scope.sendAttempt++; + matrixService.linkEmail(email, $scope.clientSecret, $scope.sendAttempt).then( function(response) { if (response.data.success === true) { - $scope.linkedEmails.authTokenId = response.data.tokenId; + $scope.linkedEmails.authSid = response.data.sid; $scope.emailFeedback = "You have been sent an email."; $scope.linkedEmails.emailBeingAuthed = email; } @@ -129,34 +146,44 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu ); }; - $scope.submitEmailCode = function(code) { - var tokenId = $scope.linkedEmails.authTokenId; + $scope.submitEmailCode = function() { + var tokenId = $scope.linkedEmails.authSid; if (tokenId === undefined) { $scope.emailFeedback = "You have not requested a code with this email."; return; } - matrixService.authEmail(matrixService.config().user_id, tokenId, code).then( + matrixService.authEmail($scope.clientSecret, $scope.linkedEmails.authSid, $scope.linkedEmails.emailCode).then( function(response) { - if ("success" in response.data && response.data.success === false) { + if ("errcode" in response.data) { $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 = ""; + matrixService.bindEmail(matrixService.config().user_id, tokenId, $scope.clientSecret).then( + function(response) { + if ('errcode' in response.data) { + $scope.emailFeedback = "Failed to link email."; + return; + } + 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; @@ -182,4 +209,4 @@ angular.module('SettingsController', ['matrixService', 'mFileUpload', 'mFileInpu $scope.settings.notifications = permission; }); }; -}]); \ No newline at end of file +}]); diff --git a/webclient/settings/settings.html b/webclient/settings/settings.html index b7fd5dfb50..924812e7ae 100644 --- a/webclient/settings/settings.html +++ b/webclient/settings/settings.html @@ -23,14 +23,14 @@ </div> <br/> - <h3 style="display: none; ">Linked emails</h3> - <div class="section" style="display: none; "> + <h3>Linked emails</h3> + <div class="section"> <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 }} + {{ emailFeedback }} </form> <form ng-hide="!linkedEmails.emailBeingAuthed"> Enter validation token for {{ linkedEmails.emailBeingAuthed }}: @@ -81,7 +81,7 @@ <ul> <li>/nick <display_name>: change your display name</li> <li>/me <action>: send the action you are doing. /me will be replaced by your display name</li> - <li>/kick <user_id>: kick the user</li> + <li>/kick <user_id> [<reason>]: kick the user</li> <li>/ban <user_id> [<reason>]: ban the user</li> <li>/unban <user_id>: unban the user</li> <li>/op <user_id> <power_level>: set user power level</li> |
