WIP

src/UserSettingsStore.js

@@ -180,6 +180,21 @@ export default {
         });
     },
 
+    getTheme: function() {
+        let syncedSettings;
+        let theme;
+        if (MatrixClientPeg.get()) {
+            syncedSettings = this.getSyncedSettings();
+        }
+        if (!syncedSettings || !syncedSettings.theme) {
+            theme = SdkConfig.get().default_theme || 'light';
+        }
+        else {
+            theme = syncedSettings.theme;
+        }
+        return theme;
+    },
+
     getSyncedSettings: function() {
         const event = MatrixClientPeg.get().getAccountData('im.vector.web.settings');
         return event ? event.getContent() : {};

src/components/structures/login/Login.js

@@ -329,13 +329,17 @@ module.exports = React.createClass({
 
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
+        const LoginPageHeader = sdk.getComponent("login.LoginPageHeader");
+        const LoginPageFooter = sdk.getComponent("login.LoginPageFooter");
         const LoginHeader = sdk.getComponent("login.LoginHeader");
         const LoginFooter = sdk.getComponent("login.LoginFooter");
         const ServerConfig = sdk.getComponent("login.ServerConfig");
         const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
+        const theme = UserSettingsStore.getTheme();
+
         let loginAsGuestJsx;
-        if (this.props.enableGuest) {
+        if (this.props.enableGuest && theme !== 'status') {
             loginAsGuestJsx =
                 <a className="mx_Login_create" onClick={this._onLoginAsGuestClick} href="#">
                     { _t('Login as guest') }
@@ -343,42 +347,49 @@ module.exports = React.createClass({
         }
 
         let returnToAppJsx;
-        if (this.props.onCancelClick) {
+        if (this.props.onCancelClick && theme !== 'status') {
             returnToAppJsx =
                 <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
                     { _t('Return to app') }
                 </a>;
         }
 
+        let serverConfig;
+        if (theme !== 'status') {
+            serverConfig = <ServerConfig ref="serverConfig"
+                withToggleButton={true}
+                customHsUrl={this.props.customHsUrl}
+                customIsUrl={this.props.customIsUrl}
+                defaultHsUrl={this.props.defaultHsUrl}
+                defaultIsUrl={this.props.defaultIsUrl}
+                onServerConfigChange={this.onServerConfigChange}
+                delayTimeMs={1000} />;
+        }
+
         return (
             <div className="mx_Login">
+                <LoginPageHeader />
                 <div className="mx_Login_box">
                     <LoginHeader />
                     <div>
-                        <h2>{ _t('Sign in') }
+                        <h2>{ theme !== 'status' ? _t('Sign in') : _t('Sign in to get started') }
                             { loader }
                         </h2>
-                        { this.componentForStep(this.state.currentFlow) }
-                        <ServerConfig ref="serverConfig"
-                            withToggleButton={true}
-                            customHsUrl={this.props.customHsUrl}
-                            customIsUrl={this.props.customIsUrl}
-                            defaultHsUrl={this.props.defaultHsUrl}
-                            defaultIsUrl={this.props.defaultIsUrl}
-                            onServerConfigChange={this.onServerConfigChange}
-                            delayTimeMs={1000} />
                         <div className="mx_Login_error">
                                 { this.state.errorText }
                         </div>
+                        { this.componentForStep(this.state.currentFlow) }
+                        { serverConfig }
                         <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
                             { _t('Create an account') }
                         </a>
                         { loginAsGuestJsx }
                         { returnToAppJsx }
-                        { this._renderLanguageSetting() }
+                        { theme !== 'status' ? this._renderLanguageSetting() : '' }
                         <LoginFooter />
                     </div>
                 </div>
+                <LoginPageFooter />
             </div>
         );
     },

src/components/views/login/LoginPageFooter.js

@@ -0,0 +1,30 @@
+/*
+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 { _t } from '../../../languageHandler';
+import React from 'react';
+
+module.exports = React.createClass({
+    displayName: 'LoginPageFooter',
+
+    render: function() {
+        return (
+            <div/>
+        );
+    },
+});

src/components/views/login/LoginPageHeader.js

@@ -0,0 +1,47 @@
+/*
+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 UserSettingsStore from '../../../UserSettingsStore';
+
+const React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'LoginPageHeader',
+
+    render: function() {
+        let themeBranding;
+        if (UserSettingsStore.getTheme() === 'status') {
+            themeBranding = <div>
+                <div className="mx_LoginPageHeader_brand">
+                    <img src="themes/status/img/logo.svg" alt="Status" width="221" height="53"/>
+                </div>
+                <div className="mx_LoginPageHeader_title">
+                    <h1>Status Community Chat</h1>
+                    <div className="mx_LoginPageHeader_subtitle">
+                        A safer, decentralised communication platform <a href="https://riot.im">powered by Riot</a>
+                    </div>
+                </div>
+            </div>;   
+        }
+        else {
+            themeBranding = <div/>;
+        }
+
+        return themeBranding;
+    },
+});

src/i18n/strings/en_EN.json

@@ -475,6 +475,7 @@
     "Sign in with": "Sign in with",
     "Email address": "Email address",
     "Sign in": "Sign in",
+    "Sign in to get started": "Sign in to get started",
     "If you don't specify an email address, you won't be able to reset your password. Are you sure?": "If you don't specify an email address, you won't be able to reset your password. Are you sure?",
     "Email address (optional)": "Email address (optional)",
     "You are registering with %(SelectedTeamName)s": "You are registering with %(SelectedTeamName)s",