+
+ );
+ }
+ else {
+ return (
+
+
+ {page_element}
+
+ {right_panel}
+
+
+
+ {page_element}
+
+ {right_panel}
+
+ );
+ }
+ } else if (this.state.logged_in) {
+ var Spinner = sdk.getComponent('elements.Spinner');
+ return (
+
+
+ );
+ } else if (this.state.screen == 'register') {
+ return (
+ Room: { cli.getRoom(roomId).name }
+
+
+ );
+ } else {
+ return (
+
+ );
+ }
+ }
+
+ var myUserId = MatrixClientPeg.get().credentials.userId;
+ if (this.state.room.currentState.members[myUserId].membership == 'invite') {
+ if (this.state.joining || this.state.rejecting) {
+ var Loader = sdk.getComponent("elements.Spinner");
+ return (
+
+
+ );
+ } else {
+ var inviteEvent = this.state.room.currentState.members[myUserId].events.member.event;
+ // XXX: Leaving this intentionally basic for now because invites are about to change totally
+ var joinErrorText = this.state.joinError ? "Failed to join room!" : "";
+ var rejectErrorText = this.state.rejectError ? "Failed to reject invite!" : "";
+ return (
+
+
+ );
+ }
+ } else {
+ var scrollheader_classes = classNames({
+ mx_RoomView_scrollheader: true,
+ loading: this.state.paginating
+ });
+
+ var statusBar = (
+
+ );
+
+ // for testing UI...
+ // this.state.upload = {
+ // uploadedBytes: 123493,
+ // totalBytes: 347534,
+ // fileName: "testing_fooble.jpg",
+ // }
+
+ if (this.state.upload) {
+ var innerProgressStyle = {
+ width: ((this.state.upload.uploadedBytes / this.state.upload.totalBytes) * 100) + '%'
+ };
+ var uploadedSize = filesize(this.state.upload.uploadedBytes);
+ var totalSize = filesize(this.state.upload.totalBytes);
+ if (uploadedSize.replace(/^.* /,'') === totalSize.replace(/^.* /,'')) {
+ uploadedSize = uploadedSize.replace(/ .*/, '');
+ }
+ statusBar = (
+
+
+ + +
+ {inviteEvent.user_id} has invited you to a room
+ + + +
{joinErrorText}
+ {rejectErrorText}
+
+ 
+ 
+
+ );
+ } else {
+ var typingString = this.getWhoIsTypingString();
+ //typingString = "Testing typing...";
+ var unreadMsgs = this.getUnreadMessagesString();
+ // no conn bar trumps unread count since you can't get unread messages
+ // without a connection! (technically may already have some but meh)
+ // It also trumps the "some not sent" msg since you can't resend without
+ // a connection!
+ if (this.state.syncState === "ERROR") {
+ statusBar = (
+
+
+
+
+
+
+ { uploadedSize } / { totalSize }
+
+ Uploading {this.state.upload.fileName}
+
+ 
+
+ );
+ }
+ else if (this.state.hasUnsentMessages) {
+ statusBar = (
+
+
+
+
+ Connectivity to the server has been lost.
+
+
+ Sent messages will be stored until your connection has returned.
+
+
+
+
+ );
+ }
+ // unread count trumps who is typing since the unread count is only
+ // set when you've scrolled up
+ else if (unreadMsgs) {
+ statusBar = (
+
+
+
+
+ Some of your messages have not been sent.
+
+
+
+ Resend all now
+ or select individual messages to re-send.
+
+
+ 
+ {unreadMsgs}
+
+ );
+ }
+ else if (typingString) {
+ statusBar = (
+
+ {unreadMsgs}
+
+
+ );
+ }
+ }
+
+ var aux = null;
+ if (this.state.editingRoomSettings) {
+ aux = ...
+ {typingString}
+
+ Ongoing conference call {supportedText}
+
+ );
+ }
+
+ var fileDropTarget = null;
+ if (this.state.draggingFile) {
+ fileDropTarget =
+
;
+ }
+
+ var messageComposer;
+ if (!this.state.searchResults) {
+ messageComposer =
+
+ 
+ Drop File Here +
+ + Drop File Here +
+
+
+
+ );
+ }
+ },
+});
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
new file mode 100644
index 0000000000..59187bb69f
--- /dev/null
+++ b/src/components/structures/UserSettings.js
@@ -0,0 +1,162 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var React = require('react');
+var sdk = require('../../index');
+var MatrixClientPeg = require("../../MatrixClientPeg");
+var Modal = require('../../Modal');
+var q = require('q');
+var version = require('../../../package.json').version;
+
+module.exports = React.createClass({
+ displayName: 'UserSettings',
+ Phases: {
+ Loading: "loading",
+ Display: "display",
+ },
+
+ getInitialState: function() {
+ return {
+ avatarUrl: null,
+ threePids: [],
+ clientVersion: version,
+ phase: this.Phases.Loading,
+ };
+ },
+
+ componentWillMount: function() {
+ var self = this;
+ var cli = MatrixClientPeg.get();
+
+ var profile_d = cli.getProfileInfo(cli.credentials.userId);
+ var threepid_d = cli.getThreePids();
+
+ q.all([profile_d, threepid_d]).then(
+ function(resps) {
+ self.setState({
+ avatarUrl: resps[0].avatar_url,
+ threepids: resps[1].threepids,
+ phase: self.Phases.Display,
+ });
+ },
+ function(err) { console.err(err); }
+ );
+ },
+
+ editAvatar: function() {
+ var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
+ var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+ var avatarDialog = (
+
+
+ { conferenceCallNotification }
+ { aux }
+
+
+ { fileDropTarget }
+
+ -
+
- + + {this.getEventTiles()} +
+
+ { messageComposer }
+
+
+ { this.state.searchResults ? null : statusBar }
+
+
+
+ );
+ this.avatarDialog = Modal.createDialogWithElement(avatarDialog);
+ },
+
+ addEmail: function() {
+
+ },
+
+ editDisplayName: function() {
+ this.refs.displayname.edit();
+ },
+
+ changePassword: function() {
+ var ChangePassword = sdk.getComponent('settings.ChangePassword');
+ Modal.createDialog(ChangePassword);
+ },
+
+ onLogoutClicked: function(ev) {
+ var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
+ this.logoutModal = Modal.createDialog(LogoutPrompt, {onCancel: this.onLogoutPromptCancel});
+ },
+
+ onLogoutPromptCancel: function() {
+ this.logoutModal.closeDialog();
+ },
+
+ onAvatarDialogCancel: function() {
+ this.avatarDialog.close();
+ },
+
+ render: function() {
+ var Loader = sdk.getComponent("elements.Spinner");
+ if (this.state.phase === this.Phases.Loading) {
+ return
+
+
+
+
+ );
+ }
+ }
+});
diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js
new file mode 100644
index 0000000000..e3ec87f8f2
--- /dev/null
+++ b/src/components/structures/login/Login.js
@@ -0,0 +1,199 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var sdk = require('../../../index');
+var Signup = require("../../../Signup");
+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
+ */
+module.exports = React.createClass({displayName: 'Login',
+ propTypes: {
+ onLoggedIn: React.PropTypes.func.isRequired,
+ homeserverUrl: React.PropTypes.string,
+ identityServerUrl: React.PropTypes.string,
+ // login shouldn't know or care how registration is done.
+ onRegisterClick: React.PropTypes.func.isRequired
+ },
+
+ getDefaultProps: function() {
+ return {
+ homeserverUrl: 'https://matrix.org/',
+ identityServerUrl: 'https://matrix.org'
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ busy: false,
+ errorText: null,
+ enteredHomeserverUrl: this.props.homeserverUrl,
+ enteredIdentityServerUrl: this.props.identityServerUrl
+ };
+ },
+
+ componentWillMount: function() {
+ this._initLoginLogic();
+ },
+
+ onPasswordLogin: function(username, password) {
+ var self = this;
+ self.setState({
+ busy: true
+ });
+
+ this._loginLogic.loginViaPassword(username, password).then(function(data) {
+ self.props.onLoggedIn(data);
+ }, function(error) {
+ self._setErrorTextFromError(error);
+ }).finally(function() {
+ self.setState({
+ busy: false
+ });
+ });
+ },
+
+ onHsUrlChanged: function(newHsUrl) {
+ this._initLoginLogic(newHsUrl);
+ },
+
+ onIsUrlChanged: function(newIsUrl) {
+ this._initLoginLogic(null, newIsUrl);
+ },
+
+ _initLoginLogic: function(hsUrl, isUrl) {
+ var self = this;
+ hsUrl = hsUrl || this.state.enteredHomeserverUrl;
+ isUrl = isUrl || this.state.enteredIdentityServerUrl;
+
+ var loginLogic = new Signup.Login(hsUrl, isUrl);
+ this._loginLogic = loginLogic;
+
+ loginLogic.getFlows().then(function(flows) {
+ // old behaviour was to always use the first flow without presenting
+ // options. This works in most cases (we don't have a UI for multiple
+ // logins so let's skip that for now).
+ loginLogic.chooseFlow(0);
+ }, function(err) {
+ self._setErrorTextFromError(err);
+ }).finally(function() {
+ self.setState({
+ busy: false
+ });
+ });
+
+ this.setState({
+ enteredHomeserverUrl: hsUrl,
+ enteredIdentityServerUrl: isUrl,
+ busy: true,
+ errorText: null // reset err messages
+ });
+ },
+
+ _getCurrentFlowStep: function() {
+ return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null
+ },
+
+ _setErrorTextFromError: function(err) {
+ if (err.friendlyText) {
+ this.setState({
+ errorText: err.friendlyText
+ });
+ return;
+ }
+
+ var errCode = err.errcode;
+ if (!errCode && err.httpStatus) {
+ errCode = "HTTP " + err.httpStatus;
+ }
+ this.setState({
+ errorText: (
+ "Error: Problem communicating with the given homeserver " +
+ (errCode ? "(" + errCode + ")" : "")
+ )
+ });
+ },
+
+ componentForStep: function(step) {
+ switch (step) {
+ case 'm.login.password':
+ return (
+
+
+
+
+ User Settings
++
+
+
+
+
+
+ Profile Photo
+
+
+ Edit
+
+
+
+
+
+ Edit
+
+
+ {this.state.threepids.map(function(val) {
+ return
+
+ {val.address}
;
+ })}
+
+ Add email
+
+
+
+
+ Global Settings
++
+
+
+ Change Password
+
+
+ Version {this.state.clientVersion}
+
+
+
+
+
+
+
+ Sorry, this homeserver is using a login which is not
+ recognised by Vector ({step})
+
+ );
+ }
+ },
+
+ render: function() {
+ var Loader = sdk.getComponent("elements.Spinner");
+ var loader = this.state.busy ?
+
+ );
+ }
+});
diff --git a/src/components/structures/login/PostRegistration.js b/src/components/structures/login/PostRegistration.js
new file mode 100644
index 0000000000..5af8d37dd8
--- /dev/null
+++ b/src/components/structures/login/PostRegistration.js
@@ -0,0 +1,80 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('../../../index');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+
+module.exports = React.createClass({
+ displayName: 'PostRegistration',
+
+ propTypes: {
+ onComplete: React.PropTypes.func.isRequired
+ },
+
+ getInitialState: function() {
+ return {
+ avatarUrl: null,
+ errorString: null,
+ busy: false
+ };
+ },
+
+ componentWillMount: function() {
+ // There is some assymetry between ChangeDisplayName and ChangeAvatar,
+ // as ChangeDisplayName will auto-get the name but ChangeAvatar expects
+ // the URL to be passed to you (because it's also used for room avatars).
+ var cli = MatrixClientPeg.get();
+ this.setState({busy: true});
+ var self = this;
+ cli.getProfileInfo(cli.credentials.userId).done(function(result) {
+ self.setState({
+ avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(result.avatar_url),
+ busy: false
+ });
+ }, function(error) {
+ self.setState({
+ errorString: "Failed to fetch avatar URL",
+ busy: false
+ });
+ });
+ },
+
+ render: function() {
+ var ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
+ var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+ return (
+
+
+
+ 
+
+
+
+
+
+ +
+ Sign in
+ { this.componentForStep(this._getCurrentFlowStep()) } +
+ { loader }
+ { this.state.errorText }
+
+
+ Create a new account
+
+ + +
+
+ );
+ }
+});
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
new file mode 100644
index 0000000000..0cb1a87752
--- /dev/null
+++ b/src/components/structures/login/Registration.js
@@ -0,0 +1,248 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+var sdk = require('../../../index');
+var MatrixClientPeg = require('../../../MatrixClientPeg');
+var dis = require('../../../dispatcher');
+var Signup = require("../../../Signup");
+var ServerConfig = require("../../views/login/ServerConfig");
+var RegistrationForm = require("../../views/login/RegistrationForm");
+var CaptchaForm = require("../../views/login/CaptchaForm");
+
+var MIN_PASSWORD_LENGTH = 6;
+
+module.exports = React.createClass({
+ displayName: 'Registration',
+
+ propTypes: {
+ onLoggedIn: React.PropTypes.func.isRequired,
+ clientSecret: React.PropTypes.string,
+ sessionId: React.PropTypes.string,
+ registrationUrl: React.PropTypes.string,
+ idSid: React.PropTypes.string,
+ hsUrl: React.PropTypes.string,
+ isUrl: React.PropTypes.string,
+ // registration shouldn't know or care how login is done.
+ onLoginClick: React.PropTypes.func.isRequired
+ },
+
+ getInitialState: function() {
+ return {
+ busy: false,
+ errorText: null,
+ enteredHomeserverUrl: this.props.hsUrl,
+ enteredIdentityServerUrl: this.props.isUrl
+ };
+ },
+
+ componentWillMount: function() {
+ this.dispatcherRef = dis.register(this.onAction);
+ // attach this to the instance rather than this.state since it isn't UI
+ this.registerLogic = new Signup.Register(
+ this.props.hsUrl, this.props.isUrl
+ );
+ this.registerLogic.setClientSecret(this.props.clientSecret);
+ this.registerLogic.setSessionId(this.props.sessionId);
+ this.registerLogic.setRegistrationUrl(this.props.registrationUrl);
+ this.registerLogic.setIdSid(this.props.idSid);
+ this.registerLogic.recheckState();
+ },
+
+ componentWillUnmount: function() {
+ dis.unregister(this.dispatcherRef);
+ },
+
+ componentDidMount: function() {
+ // may have already done an HTTP hit (e.g. redirect from an email) so
+ // check for any pending response
+ var promise = this.registerLogic.getPromise();
+ if (promise) {
+ this.onProcessingRegistration(promise);
+ }
+ },
+
+ onHsUrlChanged: function(newHsUrl) {
+ this.registerLogic.setHomeserverUrl(newHsUrl);
+ },
+
+ onIsUrlChanged: function(newIsUrl) {
+ this.registerLogic.setIdentityServerUrl(newIsUrl);
+ },
+
+ onAction: function(payload) {
+ if (payload.action !== "registration_step_update") {
+ return;
+ }
+ this.forceUpdate(); // registration state has changed.
+ },
+
+ onFormSubmit: function(formVals) {
+ var self = this;
+ this.setState({
+ errorText: "",
+ busy: true
+ });
+ this.onProcessingRegistration(this.registerLogic.register(formVals));
+ },
+
+ // Promise is resolved when the registration process is FULLY COMPLETE
+ onProcessingRegistration: function(promise) {
+ var self = this;
+ promise.done(function(response) {
+ if (!response || !response.access_token) {
+ console.warn(
+ "FIXME: Register fulfilled without a final response, " +
+ "did you break the promise chain?"
+ );
+ // no matter, we'll grab it direct
+ response = self.registerLogic.getCredentials();
+ }
+ if (!response || !response.user_id || !response.access_token) {
+ console.error("Final response is missing keys.");
+ self.setState({
+ errorText: "There was a problem processing the response."
+ });
+ return;
+ }
+ self.props.onLoggedIn({
+ userId: response.user_id,
+ homeserverUrl: self.registerLogic.getHomeserverUrl(),
+ identityServerUrl: self.registerLogic.getIdentityServerUrl(),
+ accessToken: response.access_token
+ });
+ self.setState({
+ busy: false
+ });
+ }, function(err) {
+ if (err.message) {
+ self.setState({
+ errorText: err.message
+ });
+ }
+ self.setState({
+ busy: false
+ });
+ console.log(err);
+ });
+ },
+
+ onFormValidationFailed: function(errCode) {
+ var errMsg;
+ switch (errCode) {
+ case "RegistrationForm.ERR_PASSWORD_MISSING":
+ errMsg = "Missing password.";
+ break;
+ case "RegistrationForm.ERR_PASSWORD_MISMATCH":
+ errMsg = "Passwords don't match.";
+ break;
+ case "RegistrationForm.ERR_PASSWORD_LENGTH":
+ errMsg = `Password too short (min ${MIN_PASSWORD_LENGTH}).`;
+ break;
+ default:
+ console.error("Unknown error code: %s", errCode);
+ errMsg = "An unknown error occurred.";
+ break;
+ }
+ this.setState({
+ errorText: errMsg
+ });
+ },
+
+ onCaptchaLoaded: function(divIdName) {
+ this.registerLogic.tellStage("m.login.recaptcha", {
+ divId: divIdName
+ });
+ this.setState({
+ busy: false // requires user input
+ });
+ },
+
+ _getRegisterContentJsx: function() {
+ var currStep = this.registerLogic.getStep();
+ var registerStep;
+ switch (currStep) {
+ case "Register.COMPLETE":
+ break; // NOP
+ case "Register.START":
+ case "Register.STEP_m.login.dummy":
+ registerStep = (
+
+
+
+
+
+
+
+ Set a display name:
+
+
+ Please check your email to continue registration.
+
+ );
+ break;
+ case "Register.STEP_m.login.recaptcha":
+ registerStep = (
+
+
+ );
+ },
+
+ render: function() {
+ return (
+ Create an account
+ {registerStep} +{this.state.errorText}
+ {busySpinner}
+
+
+ );
+ }
+});
diff --git a/src/controllers/organisms/ErrorDialog.js b/src/components/views/dialogs/ErrorDialog.js
similarity index 52%
rename from src/controllers/organisms/ErrorDialog.js
rename to src/components/views/dialogs/ErrorDialog.js
index d3431e4a80..af827340d0 100644
--- a/src/controllers/organisms/ErrorDialog.js
+++ b/src/components/views/dialogs/ErrorDialog.js
@@ -14,9 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+/*
+ * Usage:
+ * Modal.createDialog(ErrorDialog, {
+ * title: "some text", (default: "Error")
+ * description: "some more text",
+ * button: "Button Text",
+ * onClose: someFunction,
+ * focus: true|false (default: true)
+ * });
+ */
+
var React = require("react");
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'ErrorDialog',
propTypes: {
title: React.PropTypes.string,
button: React.PropTypes.string,
@@ -32,4 +44,22 @@ module.exports = {
focus: true,
};
},
-};
+
+ render: function() {
+ return (
+
+
+
+
+
+ {this._getRegisterContentJsx()}
+
+
+
+ );
+ }
+});
diff --git a/src/controllers/organisms/LogoutPrompt.js b/src/components/views/dialogs/LogoutPrompt.js
similarity index 59%
rename from src/controllers/organisms/LogoutPrompt.js
rename to src/components/views/dialogs/LogoutPrompt.js
index 5e5011ea97..ed58542a66 100644
--- a/src/controllers/organisms/LogoutPrompt.js
+++ b/src/components/views/dialogs/LogoutPrompt.js
@@ -13,10 +13,11 @@ 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.
*/
+var React = require('react');
+var dis = require("../../../dispatcher");
-var dis = require("../../dispatcher");
-
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'LogoutPrompt',
logOut: function() {
dis.dispatch({action: 'logout'});
if (this.props.onFinished) {
@@ -28,6 +29,20 @@ module.exports = {
if (this.props.onFinished) {
this.props.onFinished();
}
- }
-};
+ },
+
+ render: function() {
+ return (
+
+ {this.props.title}
+
+
+ {this.props.description}
+
+
+
+
+
+
+ );
+ }
+});
diff --git a/src/controllers/organisms/QuestionDialog.js b/src/components/views/dialogs/QuestionDialog.js
similarity index 52%
rename from src/controllers/organisms/QuestionDialog.js
rename to src/components/views/dialogs/QuestionDialog.js
index 30891b839d..34f1483cee 100644
--- a/src/controllers/organisms/QuestionDialog.js
+++ b/src/components/views/dialogs/QuestionDialog.js
@@ -16,7 +16,8 @@ limitations under the License.
var React = require("react");
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'QuestionDialog',
propTypes: {
title: React.PropTypes.string,
description: React.PropTypes.string,
@@ -33,4 +34,34 @@ module.exports = {
focus: true,
};
},
-};
+
+ onOk: function() {
+ this.props.onFinished(true);
+ },
+
+ onCancel: function() {
+ this.props.onFinished(false);
+ },
+
+ render: function() {
+ return (
+
+ Sign out?
+
+
+
+
+
+
+
+ );
+ }
+});
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
new file mode 100644
index 0000000000..5c4887955b
--- /dev/null
+++ b/src/components/views/login/RegistrationForm.js
@@ -0,0 +1,126 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('../../../index');
+
+/**
+ * A pure UI component which displays a registration form.
+ */
+module.exports = React.createClass({
+ displayName: 'RegistrationForm',
+
+ propTypes: {
+ defaultEmail: React.PropTypes.string,
+ defaultUsername: React.PropTypes.string,
+ showEmail: React.PropTypes.bool,
+ minPasswordLength: React.PropTypes.number,
+ onError: React.PropTypes.func,
+ onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
+ },
+
+ getDefaultProps: function() {
+ return {
+ showEmail: false,
+ minPasswordLength: 6,
+ onError: function(e) {
+ console.error(e);
+ }
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ email: this.props.defaultEmail,
+ username: this.props.defaultUsername,
+ password: null,
+ passwordConfirm: null
+ };
+ },
+
+ onSubmit: function(ev) {
+ ev.preventDefault();
+
+ var pwd1 = this.refs.password.value.trim();
+ var pwd2 = this.refs.passwordConfirm.value.trim()
+
+ var errCode;
+ if (!pwd1 || !pwd2) {
+ errCode = "RegistrationForm.ERR_PASSWORD_MISSING";
+ }
+ else if (pwd1 !== pwd2) {
+ errCode = "RegistrationForm.ERR_PASSWORD_MISMATCH";
+ }
+ else if (pwd1.length < this.props.minPasswordLength) {
+ errCode = "RegistrationForm.ERR_PASSWORD_LENGTH";
+ }
+ if (errCode) {
+ this.props.onError(errCode);
+ return;
+ }
+
+ var promise = this.props.onRegisterClick({
+ username: this.refs.username.value.trim(),
+ password: pwd1,
+ email: this.refs.email.value.trim()
+ });
+
+ if (promise) {
+ ev.target.disabled = true;
+ promise.finally(function() {
+ ev.target.disabled = false;
+ });
+ }
+ },
+
+ render: function() {
+ var emailSection, registerButton;
+ if (this.props.showEmail) {
+ emailSection = (
+
+ );
+ }
+ if (this.props.onRegisterClick) {
+ registerButton = (
+
+ );
+ }
+
+ return (
+
+ {this.props.title}
+
+
+ {this.props.description}
+
+
+
+
+
+
+
+
+
+ );
+ }
+});
diff --git a/src/components/views/login/ServerConfig.js b/src/components/views/login/ServerConfig.js
new file mode 100644
index 0000000000..39f9dc4594
--- /dev/null
+++ b/src/components/views/login/ServerConfig.js
@@ -0,0 +1,161 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var Modal = require('../../../Modal');
+var sdk = require('../../../index');
+
+/**
+ * A pure UI component which displays the HS and IS to use.
+ */
+module.exports = React.createClass({
+ displayName: 'ServerConfig',
+
+ propTypes: {
+ onHsUrlChanged: React.PropTypes.func,
+ onIsUrlChanged: React.PropTypes.func,
+ defaultHsUrl: React.PropTypes.string,
+ defaultIsUrl: React.PropTypes.string,
+ withToggleButton: React.PropTypes.bool,
+ delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
+ },
+
+ getDefaultProps: function() {
+ return {
+ onHsUrlChanged: function() {},
+ onIsUrlChanged: function() {},
+ withToggleButton: false,
+ delayTimeMs: 0
+ };
+ },
+
+ getInitialState: function() {
+ return {
+ hs_url: this.props.defaultHsUrl,
+ is_url: this.props.defaultIsUrl,
+ original_hs_url: this.props.defaultHsUrl,
+ original_is_url: this.props.defaultIsUrl,
+ // no toggle button = show, toggle button = hide
+ configVisible: !this.props.withToggleButton
+ }
+ },
+
+ onHomeserverChanged: function(ev) {
+ this.setState({hs_url: ev.target.value}, function() {
+ this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
+ this.props.onHsUrlChanged(this.state.hs_url);
+ });
+ });
+ },
+
+ onIdentityServerChanged: function(ev) {
+ this.setState({is_url: ev.target.value}, function() {
+ this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
+ this.props.onIsUrlChanged(this.state.is_url);
+ });
+ });
+ },
+
+ _waitThenInvoke: function(existingTimeoutId, fn) {
+ if (existingTimeoutId) {
+ clearTimeout(existingTimeoutId);
+ }
+ return setTimeout(fn.bind(this), this.props.delayTimeMs);
+ },
+
+ getHsUrl: function() {
+ return this.state.hs_url;
+ },
+
+ getIsUrl: function() {
+ return this.state.is_url;
+ },
+
+ onServerConfigVisibleChange: function(ev) {
+ this.setState({
+ configVisible: ev.target.checked
+ });
+ },
+
+ showHelpPopup: function() {
+ var ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+ Modal.createDialog(ErrorDialog, {
+ title: 'Custom Server Options',
+ description:
+ You can use the custom server options to log into other Matrix
+ servers by specifying a different Home server URL.
+ + This allows you to use Vector with an existing Matrix account on + a different Home server. +
+
+ You can also set a custom Identity server but this will affect + people's ability to find you if you use a server in a group other + than the main Matrix.org group. + , + button: "Dismiss", + focus: true + }); + }, + + render: function() { + var serverConfigStyle = {}; + serverConfigStyle.display = this.state.configVisible ? 'block' : 'none'; + + var toggleButton; + if (this.props.withToggleButton) { + toggleButton = ( +
+
+
+
+ );
+ }
+
+ return (
+
+ {toggleButton}
+
+ );
+ }
+});
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 0c9e50f718..6b4b441463 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -49,7 +49,7 @@ module.exports = React.createClass({
},
onKick: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var roomId = this.props.member.roomId;
var target = this.props.member.userId;
MatrixClientPeg.get().kick(roomId, target).done(function() {
@@ -66,7 +66,7 @@ module.exports = React.createClass({
},
onBan: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var roomId = this.props.member.roomId;
var target = this.props.member.userId;
MatrixClientPeg.get().ban(roomId, target).done(function() {
@@ -83,7 +83,7 @@ module.exports = React.createClass({
},
onMuteToggle: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var roomId = this.props.member.roomId;
var target = this.props.member.userId;
var room = MatrixClientPeg.get().getRoom(roomId);
@@ -127,7 +127,7 @@ module.exports = React.createClass({
},
onModToggle: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var roomId = this.props.member.roomId;
var target = this.props.member.userId;
var room = MatrixClientPeg.get().getRoom(roomId);
@@ -224,8 +224,8 @@ module.exports = React.createClass({
// FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
// Not sure what the right solution to this is.
onLeaveClick: function() {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
- var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+ var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
var roomId = this.props.member.roomId;
Modal.createDialog(QuestionDialog, {
diff --git a/src/controllers/organisms/MemberList.js b/src/components/views/rooms/MemberList.js
similarity index 67%
rename from src/controllers/organisms/MemberList.js
rename to src/components/views/rooms/MemberList.js
index 8b6733fbeb..8ca24f8992 100644
--- a/src/controllers/organisms/MemberList.js
+++ b/src/components/views/rooms/MemberList.js
@@ -13,14 +13,17 @@ 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.
*/
-
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var Modal = require("../../Modal");
-var sdk = require('../../index');
+var React = require('react');
+var classNames = require('classnames');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var Modal = require("../../../Modal");
+var sdk = require('../../../index');
+var GeminiScrollbar = require('react-gemini-scrollbar');
var INITIAL_LOAD_NUM_MEMBERS = 50;
-module.exports = {
+module.exports = React.createClass({
+ displayName: 'MemberList',
getInitialState: function() {
if (!this.props.roomId) return { members: [] };
var cli = MatrixClientPeg.get();
@@ -113,7 +116,7 @@ module.exports = {
},
onInvite: function(inputText) {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
var self = this;
inputText = inputText.trim(); // react requires es5-shim so we know trim() exists
var isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
@@ -195,6 +198,94 @@ module.exports = {
}
}
return to_display;
- }
-};
+ },
+
+
+
+ memberSort: function(userIdA, userIdB) {
+ var userA = this.memberDict[userIdA].user;
+ var userB = this.memberDict[userIdB].user;
+
+ var presenceMap = {
+ online: 3,
+ unavailable: 2,
+ offline: 1
+ };
+
+ var presenceOrdA = userA ? presenceMap[userA.presence] : 0;
+ var presenceOrdB = userB ? presenceMap[userB.presence] : 0;
+
+ if (presenceOrdA != presenceOrdB) {
+ return presenceOrdB - presenceOrdA;
+ }
+
+ var latA = userA ? (userA.lastPresenceTs - (userA.lastActiveAgo || userA.lastPresenceTs)) : 0;
+ var latB = userB ? (userB.lastPresenceTs - (userB.lastActiveAgo || userB.lastPresenceTs)) : 0;
+
+ return latB - latA;
+ },
+
+ makeMemberTiles: function(membership) {
+ var MemberTile = sdk.getComponent("rooms.MemberTile");
+
+ var self = this;
+ return self.state.members.filter(function(userId) {
+ var m = self.memberDict[userId];
+ return m.membership == membership;
+ }).map(function(userId) {
+ var m = self.memberDict[userId];
+ return (
+
+
+
+
+
+
+
+
+ What does this mean?
+
+
+
+
+ );
+ }
+ return (
+ Invited
+
+ {invitedMemberTiles}
+
+
+
+ {this.inviteTile()}
+
+
+ );
+ }
+});
diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.js
index 3d3d23e1e8..4d99529d98 100644
--- a/src/components/views/rooms/MemberTile.js
+++ b/src/components/views/rooms/MemberTile.js
@@ -31,7 +31,7 @@ module.exports = React.createClass({
},
onLeaveClick: function() {
- var QuestionDialog = sdk.getComponent("organisms.QuestionDialog");
+ var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
var roomId = this.props.member.roomId;
Modal.createDialog(QuestionDialog, {
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 932fa8c5a7..36be8829ff 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -272,7 +272,7 @@ module.exports = React.createClass({
this.markdownEnabled = false;
}
else {
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Unknown command",
description: "Usage: /markdown on|off"
@@ -292,7 +292,7 @@ module.exports = React.createClass({
console.log("Command success.");
}, function(err) {
console.error("Command failure: %s", err);
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Server error",
description: err.message
@@ -301,7 +301,7 @@ module.exports = React.createClass({
}
else if (cmd.error) {
console.error(cmd.error);
- var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
+ var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createDialog(ErrorDialog, {
title: "Command error",
description: cmd.error
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
new file mode 100644
index 0000000000..b228a50fe9
--- /dev/null
+++ b/src/components/views/rooms/RoomList.js
@@ -0,0 +1,303 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+var React = require("react");
+var ReactDOM = require("react-dom");
+var GeminiScrollbar = require('react-gemini-scrollbar');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+var RoomListSorter = require("../../../RoomListSorter");
+var dis = require("../../../dispatcher");
+var sdk = require('../../../index');
+
+var HIDE_CONFERENCE_CHANS = true;
+
+module.exports = React.createClass({
+ displayName: 'RoomList',
+
+ propTypes: {
+ ConferenceHandler: React.PropTypes.any, // e.g. VectorConferenceHandler
+ collapsed: React.PropTypes.bool,
+ currentRoom: React.PropTypes.string
+ },
+
+ getInitialState: function() {
+ return {
+ activityMap: null,
+ lists: {},
+ }
+ },
+
+ componentWillMount: function() {
+ var cli = MatrixClientPeg.get();
+ cli.on("Room", this.onRoom);
+ cli.on("Room.timeline", this.onRoomTimeline);
+ cli.on("Room.name", this.onRoomName);
+ cli.on("Room.tags", this.onRoomTags);
+ cli.on("RoomState.events", this.onRoomStateEvents);
+ cli.on("RoomMember.name", this.onRoomMemberName);
+
+ var s = this.getRoomLists();
+ s.activityMap = {};
+ this.setState(s);
+ },
+
+ componentDidMount: function() {
+ this.dispatcherRef = dis.register(this.onAction);
+ },
+
+ onAction: function(payload) {
+ switch (payload.action) {
+ case 'view_tooltip':
+ this.tooltip = payload.tooltip;
+ this._repositionTooltip();
+ if (this.tooltip) this.tooltip.style.display = 'block';
+ break
+ }
+ },
+
+ componentWillUnmount: function() {
+ dis.unregister(this.dispatcherRef);
+ 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("RoomState.events", this.onRoomStateEvents);
+ }
+ },
+
+ componentWillReceiveProps: function(newProps) {
+ this.state.activityMap[newProps.selectedRoom] = undefined;
+ this.setState({
+ activityMap: this.state.activityMap
+ });
+ },
+
+ onRoom: function(room) {
+ this.refreshRoomList();
+ },
+
+ onRoomTimeline: function(ev, room, toStartOfTimeline) {
+ if (toStartOfTimeline) return;
+
+ var hl = 0;
+ if (
+ room.roomId != this.props.selectedRoom &&
+ ev.getSender() != MatrixClientPeg.get().credentials.userId)
+ {
+ // don't mark rooms as unread for just member changes
+ if (ev.getType() != "m.room.member") {
+ hl = 1;
+ }
+
+ var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
+ if (actions && actions.tweaks && actions.tweaks.highlight) {
+ hl = 2;
+ }
+ }
+
+ if (hl > 0) {
+ var newState = this.getRoomLists();
+
+ // obviously this won't deep copy but this shouldn't be necessary
+ var amap = this.state.activityMap;
+ amap[room.roomId] = Math.max(amap[room.roomId] || 0, hl);
+
+ newState.activityMap = amap;
+
+ this.setState(newState);
+ }
+ },
+
+ onRoomName: function(room) {
+ this.refreshRoomList();
+ },
+
+ onRoomTags: function(event, room) {
+ this.refreshRoomList();
+ },
+
+ onRoomStateEvents: function(ev, state) {
+ setTimeout(this.refreshRoomList, 0);
+ },
+
+ onRoomMemberName: function(ev, member) {
+ setTimeout(this.refreshRoomList, 0);
+ },
+
+ refreshRoomList: function() {
+ // TODO: rather than bluntly regenerating and re-sorting everything
+ // every time we see any kind of room change from the JS SDK
+ // we could do incremental updates on our copy of the state
+ // based on the room which has actually changed. This would stop
+ // us re-rendering all the sublists every time anything changes anywhere
+ // in the state of the client.
+ this.setState(this.getRoomLists());
+ },
+
+ getRoomLists: function() {
+ var self = this;
+ var s = { lists: {} };
+
+ s.lists["m.invite"] = [];
+ s.lists["m.favourite"] = [];
+ s.lists["m.recent"] = [];
+ s.lists["m.lowpriority"] = [];
+ s.lists["m.archived"] = [];
+
+ MatrixClientPeg.get().getRooms().forEach(function(room) {
+ var me = room.getMember(MatrixClientPeg.get().credentials.userId);
+
+ if (me && me.membership == "invite") {
+ s.lists["m.invite"].push(room);
+ }
+ else {
+ var shouldShowRoom = (
+ me && (me.membership == "join")
+ );
+
+ // hiding conf rooms only ever toggles shouldShowRoom to false
+ if (shouldShowRoom && HIDE_CONFERENCE_CHANS) {
+ // we want to hide the 1:1 conf<->user room and not the group chat
+ var joinedMembers = room.getJoinedMembers();
+ if (joinedMembers.length === 2) {
+ var otherMember = joinedMembers.filter(function(m) {
+ return m.userId !== me.userId
+ })[0];
+ var ConfHandler = self.props.ConferenceHandler;
+ if (ConfHandler && ConfHandler.isConferenceUser(otherMember)) {
+ // console.log("Hiding conference 1:1 room %s", room.roomId);
+ shouldShowRoom = false;
+ }
+ }
+ }
+
+ if (shouldShowRoom) {
+ var tagNames = Object.keys(room.tags);
+ if (tagNames.length) {
+ for (var i = 0; i < tagNames.length; i++) {
+ var tagName = tagNames[i];
+ s.lists[tagName] = s.lists[tagName] || [];
+ s.lists[tagNames[i]].push(room);
+ }
+ }
+ else {
+ s.lists["m.recent"].push(room);
+ }
+ }
+ }
+ });
+
+ //console.log("calculated new roomLists; m.recent = " + s.lists["m.recent"]);
+
+ // we actually apply the sorting to this when receiving the prop in RoomSubLists.
+
+ return s;
+ },
+
+ _repositionTooltip: function(e) {
+ if (this.tooltip && this.tooltip.parentElement) {
+ var scroll = ReactDOM.findDOMNode(this);
+ this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.children[2].scrollTop) + "px";
+ }
+ },
+
+ onShowClick: function() {
+ dis.dispatch({
+ action: 'show_left_panel',
+ });
+ },
+
+ render: function() {
+ var expandButton = this.props.collapsed ?
+
+
+ {invitedSection}
+
+ {this.makeMemberTiles('join')}
+
+ 
:
+ null;
+
+ var RoomSubList = sdk.getComponent('organisms.RoomSubList');
+ var self = this;
+
+ return (
+
+ { expandButton }
+
+
+