From eb4b7c78a048b5ad2494e48ec6ab34c4d170bf52 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 25 Oct 2017 02:04:02 +0100
Subject: [PATCH] skin register screen

---
 .../structures/login/Registration.js          | 46 +++++++++++------
 .../views/login/RegistrationForm.js           | 50 +++++++++++--------
 2 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 8151c1e65c..15e6b536c4 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -26,6 +26,7 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import RegistrationForm from '../../views/login/RegistrationForm';
 import RtsClient from '../../../RtsClient';
 import { _t } from '../../../languageHandler';
+import UserSettingsStore from '../../../UserSettingsStore';
 
 const MIN_PASSWORD_LENGTH = 6;
 
@@ -327,6 +328,8 @@ module.exports = React.createClass({
         const Spinner = sdk.getComponent("elements.Spinner");
         const ServerConfig = sdk.getComponent('views.login.ServerConfig');
 
+        const theme = UserSettingsStore.getTheme();
+
         let registerBody;
         if (this.state.doingUIAuth) {
             registerBody = (
@@ -345,9 +348,19 @@ module.exports = React.createClass({
         } else if (this.state.busy || this.state.teamServerBusy) {
             registerBody = <Spinner />;
         } else {
-            let errorSection;
-            if (this.state.errorText) {
-                errorSection = <div className="mx_Login_error">{ this.state.errorText }</div>;
+            let serverConfigSection;
+            if (theme !== 'status') {
+                serverConfigSection = (
+                    <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}
+                    />
+                );
             }
             registerBody = (
                 <div>
@@ -363,16 +376,7 @@ module.exports = React.createClass({
                         onRegisterClick={this.onFormSubmit}
                         onTeamSelected={this.onTeamSelected}
                     />
-                    { errorSection }
-                    <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}
-                    />
+                    { serverConfigSection }
                 </div>
             );
         }
@@ -385,6 +389,17 @@ module.exports = React.createClass({
                 </a>
             );
         }
+
+        let header;
+        let errorText;
+        if (theme === 'status' && this.state.errorText) {
+            header = <div className="mx_Login_error">{ this.state.errorText }</div>;
+        }
+        else {
+            header = <h2>{ _t('Create an account') }</h2>;
+            errorText = <div className="mx_Login_error">{ this.state.errorText }</div>;
+        }
+
         return (
             <LoginPage>
                 <div className="mx_Login_box">
@@ -394,11 +409,12 @@ module.exports = React.createClass({
                             this.state.teamSelected.domain + "/icon.png" :
                             null}
                     />
-                    <h2>{ _t('Create an account') }</h2>
+                    { header }
                     { registerBody }
                     <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
-                        { _t('I already have an account') }
+                        { theme === 'status' ? _t('Sign in') : _t('I already have an account') }
                     </a>
+                    { errorText }
                     { returnToAppJsx }
                     <LoginFooter />
                 </div>
diff --git a/src/components/views/login/RegistrationForm.js b/src/components/views/login/RegistrationForm.js
index 9c7c75b125..7574b68418 100644
--- a/src/components/views/login/RegistrationForm.js
+++ b/src/components/views/login/RegistrationForm.js
@@ -22,6 +22,7 @@ import Email from '../../../email';
 import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
+import UserSettingsStore from '../../../UserSettingsStore';
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_COUNTRY = 'field_phone_country';
@@ -305,29 +306,34 @@ module.exports = React.createClass({
             }
         }
 
+        const theme = UserSettingsStore.getTheme();
+
         const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
-        const phoneSection = (
-            <div className="mx_Login_phoneSection">
-                <CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
-                    className="mx_Login_phoneCountry mx_Login_field_prefix"
-                    value={this.state.phoneCountry}
-                    isSmall={true}
-                    showPrefix={true}
-                />
-                <input type="text" ref="phoneNumber"
-                    placeholder={_t("Mobile phone number (optional)")}
-                    defaultValue={this.props.defaultPhoneNumber}
-                    className={this._classForField(
-                        FIELD_PHONE_NUMBER,
-                        'mx_Login_phoneNumberField',
-                        'mx_Login_field',
-                        'mx_Login_field_has_prefix',
-                    )}
-                    onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}}
-                    value={self.state.phoneNumber}
-                />
-            </div>
-        );
+        let phoneSection;
+        if (theme !== "status") {
+            phoneSection = (
+                <div className="mx_Login_phoneSection">
+                    <CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
+                        className="mx_Login_phoneCountry mx_Login_field_prefix"
+                        value={this.state.phoneCountry}
+                        isSmall={true}
+                        showPrefix={true}
+                    />
+                    <input type="text" ref="phoneNumber"
+                        placeholder={_t("Mobile phone number (optional)")}
+                        defaultValue={this.props.defaultPhoneNumber}
+                        className={this._classForField(
+                            FIELD_PHONE_NUMBER,
+                            'mx_Login_phoneNumberField',
+                            'mx_Login_field',
+                            'mx_Login_field_has_prefix',
+                        )}
+                        onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}}
+                        value={self.state.phoneNumber}
+                    />
+                </div>
+            );
+        }
 
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} />