Merge remote-tracking branch 'origin/experimental' into dbkr/delint_compatpage_loggedinview

.eslintignore.errorfiles

@@ -1,9 +1,9 @@
 # autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
 
 src/component-index.js
+src/components/structures/auth/ForgotPassword.js
 src/components/structures/BottomLeftMenu.js
 src/components/structures/CreateRoom.js
-src/components/structures/login/ForgotPassword.js
 src/components/structures/MessagePanel.js
 src/components/structures/NotificationPanel.js
 src/components/structures/RoomDirectory.js
@@ -13,6 +13,11 @@ src/components/structures/ScrollPanel.js
 src/components/structures/SearchBox.js
 src/components/structures/TimelinePanel.js
 src/components/structures/UploadBar.js
+src/components/views/auth/CountryDropdown.js
+src/components/views/auth/InteractiveAuthEntryComponents.js
+src/components/views/auth/PasswordLogin.js
+src/components/views/auth/RegistrationForm.js
+src/components/views/auth/ServerConfig.js
 src/components/views/avatars/BaseAvatar.js
 src/components/views/avatars/MemberAvatar.js
 src/components/views/create_room/RoomAlias.js
@@ -29,11 +34,6 @@ src/components/views/elements/UserSelector.js
 src/components/views/globals/MatrixToolbar.js
 src/components/views/globals/NewVersionBar.js
 src/components/views/globals/UpdateCheckBar.js
-src/components/views/login/CountryDropdown.js
-src/components/views/login/InteractiveAuthEntryComponents.js
-src/components/views/login/PasswordLogin.js
-src/components/views/login/RegistrationForm.js
-src/components/views/login/ServerConfig.js
 src/components/views/messages/MFileBody.js
 src/components/views/messages/RoomAvatarEvent.js
 src/components/views/messages/TextualBody.js
@@ -96,12 +96,12 @@ src/VectorConferenceHandler.js
 src/Velociraptor.js
 src/WhoIsTyping.js
 src/wrappers/withMatrixClient.js
-test/components/structures/login/Registration-test.js
+test/components/structures/auth/Registration-test.js
 test/components/structures/MessagePanel-test.js
 test/components/structures/ScrollPanel-test.js
 test/components/structures/TimelinePanel-test.js
+test/components/views/auth/RegistrationForm-test.js
 test/components/views/dialogs/InteractiveAuthDialog-test.js
-test/components/views/login/RegistrationForm-test.js
 test/components/views/rooms/MessageComposerInput-test.js
 test/components/views/rooms/RoomSettings-test.js
 test/mock-clock.js

res/css/_components.scss

@@ -8,7 +8,6 @@
 @import "./structures/_GroupView.scss";
 @import "./structures/_HomePage.scss";
 @import "./structures/_LeftPanel.scss";
-@import "./structures/_LoginBox.scss";
 @import "./structures/_MatrixChat.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NotificationPanel.scss";
@@ -23,7 +22,13 @@
 @import "./structures/_UploadBar.scss";
 @import "./structures/_UserSettings.scss";
 @import "./structures/_ViewSource.scss";
-@import "./structures/login/_Login.scss";
+@import "./structures/auth/_Login.scss";
+@import "./views/auth/_AuthButtons.scss";
+@import "./views/auth/_AuthFooter.scss";
+@import "./views/auth/_AuthHeader.scss";
+@import "./views/auth/_AuthPage.scss";
+@import "./views/auth/_InteractiveAuthEntryComponents.scss";
+@import "./views/auth/_ServerConfig.scss";
 @import "./views/avatars/_BaseAvatar.scss";
 @import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
@@ -75,8 +80,6 @@
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
 @import "./views/groups/_GroupUserSettings.scss";
-@import "./views/login/_InteractiveAuthEntryComponents.scss";
-@import "./views/login/_ServerConfig.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
 @import "./views/messages/_MEmoteBody.scss";

