;
+}
+
export function stripParagraphs(html: string): string {
const contentDiv = document.createElement('div');
contentDiv.innerHTML = html;
@@ -87,11 +104,12 @@ var sanitizeHtmlParams = {
// deliberately no h1/h2 to stop people shouting.
'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
'nl', 'li', 'b', 'i', 'u', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
- 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre'
+ 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'span',
],
allowedAttributes: {
// custom ones first:
- font: ['color'], // custom to matrix
+ font: ['color', 'data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
+ span: ['data-mx-bg-color', 'data-mx-color', 'style'], // custom to matrix
a: ['href', 'name', 'target', 'rel'], // remote target: custom to matrix
// We don't currently allow img itself by default, but this
// would make sense if we did
@@ -136,6 +154,38 @@ var sanitizeHtmlParams = {
attribs.rel = 'noopener'; // https://mathiasbynens.github.io/rel-noopener/
return { tagName: tagName, attribs : attribs };
},
+ '*': function(tagName, attribs) {
+ // Delete any style previously assigned, style is an allowedTag for font and span
+ // because attributes are stripped after transforming
+ delete attribs.style;
+
+ // Sanitise and transform data-mx-color and data-mx-bg-color to their CSS
+ // equivalents
+ const customCSSMapper = {
+ 'data-mx-color': 'color',
+ 'data-mx-bg-color': 'background-color',
+ // $customAttributeKey: $cssAttributeKey
+ };
+
+ let style = "";
+ Object.keys(customCSSMapper).forEach((customAttributeKey) => {
+ const cssAttributeKey = customCSSMapper[customAttributeKey];
+ const customAttributeValue = attribs[customAttributeKey];
+ if (customAttributeValue &&
+ typeof customAttributeValue === 'string' &&
+ COLOR_REGEX.test(customAttributeValue)
+ ) {
+ style += cssAttributeKey + ":" + customAttributeValue + ";";
+ delete attribs[customAttributeKey];
+ }
+ });
+
+ if (style) {
+ attribs.style = style;
+ }
+
+ return { tagName: tagName, attribs: attribs };
+ },
},
};
@@ -290,7 +340,7 @@ export function bodyToHtml(content, highlights, opts) {
}
EMOJI_REGEX.lastIndex = 0;
- let contentBodyTrimmed = content.body.trim();
+ let contentBodyTrimmed = content.body !== undefined ? content.body.trim() : '';
let match = EMOJI_REGEX.exec(contentBodyTrimmed);
let emojiBody = match && match[0] && match[0].length === contentBodyTrimmed.length;
diff --git a/src/Invite.js b/src/Invite.js
index d1f03fe211e..0e8aca2cb55 100644
--- a/src/Invite.js
+++ b/src/Invite.js
@@ -19,8 +19,7 @@ import MultiInviter from './utils/MultiInviter';
const emailRegex = /^\S+@\S+\.\S+$/;
-// We allow localhost for mxids to avoid confusion
-const mxidRegex = /^@\S+:(?:\S+\.\S+|localhost)$/
+const mxidRegex = /^@\S+:\S+$/
export function getAddressType(inputText) {
const isEmailAddress = emailRegex.test(inputText);
diff --git a/src/Lifecycle.js b/src/Lifecycle.js
index 493bbf12aa5..fc8087e12d4 100644
--- a/src/Lifecycle.js
+++ b/src/Lifecycle.js
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -23,6 +24,9 @@ import UserActivity from './UserActivity';
import Presence from './Presence';
import dis from './dispatcher';
import DMRoomMap from './utils/DMRoomMap';
+import RtsClient from './RtsClient';
+import Modal from './Modal';
+import sdk from './index';
/**
* Called at startup, to attempt to build a logged-in Matrix session. It tries
@@ -108,16 +112,17 @@ export function loadSession(opts) {
return q();
}
- if (_restoreFromLocalStorage()) {
- return q();
- }
+ return _restoreFromLocalStorage().then((success) => {
+ if (success) {
+ return;
+ }
- if (enableGuest) {
- return _registerAsGuest(guestHsUrl, guestIsUrl, defaultDeviceDisplayName);
- }
+ if (enableGuest) {
+ return _registerAsGuest(guestHsUrl, guestIsUrl, defaultDeviceDisplayName);
+ }
- // fall back to login screen
- return q();
+ // fall back to login screen
+ });
}
function _loginWithToken(queryParams, defaultDeviceDisplayName) {
@@ -150,7 +155,7 @@ function _loginWithToken(queryParams, defaultDeviceDisplayName) {
function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
console.log("Doing guest login on %s", hsUrl);
- // TODO: we should probably de-duplicate this and Signup.Login.loginAsGuest.
+ // TODO: we should probably de-duplicate this and Login.loginAsGuest.
// Not really sure where the right home for it is.
// create a temporary MatrixClient to do the login
@@ -177,10 +182,11 @@ function _registerAsGuest(hsUrl, isUrl, defaultDeviceDisplayName) {
});
}
-// returns true if a session is found in localstorage
+// returns a promise which resolves to true if a session is found in
+// localstorage
function _restoreFromLocalStorage() {
if (!localStorage) {
- return false;
+ return q(false);
}
const hs_url = localStorage.getItem("mx_hs_url");
const is_url = localStorage.getItem("mx_is_url") || 'https://matrix.org';
@@ -207,28 +213,60 @@ function _restoreFromLocalStorage() {
identityServerUrl: is_url,
guest: is_guest,
});
- return true;
+ return q(true);
} catch (e) {
- console.log("Unable to restore session", e);
-
- var msg = e.message;
- if (msg == "OLM.BAD_LEGACY_ACCOUNT_PICKLE") {
- msg = "You need to log back in to generate end-to-end encryption keys "
- + "for this device and submit the public key to your homeserver. "
- + "This is a once off; sorry for the inconvenience.";
- }
-
- // don't leak things into the new session
- _clearLocalStorage();
-
- throw new Error("Unable to restore previous session: " + msg);
+ return _handleRestoreFailure(e);
}
} else {
console.log("No previous session found.");
- return false;
+ return q(false);
}
}
+function _handleRestoreFailure(e) {
+ console.log("Unable to restore session", e);
+
+ let msg = e.message;
+ if (msg == "OLM.BAD_LEGACY_ACCOUNT_PICKLE") {
+ msg = "You need to log back in to generate end-to-end encryption keys "
+ + "for this device and submit the public key to your homeserver. "
+ + "This is a once off; sorry for the inconvenience.";
+
+ _clearLocalStorage();
+
+ return q.reject(new Error(
+ "Unable to restore previous session: " + msg,
+ ));
+ }
+
+ const def = q.defer();
+ const SessionRestoreErrorDialog =
+ sdk.getComponent('views.dialogs.SessionRestoreErrorDialog');
+
+ Modal.createDialog(SessionRestoreErrorDialog, {
+ error: msg,
+ onFinished: (success) => {
+ def.resolve(success);
+ },
+ });
+
+ return def.promise.then((success) => {
+ if (success) {
+ // user clicked continue.
+ _clearLocalStorage();
+ return false;
+ }
+
+ // try, try again
+ return _restoreFromLocalStorage();
+ });
+}
+
+let rtsClient = null;
+export function initRtsClient(url) {
+ rtsClient = new RtsClient(url);
+}
+
/**
* Transitions to a logged-in state using the given credentials
* @param {MatrixClientCreds} credentials The credentials to use
@@ -239,6 +277,9 @@ export function setLoggedIn(credentials) {
credentials.userId, credentials.guest,
credentials.homeserverUrl);
+ // Resolves by default
+ let teamPromise = Promise.resolve(null);
+
// persist the session
if (localStorage) {
try {
@@ -261,13 +302,30 @@ export function setLoggedIn(credentials) {
} catch (e) {
console.warn("Error using local storage: can't persist session!", e);
}
+
+ if (rtsClient && !credentials.guest) {
+ teamPromise = rtsClient.login(credentials.userId).then((body) => {
+ if (body.team_token) {
+ localStorage.setItem("mx_team_token", body.team_token);
+ }
+ return body.team_token;
+ });
+ }
} else {
console.warn("No local storage available: can't persist session!");
}
+ // stop any running clients before we create a new one with these new credentials
+ stopMatrixClient();
+
MatrixClientPeg.replaceUsingCreds(credentials);
- dis.dispatch({action: 'on_logged_in'});
+ teamPromise.then((teamToken) => {
+ dis.dispatch({action: 'on_logged_in', teamToken: teamToken});
+ }, (err) => {
+ console.warn("Failed to get team token on login", err);
+ dis.dispatch({action: 'on_logged_in', teamToken: null});
+ });
startMatrixClient();
}
@@ -361,6 +419,7 @@ export function stopMatrixClient() {
if (cli) {
cli.stopClient();
cli.removeAllListeners();
+ cli.store.deleteAllData();
MatrixClientPeg.unset();
}
}
diff --git a/src/Login.js b/src/Login.js
new file mode 100644
index 00000000000..107a8825e94
--- /dev/null
+++ b/src/Login.js
@@ -0,0 +1,205 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations 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.
+*/
+
+import Matrix from "matrix-js-sdk";
+
+import q from 'q';
+import url from 'url';
+
+export default class Login {
+ constructor(hsUrl, isUrl, fallbackHsUrl, opts) {
+ this._hsUrl = hsUrl;
+ this._isUrl = isUrl;
+ this._fallbackHsUrl = fallbackHsUrl;
+ this._currentFlowIndex = 0;
+ this._flows = [];
+ this._defaultDeviceDisplayName = opts.defaultDeviceDisplayName;
+ }
+
+ getHomeserverUrl() {
+ return this._hsUrl;
+ }
+
+ getIdentityServerUrl() {
+ return this._isUrl;
+ }
+
+ setHomeserverUrl(hsUrl) {
+ this._hsUrl = hsUrl;
+ }
+
+ setIdentityServerUrl(isUrl) {
+ this._isUrl = isUrl;
+ }
+
+ /**
+ * Get a temporary MatrixClient, which can be used for login or register
+ * requests.
+ */
+ _createTemporaryClient() {
+ return Matrix.createClient({
+ baseUrl: this._hsUrl,
+ idBaseUrl: this._isUrl,
+ });
+ }
+
+ getFlows() {
+ var self = this;
+ var client = this._createTemporaryClient();
+ return client.loginFlows().then(function(result) {
+ self._flows = result.flows;
+ self._currentFlowIndex = 0;
+ // technically the UI should display options for all flows for the
+ // user to then choose one, so return all the flows here.
+ return self._flows;
+ });
+ }
+
+ chooseFlow(flowIndex) {
+ this._currentFlowIndex = flowIndex;
+ }
+
+ getCurrentFlowStep() {
+ // technically the flow can have multiple steps, but no one does this
+ // for login so we can ignore it.
+ var flowStep = this._flows[this._currentFlowIndex];
+ return flowStep ? flowStep.type : null;
+ }
+
+ loginAsGuest() {
+ var client = this._createTemporaryClient();
+ return client.registerGuest({
+ body: {
+ initial_device_display_name: this._defaultDeviceDisplayName,
+ },
+ }).then((creds) => {
+ return {
+ userId: creds.user_id,
+ deviceId: creds.device_id,
+ accessToken: creds.access_token,
+ homeserverUrl: this._hsUrl,
+ identityServerUrl: this._isUrl,
+ guest: true
+ };
+ }, (error) => {
+ if (error.httpStatus === 403) {
+ error.friendlyText = "Guest access is disabled on this Home Server.";
+ } else {
+ error.friendlyText = "Failed to register as guest: " + error.data;
+ }
+ throw error;
+ });
+ }
+
+ loginViaPassword(username, phoneCountry, phoneNumber, pass) {
+ const self = this;
+
+ const isEmail = username.indexOf("@") > 0;
+
+ let identifier;
+ let legacyParams; // parameters added to support old HSes
+ if (phoneCountry && phoneNumber) {
+ identifier = {
+ type: 'm.id.phone',
+ country: phoneCountry,
+ number: phoneNumber,
+ };
+ // No legacy support for phone number login
+ } else if (isEmail) {
+ identifier = {
+ type: 'm.id.thirdparty',
+ medium: 'email',
+ address: username,
+ };
+ legacyParams = {
+ medium: 'email',
+ address: username,
+ };
+ } else {
+ identifier = {
+ type: 'm.id.user',
+ user: username,
+ };
+ legacyParams = {
+ user: username,
+ };
+ }
+
+ const loginParams = {
+ password: pass,
+ identifier: identifier,
+ initial_device_display_name: this._defaultDeviceDisplayName,
+ };
+ Object.assign(loginParams, legacyParams);
+
+ const client = this._createTemporaryClient();
+ return client.login('m.login.password', loginParams).then(function(data) {
+ return q({
+ homeserverUrl: self._hsUrl,
+ identityServerUrl: self._isUrl,
+ userId: data.user_id,
+ deviceId: data.device_id,
+ accessToken: data.access_token
+ });
+ }, function(error) {
+ if (error.httpStatus == 400 && loginParams.medium) {
+ error.friendlyText = (
+ 'This Home Server does not support login using email address.'
+ );
+ }
+ else if (error.httpStatus === 403) {
+ error.friendlyText = (
+ 'Incorrect username and/or password.'
+ );
+ if (self._fallbackHsUrl) {
+ var fbClient = Matrix.createClient({
+ baseUrl: self._fallbackHsUrl,
+ idBaseUrl: this._isUrl,
+ });
+
+ return fbClient.login('m.login.password', loginParams).then(function(data) {
+ return q({
+ homeserverUrl: self._fallbackHsUrl,
+ identityServerUrl: self._isUrl,
+ userId: data.user_id,
+ deviceId: data.device_id,
+ accessToken: data.access_token
+ });
+ }, function(fallback_error) {
+ // throw the original error
+ throw error;
+ });
+ }
+ }
+ else {
+ error.friendlyText = (
+ 'There was a problem logging in. (HTTP ' + error.httpStatus + ")"
+ );
+ }
+ throw error;
+ });
+ }
+
+ redirectToCas() {
+ var client = this._createTemporaryClient();
+ var parsedUrl = url.parse(window.location.href, true);
+ parsedUrl.query["homeserver"] = client.getHomeserverUrl();
+ parsedUrl.query["identityServer"] = client.getIdentityServerUrl();
+ var casUrl = client.getCasLoginUrl(url.format(parsedUrl));
+ window.location.href = casUrl;
+ }
+}
diff --git a/src/Markdown.js b/src/Markdown.js
index d6dc979a5a8..4a46ce4f249 100644
--- a/src/Markdown.js
+++ b/src/Markdown.js
@@ -92,7 +92,16 @@ export default class Markdown {
}
toHTML() {
- const renderer = new commonmark.HtmlRenderer({safe: false});
+ const renderer = new commonmark.HtmlRenderer({
+ safe: false,
+
+ // Set soft breaks to hard HTML breaks: commonmark
+ // puts softbreaks in for multiple lines in a blockquote,
+ // so if these are just newline characters then the
+ // block quote ends up all on one line
+ // (https://github.com/vector-im/riot-web/issues/3154)
+ softbreak: '
{topBar}
-
+
{page_element}
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 6a84fb940f8..2fa5e926082 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -41,6 +42,7 @@ var Lifecycle = require('../../Lifecycle');
var PageTypes = require('../../PageTypes');
var createRoom = require("../../createRoom");
+import * as UDEHandler from '../../UnknownDeviceErrorHandler';
module.exports = React.createClass({
displayName: 'MatrixChat',
@@ -64,6 +66,9 @@ module.exports = React.createClass({
// displayname, if any, to set on the device when logging
// in/registering.
defaultDeviceDisplayName: React.PropTypes.string,
+
+ // A function that makes a registration URL
+ makeRegistrationUrl: React.PropTypes.func.isRequired,
},
childContextTypes: {
@@ -190,10 +195,56 @@ module.exports = React.createClass({
if (this.props.config.sync_timeline_limit) {
MatrixClientPeg.opts.initialSyncLimit = this.props.config.sync_timeline_limit;
}
+
+ // To enable things like riot.im/geektime in a nicer way than rewriting the URL
+ // and appending a team token query parameter, use the first path segment to
+ // indicate a team, with "public" team tokens stored in the config teamTokenMap.
+ let routedTeamToken = null;
+ if (this.props.config.teamTokenMap) {
+ const teamName = window.location.pathname.split('/')[1];
+ if (teamName && this.props.config.teamTokenMap.hasOwnProperty(teamName)) {
+ routedTeamToken = this.props.config.teamTokenMap[teamName];
+ }
+ }
+
+ // Persist the team token across refreshes using sessionStorage. A new window or
+ // tab will not persist sessionStorage, but refreshes will.
+ if (this.props.startingFragmentQueryParams.team_token) {
+ window.sessionStorage.setItem(
+ 'mx_team_token',
+ this.props.startingFragmentQueryParams.team_token,
+ );
+ }
+
+ // Use the locally-stored team token first, then as a fall-back, check to see if
+ // a referral link was used, which will contain a query parameter `team_token`.
+ this._teamToken = routedTeamToken ||
+ window.localStorage.getItem('mx_team_token') ||
+ window.sessionStorage.getItem('mx_team_token');
+
+ // Some users have ended up with "undefined" as their local storage team token,
+ // treat that as undefined.
+ if (this._teamToken === "undefined") {
+ this._teamToken = undefined;
+ }
+
+ if (this._teamToken) {
+ console.info(`Team token set to ${this._teamToken}`);
+ }
+
+ // Set a default HS with query param `hs_url`
+ const paramHs = this.props.startingFragmentQueryParams.hs_url;
+ if (paramHs) {
+ console.log('Setting register_hs_url ', paramHs);
+ this.setState({
+ register_hs_url: paramHs,
+ });
+ }
},
componentDidMount: function() {
this.dispatcherRef = dis.register(this.onAction);
+ UDEHandler.startListening();
this.focusComposer = false;
window.addEventListener("focus", this.onFocus);
@@ -210,6 +261,12 @@ module.exports = React.createClass({
window.addEventListener('resize', this.handleResize);
this.handleResize();
+ if (this.props.config.teamServerConfig &&
+ this.props.config.teamServerConfig.teamServerURL
+ ) {
+ Lifecycle.initRtsClient(this.props.config.teamServerConfig.teamServerURL);
+ }
+
// the extra q() ensures that synchronous exceptions hit the same codepath as
// asynchronous ones.
q().then(() => {
@@ -234,6 +291,7 @@ module.exports = React.createClass({
componentWillUnmount: function() {
Lifecycle.stopMatrixClient();
dis.unregister(this.dispatcherRef);
+ UDEHandler.stopListening();
window.removeEventListener("focus", this.onFocus);
window.removeEventListener('resize', this.handleResize);
},
@@ -270,23 +328,19 @@ module.exports = React.createClass({
Lifecycle.logout();
break;
case 'start_registration':
- var newState = payload.params || {};
- newState.screen = 'register';
- if (
- payload.params &&
- payload.params.client_secret &&
- payload.params.session_id &&
- payload.params.hs_url &&
- payload.params.is_url &&
- payload.params.sid
- ) {
- newState.register_client_secret = payload.params.client_secret;
- newState.register_session_id = payload.params.session_id;
- newState.register_hs_url = payload.params.hs_url;
- newState.register_is_url = payload.params.is_url;
- newState.register_id_sid = payload.params.sid;
- }
- this.setStateForNewScreen(newState);
+ const params = payload.params || {};
+ this.setStateForNewScreen({
+ screen: 'register',
+ // these params may be undefined, but if they are,
+ // unset them from our state: we don't want to
+ // resume a previous registration session if the
+ // user just clicked 'register'
+ register_client_secret: params.client_secret,
+ register_session_id: params.session_id,
+ register_hs_url: params.hs_url,
+ register_is_url: params.is_url,
+ register_id_sid: params.sid,
+ });
this.notifyNewScreen('register');
break;
case 'start_login':
@@ -302,13 +356,22 @@ module.exports = React.createClass({
});
break;
case 'start_upgrade_registration':
- // stash our guest creds so we can backout if needed
+ // also stash our credentials, then if we restore the session,
+ // we can just do it the same way whether we started upgrade
+ // registration or explicitly logged out
this.guestCreds = MatrixClientPeg.getCredentials();
this.setStateForNewScreen({
screen: "register",
upgradeUsername: MatrixClientPeg.get().getUserIdLocalpart(),
guestAccessToken: MatrixClientPeg.get().getAccessToken(),
});
+
+ // stop the client: if we are syncing whilst the registration
+ // is completed in another browser, we'll be 401ed for using
+ // a guest access token for a non-guest account.
+ // It will be restarted in onReturnToGuestClick
+ Lifecycle.stopMatrixClient();
+
this.notifyNewScreen('register');
break;
case 'start_password_recovery':
@@ -339,9 +402,10 @@ module.exports = React.createClass({
dis.dispatch({action: 'view_next_room'});
}, function(err) {
modal.close();
+ console.error("Failed to leave room " + payload.room_id + " " + err);
Modal.createDialog(ErrorDialog, {
title: "Failed to leave room",
- description: err.toString()
+ description: "Server may be unavailable, overloaded, or you hit a bug."
});
});
}
@@ -421,6 +485,14 @@ module.exports = React.createClass({
this._setPage(PageTypes.RoomDirectory);
this.notifyNewScreen('directory');
break;
+ case 'view_home_page':
+ if (!this._teamToken) {
+ dis.dispatch({action: 'view_room_directory'});
+ return;
+ }
+ this._setPage(PageTypes.HomePage);
+ this.notifyNewScreen('home');
+ break;
case 'view_create_chat':
this._createChat();
break;
@@ -460,7 +532,7 @@ module.exports = React.createClass({
this._onSetTheme(payload.value);
break;
case 'on_logged_in':
- this._onLoggedIn();
+ this._onLoggedIn(payload.teamToken);
break;
case 'on_logged_out':
this._onLoggedOut();
@@ -636,13 +708,20 @@ module.exports = React.createClass({
/**
* Called when a new logged in session has started
*/
- _onLoggedIn: function(credentials) {
+ _onLoggedIn: function(teamToken) {
this.guestCreds = null;
this.notifyNewScreen('');
this.setState({
screen: undefined,
logged_in: true,
});
+
+ if (teamToken) {
+ this._teamToken = teamToken;
+ this._setPage(PageTypes.HomePage);
+ } else if (this._is_registered) {
+ this._setPage(PageTypes.UserSettings);
+ }
},
/**
@@ -659,6 +738,7 @@ module.exports = React.createClass({
currentRoomId: null,
page_type: PageTypes.RoomDirectory,
});
+ this._teamToken = null;
},
/**
@@ -690,7 +770,11 @@ module.exports = React.createClass({
)[0].roomId;
self.setState({ready: true, currentRoomId: firstRoom, page_type: PageTypes.RoomView});
} else {
- self.setState({ready: true, page_type: PageTypes.RoomDirectory});
+ if (self._teamToken) {
+ self.setState({ready: true, page_type: PageTypes.HomePage});
+ } else {
+ self.setState({ready: true, page_type: PageTypes.RoomDirectory});
+ }
}
} else {
self.setState({ready: true, page_type: PageTypes.RoomView});
@@ -710,7 +794,11 @@ module.exports = React.createClass({
} else {
// There is no information on presentedId
// so point user to fallback like /directory
- self.notifyNewScreen('directory');
+ if (self._teamToken) {
+ self.notifyNewScreen('home');
+ } else {
+ self.notifyNewScreen('directory');
+ }
}
dis.dispatch({action: 'focus_composer'});
@@ -774,6 +862,10 @@ module.exports = React.createClass({
dis.dispatch({
action: 'view_user_settings',
});
+ } else if (screen == 'home') {
+ dis.dispatch({
+ action: 'view_home_page',
+ });
} else if (screen == 'directory') {
dis.dispatch({
action: 'view_room_directory',
@@ -852,14 +944,6 @@ module.exports = React.createClass({
onUserClick: function(event, userId) {
event.preventDefault();
- // var MemberInfo = sdk.getComponent('rooms.MemberInfo');
- // var member = new Matrix.RoomMember(null, userId);
- // ContextualMenu.createMenu(MemberInfo, {
- // member: member,
- // right: window.innerWidth - event.pageX,
- // top: event.pageY
- // });
-
var member = new Matrix.RoomMember(null, userId);
if (!member) { return; }
dis.dispatch({
@@ -925,18 +1009,11 @@ module.exports = React.createClass({
}
},
- onRegistered: function(credentials) {
+ onRegistered: function(credentials, teamToken) {
+ // teamToken may not be truthy
+ this._teamToken = teamToken;
+ this._is_registered = true;
Lifecycle.setLoggedIn(credentials);
- // do post-registration stuff
- // This now goes straight to user settings
- // We use _setPage since if we wait for
- // showScreen to do the dispatch loop,
- // the showScreen dispatch will race with the
- // sdk sync finishing and we'll probably see
- // the page type still unset when the MatrixClient
- // is started and show the Room Directory instead.
- //this.showScreen("view_user_settings");
- this._setPage(PageTypes.UserSettings);
},
onFinishPostRegistration: function() {
@@ -1002,6 +1079,13 @@ module.exports = React.createClass({
this.setState({currentRoomId: room_id});
},
+ _makeRegistrationUrl: function(params) {
+ if (this.props.startingFragmentQueryParams.referrer) {
+ params.referrer = this.props.startingFragmentQueryParams.referrer;
+ }
+ return this.props.makeRegistrationUrl(params);
+ },
+
render: function() {
var ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
var LoggedInView = sdk.getComponent('structures.LoggedInView');
@@ -1033,6 +1117,7 @@ module.exports = React.createClass({
onRoomIdResolved={this.onRoomIdResolved}
onRoomCreated={this.onRoomCreated}
onUserSettingsClose={this.onUserSettingsClose}
+ teamToken={this._teamToken}
{...this.props}
{...this.state}
/>
@@ -1064,7 +1149,7 @@ module.exports = React.createClass({
teamServerConfig={this.props.config.teamServerConfig}
customHsUrl={this.getCurrentHsUrl()}
customIsUrl={this.getCurrentIsUrl()}
- registrationUrl={this.props.registrationUrl}
+ makeRegistrationUrl={this._makeRegistrationUrl}
defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
onLoggedIn={this.onRegistered}
onLoginClick={this.onLoginClick}
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index dcebe38fa48..ff507b6f908 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -295,7 +295,10 @@ module.exports = React.createClass({
var last = (i == lastShownEventIndex);
// Wrap consecutive member events in a ListSummary, ignore if redacted
- if (isMembershipChange(mxEv) && EventTile.haveTileForEvent(mxEv)) {
+ if (isMembershipChange(mxEv) &&
+ EventTile.haveTileForEvent(mxEv) &&
+ !mxEv.isRedacted()
+ ) {
let ts1 = mxEv.getTs();
// Ensure that the key of the MemberEventListSummary does not change with new
// member events. This will prevent it from being re-created unnecessarily, and
@@ -349,7 +352,9 @@ module.exports = React.createClass({
+ data-scroll-token={eventId}
+ onToggle={this._onWidgetLoad} // Update scroll state
+ >
{eventTiles}
);
@@ -362,10 +367,6 @@ module.exports = React.createClass({
// replacing all of the DOM elements every time we paginate.
ret.push(...this._getTilesForEvent(prevEvent, mxEv, last));
prevEvent = mxEv;
- } else if (!mxEv.status) {
- // if we aren't showing the event, put in a dummy scroll token anyway, so
- // that we can scroll to the right place.
- ret.push();
}
var isVisibleReadMarker = false;
@@ -410,7 +411,9 @@ module.exports = React.createClass({
// is this a continuation of the previous message?
var continuation = false;
- if (prevEvent !== null && prevEvent.sender && mxEv.sender
+
+ if (prevEvent !== null
+ && !prevEvent.isRedacted() && prevEvent.sender && mxEv.sender
&& mxEv.sender.userId === prevEvent.sender.userId
&& mxEv.getType() == prevEvent.getType()) {
continuation = true;
@@ -463,6 +466,7 @@ module.exports = React.createClass({
ref={this._collectEventNode.bind(this, eventId)}
data-scroll-token={scrollToken}>
24h apart
if (Math.abs(prevEvent.getTs() - nextEventDate.getTime()) > MILLIS_IN_DAY) {
return true;
}
// Compare weekdays
- return prevEvent.getDate().getDay() !== nextEventDate.getDay();
+ return prevEventDate.getDay() !== nextEventDate.getDay();
},
// get a list of read receipts that should be shown next to this event
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 3fd0a3b751e..626c376d9fb 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -82,17 +82,14 @@ module.exports = React.createClass({
getDefaultProps: function() {
return {
- whoIsTypingLimit: 2,
+ whoIsTypingLimit: 3,
};
},
getInitialState: function() {
return {
syncState: MatrixClientPeg.get().getSyncState(),
- whoisTypingString: WhoIsTyping.whoIsTypingString(
- this.props.room,
- this.props.whoIsTypingLimit
- ),
+ usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
};
},
@@ -106,7 +103,7 @@ module.exports = React.createClass({
this.props.onResize();
}
- const size = this._getSize(this.state, this.props);
+ const size = this._getSize(this.props, this.state);
if (size > 0) {
this.props.onVisible();
} else {
@@ -141,22 +138,21 @@ module.exports = React.createClass({
onRoomMemberTyping: function(ev, member) {
this.setState({
- whoisTypingString: WhoIsTyping.whoIsTypingString(
- this.props.room,
- this.props.whoIsTypingLimit
- ),
+ usersTyping: WhoIsTyping.usersTypingApartFromMe(this.props.room),
});
},
// We don't need the actual height - just whether it is likely to have
// changed - so we use '0' to indicate normal size, and other values to
// indicate other sizes.
- _getSize: function(state, props) {
+ _getSize: function(props, state) {
if (state.syncState === "ERROR" ||
- state.whoisTypingString ||
+ (state.usersTyping.length > 0) ||
props.numUnreadMessages ||
!props.atEndOfLiveTimeline ||
- props.hasActiveCall) {
+ props.hasActiveCall ||
+ props.tabComplete.isTabCompleting()
+ ) {
return STATUS_BAR_EXPANDED;
} else if (props.tabCompleteEntries) {
return STATUS_BAR_HIDDEN;
@@ -169,7 +165,8 @@ module.exports = React.createClass({
// determine if we need to call onResize
_checkForResize: function(prevProps, prevState) {
// figure out the old height and the new height of the status bar.
- return this._getSize(prevProps, prevState) !== this._getSize(this.props, this.state);
+ return this._getSize(prevProps, prevState)
+ !== this._getSize(this.props, this.state);
},
// return suitable content for the image on the left of the status bar.
@@ -199,8 +196,9 @@ module.exports = React.createClass({
}
if (this.props.hasActiveCall) {
+ var TintableSvg = sdk.getComponent("elements.TintableSvg");
return (
- 
+
+
@@ -347,7 +349,7 @@ module.exports = React.createClass({
render: function() {
var content = this._getContent();
- var indicator = this._getIndicator(this.state.whoisTypingString !== null);
+ var indicator = this._getIndicator(this.state.usersTyping.length > 0);
return (
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index a7d52019c47..52161012aae 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -155,8 +156,10 @@ module.exports = React.createClass({
this.dispatcherRef = dis.register(this.onAction);
MatrixClientPeg.get().on("Room", this.onRoom);
MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
+ MatrixClientPeg.get().on("Room.name", this.onRoomName);
MatrixClientPeg.get().on("Room.accountData", this.onRoomAccountData);
MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
+ MatrixClientPeg.get().on("RoomMember.membership", this.onRoomMemberMembership);
MatrixClientPeg.get().on("accountData", this.onAccountData);
this.tabComplete = new TabComplete({
@@ -342,8 +345,10 @@ module.exports = React.createClass({
if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("Room", this.onRoom);
MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+ MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
MatrixClientPeg.get().removeListener("Room.accountData", this.onRoomAccountData);
MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+ MatrixClientPeg.get().removeListener("RoomMember.membership", this.onRoomMemberMembership);
MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
}
@@ -479,13 +484,48 @@ module.exports = React.createClass({
}
},
+ onRoomName: function(room) {
+ if (this.state.room && room.roomId == this.state.room.roomId) {
+ this.forceUpdate();
+ }
+ },
+
// called when state.room is first initialised (either at initial load,
// after a successful peek, or after we join the room).
_onRoomLoaded: function(room) {
+ this._warnAboutEncryption(room);
this._calculatePeekRules(room);
this._updatePreviewUrlVisibility(room);
},
+ _warnAboutEncryption: function (room) {
+ if (!MatrixClientPeg.get().isRoomEncrypted(room.roomId)) {
+ return;
+ }
+ let userHasUsedEncryption = false;
+ if (localStorage) {
+ userHasUsedEncryption = localStorage.getItem('mx_user_has_used_encryption');
+ }
+ if (!userHasUsedEncryption) {
+ const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+ Modal.createDialog(QuestionDialog, {
+ title: "Warning!",
+ hasCancelButton: false,
+ description: (
+
- )
;
}
voiceMuteButton =
- 
- 
+
+ {this._renderClearCache()}
+
{this._renderDeactivateAccount()}
diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
index fe9b5447514..0a1549f75bb 100644
--- a/src/components/structures/login/Login.js
+++ b/src/components/structures/login/Login.js
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -19,13 +20,13 @@ limitations under the License.
var React = require('react');
var ReactDOM = require('react-dom');
var sdk = require('../../../index');
-var Signup = require("../../../Signup");
+var Login = require("../../../Login");
var PasswordLogin = require("../../views/login/PasswordLogin");
var CasLogin = require("../../views/login/CasLogin");
var ServerConfig = require("../../views/login/ServerConfig");
/**
- * A wire component which glues together login UI components and Signup logic
+ * A wire component which glues together login UI components and Login logic
*/
module.exports = React.createClass({
displayName: 'Login',
@@ -64,8 +65,10 @@ module.exports = React.createClass({
enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
- // used for preserving username when changing homeserver
+ // used for preserving form values when changing homeserver
username: "",
+ phoneCountry: null,
+ phoneNumber: "",
};
},
@@ -73,20 +76,21 @@ module.exports = React.createClass({
this._initLoginLogic();
},
- onPasswordLogin: function(username, password) {
- var self = this;
- self.setState({
+ onPasswordLogin: function(username, phoneCountry, phoneNumber, password) {
+ this.setState({
busy: true,
errorText: null,
loginIncorrect: false,
});
- this._loginLogic.loginViaPassword(username, password).then(function(data) {
- self.props.onLoggedIn(data);
- }, function(error) {
- self._setStateFromError(error, true);
- }).finally(function() {
- self.setState({
+ this._loginLogic.loginViaPassword(
+ username, phoneCountry, phoneNumber, password,
+ ).then((data) => {
+ this.props.onLoggedIn(data);
+ }, (error) => {
+ this._setStateFromError(error, true);
+ }).finally(() => {
+ this.setState({
busy: false
});
}).done();
@@ -119,6 +123,14 @@ module.exports = React.createClass({
this.setState({ username: username });
},
+ onPhoneCountryChanged: function(phoneCountry) {
+ this.setState({ phoneCountry: phoneCountry });
+ },
+
+ onPhoneNumberChanged: function(phoneNumber) {
+ this.setState({ phoneNumber: phoneNumber });
+ },
+
onHsUrlChanged: function(newHsUrl) {
var self = this;
this.setState({
@@ -146,7 +158,7 @@ module.exports = React.createClass({
var fallbackHsUrl = hsUrl == this.props.defaultHsUrl ? this.props.fallbackHsUrl : null;
- var loginLogic = new Signup.Login(hsUrl, isUrl, fallbackHsUrl, {
+ var loginLogic = new Login(hsUrl, isUrl, fallbackHsUrl, {
defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
});
this._loginLogic = loginLogic;
@@ -225,7 +237,11 @@ module.exports = React.createClass({
+
+ ),
+ });
+ }
+ if (localStorage) {
+ localStorage.setItem('mx_user_has_used_encryption', true);
+ }
+ },
+
_calculatePeekRules: function(room) {
var guestAccessEvent = room.currentState.getStateEvents("m.room.guest_access", "");
if (guestAccessEvent && guestAccessEvent.getContent().guest_access === "can_join") {
@@ -603,6 +643,12 @@ module.exports = React.createClass({
this._updateRoomMembers();
},
+ onRoomMemberMembership: function(ev, member, oldMembership) {
+ if (member.userId == MatrixClientPeg.get().credentials.userId) {
+ this.forceUpdate();
+ }
+ },
+
// rate limited because a power level change will emit an event for every
// member in the room.
_updateRoomMembers: new rate_limited_func(function() {
@@ -699,17 +745,11 @@ module.exports = React.createClass({
},
onResendAllClick: function() {
- var eventsToResend = this._getUnsentMessages(this.state.room);
- eventsToResend.forEach(function(event) {
- Resend.resend(event);
- });
+ Resend.resendUnsentEvents(this.state.room);
},
onCancelAllClick: function() {
- var eventsToResend = this._getUnsentMessages(this.state.room);
- eventsToResend.forEach(function(event) {
- Resend.removeFromQueue(event);
- });
+ Resend.cancelUnsentEvents(this.state.room);
},
onJoinButtonClicked: function(ev) {
@@ -890,9 +930,10 @@ module.exports = React.createClass({
file, this.state.room.roomId, MatrixClientPeg.get()
).done(undefined, function(error) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ console.error("Failed to upload file " + file + " " + error);
Modal.createDialog(ErrorDialog, {
title: "Failed to upload file",
- description: error.toString()
+ description: "Server may be unavailable, overloaded, or the file too big",
});
});
},
@@ -976,9 +1017,10 @@ module.exports = React.createClass({
});
}, function(error) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ console.error("Search failed: " + error);
Modal.createDialog(ErrorDialog, {
title: "Search failed",
- description: error.toString()
+ description: "Server may be unavailable, overloaded, or search timed out :("
});
}).finally(function() {
self.setState({
@@ -1447,6 +1489,7 @@ module.exports = React.createClass({
/>
End-to-end encryption is in beta and may not be reliable.
+You should not yet trust it to secure data.
+Devices will not yet be able to decrypt history from before they joined the room.
+Encrypted messages will not be visible on clients that do not yet implement encryption.
+
- )
;
diff --git a/src/components/structures/UploadBar.js b/src/components/structures/UploadBar.js
index e91e558cb2d..8266a11bc8c 100644
--- a/src/components/structures/UploadBar.js
+++ b/src/components/structures/UploadBar.js
@@ -90,8 +90,8 @@ module.exports = React.createClass({displayName: 'UploadBar',
-
+
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index ff19e7c239e..febdccd9c30 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -39,6 +39,10 @@ const REACT_SDK_VERSION =
// 'id' gives the key name in the im.vector.web.settings account data event
// 'label' is how we describe it in the UI.
const SETTINGS_LABELS = [
+ {
+ id: 'autoplayGifsAndVideos',
+ label: 'Autoplay GIFs and videos',
+ },
/*
{
id: 'alwaysShowTimestamps',
@@ -109,6 +113,10 @@ module.exports = React.createClass({
// true if RightPanel is collapsed
collapsedRhs: React.PropTypes.bool,
+
+ // Team token for the referral link. If falsy, the referral section will
+ // not appear
+ teamToken: React.PropTypes.string,
},
getDefaultProps: function() {
@@ -198,9 +206,10 @@ module.exports = React.createClass({
});
}, function(error) {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ console.error("Failed to load user settings: " + error);
Modal.createDialog(ErrorDialog, {
title: "Can't load user settings",
- description: error.toString()
+ description: "Server may be unavailable or overloaded",
});
});
},
@@ -238,10 +247,11 @@ module.exports = React.createClass({
self._refreshFromServer();
}, function(err) {
var errMsg = (typeof err === "string") ? err : (err.error || "");
+ console.error("Failed to set avatar: " + err);
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Error",
- description: "Failed to set avatar. " + errMsg
+ description: "Failed to set avatar."
});
});
},
@@ -278,6 +288,7 @@ module.exports = React.createClass({
errMsg += ` (HTTP status ${err.httpStatus})`;
}
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ console.error("Failed to change password: " + errMsg);
Modal.createDialog(ErrorDialog, {
title: "Error",
description: errMsg
@@ -329,9 +340,10 @@ module.exports = React.createClass({
});
}, (err) => {
this.setState({email_add_pending: false});
+ console.error("Unable to add email address " + email_address + " " + err);
Modal.createDialog(ErrorDialog, {
- title: "Unable to add email address",
- description: err.message
+ title: "Error",
+ description: "Unable to add email address"
});
});
ReactDOM.findDOMNode(this.refs.add_threepid_input).blur();
@@ -353,9 +365,10 @@ module.exports = React.createClass({
return this._refreshFromServer();
}).catch((err) => {
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ console.error("Unable to remove contact information: " + err);
Modal.createDialog(ErrorDialog, {
- title: "Unable to remove contact information",
- description: err.toString(),
+ title: "Error",
+ description: "Unable to remove contact information",
});
}).done();
}
@@ -393,9 +406,10 @@ module.exports = React.createClass({
});
} else {
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ console.error("Unable to verify email address: " + err);
Modal.createDialog(ErrorDialog, {
- title: "Unable to verify email address",
- description: err.toString(),
+ title: "Error",
+ description: "Unable to verify email address",
});
}
});
@@ -414,6 +428,14 @@ module.exports = React.createClass({
Modal.createDialog(BugReportDialog, {});
},
+ _onClearCacheClicked: function() {
+ MatrixClientPeg.get().store.deleteAllData().done(() => {
+ // forceReload=false since we don't really need new HTML/JS files
+ // we just need to restart the JS runtime.
+ window.location.reload(false);
+ });
+ },
+
_onInviteStateChange: function(event, member, oldMembership) {
if (member.userId === this._me && oldMembership === "invite") {
this.forceUpdate();
@@ -462,7 +484,7 @@ module.exports = React.createClass({
},
_renderReferral: function() {
- const teamToken = window.localStorage.getItem('mx_team_token');
+ const teamToken = this.props.teamToken;
if (!teamToken) {
return null;
}
@@ -552,21 +574,20 @@ module.exports = React.createClass({
const deviceId = client.deviceId;
const identityKey = client.getDeviceEd25519Key() || "";
- let exportButton = null,
- importButton = null;
+ let importExportButtons = null;
if (client.isCryptoEnabled) {
- exportButton = (
-
- Export E2E room keys
-
- );
- importButton = (
-
- Import E2E room keys
-
+ importExportButtons = (
+
- {exportButton}
- {importButton}
+ { importExportButtons }
+
+ Export E2E room keys
+
+
+ Import E2E room keys
+
+
);
}
return (
@@ -577,8 +598,7 @@ module.exports = React.createClass({
{deviceId}{identityKey}
{ CRYPTO_SETTINGS_LABELS.map( this._renderLocalSetting ) }
@@ -688,6 +708,18 @@ module.exports = React.createClass({
;
},
+ _renderClearCache: function() {
+ return
+
;
+ },
+
_renderBulkOptions: function() {
let invitedRooms = MatrixClientPeg.get().getRooms().filter((r) => {
return r.hasMembershipState(this._me, "invite");
@@ -906,11 +938,13 @@ module.exports = React.createClass({
Clear Cache
+
+
+ Clear Cache and Reload
+
+
+
matrix-react-sdk version: {REACT_SDK_VERSION}
- vector-web version: {this.state.vectorVersion !== null ? this.state.vectorVersion : 'unknown'}
+ riot-web version: {this.state.vectorVersion !== null ? this.state.vectorVersion : 'unknown'}
olm version: {olmVersionString}
- vector-web version: {this.state.vectorVersion !== null ? this.state.vectorVersion : 'unknown'}
+ riot-web version: {this.state.vectorVersion !== null ? this.state.vectorVersion : 'unknown'}
olm version: {olmVersionString}
{this.state.errorText}
;
+ }
+ registerBody = (
+
- Please check your email to continue registration.
-
- );
- break;
- case "Register.STEP_m.login.recaptcha":
- var publicKey;
- var serverParams = this.registerLogic.getServerData().params;
- if (serverParams && serverParams["m.login.recaptcha"]) {
- publicKey = serverParams["m.login.recaptcha"].public_key;
- }
-
- registerStep = (
-
-
- );
- },
-
- render: function() {
- var LoginHeader = sdk.getComponent('login.LoginHeader');
- var LoginFooter = sdk.getComponent('login.LoginFooter');
+ );
+ }
return (
Create an account
- {registerStep} -{this.state.errorText}
- {busySpinner}
-
-
-
- I already have an account
- { returnToAppJsx }
-
-
Create an account
+ {registerBody} + + I already have an account + + {returnToAppJsx}
+
+
+ ;
+
+ const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+ return (
+ {
+ this.props.onFinished(false)
+ }}
+ title='Create a new chat or reuse an existing one'
+ >
+
+ );
+ }
+}
+
+ChatCreateOrReuseDialog.propTyps = {
+ userId: React.PropTypes.string.isRequired,
+ onFinished: React.PropTypes.func.isRequired,
+};
diff --git a/src/components/views/dialogs/ChatInviteDialog.js b/src/components/views/dialogs/ChatInviteDialog.js
index ca3b07aa007..f958b8887cb 100644
--- a/src/components/views/dialogs/ChatInviteDialog.js
+++ b/src/components/views/dialogs/ChatInviteDialog.js
@@ -26,6 +26,7 @@ import dis from '../../../dispatcher';
import Modal from '../../../Modal';
import AccessibleButton from '../elements/AccessibleButton';
import q from 'q';
+import Fuse from 'fuse.js';
const TRUNCATE_QUERY_LIST = 40;
@@ -85,6 +86,19 @@ module.exports = React.createClass({
// Set the cursor at the end of the text input
this.refs.textinput.value = this.props.value;
}
+ // Create a Fuse instance for fuzzy searching this._userList
+ this._fuse = new Fuse(
+ // Use an empty list at first that will later be populated
+ // (see this._updateUserList)
+ [],
+ {
+ shouldSort: true,
+ location: 0, // The index of the query in the test string
+ distance: 5, // The distance away from location the query can be
+ // 0.0 = exact match, 1.0 = match anything
+ threshold: 0.3,
+ }
+ );
this._updateUserList();
},
@@ -97,18 +111,27 @@ module.exports = React.createClass({
if (inviteList === null) return;
}
+ const addrTexts = inviteList.map(addr => addr.address);
if (inviteList.length > 0) {
- if (this._isDmChat(inviteList)) {
+ if (this._isDmChat(addrTexts)) {
+ const userId = inviteList[0].address;
// Direct Message chat
- var room = this._getDirectMessageRoom(inviteList[0]);
- if (room) {
- // A Direct Message room already exists for this user and you
- // so go straight to that room
- dis.dispatch({
- action: 'view_room',
- room_id: room.roomId,
+ const rooms = this._getDirectMessageRooms(userId);
+ if (rooms.length > 0) {
+ // A Direct Message room already exists for this user, so select a
+ // room from a list that is similar to the one in MemberInfo panel
+ const ChatCreateOrReuseDialog = sdk.getComponent(
+ "views.dialogs.ChatCreateOrReuseDialog"
+ );
+ Modal.createDialog(ChatCreateOrReuseDialog, {
+ userId: userId,
+ onFinished: (success) => {
+ if (success) {
+ this.props.onFinished(true, inviteList[0]);
+ }
+ // else show this ChatInviteDialog again
+ }
});
- this.props.onFinished(true, inviteList[0]);
} else {
this._startChat(inviteList);
}
@@ -167,45 +190,60 @@ module.exports = React.createClass({
const query = ev.target.value;
let queryList = [];
- // Only do search if there is something to search
- if (query.length > 0 && query != '@') {
- // filter the known users list
- queryList = this._userList.filter((user) => {
- return this._matches(query, user);
- }).map((user) => {
- // Return objects, structure of which is defined
- // by InviteAddressType
- return {
- addressType: 'mx',
- address: user.userId,
- displayName: user.displayName,
- avatarMxc: user.avatarUrl,
- isKnown: true,
- }
- });
+ if (query.length < 2) {
+ return;
+ }
+
+ if (this.queryChangedDebouncer) {
+ clearTimeout(this.queryChangedDebouncer);
+ }
+ this.queryChangedDebouncer = setTimeout(() => {
+ // Only do search if there is something to search
+ if (query.length > 0 && query != '@') {
+ // Weighted keys prefer to match userIds when first char is @
+ this._fuse.options.keys = [{
+ name: 'displayName',
+ weight: query[0] === '@' ? 0.1 : 0.9,
+ },{
+ name: 'userId',
+ weight: query[0] === '@' ? 0.9 : 0.1,
+ }];
+ queryList = this._fuse.search(query).map((user) => {
+ // Return objects, structure of which is defined
+ // by InviteAddressType
+ return {
+ addressType: 'mx',
+ address: user.userId,
+ displayName: user.displayName,
+ avatarMxc: user.avatarUrl,
+ isKnown: true,
+ }
+ });
- // If the query isn't a user we know about, but is a
- // valid address, add an entry for that
- if (queryList.length == 0) {
- const addrType = getAddressType(query);
- if (addrType !== null) {
- queryList[0] = {
- addressType: addrType,
- address: query,
- isKnown: false,
- };
- if (this._cancelThreepidLookup) this._cancelThreepidLookup();
- if (addrType == 'email') {
- this._lookupThreepid(addrType, query).done();
+ // If the query isn't a user we know about, but is a
+ // valid address, add an entry for that
+ if (queryList.length == 0) {
+ const addrType = getAddressType(query);
+ if (addrType !== null) {
+ queryList[0] = {
+ addressType: addrType,
+ address: query,
+ isKnown: false,
+ };
+ if (this._cancelThreepidLookup) this._cancelThreepidLookup();
+ if (addrType == 'email') {
+ this._lookupThreepid(addrType, query).done();
+ }
}
}
}
- }
-
- this.setState({
- queryList: queryList,
- error: false,
- });
+ this.setState({
+ queryList: queryList,
+ error: false,
+ }, () => {
+ this.addressSelector.moveSelectionTop();
+ });
+ }, 200);
},
onDismissed: function(index) {
@@ -238,22 +276,20 @@ module.exports = React.createClass({
if (this._cancelThreepidLookup) this._cancelThreepidLookup();
},
- _getDirectMessageRoom: function(addr) {
+ _getDirectMessageRooms: function(addr) {
const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
- var dmRooms = dmRoomMap.getDMRoomsForUserId(addr);
- if (dmRooms.length > 0) {
- // Cycle through all the DM rooms and find the first non forgotten or parted room
- for (let i = 0; i < dmRooms.length; i++) {
- let room = MatrixClientPeg.get().getRoom(dmRooms[i]);
- if (room) {
- const me = room.getMember(MatrixClientPeg.get().credentials.userId);
- if (me.membership == 'join') {
- return room;
- }
+ const dmRooms = dmRoomMap.getDMRoomsForUserId(addr);
+ const rooms = [];
+ dmRooms.forEach(dmRoom => {
+ let room = MatrixClientPeg.get().getRoom(dmRoom);
+ if (room) {
+ const me = room.getMember(MatrixClientPeg.get().credentials.userId);
+ if (me.membership == 'join') {
+ rooms.push(room);
}
}
- }
- return null;
+ });
+ return rooms;
},
_startChat: function(addrs) {
@@ -282,8 +318,8 @@ module.exports = React.createClass({
console.error(err.stack);
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
- title: "Failure to invite",
- description: err.toString()
+ title: "Error",
+ description: "Failed to invite",
});
return null;
})
@@ -295,8 +331,8 @@ module.exports = React.createClass({
console.error(err.stack);
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
- title: "Failure to invite user",
- description: err.toString()
+ title: "Error",
+ description: "Failed to invite user",
});
return null;
})
@@ -316,8 +352,8 @@ module.exports = React.createClass({
console.error(err.stack);
var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
- title: "Failure to invite",
- description: err.toString()
+ title: "Error",
+ description: "Failed to invite",
});
return null;
})
@@ -331,48 +367,14 @@ module.exports = React.createClass({
_updateUserList: new rate_limited_func(function() {
// Get all the users
this._userList = MatrixClientPeg.get().getUsers();
- }, 500),
-
- // This is the search algorithm for matching users
- _matches: function(query, user) {
- var name = user.displayName.toLowerCase();
- var uid = user.userId.toLowerCase();
- query = query.toLowerCase();
-
- // don't match any that are already on the invite list
- if (this._isOnInviteList(uid)) {
- return false;
- }
-
- // ignore current user
- if (uid === MatrixClientPeg.get().credentials.userId) {
- return false;
- }
-
- // direct prefix matches
- if (name.indexOf(query) === 0 || uid.indexOf(query) === 0) {
- return true;
- }
-
- // strip @ on uid and try matching again
- if (uid.length > 1 && uid[0] === "@" && uid.substring(1).indexOf(query) === 0) {
- return true;
- }
-
- // Try to find the query following a "word boundary", except that
- // this does avoids using \b because it only considers letters from
- // the roman alphabet to be word characters.
- // Instead, we look for the query following either:
- // * The start of the string
- // * Whitespace, or
- // * A fixed number of punctuation characters
- const expr = new RegExp("(?:^|[\\s\\(\)'\",\.-_@\?;:{}\\[\\]\\#~`\\*\\&\\$])" + escapeRegExp(query));
- if (expr.test(name)) {
- return true;
- }
+ // Remove current user
+ const meIx = this._userList.findIndex((u) => {
+ return u.userId === MatrixClientPeg.get().credentials.userId;
+ });
+ this._userList.splice(meIx, 1);
- return false;
- },
+ this._fuse.set(this._userList);
+ }, 500),
_isOnInviteList: function(uid) {
for (let i = 0; i < this.state.inviteList.length; i++) {
@@ -386,8 +388,11 @@ module.exports = React.createClass({
return false;
},
- _isDmChat: function(addrs) {
- if (addrs.length === 1 && getAddressType(addrs[0]) === "mx" && !this.props.roomId) {
+ _isDmChat: function(addrTexts) {
+ if (addrTexts.length === 1 &&
+ getAddressType(addrTexts[0]) === "mx" &&
+ !this.props.roomId
+ ) {
return true;
} else {
return false;
diff --git a/src/components/views/dialogs/ConfirmUserActionDialog.js b/src/components/views/dialogs/ConfirmUserActionDialog.js
new file mode 100644
index 00000000000..6cfaac65d42
--- /dev/null
+++ b/src/components/views/dialogs/ConfirmUserActionDialog.js
@@ -0,0 +1,120 @@
+/*
+Copyright 2017 Vector Creations 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.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import classnames from 'classnames';
+
+/*
+ * A dialog for confirming an operation on another user.
+ * Takes a user ID and a verb, displays the target user prominently
+ * such that it should be easy to confirm that the operation is being
+ * performed on the right person, and displays the operation prominently
+ * to make it obvious what is going to happen.
+ * Also tweaks the style for 'dangerous' actions (albeit only with colour)
+ */
+export default React.createClass({
+ displayName: 'ConfirmUserActionDialog',
+ propTypes: {
+ member: React.PropTypes.object.isRequired, // matrix-js-sdk member object
+ action: React.PropTypes.string.isRequired, // eg. 'Ban'
+
+ // Whether to display a text field for a reason
+ // If true, the second argument to onFinished will
+ // be the string entered.
+ askReason: React.PropTypes.bool,
+ danger: React.PropTypes.bool,
+ onFinished: React.PropTypes.func.isRequired,
+ },
+
+ defaultProps: {
+ danger: false,
+ askReason: false,
+ },
+
+ componentWillMount: function() {
+ this._reasonField = null;
+ },
+
+ onOk: function() {
+ let reason;
+ if (this._reasonField) {
+ reason = this._reasonField.value;
+ }
+ this.props.onFinished(true, reason);
+ },
+
+ onCancel: function() {
+ this.props.onFinished(false);
+ },
+
+ _collectReasonField: function(e) {
+ this._reasonField = e;
+ },
+
+ render: function() {
+ const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+ const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+
+ const title = this.props.action + " this person?";
+ const confirmButtonClass = classnames({
+ 'mx_Dialog_primary': true,
+ 'danger': this.props.danger,
+ });
+
+ let reasonBox;
+ if (this.props.askReason) {
+ reasonBox = (
+
+
+ );
+ },
+});
diff --git a/src/components/views/dialogs/InteractiveAuthDialog.js b/src/components/views/dialogs/InteractiveAuthDialog.js
index a4abbb17d94..145b4b64534 100644
--- a/src/components/views/dialogs/InteractiveAuthDialog.js
+++ b/src/components/views/dialogs/InteractiveAuthDialog.js
@@ -1,5 +1,6 @@
/*
Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,18 +16,20 @@ limitations under the License.
*/
import Matrix from 'matrix-js-sdk';
-const InteractiveAuth = Matrix.InteractiveAuth;
import React from 'react';
import sdk from '../../../index';
-import {getEntryComponentForLoginType} from '../login/InteractiveAuthEntryComponents';
+import AccessibleButton from '../elements/AccessibleButton';
export default React.createClass({
displayName: 'InteractiveAuthDialog',
propTypes: {
+ // matrix client to use for UI auth requests
+ matrixClient: React.PropTypes.object.isRequired,
+
// response from initial request. If not supplied, will do a request on
// mount.
authData: React.PropTypes.shape({
@@ -41,169 +44,70 @@ export default React.createClass({
onFinished: React.PropTypes.func.isRequired,
title: React.PropTypes.string,
- submitButtonLabel: React.PropTypes.string,
},
getDefaultProps: function() {
return {
title: "Authentication",
- submitButtonLabel: "Submit",
};
},
getInitialState: function() {
return {
- authStage: null,
- busy: false,
- errorText: null,
- stageErrorText: null,
- submitButtonEnabled: false,
- };
+ authError: null,
+ }
},
- componentWillMount: function() {
- this._unmounted = false;
- this._authLogic = new InteractiveAuth({
- authData: this.props.authData,
- doRequest: this._requestCallback,
- startAuthStage: this._startAuthStage,
- });
-
- this._authLogic.attemptAuth().then((result) => {
+ _onAuthFinished: function(success, result) {
+ if (success) {
this.props.onFinished(true, result);
- }).catch((error) => {
- console.error("Error during user-interactive auth:", error);
- if (this._unmounted) {
- return;
- }
-
- const msg = error.message || error.toString();
- this.setState({
- errorText: msg
- });
- }).done();
- },
-
- componentWillUnmount: function() {
- this._unmounted = true;
- },
-
- _startAuthStage: function(stageType, error) {
- this.setState({
- authStage: stageType,
- errorText: error ? error.error : null,
- }, this._setFocus);
- },
-
- _requestCallback: function(auth) {
- this.setState({
- busy: true,
- errorText: null,
- stageErrorText: null,
- });
- return this.props.makeRequest(auth).finally(() => {
- if (this._unmounted) {
- return;
- }
+ } else {
this.setState({
- busy: false,
+ authError: result,
});
- });
- },
-
- _onEnterPressed: function(e) {
- if (this.state.submitButtonEnabled && !this.state.busy) {
- this._onSubmit();
}
},
- _onSubmit: function() {
- if (this.refs.stageComponent && this.refs.stageComponent.onSubmitClick) {
- this.refs.stageComponent.onSubmitClick();
- }
- },
-
- _setFocus: function() {
- if (this.refs.stageComponent && this.refs.stageComponent.focus) {
- this.refs.stageComponent.focus();
- }
- },
-
- _onCancel: function() {
+ _onDismissClick: function() {
this.props.onFinished(false);
},
- _setSubmitButtonEnabled: function(enabled) {
- this.setState({
- submitButtonEnabled: enabled,
- });
- },
-
- _submitAuthDict: function(authData) {
- this._authLogic.submitAuthDict(authData);
- },
-
- _renderCurrentStage: function() {
- const stage = this.state.authStage;
- var StageComponent = getEntryComponentForLoginType(stage);
- return (
-
+
+ );
+ },
+});
diff --git a/src/components/views/dialogs/UnknownDeviceDialog.js b/src/components/views/dialogs/UnknownDeviceDialog.js
index 409852a2ccd..da9c8e8f653 100644
--- a/src/components/views/dialogs/UnknownDeviceDialog.js
+++ b/src/components/views/dialogs/UnknownDeviceDialog.js
@@ -16,8 +16,10 @@ limitations under the License.
import React from 'react';
import sdk from '../../../index';
+import dis from '../../../dispatcher';
import MatrixClientPeg from '../../../MatrixClientPeg';
import GeminiScrollbar from 'react-gemini-scrollbar';
+import Resend from '../../../Resend';
function DeviceListEntry(props) {
const {userId, device} = props;
@@ -85,7 +87,7 @@ UnknownDeviceList.propTypes = {
export default React.createClass({
- displayName: 'UnknownEventDialog',
+ displayName: 'UnknownDeviceDialog',
propTypes: {
room: React.PropTypes.object.isRequired,
@@ -103,6 +105,10 @@ export default React.createClass({
MatrixClientPeg.get().setDeviceKnown(userId, deviceId, true);
});
});
+
+ // XXX: temporary logging to try to diagnose
+ // https://github.com/vector-im/riot-web/issues/3148
+ console.log('Opening UnknownDeviceDialog');
},
render: function() {
@@ -121,14 +127,10 @@ export default React.createClass({
} else {
warning = (
{
+ // XXX: temporary logging to try to diagnose
+ // https://github.com/vector-im/riot-web/issues/3148
+ console.log("UnknownDeviceDialog closed by escape");
+ this.props.onFinished();
+ }}
title='Room contains unknown devices'
>
{ this.props.title }
diff --git a/src/components/views/dialogs/ChatCreateOrReuseDialog.js b/src/components/views/dialogs/ChatCreateOrReuseDialog.js
new file mode 100644
index 00000000000..1a6ddf0456b
--- /dev/null
+++ b/src/components/views/dialogs/ChatCreateOrReuseDialog.js
@@ -0,0 +1,115 @@
+/*
+Copyright 2017 Vector Creations 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.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import DMRoomMap from '../../../utils/DMRoomMap';
+import AccessibleButton from '../elements/AccessibleButton';
+import Unread from '../../../Unread';
+import classNames from 'classnames';
+import createRoom from '../../../createRoom';
+
+export default class ChatCreateOrReuseDialog extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.onNewDMClick = this.onNewDMClick.bind(this);
+ this.onRoomTileClick = this.onRoomTileClick.bind(this);
+ }
+
+ onNewDMClick() {
+ createRoom({dmUserId: this.props.userId});
+ this.props.onFinished(true);
+ }
+
+ onRoomTileClick(roomId) {
+ dis.dispatch({
+ action: 'view_room',
+ room_id: roomId,
+ });
+ this.props.onFinished(true);
+ }
+
+ render() {
+ const client = MatrixClientPeg.get();
+
+ const dmRoomMap = new DMRoomMap(client);
+ const dmRooms = dmRoomMap.getDMRoomsForUserId(this.props.userId);
+
+ const RoomTile = sdk.getComponent("rooms.RoomTile");
+
+ const tiles = [];
+ for (const roomId of dmRooms) {
+ const room = client.getRoom(roomId);
+ if (room) {
+ const me = room.getMember(client.credentials.userId);
+ const highlight = (
+ room.getUnreadNotificationCount('highlight') > 0 ||
+ me.membership == "invite"
+ );
+ tiles.push(
+
+ 
+
+
+ Start new chat
+
+ You already have existing direct chats with this user:
+
+
+ {tiles}
+ {startNewChat}
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ {reasonBox}
+
+
+ {this.props.member.name}
+ {this.props.member.userId}
+
+
+
+
+
+
- {this.state.errorText}
+ let content;
+ if (this.state.authError) {
+ content = (
+
-
);
},
diff --git a/src/components/views/dialogs/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js
index 3f7f237c30e..0260fc29e2c 100644
--- a/src/components/views/dialogs/QuestionDialog.js
+++ b/src/components/views/dialogs/QuestionDialog.js
@@ -36,6 +36,7 @@ export default React.createClass({
description: "",
button: "OK",
focus: true,
+ hasCancelButton: true,
};
},
@@ -49,6 +50,11 @@ export default React.createClass({
render: function() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+ const cancelButton = this.props.hasCancelButton ? (
+
+ ) : null;
return (
{this.props.button}
-
-
+ {cancelButton}
);
diff --git a/src/components/views/dialogs/SessionRestoreErrorDialog.js b/src/components/views/dialogs/SessionRestoreErrorDialog.js
new file mode 100644
index 00000000000..358bbf1fec6
--- /dev/null
+++ b/src/components/views/dialogs/SessionRestoreErrorDialog.js
@@ -0,0 +1,74 @@
+/*
+Copyright 2017 Vector Creations 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.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import SdkConfig from '../../../SdkConfig';
+import Modal from '../../../Modal';
+
+
+export default React.createClass({
+ displayName: 'SessionRestoreErrorDialog',
+
+ propTypes: {
+ error: React.PropTypes.string.isRequired,
+ onFinished: React.PropTypes.func.isRequired,
+ },
+
+ _sendBugReport: function() {
+ const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+ Modal.createDialog(BugReportDialog, {});
+ },
+
+ _continueClicked: function() {
+ this.props.onFinished(true);
+ },
+
+ render: function() {
+ const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+ let bugreport;
+
+ if (SdkConfig.get().bug_report_endpoint_url) {
+ bugreport = (
+
+
+
+ Dismiss
+
+
+ );
+ } else {
+ content = (
+ {this.state.authError.message || this.state.authError.toString()}
+ +
+
);
}
- const submitLabel = this.state.busy ?
-
- This operation requires additional authentication.
- {this._renderCurrentStage()} - {error} -
- {submitButton}
- {cancelButton}
-
+ {content}
Otherwise, + click here to send a bug report. +
+ ); + } + + return ( +
+
+ We encountered an error trying to restore your previous session. If + you continue, you will need to log in again, and encrypted chat + history will be unreadable.
+ +If you have previously used a more recent version of Riot, your session + may be incompatible with this version. Close this window and return + to the more recent version.
+ + {bugreport} +
+
+
+
-
);
@@ -137,13 +139,17 @@ export default React.createClass({
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
return (
- This means there is no guarantee that the devices - belong to the users they claim to. -
We recommend you go through the verification process - for each device before continuing, but you can resend - the message without verifying if you prefer. + for each device to confirm they belong to their legitimate owner, + but you can resend the message without verifying if you prefer.
- This room contains unknown devices which have not been - verified. + This room contains devices that you haven't seen before.
{ warning } Unknown devices: @@ -152,7 +158,19 @@ export default React.createClass({
+
diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.js
index ffea8e1ba7b..2c23c0d2083 100644
--- a/src/components/views/elements/AccessibleButton.js
+++ b/src/components/views/elements/AccessibleButton.js
@@ -27,8 +27,8 @@ import React from 'react';
export default function AccessibleButton(props) {
const {element, onClick, children, ...restProps} = props;
restProps.onClick = onClick;
- restProps.onKeyDown = function(e) {
- if (e.keyCode == 13 || e.keyCode == 32) return onClick();
+ restProps.onKeyUp = function(e) {
+ if (e.keyCode == 13 || e.keyCode == 32) return onClick(e);
};
restProps.tabIndex = restProps.tabIndex || "0";
restProps.role = "button";
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index 9f37fa90ff0..6bad15f7d05 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -61,6 +61,15 @@ export default React.createClass({
}
},
+ moveSelectionTop: function() {
+ if (this.state.selected > 0) {
+ this.setState({
+ selected: 0,
+ hover: false,
+ });
+ }
+ },
+
moveSelectionUp: function() {
if (this.state.selected > 0) {
this.setState({
@@ -124,7 +133,14 @@ export default React.createClass({
// Saving the addressListElement so we can use it to work out, in the componentDidUpdate
// method, how far to scroll when using the arrow keys
addressList.push(
- { this.addressListElement = ref; }} >
+
+ {child}
+
+ );
+ });
+
+ if (!this.state.searchQuery) {
+ options.push(
+
{ this.addressListElement = ref; }}
+ >
);
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index 18492d8ae6b..9961a1a428d 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.js
@@ -64,19 +64,14 @@ export default React.createClass({
const address = this.props.address;
const name = address.displayName || address.address;
- let imgUrl;
- if (address.avatarMxc) {
- imgUrl = MatrixClientPeg.get().mxcUrlToHttp(
- address.avatarMxc, 25, 25, 'crop'
- );
- }
+ let imgUrls = [];
- if (address.addressType === "mx") {
- if (!imgUrl) imgUrl = 'img/icon-mx-user.svg';
+ if (address.addressType === "mx" && address.avatarMxc) {
+ imgUrls.push(MatrixClientPeg.get().mxcUrlToHttp(
+ address.avatarMxc, 25, 25, 'crop'
+ ));
} else if (address.addressType === 'email') {
- if (!imgUrl) imgUrl = 'img/icon-email-user.svg';
- } else {
- if (!imgUrl) imgUrl = "img/avatar-error.svg";
+ imgUrls.push('img/icon-email-user.svg');
}
// Removing networks for now as they're not really supported
@@ -168,7 +163,7 @@ export default React.createClass({
return (
-
{ info }
{ dismiss }
diff --git a/src/components/views/elements/Dropdown.js b/src/components/views/elements/Dropdown.js
new file mode 100644
index 00000000000..3b34d3cac19
--- /dev/null
+++ b/src/components/views/elements/Dropdown.js
@@ -0,0 +1,324 @@
+/*
+Copyright 2017 Vector Creations 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.
+*/
+
+import React from 'react';
+import classnames from 'classnames';
+import AccessibleButton from './AccessibleButton';
+
+class MenuOption extends React.Component {
+ constructor(props) {
+ super(props);
+ this._onMouseEnter = this._onMouseEnter.bind(this);
+ this._onClick = this._onClick.bind(this);
+ }
+
+ _onMouseEnter() {
+ this.props.onMouseEnter(this.props.dropdownKey);
+ }
+
+ _onClick(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ this.props.onClick(this.props.dropdownKey);
+ }
+
+ render() {
+ const optClasses = classnames({
+ mx_Dropdown_option: true,
+ mx_Dropdown_option_highlight: this.props.highlighted,
+ });
+
+ return
+ {this.props.children}
+
+ }
+};
+
+MenuOption.propTypes = {
+ children: React.PropTypes.oneOfType([
+ React.PropTypes.arrayOf(React.PropTypes.node),
+ React.PropTypes.node
+ ]),
+ highlighted: React.PropTypes.bool,
+ dropdownKey: React.PropTypes.string,
+ onClick: React.PropTypes.func.isRequired,
+ onMouseEnter: React.PropTypes.func.isRequired,
+};
+
+/*
+ * Reusable dropdown select control, akin to react-select,
+ * but somewhat simpler as react-select is 79KB of minified
+ * javascript.
+ *
+ * TODO: Port NetworkDropdown to use this.
+ */
+export default class Dropdown extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.dropdownRootElement = null;
+ this.ignoreEvent = null;
+
+ this._onInputClick = this._onInputClick.bind(this);
+ this._onRootClick = this._onRootClick.bind(this);
+ this._onDocumentClick = this._onDocumentClick.bind(this);
+ this._onMenuOptionClick = this._onMenuOptionClick.bind(this);
+ this._onInputKeyPress = this._onInputKeyPress.bind(this);
+ this._onInputKeyUp = this._onInputKeyUp.bind(this);
+ this._onInputChange = this._onInputChange.bind(this);
+ this._collectRoot = this._collectRoot.bind(this);
+ this._collectInputTextBox = this._collectInputTextBox.bind(this);
+ this._setHighlightedOption = this._setHighlightedOption.bind(this);
+
+ this.inputTextBox = null;
+
+ this._reindexChildren(this.props.children);
+
+ const firstChild = React.Children.toArray(props.children)[0];
+
+ this.state = {
+ // True if the menu is dropped-down
+ expanded: false,
+ // The key of the highlighted option
+ // (the option that would become selected if you pressed enter)
+ highlightedOption: firstChild ? firstChild.key : null,
+ // the current search query
+ searchQuery: '',
+ };
+ }
+
+ componentWillMount() {
+ // Listen for all clicks on the document so we can close the
+ // menu when the user clicks somewhere else
+ document.addEventListener('click', this._onDocumentClick, false);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener('click', this._onDocumentClick, false);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this._reindexChildren(nextProps.children);
+ const firstChild = React.Children.toArray(nextProps.children)[0];
+ this.setState({
+ highlightedOption: firstChild ? firstChild.key : null,
+ });
+ }
+
+ _reindexChildren(children) {
+ this.childrenByKey = {};
+ React.Children.forEach(children, (child) => {
+ this.childrenByKey[child.key] = child;
+ });
+ }
+
+ _onDocumentClick(ev) {
+ // Close the dropdown if the user clicks anywhere that isn't
+ // within our root element
+ if (ev !== this.ignoreEvent) {
+ this.setState({
+ expanded: false,
+ });
+ }
+ }
+
+ _onRootClick(ev) {
+ // This captures any clicks that happen within our elements,
+ // such that we can then ignore them when they're seen by the
+ // click listener on the document handler, ie. not close the
+ // dropdown immediately after opening it.
+ // NB. We can't just stopPropagation() because then the event
+ // doesn't reach the React onClick().
+ this.ignoreEvent = ev;
+ }
+
+ _onInputClick(ev) {
+ this.setState({
+ expanded: !this.state.expanded,
+ });
+ ev.preventDefault();
+ }
+
+ _onMenuOptionClick(dropdownKey) {
+ this.setState({
+ expanded: false,
+ });
+ this.props.onOptionChange(dropdownKey);
+ }
+
+ _onInputKeyPress(e) {
+ // This needs to be on the keypress event because otherwise
+ // it can't cancel the form submission
+ if (e.key == 'Enter') {
+ this.setState({
+ expanded: false,
+ });
+ this.props.onOptionChange(this.state.highlightedOption);
+ e.preventDefault();
+ }
+ }
+
+ _onInputKeyUp(e) {
+ // These keys don't generate keypress events and so needs to
+ // be on keyup
+ if (e.key == 'Escape') {
+ this.setState({
+ expanded: false,
+ });
+ } else if (e.key == 'ArrowDown') {
+ this.setState({
+ highlightedOption: this._nextOption(this.state.highlightedOption),
+ });
+ } else if (e.key == 'ArrowUp') {
+ this.setState({
+ highlightedOption: this._prevOption(this.state.highlightedOption),
+ });
+ }
+ }
+
+ _onInputChange(e) {
+ this.setState({
+ searchQuery: e.target.value,
+ });
+ if (this.props.onSearchChange) {
+ this.props.onSearchChange(e.target.value);
+ }
+ }
+
+ _collectRoot(e) {
+ if (this.dropdownRootElement) {
+ this.dropdownRootElement.removeEventListener(
+ 'click', this._onRootClick, false,
+ );
+ }
+ if (e) {
+ e.addEventListener('click', this._onRootClick, false);
+ }
+ this.dropdownRootElement = e;
+ }
+
+ _collectInputTextBox(e) {
+ this.inputTextBox = e;
+ if (e) e.focus();
+ }
+
+ _setHighlightedOption(optionKey) {
+ this.setState({
+ highlightedOption: optionKey,
+ });
+ }
+
+ _nextOption(optionKey) {
+ const keys = Object.keys(this.childrenByKey);
+ const index = keys.indexOf(optionKey);
+ return keys[(index + 1) % keys.length];
+ }
+
+ _prevOption(optionKey) {
+ const keys = Object.keys(this.childrenByKey);
+ const index = keys.indexOf(optionKey);
+ return keys[(index - 1) % keys.length];
+ }
+
+ _getMenuOptions() {
+ const options = React.Children.map(this.props.children, (child) => {
+ return (
+
+ Type to search...
+
+ );
+ }
+ return options;
+ }
+
+ render() {
+ let currentValue;
+
+ const menuStyle = {};
+ if (this.props.menuWidth) menuStyle.width = this.props.menuWidth;
+
+ let menu;
+ if (this.state.expanded) {
+ currentValue = ;
+ menu =
+ {this._getMenuOptions()}
+
;
+ } else {
+ const selectedChild = this.props.getShortOption ?
+ this.props.getShortOption(this.props.value) :
+ this.childrenByKey[this.props.value];
+ currentValue =
+ {selectedChild}
+
+ }
+
+ const dropdownClasses = {
+ mx_Dropdown: true,
+ };
+ if (this.props.className) {
+ dropdownClasses[this.props.className] = true;
+ }
+
+ // Note the menu sits inside the AccessibleButton div so it's anchored
+ // to the input, but overflows below it. The root contains both.
+ return
+
+ {currentValue}
+
+ {menu}
+
+
;
+ }
+}
+
+Dropdown.propTypes = {
+ // The width that the dropdown should be. If specified,
+ // the dropped-down part of the menu will be set to this
+ // width.
+ menuWidth: React.PropTypes.number,
+ // Called when the selected option changes
+ onOptionChange: React.PropTypes.func.isRequired,
+ // Called when the value of the search field changes
+ onSearchChange: React.PropTypes.func,
+ // Function that, given the key of an option, returns
+ // a node representing that option to be displayed in the
+ // box itself as the currently-selected option (ie. as
+ // opposed to in the actual dropped-down part). If
+ // unspecified, the appropriate child element is used as
+ // in the dropped-down menu.
+ getShortOption: React.PropTypes.func,
+ value: React.PropTypes.string,
+}
diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js
index 2c745676986..3ce8c90447c 100644
--- a/src/components/views/elements/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -33,7 +33,10 @@ module.exports = React.createClass({
className: React.PropTypes.string,
labelClassName: React.PropTypes.string,
placeholderClassName: React.PropTypes.string,
+ // Overrides blurToSubmit if true
blurToCancel: React.PropTypes.bool,
+ // Will cause onValueChanged(value, true) to fire on blur
+ blurToSubmit: React.PropTypes.bool,
editable: React.PropTypes.bool,
},
@@ -51,6 +54,7 @@ module.exports = React.createClass({
editable: true,
className: "mx_EditableText",
placeholderClassName: "mx_EditableText_placeholder",
+ blurToSubmit: false,
};
},
@@ -119,6 +123,7 @@ module.exports = React.createClass({
this.value = this.props.initialValue;
this.showPlaceholder(!this.value);
this.onValueChanged(false);
+ this.refs.editable_div.blur();
},
onValueChanged: function(shouldSubmit) {
@@ -182,13 +187,15 @@ module.exports = React.createClass({
}
},
- onFinish: function(ev) {
+ onFinish: function(ev, shouldSubmit) {
var self = this;
- var submit = (ev.key === "Enter");
+ var submit = (ev.key === "Enter") || shouldSubmit;
this.setState({
phase: this.Phases.Display,
}, function() {
- self.onValueChanged(submit);
+ if (this.value !== this.props.initialValue) {
+ self.onValueChanged(submit);
+ }
});
},
@@ -199,7 +206,7 @@ module.exports = React.createClass({
if (this.props.blurToCancel)
{this.cancelEdit();}
else
- {this.onFinish(ev);}
+ {this.onFinish(ev, this.props.blurToSubmit);}
this.showPlaceholder(!this.value);
},
diff --git a/src/components/views/elements/EditableTextContainer.js b/src/components/views/elements/EditableTextContainer.js
index b17f1b417dc..d6f9c555c66 100644
--- a/src/components/views/elements/EditableTextContainer.js
+++ b/src/components/views/elements/EditableTextContainer.js
@@ -116,6 +116,7 @@ export default class EditableTextContainer extends React.Component {
+
+ );
+ }
const toggleButton = (
-
+
+ {this._renderAvatars(avatarMembers)}
+ {this._renderSummary(aggregate.names, orderedTransitionSequences)}
+
+
{expanded ? 'collapse' : 'expand'}
-
- );
-
- const summaryContainer = (
-
+ {options}
+
+ }
+}
+
+CountryDropdown.propTypes = {
+ className: React.PropTypes.string,
+ onOptionChange: React.PropTypes.func.isRequired,
+ value: React.PropTypes.string,
+};
diff --git a/src/components/views/login/InteractiveAuthEntryComponents.js b/src/components/views/login/InteractiveAuthEntryComponents.js
index ec184ca09f9..2d8abf92169 100644
--- a/src/components/views/login/InteractiveAuthEntryComponents.js
+++ b/src/components/views/login/InteractiveAuthEntryComponents.js
@@ -1,5 +1,6 @@
/*
Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -15,27 +16,47 @@ limitations under the License.
*/
import React from 'react';
+import url from 'url';
+import classnames from 'classnames';
import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
/* This file contains a collection of components which are used by the
- * InteractiveAuthDialog to prompt the user to enter the information needed
+ * InteractiveAuth to prompt the user to enter the information needed
* for an auth stage. (The intention is that they could also be used for other
* components, such as the registration flow).
*
* Call getEntryComponentForLoginType() to get a component suitable for a
* particular login type. Each component requires the same properties:
*
+ * matrixClient: A matrix client. May be a different one to the one
+ * currently being used generally (eg. to register with
+ * one HS whilst beign a guest on another).
* loginType: the login type of the auth stage being attempted
* authSessionId: session id from the server
+ * clientSecret: The client secret in use for ID server auth sessions
* stageParams: params from the server for the stage being attempted
* errorText: error message from a previous attempt to authenticate
* submitAuthDict: a function which will be called with the new auth dict
- * setSubmitButtonEnabled: a function which will enable/disable the 'submit' button
+ * busy: a boolean indicating whether the auth logic is doing something
+ * the user needs to wait for.
+ * inputs: Object of inputs provided by the user, as in js-sdk
+ * interactive-auth
+ * stageState: Stage-specific object used for communicating state information
+ * to the UI from the state-specific auth logic.
+ * Defined keys for stages are:
+ * m.login.email.identity:
+ * * emailSid: string representing the sid of the active
+ * verification session from the ID server, or
+ * null if no session is active.
+ * fail: a function which should be called with an error object if an
+ * error occurred during the auth stage. This will cause the auth
+ * session to be failed and the process to go back to the start.
+ * setEmailSid: m.login.email.identity only: a function to be called with the
+ * email sid after a token is requested.
+ * makeRegistrationUrl A function that makes a registration URL
*
* Each component may also provide the following functions (beyond the standard React ones):
- * onSubmitClick: handle a 'submit' button click
* focus: set the input focus appropriately in the form.
*/
@@ -47,13 +68,18 @@ export const PasswordAuthEntry = React.createClass({
},
propTypes: {
+ matrixClient: React.PropTypes.object.isRequired,
submitAuthDict: React.PropTypes.func.isRequired,
- setSubmitButtonEnabled: React.PropTypes.func.isRequired,
errorText: React.PropTypes.string,
+ // is the auth logic currently waiting for something to
+ // happen?
+ busy: React.PropTypes.bool,
},
- componentWillMount: function() {
- this.props.setSubmitButtonEnabled(false);
+ getInitialState: function() {
+ return {
+ passwordValid: false,
+ };
},
focus: function() {
@@ -62,17 +88,22 @@ export const PasswordAuthEntry = React.createClass({
}
},
- onSubmitClick: function() {
+ _onSubmit: function(e) {
+ e.preventDefault();
+ if (this.props.busy) return;
+
this.props.submitAuthDict({
type: PasswordAuthEntry.LOGIN_TYPE,
- user: MatrixClientPeg.get().credentials.userId,
+ user: this.props.matrixClient.credentials.userId,
password: this.refs.passwordField.value,
});
},
_onPasswordFieldChange: function(ev) {
// enable the submit button iff the password is non-empty
- this.props.setSubmitButtonEnabled(Boolean(ev.target.value));
+ this.setState({
+ passwordValid: Boolean(this.refs.passwordField.value),
+ });
},
render: function() {
@@ -82,16 +113,34 @@ export const PasswordAuthEntry = React.createClass({
passwordBoxClass = 'error';
}
+ let submitButtonOrSpinner;
+ if (this.props.busy) {
+ const Loader = sdk.getComponent("elements.Spinner");
+ submitButtonOrSpinner =
);
- }
- else {
- var name = this.props.room ? this.props.room.name : (this.props.room_alias || "");
- name = name ? { name } : "a room";
+ } else {
+ const name = this._roomNameElement();
joinBlock = (
-
);
return (
-
- {avatars}
-
-
- {summary}
-
- {toggleButton}
-
+ {toggleButton}
{summaryContainer}
+ {expanded ? : null}
{expandedEvents}
);
diff --git a/src/components/views/login/CountryDropdown.js b/src/components/views/login/CountryDropdown.js
new file mode 100644
index 00000000000..fc1e89661b9
--- /dev/null
+++ b/src/components/views/login/CountryDropdown.js
@@ -0,0 +1,123 @@
+/*
+Copyright 2017 Vector Creations 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.
+*/
+
+import React from 'react';
+
+import sdk from '../../../index';
+
+import { COUNTRIES } from '../../../phonenumber';
+import { charactersToImageNode } from '../../../HtmlUtils';
+
+const COUNTRIES_BY_ISO2 = new Object(null);
+for (const c of COUNTRIES) {
+ COUNTRIES_BY_ISO2[c.iso2] = c;
+}
+
+function countryMatchesSearchQuery(query, country) {
+ if (country.name.toUpperCase().indexOf(query.toUpperCase()) == 0) return true;
+ if (country.iso2 == query.toUpperCase()) return true;
+ if (country.prefix == query) return true;
+ return false;
+}
+
+const MAX_DISPLAYED_ROWS = 2;
+
+export default class CountryDropdown extends React.Component {
+ constructor(props) {
+ super(props);
+ this._onSearchChange = this._onSearchChange.bind(this);
+
+ this.state = {
+ searchQuery: '',
+ }
+
+ if (!props.value) {
+ // If no value is given, we start with the first
+ // country selected, but our parent component
+ // doesn't know this, therefore we do this.
+ this.props.onOptionChange(COUNTRIES[0].iso2);
+ }
+ }
+
+ _onSearchChange(search) {
+ this.setState({
+ searchQuery: search,
+ });
+ }
+
+ _flagImgForIso2(iso2) {
+ // Unicode Regional Indicator Symbol letter 'A'
+ const RIS_A = 0x1F1E6;
+ const ASCII_A = 65;
+ return charactersToImageNode(iso2,
+ RIS_A + (iso2.charCodeAt(0) - ASCII_A),
+ RIS_A + (iso2.charCodeAt(1) - ASCII_A),
+ );
+ }
+
+ render() {
+ const Dropdown = sdk.getComponent('elements.Dropdown');
+
+ let displayedCountries;
+ if (this.state.searchQuery) {
+ displayedCountries = COUNTRIES.filter(
+ countryMatchesSearchQuery.bind(this, this.state.searchQuery),
+ );
+ if (
+ this.state.searchQuery.length == 2 &&
+ COUNTRIES_BY_ISO2[this.state.searchQuery.toUpperCase()]
+ ) {
+ // exact ISO2 country name match: make the first result the matches ISO2
+ const matched = COUNTRIES_BY_ISO2[this.state.searchQuery.toUpperCase()];
+ displayedCountries = displayedCountries.filter((c) => {
+ return c.iso2 != matched.iso2;
+ });
+ displayedCountries.unshift(matched);
+ }
+ } else {
+ displayedCountries = COUNTRIES;
+ }
+
+ if (displayedCountries.length > MAX_DISPLAYED_ROWS) {
+ displayedCountries = displayedCountries.slice(0, MAX_DISPLAYED_ROWS);
+ }
+
+ const options = displayedCountries.map((country) => {
+ return
+ {this._flagImgForIso2(country.iso2)}
+ {country.name}
+
;
+ });
+
+ // default value here too, otherwise we need to handle null / undefined
+ // values between mounting and the initial value propgating
+ const value = this.props.value || COUNTRIES[0].iso2;
+
+ return To continue, please enter your password.
Password:
- +
{this.props.errorText}
@@ -110,14 +159,9 @@ export const RecaptchaAuthEntry = React.createClass({
propTypes: {
submitAuthDict: React.PropTypes.func.isRequired,
stageParams: React.PropTypes.object.isRequired,
- setSubmitButtonEnabled: React.PropTypes.func.isRequired,
errorText: React.PropTypes.string,
},
- componentWillMount: function() {
- this.props.setSubmitButtonEnabled(false);
- },
-
_onCaptchaResponse: function(response) {
this.props.submitAuthDict({
type: RecaptchaAuthEntry.LOGIN_TYPE,
@@ -141,14 +185,217 @@ export const RecaptchaAuthEntry = React.createClass({
},
});
+export const EmailIdentityAuthEntry = React.createClass({
+ displayName: 'EmailIdentityAuthEntry',
+
+ statics: {
+ LOGIN_TYPE: "m.login.email.identity",
+ },
+
+ propTypes: {
+ matrixClient: React.PropTypes.object.isRequired,
+ submitAuthDict: React.PropTypes.func.isRequired,
+ authSessionId: React.PropTypes.string.isRequired,
+ clientSecret: React.PropTypes.string.isRequired,
+ inputs: React.PropTypes.object.isRequired,
+ stageState: React.PropTypes.object.isRequired,
+ fail: React.PropTypes.func.isRequired,
+ setEmailSid: React.PropTypes.func.isRequired,
+ makeRegistrationUrl: React.PropTypes.func.isRequired,
+ },
+
+ getInitialState: function() {
+ return {
+ requestingToken: false,
+ };
+ },
+
+ componentWillMount: function() {
+ if (this.props.stageState.emailSid === null) {
+ this.setState({requestingToken: true});
+ this._requestEmailToken().catch((e) => {
+ this.props.fail(e);
+ }).finally(() => {
+ this.setState({requestingToken: false});
+ }).done();
+ }
+ },
+
+ /*
+ * Requests a verification token by email.
+ */
+ _requestEmailToken: function() {
+ const nextLink = this.props.makeRegistrationUrl({
+ client_secret: this.props.clientSecret,
+ hs_url: this.props.matrixClient.getHomeserverUrl(),
+ is_url: this.props.matrixClient.getIdentityServerUrl(),
+ session_id: this.props.authSessionId,
+ });
+
+ return this.props.matrixClient.requestRegisterEmailToken(
+ this.props.inputs.emailAddress,
+ this.props.clientSecret,
+ 1, // TODO: Multiple send attempts?
+ nextLink,
+ ).then((result) => {
+ this.props.setEmailSid(result.sid);
+ });
+ },
+
+ render: function() {
+ if (this.state.requestingToken) {
+ const Loader = sdk.getComponent("elements.Spinner");
+ return
+
+ );
+ }
+ },
+});
+
+export const MsisdnAuthEntry = React.createClass({
+ displayName: 'MsisdnAuthEntry',
+
+ statics: {
+ LOGIN_TYPE: "m.login.msisdn",
+ },
+
+ propTypes: {
+ inputs: React.PropTypes.shape({
+ phoneCountry: React.PropTypes.string,
+ phoneNumber: React.PropTypes.string,
+ }),
+ fail: React.PropTypes.func,
+ clientSecret: React.PropTypes.func,
+ submitAuthDict: React.PropTypes.func.isRequired,
+ matrixClient: React.PropTypes.object,
+ submitAuthDict: React.PropTypes.func,
+ },
+
+ getInitialState: function() {
+ return {
+ token: '',
+ requestingToken: false,
+ };
+ },
+
+ componentWillMount: function() {
+ this._sid = null;
+ this._msisdn = null;
+ this._tokenBox = null;
+
+ this.setState({requestingToken: true});
+ this._requestMsisdnToken().catch((e) => {
+ this.props.fail(e);
+ }).finally(() => {
+ this.setState({requestingToken: false});
+ }).done();
+ },
+
+ /*
+ * Requests a verification token by SMS.
+ */
+ _requestMsisdnToken: function() {
+ return this.props.matrixClient.requestRegisterMsisdnToken(
+ this.props.inputs.phoneCountry,
+ this.props.inputs.phoneNumber,
+ this.props.clientSecret,
+ 1, // TODO: Multiple send attempts?
+ ).then((result) => {
+ this._sid = result.sid;
+ this._msisdn = result.msisdn;
+ });
+ },
+
+ _onTokenChange: function(e) {
+ this.setState({
+ token: e.target.value,
+ });
+ },
+
+ _onFormSubmit: function(e) {
+ e.preventDefault();
+ if (this.state.token == '') return;
+
+ this.setState({
+ errorText: null,
+ });
+
+ this.props.matrixClient.submitMsisdnToken(
+ this._sid, this.props.clientSecret, this.state.token
+ ).then((result) => {
+ if (result.success) {
+ const idServerParsedUrl = url.parse(
+ this.props.matrixClient.getIdentityServerUrl(),
+ )
+ this.props.submitAuthDict({
+ type: MsisdnAuthEntry.LOGIN_TYPE,
+ threepid_creds: {
+ sid: this._sid,
+ client_secret: this.props.clientSecret,
+ id_server: idServerParsedUrl.host,
+ },
+ });
+ } else {
+ this.setState({
+ errorText: "Token incorrect",
+ });
+ }
+ }).catch((e) => {
+ this.props.fail(e);
+ console.log("Failed to submit msisdn token");
+ }).done();
+ },
+
+ render: function() {
+ if (this.state.requestingToken) {
+ const Loader = sdk.getComponent("elements.Spinner");
+ return An email has been sent to {this.props.inputs.emailAddress}
+Please check your email to continue registration.
+
+
+ );
+ }
+ },
+});
+
export const FallbackAuthEntry = React.createClass({
displayName: 'FallbackAuthEntry',
propTypes: {
+ matrixClient: React.PropTypes.object.isRequired,
authSessionId: React.PropTypes.string.isRequired,
loginType: React.PropTypes.string.isRequired,
submitAuthDict: React.PropTypes.func.isRequired,
- setSubmitButtonEnabled: React.PropTypes.func.isRequired,
errorText: React.PropTypes.string,
},
@@ -156,7 +403,6 @@ export const FallbackAuthEntry = React.createClass({
// we have to make the user click a button, as browsers will block
// the popup if we open it immediately.
this._popupWindow = null;
- this.props.setSubmitButtonEnabled(true);
window.addEventListener("message", this._onReceiveMessage);
},
@@ -167,19 +413,18 @@ export const FallbackAuthEntry = React.createClass({
}
},
- onSubmitClick: function() {
- var url = MatrixClientPeg.get().getFallbackAuthUrl(
+ _onShowFallbackClick: function() {
+ var url = this.props.matrixClient.getFallbackAuthUrl(
this.props.loginType,
this.props.authSessionId
);
this._popupWindow = window.open(url);
- this.props.setSubmitButtonEnabled(false);
},
_onReceiveMessage: function(event) {
if (
event.data === "authDone" &&
- event.origin === MatrixClientPeg.get().getHomeserverUrl()
+ event.origin === this.props.matrixClient.getHomeserverUrl()
) {
this.props.submitAuthDict({});
}
@@ -188,7 +433,7 @@ export const FallbackAuthEntry = React.createClass({
render: function() {
return (
A text message has been sent to +{this._msisdn}
+Please enter the code it contains:
+
+
+
+
+ {this.state.errorText}
+
+
- Click "Submit" to authenticate
+ Start authentication
);
}
+ const myMember = this.props.room ? this.props.room.currentState.members[
+ MatrixClientPeg.get().credentials.userId
+ ] : null;
+ const kicked = (
+ myMember &&
+ myMember.membership == 'leave' &&
+ myMember.events.member.getSender() != MatrixClientPeg.get().credentials.userId
+ );
+ const banned = myMember && myMember.membership == 'ban';
+
if (this.props.inviterName) {
var emailMatchBlock;
if (this.props.invitedEmail) {
@@ -122,8 +140,33 @@ module.exports = React.createClass({
);
- }
- else if (this.props.error) {
+ } else if (kicked || banned) {
+ const verb = kicked ? 'kicked' : 'banned';
+ const roomName = this._roomNameElement('this room');
+ const kickerMember = this.props.room.currentState.getMember(
+ myMember.events.member.getSender()
+ );
+ const kickerName = kickerMember ?
+ kickerMember.name : myMember.events.member.getSender();
+ let reason;
+ if (myMember.events.member.getContent().reason) {
+ reason =
{this.props.errorText}
@@ -200,6 +445,8 @@ export const FallbackAuthEntry = React.createClass({
const AuthEntryComponents = [
PasswordAuthEntry,
RecaptchaAuthEntry,
+ EmailIdentityAuthEntry,
+ MsisdnAuthEntry,
];
export function getEntryComponentForLoginType(loginType) {
diff --git a/src/components/views/login/PasswordLogin.js b/src/components/views/login/PasswordLogin.js
index 6f6081858bd..61cb3da6525 100644
--- a/src/components/views/login/PasswordLogin.js
+++ b/src/components/views/login/PasswordLogin.js
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -17,6 +18,7 @@ limitations under the License.
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
+import sdk from '../../../index';
import {field_input_incorrect} from '../../../UiEffects';
@@ -28,8 +30,12 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
onSubmit: React.PropTypes.func.isRequired, // fn(username, password)
onForgotPasswordClick: React.PropTypes.func, // fn()
initialUsername: React.PropTypes.string,
+ initialPhoneCountry: React.PropTypes.string,
+ initialPhoneNumber: React.PropTypes.string,
initialPassword: React.PropTypes.string,
onUsernameChanged: React.PropTypes.func,
+ onPhoneCountryChanged: React.PropTypes.func,
+ onPhoneNumberChanged: React.PropTypes.func,
onPasswordChanged: React.PropTypes.func,
loginIncorrect: React.PropTypes.bool,
},
@@ -38,7 +44,11 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
return {
onUsernameChanged: function() {},
onPasswordChanged: function() {},
+ onPhoneCountryChanged: function() {},
+ onPhoneNumberChanged: function() {},
initialUsername: "",
+ initialPhoneCountry: "",
+ initialPhoneNumber: "",
initialPassword: "",
loginIncorrect: false,
};
@@ -48,6 +58,8 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
return {
username: this.props.initialUsername,
password: this.props.initialPassword,
+ phoneCountry: this.props.initialPhoneCountry,
+ phoneNumber: this.props.initialPhoneNumber,
};
},
@@ -63,7 +75,12 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
onSubmitForm: function(ev) {
ev.preventDefault();
- this.props.onSubmit(this.state.username, this.state.password);
+ this.props.onSubmit(
+ this.state.username,
+ this.state.phoneCountry,
+ this.state.phoneNumber,
+ this.state.password,
+ );
},
onUsernameChanged: function(ev) {
@@ -71,6 +88,16 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
this.props.onUsernameChanged(ev.target.value);
},
+ onPhoneCountryChanged: function(country) {
+ this.setState({phoneCountry: country});
+ this.props.onPhoneCountryChanged(country);
+ },
+
+ onPhoneNumberChanged: function(ev) {
+ this.setState({phoneNumber: ev.target.value});
+ this.props.onPhoneNumberChanged(ev.target.value);
+ },
+
onPasswordChanged: function(ev) {
this.setState({password: ev.target.value});
this.props.onPasswordChanged(ev.target.value);
@@ -92,13 +119,28 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
error: this.props.loginIncorrect,
});
+ const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
return (
Reason: {myMember.events.member.getContent().reason}
+ }
+ let rejoinBlock;
+ if (!banned) {
+ rejoinBlock = ;
+ }
+ joinBlock = (
+
+
+ );
+ } else if (this.props.error) {
var name = this.props.roomAlias || "This room";
var error;
if (this.props.error.errcode == 'M_NOT_FOUND') {
@@ -138,10 +181,8 @@ module.exports = React.createClass({
+ You have been {verb} from {roomName} by {kickerName}.
+ {reason} + {rejoinBlock} + Forget +
+ + {reason} + {rejoinBlock} + Forget +
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index a23368f5e82..2c7e1d7140e 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,17 +15,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-var q = require("q");
-var React = require('react');
-var MatrixClientPeg = require('../../../MatrixClientPeg');
-var SdkConfig = require('../../../SdkConfig');
-var sdk = require('../../../index');
-var Modal = require('../../../Modal');
-var ObjectUtils = require("../../../ObjectUtils");
-var dis = require("../../../dispatcher");
-var ScalarAuthClient = require("../../../ScalarAuthClient");
-var ScalarMessaging = require('../../../ScalarMessaging');
-var UserSettingsStore = require('../../../UserSettingsStore');
+import q from 'q';
+import React from 'react';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import SdkConfig from '../../../SdkConfig';
+import sdk from '../../../index';
+import Modal from '../../../Modal';
+import ObjectUtils from '../../../ObjectUtils';
+import dis from '../../../dispatcher';
+import ScalarAuthClient from '../../../ScalarAuthClient';
+import ScalarMessaging from '../../../ScalarMessaging';
+import UserSettingsStore from '../../../UserSettingsStore';
+import AccessibleButton from '../elements/AccessibleButton';
// parse a string as an integer; if the input is undefined, or cannot be parsed
@@ -34,6 +36,48 @@ function parseIntWithDefault(val, def) {
return isNaN(res) ? def : res;
}
+const BannedUser = React.createClass({
+ propTypes: {
+ member: React.PropTypes.object.isRequired, // js-sdk RoomMember
+ },
+
+ _onUnbanClick: function() {
+ const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
+ Modal.createDialog(ConfirmUserActionDialog, {
+ member: this.props.member,
+ action: 'Unban',
+ danger: false,
+ onFinished: (proceed) => {
+ if (!proceed) return;
+
+ MatrixClientPeg.get().unban(
+ this.props.member.roomId, this.props.member.userId,
+ ).catch((err) => {
+ const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ console.error("Failed to unban: " + err);
+ Modal.createDialog(ErrorDialog, {
+ title: "Error",
+ description: "Failed to unban",
+ });
+ }).done();
+ },
+ });
+ },
+
+ render: function() {
+ return (
+
+
+ Unban
+
+ {this.props.member.userId}
+
+ );
+ }
+});
+
module.exports = React.createClass({
displayName: 'RoomSettings',
@@ -73,6 +117,9 @@ module.exports = React.createClass({
componentWillMount: function() {
ScalarMessaging.startListening();
+
+ MatrixClientPeg.get().on("RoomMember.membership", this._onRoomMemberMembership);
+
MatrixClientPeg.get().getRoomDirectoryVisibility(
this.props.room.roomId
).done((result) => {
@@ -101,6 +148,11 @@ module.exports = React.createClass({
componentWillUnmount: function() {
ScalarMessaging.stopListening();
+ const cli = MatrixClientPeg.get();
+ if (cli) {
+ cli.removeListener("RoomMember.membership", this._onRoomMemberMembership);
+ }
+
dis.dispatch({
action: 'ui_opacity',
sideOpacity: 1.0,
@@ -500,6 +552,11 @@ module.exports = React.createClass({
});
},
+ _onRoomMemberMembership: function() {
+ // Update, since our banned user list may have changed
+ this.forceUpdate();
+ },
+
_renderEncryptionSection: function() {
var cli = MatrixClientPeg.get();
var roomState = this.props.room.currentState;
@@ -610,11 +667,9 @@ module.exports = React.createClass({
Banned users
-
- {banned.map(function(member, i) {
+ {banned.map(function(member) {
return (
-
- - {member.userId} - +
+
Leave room
-
+
);
}
else if (myMember.membership === "leave") {
leaveButton = (
-
+
Forget room
-
+
);
}
}
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index f6c0f7034ef..7d9034edd2e 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -19,7 +19,6 @@ limitations under the License.
var React = require('react');
var ReactDOM = require("react-dom");
var classNames = require('classnames');
-var dis = require("../../../dispatcher");
var MatrixClientPeg = require('../../../MatrixClientPeg');
import DMRoomMap from '../../../utils/DMRoomMap';
var sdk = require('../../../index');
@@ -35,6 +34,7 @@ module.exports = React.createClass({
propTypes: {
connectDragSource: React.PropTypes.func,
connectDropTarget: React.PropTypes.func,
+ onClick: React.PropTypes.func,
isDragging: React.PropTypes.bool,
room: React.PropTypes.object.isRequired,
@@ -100,10 +100,9 @@ module.exports = React.createClass({
},
onClick: function() {
- dis.dispatch({
- action: 'view_room',
- room_id: this.props.room.roomId,
- });
+ if (this.props.onClick) {
+ this.props.onClick(this.props.room.roomId);
+ }
},
onMouseEnter: function() {
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index de30b51f1b1..230787d2412 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -128,7 +128,7 @@ module.exports = React.createClass({
uploadSection = (
Upload new:
-
+
{this.state.errorText}
);
diff --git a/src/components/views/settings/ChangeDisplayName.js b/src/components/views/settings/ChangeDisplayName.js
index 26b6c2f830a..23966c003d4 100644
--- a/src/components/views/settings/ChangeDisplayName.js
+++ b/src/components/views/settings/ChangeDisplayName.js
@@ -53,6 +53,7 @@ module.exports = React.createClass({