Move the login box from the left sidebar to where the composer is

Fixes https://github.com/vector-im/riot-web/issues/4227

This includes removing the collapse button that isn't needed anymore.

res/css/structures/_LoginBox.scss

@@ -19,6 +19,7 @@ limitations under the License.
     height: unset !important;
     padding-top: 13px !important;
     padding-bottom: 14px !important;
+    order: 4;
 }
 
 .mx_LoginBox_loginButton_wrapper {

src/components/structures/LeftPanel.js

@@ -181,14 +181,8 @@ var LeftPanel = React.createClass({
         const BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
         const CallPreview = sdk.getComponent('voip.CallPreview');
 
-        let topBox;
+        const SearchBox = sdk.getComponent('structures.SearchBox');
-        if (this.context.matrixClient.isGuest()) {
+        const topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
-            const LoginBox = sdk.getComponent('structures.LoginBox');
-            topBox = <LoginBox collapsed={ this.props.collapsed }/>;
-        } else {
-            const SearchBox = sdk.getComponent('structures.SearchBox');
-            topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
-        }
 
         const classes = classNames(
             "mx_LeftPanel",

src/components/structures/LoginBox.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,31 +17,15 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
 import { _t } from '../../languageHandler';
-var sdk = require('../../index')
+const dis = require('../../dispatcher');
-var dis = require('../../dispatcher');
+const AccessibleButton = require('../../components/views/elements/AccessibleButton');
-var rate_limited_func = require('../../ratelimitedfunc');
-var AccessibleButton = require('../../components/views/elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'LoginBox',
 
     propTypes: {
-        collapsed: React.PropTypes.bool,
-    },
-
-    onToggleCollapse: function(show) {
-        if (show) {
-            dis.dispatch({
-                action: 'show_left_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_left_panel',
-            });
-        }
     },
 
     onLoginClick: function() {
@@ -52,41 +37,20 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var TintableSvg = sdk.getComponent('elements.TintableSvg');
+        const loginButton = (
-
+            <div className="mx_LoginBox_loginButton_wrapper">
-        var toggleCollapse;
+                <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
-        if (this.props.collapsed) {
+                    { _t("Login") }
-            toggleCollapse =
-                <AccessibleButton className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/>
                 </AccessibleButton>
-        }
+                <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
-        else {
+                    { _t("Register") }
-            toggleCollapse =
-                <AccessibleButton className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
-                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/>
                 </AccessibleButton>
-        }
+            </div>
+        );
 
-        var loginButton;
-        if (!this.props.collapsed) {
-            loginButton = (
-                <div className="mx_LoginBox_loginButton_wrapper">
-                    <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
-                        { _t("Login") }
-                    </AccessibleButton>
-                    <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
-                        { _t("Register") }
-                    </AccessibleButton>
-                </div>
-            );
-        }
-
-        var self = this;
         return (
-            <div className="mx_SearchBox mx_LoginBox">
+            <div className="mx_LoginBox">
                 { loginButton }
-                { toggleCollapse }
             </div>
         );
     }

src/components/structures/RoomView.js

@@ -1669,7 +1669,7 @@ module.exports = React.createClass({
         let messageComposer, searchInfo;
         const canSpeak = (
             // joined and not showing search results
-            myMembership == 'join' && !this.state.searchResults
+            myMembership === 'join' && !this.state.searchResults
         );
         if (canSpeak) {
             messageComposer =
@@ -1683,6 +1683,11 @@ module.exports = React.createClass({
                 />;
         }
 
+        if (MatrixClientPeg.get().isGuest()) {
+            const LoginBox = sdk.getComponent('structures.LoginBox');
+            messageComposer = <LoginBox/>;
+        }
+
         // TODO: Why aren't we storing the term/scope/count in this format
         // in this.state if this is what RoomHeader desires?
         if (this.state.searchResults) {