res/css/structures/auth/_Login.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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.
@@ -14,41 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_Login {
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    overflow: auto;
-}
-
-.mx_Login h2 {
-    font-weight: 300;
-    margin-top: 32px;
-    margin-bottom: 20px;
-}
-
-.mx_Login_box {
-    width: 300px;
-    min-height: 450px;
-    padding-top: 50px;
-    padding-bottom: 50px;
-    margin: auto;
-}
-
-.mx_Login_logo {
-    text-align: center;
-    height: 150px;
-    margin-bottom: 45px;
-}
-
-.mx_Login_logo img {
-    max-height: 100%
-}
-
 .mx_Login_support {
     text-align: center;
     font-size: 13px;
@@ -115,19 +81,6 @@ limitations under the License.
     color: $primary-fg-color;
 }
 
-.mx_Login_links {
-    display: block;
-    text-align: center;
-    margin-top: 15px;
-    width: 100%;
-    font-size: 13px;
-    opacity: 0.8;
-}
-
-.mx_Login_links a:link {
-   color: $primary-fg-color;
-}
-
 .mx_Login_prompt {
     padding-top: 15px;
     padding-bottom: 15px;

res/css/views/auth/_AuthButtons.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 OpenMarket Ltd
+Copyright 2019 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.
@@ -14,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_LoginBox {
+.mx_AuthButtons {
     min-height: 24px;
     height: unset !important;
     padding-top: 13px !important;
@@ -22,13 +23,13 @@ limitations under the License.
     order: 4;
 }
 
-.mx_LoginBox_loginButton_wrapper {
+.mx_AuthButtons_loginButton_wrapper {
     text-align: center;
     width: 100%;
 }
 
-.mx_LoginBox_loginButton,
+.mx_AuthButtons_loginButton,
-.mx_LoginBox_registerButton {
+.mx_AuthButtons_registerButton {
     margin-top: 3px;
     height: 40px;
     border: 0px;

res/css/views/auth/_AuthFooter.scss

@@ -0,0 +1,28 @@
+/*
+Copyright 2019 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.
+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.
+*/
+
+.mx_AuthFooter {
+  display: block;
+  text-align: center;
+  margin-top: 15px;
+  width: 100%;
+  font-size: 13px;
+  opacity: 0.8;
+}
+
+.mx_AuthFooter a:link {
+ color: $primary-fg-color;
+}

res/css/views/auth/_AuthHeader.scss

@@ -0,0 +1,25 @@
+/*
+Copyright 2019 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.
+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.
+*/
+
+.mx_AuthHeader_logo {
+  text-align: center;
+  height: 150px;
+  margin-bottom: 45px;
+}
+
+.mx_AuthHeader_logo img {
+  max-height: 100%
+}

res/css/views/auth/_AuthPage.scss

@@ -0,0 +1,40 @@
+/*
+Copyright 2019 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.
+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.
+*/
+
+.mx_AuthPage {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  overflow: auto;
+}
+
+.mx_AuthPage h2 {
+  font-weight: 300;
+  margin-top: 32px;
+  margin-bottom: 20px;
+}
+
+.mx_AuthPage_modal {
+  width: 300px;
+  min-height: 450px;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  margin: auto;
+}

res/css/views/elements/_Field.scss

@@ -26,12 +26,12 @@ limitations under the License.
     border-radius: 4px;
     transition: border-color 0.25s;
     border: 1px solid $input-border-color;
-    padding: 8px 10px;
+    padding: 8px 9px;
 }
 
 .mx_Field input:focus {
     outline: 0;
-    border-color: $input-valid-border-color;
+    border-color: $input-focused-border-color;
 }
 
 .mx_Field input::placeholder {
@@ -56,7 +56,7 @@ limitations under the License.
     position: absolute;
     left: 0px;
     top: 0px;
-    margin: 6px 8px;
+    margin: 7px 8px;
     padding: 2px;
 }
 
@@ -73,5 +73,5 @@ limitations under the License.
 }
 
 .mx_Field input:focus + label {
-    color: $input-valid-border-color;
+    color: $input-focused-border-color;
 }

res/themes/dharma/css/_dharma.scss

@@ -71,6 +71,7 @@ $input-darker-bg-color: rgba(193, 201, 214, 0.29);
 $input-darker-fg-color: #9fa9ba;
 $input-lighter-bg-color: #f2f5f8;
 $input-lighter-fg-color: $input-darker-fg-color;
+$input-focused-border-color: #238cf5;
 $input-valid-border-color: #7ac9a1;
 
 $field-focused-label-bg-color: #ffffff;
@@ -246,8 +247,8 @@ input[type=password] {
 }
 
 .dark-panel {
-    :not(.mx_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field) > input[type=text],
-    :not(.mx_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field) > input[type=search],
     .mx_textinput {
         color: $input-darker-fg-color;
         background-color: $input-darker-bg-color;
@@ -256,8 +257,8 @@ input[type=password] {
 }
 
 .light-panel {
-    :not(.mx_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field) > input[type=text],
-    :not(.mx_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field) > input[type=search],
     .mx_textinput {
         color: $input-lighter-fg-color;
         background-color: $input-lighter-bg-color;
@@ -294,6 +295,13 @@ input[type=search]::-webkit-search-results-decoration {
 .input[type=search]::-moz-placeholder {
     color: #a5aab2;
 }
+
+// Override Firefox's UA style so we get a consistent look across browsers
+input::placeholder,
+textarea::placeholder {
+    opacity: initial;
+}
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

res/themes/light/css/_base.scss

@@ -73,6 +73,7 @@ $button-bg-color: #7ac9a1;
 $button-fg-color: white;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
+$input-focused-border-color: #238cf5;
 $input-valid-border-color: #7ac9a1;
 
 $field-focused-label-bg-color: #ffffff;

src/components/structures/InteractiveAuth.js

@@ -20,7 +20,7 @@ const InteractiveAuth = Matrix.InteractiveAuth;
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
+import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';
 
 export default React.createClass({
     displayName: 'InteractiveAuth',

src/components/structures/MatrixChat.js

@@ -183,7 +183,7 @@ export default React.createClass({
             register_is_url: null,
             register_id_sid: null,
 
-            // Parameters used for setting up the login/registration views
+            // Parameters used for setting up the authentication views
             defaultServerName: this.props.config.default_server_name,
             defaultHsUrl: this.props.config.default_hs_url,
             defaultIsUrl: this.props.config.default_is_url,
@@ -1851,7 +1851,7 @@ export default React.createClass({
 
         // needs to be before normal PageTypes as you are logged in technically
         if (this.state.view === VIEWS.POST_REGISTRATION) {
-            const PostRegistration = sdk.getComponent('structures.login.PostRegistration');
+            const PostRegistration = sdk.getComponent('structures.auth.PostRegistration');
             return (
                 <PostRegistration
                     onComplete={this.onFinishPostRegistration} />
@@ -1906,7 +1906,7 @@ export default React.createClass({
         }
 
         if (this.state.view === VIEWS.REGISTER) {
-            const Registration = sdk.getComponent('structures.login.Registration');
+            const Registration = sdk.getComponent('structures.auth.Registration');
             return (
                 <Registration
                     clientSecret={this.state.register_client_secret}
@@ -1935,7 +1935,7 @@ export default React.createClass({
 
 
         if (this.state.view === VIEWS.FORGOT_PASSWORD) {
-            const ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
+            const ForgotPassword = sdk.getComponent('structures.auth.ForgotPassword');
             return (
                 <ForgotPassword
                     defaultServerName={this.getDefaultServerName()}
@@ -1951,7 +1951,7 @@ export default React.createClass({
         }
 
         if (this.state.view === VIEWS.LOGIN) {
-            const Login = sdk.getComponent('structures.login.Login');
+            const Login = sdk.getComponent('structures.auth.Login');
             return (
                 <Login
                     onLoggedIn={Lifecycle.setLoggedIn}

src/components/structures/RoomView.js

@@ -1757,8 +1757,8 @@ module.exports = React.createClass({
         }
 
         if (MatrixClientPeg.get().isGuest()) {
-            const LoginBox = sdk.getComponent('structures.LoginBox');
+            const AuthButtons = sdk.getComponent('views.auth.AuthButtons');
-            messageComposer = <LoginBox />;
+            messageComposer = <AuthButtons />;
         }
 
         // TODO: Why aren't we storing the term/scope/count in this format

src/components/structures/auth/ForgotPassword.js

@@ -183,10 +183,10 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const LoginPage = sdk.getComponent("login.LoginPage");
+        const AuthPage = sdk.getComponent("auth.AuthPage");
-        const LoginHeader = sdk.getComponent("login.LoginHeader");
+        const AuthHeader = sdk.getComponent("auth.AuthHeader");
-        const LoginFooter = sdk.getComponent("login.LoginFooter");
+        const AuthFooter = sdk.getComponent("auth.AuthFooter");
-        const ServerConfig = sdk.getComponent("login.ServerConfig");
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
         const Spinner = sdk.getComponent("elements.Spinner");
 
         let resetPasswordJsx;
@@ -234,7 +234,7 @@ module.exports = React.createClass({
                 errorText = <div className="mx_Login_error">{ err }</div>;
             }
 
-            const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+            const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
 
             resetPasswordJsx = (
             <div>
@@ -272,7 +272,7 @@ module.exports = React.createClass({
                         { _t('Create an account') }
                     </a>
                     <LanguageSelector />
-                    <LoginFooter />
+                    <AuthFooter />
                 </div>
             </div>
             );
@@ -280,12 +280,10 @@ module.exports = React.createClass({
 
 
         return (
-            <LoginPage>
+            <AuthPage>
-                <div className="mx_Login_box">
+                <AuthHeader />
-                    <LoginHeader />
+                { resetPasswordJsx }
-                    { resetPasswordJsx }
+            </AuthPage>
-                </div>
-            </LoginPage>
         );
     },
 });

src/components/structures/auth/Login.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 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.
@@ -24,7 +24,6 @@ import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import Login from '../../../Login';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore from "../../../settings/SettingsStore";
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 import { AutoDiscovery } from "matrix-js-sdk";
 
@@ -487,7 +486,7 @@ module.exports = React.createClass({
     },
 
     _renderPasswordStep: function() {
-        const PasswordLogin = sdk.getComponent('login.PasswordLogin');
+        const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
         return (
             <PasswordLogin
                onSubmit={this.onPasswordLogin}
@@ -516,10 +515,10 @@ module.exports = React.createClass({
 
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
-        const LoginPage = sdk.getComponent("login.LoginPage");
+        const AuthPage = sdk.getComponent("auth.AuthPage");
-        const LoginHeader = sdk.getComponent("login.LoginHeader");
+        const AuthHeader = sdk.getComponent("auth.AuthHeader");
-        const LoginFooter = sdk.getComponent("login.LoginFooter");
+        const AuthFooter = sdk.getComponent("auth.AuthFooter");
-        const ServerConfig = sdk.getComponent("login.ServerConfig");
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
         const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
         const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText;
@@ -533,7 +532,6 @@ module.exports = React.createClass({
         }
 
         let serverConfig;
-        let header;
 
         if (!SdkConfig.get()['disable_custom_urls']) {
             serverConfig = <ServerConfig ref="serverConfig"
@@ -546,15 +544,7 @@ module.exports = React.createClass({
                 delayTimeMs={1000} />;
         }
 
-        // FIXME: remove status.im theme tweaks
+        const header = <h2>{ _t('Sign in') } { loader }</h2>;
-        const theme = SettingsStore.getValue("theme");
-        if (theme !== "status") {
-            header = <h2>{ _t('Sign in') } { loader }</h2>;
-        } else {
-            if (!errorText) {
-                header = <h2>{ _t('Sign in to get started') } { loader }</h2>;
-            }
-        }
 
         let errorTextSection;
         if (errorText) {
@@ -565,26 +555,24 @@ module.exports = React.createClass({
             );
         }
 
-        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+        const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
 
         return (
-            <LoginPage>
+            <AuthPage>
-                <div className="mx_Login_box">
+                <AuthHeader />
-                    <LoginHeader />
+                <div>
-                    <div>
+                    { header }
-                        { header }
+                    { errorTextSection }
-                        { errorTextSection }
+                    { this.componentForStep(this.state.currentFlow) }
-                        { this.componentForStep(this.state.currentFlow) }
+                    { serverConfig }
-                        { serverConfig }
+                    <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
-                        <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
+                        { _t('Create an account') }
-                            { _t('Create an account') }
+                    </a>
-                        </a>
+                    { loginAsGuestJsx }
-                        { loginAsGuestJsx }
+                    <LanguageSelector />
-                        <LanguageSelector />
+                    <AuthFooter />
-                        <LoginFooter />
-                    </div>
                 </div>
-            </LoginPage>
+            </AuthPage>
         );
     },
 });

src/components/structures/auth/PostRegistration.js

@@ -60,23 +60,21 @@ module.exports = React.createClass({
     render: function() {
         const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
         const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
-        const LoginPage = sdk.getComponent('login.LoginPage');
+        const AuthPage = sdk.getComponent('auth.AuthPage');
-        const LoginHeader = sdk.getComponent('login.LoginHeader');
+        const AuthHeader = sdk.getComponent('auth.AuthHeader');
         return (
-            <LoginPage>
+            <AuthPage>
-                <div className="mx_Login_box">
+                <AuthHeader />
-                    <LoginHeader />
+                <div className="mx_Login_profile">
-                    <div className="mx_Login_profile">
+                    { _t('Set a display name:') }
-                        { _t('Set a display name:') }
+                    <ChangeDisplayName />
-                        <ChangeDisplayName />
+                    { _t('Upload an avatar:') }
-                        { _t('Upload an avatar:') }
+                    <ChangeAvatar
-                        <ChangeAvatar
+                        initialAvatarUrl={this.state.avatarUrl} />
-                            initialAvatarUrl={this.state.avatarUrl} />
+                    <button onClick={this.props.onComplete}>{ _t('Continue') }</button>
-                        <button onClick={this.props.onComplete}>{ _t('Continue') }</button>
+                    { this.state.errorString }
-                        { this.state.errorString }
-                    </div>
                 </div>
-            </LoginPage>
+            </AuthPage>
         );
     },
 });

src/components/structures/auth/Registration.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 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.
@@ -24,11 +24,10 @@ import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import RegistrationForm from '../../views/login/RegistrationForm';
+import RegistrationForm from '../../views/auth/RegistrationForm';
 import RtsClient from '../../../RtsClient';
 import { _t, _td } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore from "../../../settings/SettingsStore";
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 
 const MIN_PASSWORD_LENGTH = 6;
@@ -397,14 +396,12 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const LoginHeader = sdk.getComponent('login.LoginHeader');
+        const AuthHeader = sdk.getComponent('auth.AuthHeader');
-        const LoginFooter = sdk.getComponent('login.LoginFooter');
+        const AuthFooter = sdk.getComponent('auth.AuthFooter');
-        const LoginPage = sdk.getComponent('login.LoginPage');
+        const AuthPage = sdk.getComponent('auth.AuthPage');
         const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
         const Spinner = sdk.getComponent("elements.Spinner");
-        const ServerConfig = sdk.getComponent('views.login.ServerConfig');
+        const ServerConfig = sdk.getComponent('views.auth.ServerConfig');
-
-        const theme = SettingsStore.getValue("theme");
 
         let registerBody;
         if (this.state.doingUIAuth) {
@@ -458,47 +455,39 @@ module.exports = React.createClass({
             );
         }
 
-        let header;
         let errorText;
-        // FIXME: remove hardcoded Status team tweaks at some point
         const err = this.state.errorText || this.props.defaultServerDiscoveryError;
-        if (theme === 'status' && err) {
+        const header = <h2>{ _t('Create an account') }</h2>;
-            header = <div className="mx_Login_error">{ err }</div>;
+        if (err) {
-        } else {
+            errorText = <div className="mx_Login_error">{ err }</div>;
-            header = <h2>{ _t('Create an account') }</h2>;
-            if (err) {
-                errorText = <div className="mx_Login_error">{ err }</div>;
-            }
         }
 
         let signIn;
         if (!this.state.doingUIAuth) {
             signIn = (
                 <a className="mx_Login_create" onClick={this.onLoginClick} href="#">
-                    { theme === 'status' ? _t('Sign in') : _t('I already have an account') }
+                    { _t('I already have an account') }
                 </a>
             );
         }
 
-        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+        const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
 
         return (
-            <LoginPage>
+            <AuthPage>
-                <div className="mx_Login_box">
+                <AuthHeader
-                    <LoginHeader
+                    icon={this.state.teamSelected ?
-                        icon={this.state.teamSelected ?
+                        this.props.teamServerConfig.teamServerURL + "/static/common/" +
-                            this.props.teamServerConfig.teamServerURL + "/static/common/" +
+                        this.state.teamSelected.domain + "/icon.png" :
-                            this.state.teamSelected.domain + "/icon.png" :
+                        null}
-                            null}
+                />
-                    />
+                { header }
-                    { header }
+                { registerBody }
-                    { registerBody }
+                { signIn }
-                    { signIn }
+                { errorText }
-                    { errorText }
+                <LanguageSelector />
-                    <LanguageSelector />
+                <AuthFooter />
-                    <LoginFooter />
+            </AuthPage>
-                </div>
-            </LoginPage>
         );
     },
 });

src/components/views/auth/AuthButtons.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 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.
@@ -18,12 +18,12 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
-import { _t } from '../../languageHandler';
+import { _t } from '../../../languageHandler';
-const dis = require('../../dispatcher');
+const dis = require('../../../dispatcher');
-const AccessibleButton = require('../../components/views/elements/AccessibleButton');
+const AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
-    displayName: 'LoginBox',
+    displayName: 'AuthButtons',
 
     propTypes: {
     },
@@ -38,18 +38,18 @@ module.exports = React.createClass({
 
     render: function() {
         const loginButton = (
-            <div className="mx_LoginBox_loginButton_wrapper">
+            <div className="mx_AuthButtons_loginButton_wrapper">
-                <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
+                <AccessibleButton className="mx_AuthButtons_loginButton" element="button" onClick={this.onLoginClick}>
                     { _t("Login") }
                 </AccessibleButton>
-                <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
+                <AccessibleButton className="mx_AuthButtons_registerButton" element="button" onClick={this.onRegisterClick}>
                     { _t("Register") }
                 </AccessibleButton>
             </div>
         );
 
         return (
-            <div className="mx_LoginBox">
+            <div className="mx_AuthButtons">
                 { loginButton }
             </div>
         );

src/components/views/auth/AuthFooter.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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.
@@ -20,11 +21,11 @@ import { _t } from '../../../languageHandler';
 import React from 'react';
 
 module.exports = React.createClass({
-    displayName: 'LoginFooter',
+    displayName: 'AuthFooter',
 
     render: function() {
         return (
-            <div className="mx_Login_links">
+            <div className="mx_AuthFooter">
                 <a href="https://matrix.org">{ _t("powered by Matrix") }</a>
             </div>
         );

src/components/views/auth/AuthHeader.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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.
@@ -19,12 +20,14 @@ limitations under the License.
 const React = require('react');
 
 module.exports = React.createClass({
-    displayName: 'LoginHeader',
+    displayName: 'AuthHeader',
 
     render: function() {
         return (
-            <div className="mx_Login_logo">
+            <div className="mx_AuthHeader">
-                Matrix
+                <div className="mx_AuthHeader_logo">
+                    Matrix
+                </div>
             </div>
         );
     },

src/components/views/auth/AuthPage.js

@@ -0,0 +1,34 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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.
+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';
+
+const React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'AuthPage',
+
+    render: function() {
+        return (
+            <div className="mx_AuthPage">
+                <div className="mx_AuthPage_modal">
+                    { this.props.children }
+                </div>
+            </div>
+        );
+    },
+});

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -187,7 +187,7 @@ export const RecaptchaAuthEntry = React.createClass({
             return <Loader />;
         }
 
-        const CaptchaForm = sdk.getComponent("views.login.CaptchaForm");
+        const CaptchaForm = sdk.getComponent("views.auth.CaptchaForm");
         const sitePublicKey = this.props.stageParams.public_key;
 
         let errorSection;

src/components/views/auth/PasswordLogin.js

@@ -201,7 +201,7 @@ class PasswordLogin extends React.Component {
                     disabled={disabled}
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
-                const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+                const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
                 classes.mx_Login_phoneNumberField = true;
                 classes.mx_Login_field_has_prefix = true;
                 classes.error = this.props.loginIncorrect && !this.state.phoneNumber;

src/components/views/auth/RegistrationForm.js

@@ -323,7 +323,7 @@ module.exports = React.createClass({
             }
         }
 
-        const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
         let phoneSection;
         if (!SdkConfig.get().disable_3pid_login) {
             const phonePlaceholder = this._authStepIsRequired('m.login.msisdn') ? _t("Mobile phone number") : _t("Mobile phone number (optional)");

src/components/views/auth/ServerConfig.js

@@ -138,7 +138,7 @@ module.exports = React.createClass({
     },
 
     showHelpPopup: function() {
-        const CustomServerDialog = sdk.getComponent('login.CustomServerDialog');
+        const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
         Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
     },
 

src/components/views/login/LoginPage.js

@@ -1,59 +0,0 @@
-/*
-Copyright 2015, 2016 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';
-
-import SettingsStore from "../../../settings/SettingsStore";
-
-const React = require('react');
-
-module.exports = React.createClass({
-    displayName: 'LoginPage',
-
-    render: function() {
-        // FIXME: this should be turned into a proper skin with a StatusLoginPage component
-        if (SettingsStore.getValue("theme") === 'status') {
-            return (
-                <div className="mx_StatusLogin">
-                    <div className="mx_StatusLogin_brand">
-                        <img src="themes/status/img/logo.svg" alt="Status" width="221" height="53" />
-                    </div>
-                    <div className="mx_StatusLogin_content">
-                        <div className="mx_StatusLogin_header">
-                            <h1>Status Community Chat</h1>
-                            <div className="mx_StatusLogin_subtitle">
-                                A safer, decentralised communication
-                                platform <a href="https://riot.im">powered by Riot</a>
-                            </div>
-                        </div>
-                        { this.props.children }
-                        <div className="mx_StatusLogin_footer">
-                            <p>This channel is for our development community.</p>
-                            <p>Interested in SNT and discussions on the cryptocurrency market?</p>
-                            <p><a href="https://t.me/StatusNetworkChat" target="_blank" className="mx_StatusLogin_footer_cta">Join Telegram Chat</a></p>
-                        </div>
-                    </div>
-                </div>
-            );
-        } else {
-            return (
-                <div className="mx_Login">
-                    { this.props.children }
-                </div>
-            );
-        }
-    },
-});

src/components/views/settings/AddPhoneNumber.js

@@ -141,7 +141,7 @@ export default withMatrixClient(React.createClass({
             return <div />;
         }
 
-        const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
         // XXX: This CSS relies on the CSS surrounding it in UserSettings as its in
         // a tabular format to align the submit buttons
         return (

src/i18n/strings/en_EN.json

@@ -1328,7 +1328,6 @@
     "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
     "Sign in with single sign-on": "Sign in with single sign-on",
     "Try the app first": "Try the app first",
-    "Sign in to get started": "Sign in to get started",
     "Failed to fetch avatar URL": "Failed to fetch avatar URL",
     "Set a display name:": "Set a display name:",
     "Upload an avatar:": "Upload an avatar:",

src/stores/LifecycleStore.js

@@ -22,8 +22,8 @@ const INITIAL_STATE = {
 };
 
 /**
- * A class for storing application state to do with login/registration. This is a simple
+ * A class for storing application state to do with authentication. This is a simple flux
- * flux store that listens for actions and updates its state accordingly, informing any
+ * store that listens for actions and updates its state accordingly, informing any
  * listeners (views) of state changes.
  */
 class LifecycleStore extends Store {

test/components/structures/auth/Registration-test.js

@@ -23,7 +23,7 @@ const expect = require('expect');
 const testUtils = require('test-utils');
 
 const sdk = require('matrix-react-sdk');
-const Registration = sdk.getComponent('structures.login.Registration');
+const Registration = sdk.getComponent('structures.auth.Registration');
 
 let rtsClient;
 let client;

test/components/views/auth/RegistrationForm-test.js

@@ -23,7 +23,7 @@ const expect = require('expect');
 const testUtils = require('test-utils');
 
 const sdk = require('matrix-react-sdk');
-const RegistrationForm = sdk.getComponent('views.login.RegistrationForm');
+const RegistrationForm = sdk.getComponent('views.auth.RegistrationForm');
 
 const TEAM_CONFIG = {
     supportEmail: "support@some.domain",