merge develop

src/components/views/login/PasswordLogin.js

@@ -22,7 +22,8 @@ var ReactDOM = require('react-dom');
  */
 module.exports = React.createClass({displayName: 'PasswordLogin',
     propTypes: {
-        onSubmit: React.PropTypes.func.isRequired // fn(username, password)
+        onSubmit: React.PropTypes.func.isRequired, // fn(username, password)
+        onForgotPasswordClick: React.PropTypes.func // fn()
     },
 
     getInitialState: function() {
@@ -46,6 +47,16 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
     },
 
     render: function() {
+        var forgotPasswordJsx;
+
+        if (this.props.onForgotPasswordClick) {
+            forgotPasswordJsx = (
+                <a className="mx_Login_forgot" onClick={this.props.onForgotPasswordClick} href="#">
+                    Forgot your password?
+                </a>
+            );
+        }
+
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
@@ -57,6 +68,7 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
                     value={this.state.password} onChange={this.onPasswordChanged}
                     placeholder="Password" />
                 <br />
+                {forgotPasswordJsx}
                 <input className="mx_Login_submit" type="submit" value="Log in" />
                 </form>
             </div>

src/components/views/login/RegistrationForm.js

@@ -30,6 +30,7 @@ module.exports = React.createClass({
         defaultUsername: React.PropTypes.string,
         showEmail: React.PropTypes.bool,
         minPasswordLength: React.PropTypes.number,
+        disableUsernameChanges: React.PropTypes.bool,
         onError: React.PropTypes.func,
         onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
     },
@@ -109,7 +110,8 @@ module.exports = React.createClass({
                     {emailSection}
                     <br />
                     <input className="mx_Login_field" type="text" ref="username"
-                        placeholder="User name" defaultValue={this.state.username} />
+                        placeholder="User name" defaultValue={this.state.username}
+                        disabled={this.props.disableUsernameChanges} />
                     <br />
                     <input className="mx_Login_field" type="password" ref="password"
                         placeholder="Password" defaultValue={this.state.password} />

src/components/views/rooms/MessageComposer.js

@@ -65,8 +65,17 @@ function mdownToHtml(mdown) {
 module.exports = React.createClass({
     displayName: 'MessageComposer',
 
+    statics: {
+        // the height we limit the composer to
+        MAX_HEIGHT: 100,
+    },
+
     propTypes: {
-        tabComplete: React.PropTypes.any
+        tabComplete: React.PropTypes.any,
+
+        // a callback which is called when the height of the composer is
+        // changed due to a change in content.
+        onResize: React.PropTypes.func,
     },
 
     componentWillMount: function() {
@@ -237,13 +246,15 @@ module.exports = React.createClass({
         // scrollHeight is at least equal to clientHeight, so we have to
         // temporarily crimp clientHeight to 0 to get an accurate scrollHeight value
         this.refs.textarea.style.height = "0px";
-        var newHeight = this.refs.textarea.scrollHeight < 100 ? this.refs.textarea.scrollHeight : 100;
+        var newHeight = Math.min(this.refs.textarea.scrollHeight,
+                                 this.constructor.MAX_HEIGHT);
         this.refs.textarea.style.height = Math.ceil(newHeight) + "px";
-        if (this.props.roomView) {
-            // kick gemini-scrollbar to re-layout
-            this.props.roomView.forceUpdate();
-        }
         this.oldScrollHeight = this.refs.textarea.scrollHeight;
+
+        if (this.props.onResize) {
+            // kick gemini-scrollbar to re-layout
+            this.props.onResize();
+        }
     },
 
     onKeyUp: function(ev) {

src/components/views/rooms/RoomSettings.js

@@ -77,6 +77,14 @@ module.exports = React.createClass({
         };
     },
 
+    canGuestsJoin: function() {
+        return this.refs.guests_join.checked;
+    },
+
+    canGuestsRead: function() {
+        return this.refs.guests_read.checked;
+    },
+
     getTopic: function() {
         return this.refs.topic.value;
     },
@@ -162,6 +170,10 @@ module.exports = React.createClass({
         if (history_visibility) history_visibility = history_visibility.getContent().history_visibility;
 
         var power_levels = this.props.room.currentState.getStateEvents('m.room.power_levels', '');
+        var guest_access = this.props.room.currentState.getStateEvents('m.room.guest_access', '');
+        if (guest_access) {
+            guest_access = guest_access.getContent().guest_access;
+        }
 
         var events_levels = power_levels.events || {};
 
@@ -361,8 +373,15 @@ module.exports = React.createClass({
             <div className="mx_RoomSettings">
                 <label><input type="checkbox" ref="is_private" defaultChecked={join_rule != "public"}/> Make this room private</label> <br/>
                 <label><input type="checkbox" ref="share_history" defaultChecked={history_visibility == "shared"}/> Share message history with new users</label> <br/>
-                <label><input type="checkbox" ref="guest_access" disabled={join_rule != "public"} defaultChecked={history_visibility == "world_readable"}/> Allow guest access</label> <br/>
-                <label className="mx_RoomSettings_encrypt"><input type="checkbox" /> Encrypt room</label>
+                <label>
+                    <input type="checkbox" ref="guests_read" defaultChecked={history_visibility === "world_readable"}/>
+                    Allow guests to read messages in this room
+                </label> <br/>
+                <label>
+                    <input type="checkbox" ref="guests_join" defaultChecked={guest_access === "can_join"}/>
+                    Allow guests to join this room
+                </label> <br/>
+                <label className="mx_RoomSettings_encrypt"><input type="checkbox" /> Encrypt room</label> <br/>
 
                 { room_colors_section }
 

src/components/views/voip/CallView.js

@@ -33,6 +33,12 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
 module.exports = React.createClass({
     displayName: 'CallView',
 
+    propTypes: {
+        // a callback which is called when the video within the callview
+        // due to a change in video metadata
+        onResize: React.PropTypes.func,
+    },
+
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
         if (this.props.room) {
@@ -97,7 +103,7 @@ module.exports = React.createClass({
     render: function(){
         var VideoView = sdk.getComponent('voip.VideoView');
         return (
-            <VideoView ref="video" onClick={ this.props.onClick }/>
+            <VideoView ref="video" onClick={ this.props.onClick } onResize={ this.props.onResize }/>
         );
     }
 });

src/components/views/voip/VideoFeed.js

@@ -21,9 +21,29 @@ var React = require('react');
 module.exports = React.createClass({
     displayName: 'VideoFeed',
 
+    propTypes: {
+        // a callback which is called when the video element is resized
+        // due to a change in video metadata
+        onResize: React.PropTypes.func,
+    },
+
+    componentDidMount() {
+        this.refs.vid.addEventListener('resize', this.onResize);
+    },
+
+    componentWillUnmount() {
+        this.refs.vid.removeEventListener('resize', this.onResize);
+    },
+
+    onResize: function(e) {
+        if(this.props.onResize) {
+            this.props.onResize(e);
+        }
+    },
+
     render: function() {
         return (
-            <video>
+            <video ref="vid">
             </video>
         );
     },

src/components/views/voip/VideoView.js

@@ -85,7 +85,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_VideoView" ref={this.setContainer} onClick={ this.props.onClick }>
                 <div className="mx_VideoView_remoteVideoFeed">
-                    <VideoFeed ref="remote"/>
+                    <VideoFeed ref="remote" onResize={this.props.onResize}/>
                     <audio ref="remoteAudio"/>
                 </div>
                 <div className="mx_VideoView_localVideoFeed">