White label login options screen - Experimental (#944)

* White label login options screen

* Move colors to server side config

* Rename config options to experimental

app/screens/login/login.js

@@ -299,15 +299,28 @@ class Login extends PureComponent {
                 />
             );
         } else {
+            const additionalStyle = {};
+            if (this.props.config.EmailLoginButtonColor) {
+                additionalStyle.backgroundColor = this.props.config.EmailLoginButtonColor;
+            }
+            if (this.props.config.EmailLoginButtonBorderColor) {
+                additionalStyle.borderColor = this.props.config.EmailLoginButtonBorderColor;
+            }
+
+            const additionalTextStyle = {};
+            if (this.props.config.EmailLoginButtonTextColor) {
+                additionalTextStyle.color = this.props.config.EmailLoginButtonTextColor;
+            }
+
             proceed = (
                 <Button
                     onPress={this.preSignIn}
-                    containerStyle={GlobalStyles.signupButton}
+                    containerStyle={[GlobalStyles.signupButton, additionalStyle]}
                 >
                     <FormattedText
                         id='login.signIn'
                         defaultMessage='Sign in'
-                        style={GlobalStyles.signupButtonText}
+                        style={[GlobalStyles.signupButtonText, additionalTextStyle]}
                     />
                 </Button>
             );

app/screens/login_options/login_options.js

@@ -20,6 +20,7 @@ import StatusBar from 'app/components/status_bar';
 import {GlobalStyles} from 'app/styles';
 import {preventDoubleTap} from 'app/utils/tap';
 
+import LocalConfig from 'assets/config';
 import gitlab from 'assets/images/gitlab.png';
 import logo from 'assets/images/logo.png';
 
@@ -82,17 +83,30 @@ class LoginOptions extends PureComponent {
 
     renderEmailOption = () => {
         const {config} = this.props;
-        if (config.EnableSignInWithEmail === 'true' || config.EnableSignInWithUsername === 'true') {
+        const forceHideFromLocal = LocalConfig.HideEmailLoginExperimental;
+
+        if (!forceHideFromLocal && (config.EnableSignInWithEmail === 'true' || config.EnableSignInWithUsername === 'true')) {
+            const backgroundColor = config.EmailLoginButtonColor || '#2389d7';
+            const additionalStyle = {
+                backgroundColor
+            };
+
+            if (config.hasOwnProperty('EmailLoginButtonBorderColor')) {
+                additionalStyle.borderColor = config.EmailLoginButtonBorderColor;
+            }
+
+            const textColor = config.EmailLoginButtonTextColor || 'white';
+
             return (
                 <Button
                     key='email'
                     onPress={() => preventDoubleTap(this.goToLogin, this)}
-                    containerStyle={[GlobalStyles.signupButton, {backgroundColor: '#2389d7'}]}
+                    containerStyle={[GlobalStyles.signupButton, additionalStyle]}
                 >
                     <FormattedText
                         id='signup.email'
                         defaultMessage='Email and Password'
-                        style={[GlobalStyles.signupButtonText, {color: 'white'}]}
+                        style={[GlobalStyles.signupButtonText, {color: textColor}]}
                     />
                 </Button>
             );
@@ -103,11 +117,24 @@ class LoginOptions extends PureComponent {
 
     renderLdapOption = () => {
         const {config, license} = this.props;
-        if (license.IsLicensed === 'true' && config.EnableLdap === 'true') {
+        const forceHideFromLocal = LocalConfig.HideLDAPLoginExperimental;
+
+        if (!forceHideFromLocal && license.IsLicensed === 'true' && config.EnableLdap === 'true') {
+            const backgroundColor = config.LDAPLoginButtonColor || '#2389d7';
+            const additionalStyle = {
+                backgroundColor
+            };
+
+            if (config.hasOwnProperty('LDAPLoginButtonBorderColor')) {
+                additionalStyle.borderColor = config.LDAPLoginButtonBorderColor;
+            }
+
+            const textColor = config.LDAPLoginButtonTextColor || 'white';
+
             let buttonText;
             if (config.LdapLoginFieldName) {
                 buttonText = (
-                    <Text style={[GlobalStyles.signupButtonText, {color: 'white'}]}>
+                    <Text style={[GlobalStyles.signupButtonText, {color: textColor}]}>
                         {config.LdapLoginFieldName}
                     </Text>
                 );
@@ -116,7 +143,7 @@ class LoginOptions extends PureComponent {
                     <FormattedText
                         id='login.ldapUsernameLower'
                         defaultMessage='AD/LDAP username'
-                        style={[GlobalStyles.signupButtonText, {color: 'white'}]}
+                        style={[GlobalStyles.signupButtonText, {color: textColor}]}
                     />
                 );
             }
@@ -125,7 +152,7 @@ class LoginOptions extends PureComponent {
                 <Button
                     key='ldap'
                     onPress={() => preventDoubleTap(this.goToLogin, this)}
-                    containerStyle={[GlobalStyles.signupButton, {backgroundColor: '#2389d7'}]}
+                    containerStyle={[GlobalStyles.signupButton, additionalStyle]}
                 >
                     {buttonText}
                 </Button>
@@ -137,10 +164,13 @@ class LoginOptions extends PureComponent {
 
     renderGitlabOption = () => {
         const {config, serverVersion} = this.props;
+
+        const forceHideFromLocal = LocalConfig.HideGitLabLoginExperimental;
+
         const match = serverVersion.match(/^[0-9]*.[0-9]*.[0-9]*(-[a-zA-Z0-9.-]*)?/g);
         if (match) {
             const version = match[0];
-            if (config.EnableSignUpWithGitLab === 'true' && semver.valid(version) && semver.gte(version, 'v3.10.0')) {
+            if (!forceHideFromLocal && config.EnableSignUpWithGitLab === 'true' && semver.valid(version) && semver.gte(version, 'v3.10.0')) {
                 return (
                     <Button
                         key='gitlab'
@@ -167,15 +197,29 @@ class LoginOptions extends PureComponent {
 
     renderSamlOption = () => {
         const {config, license} = this.props;
-        if (config.EnableSaml === 'true' && license.IsLicensed === 'true' && license.SAML === 'true') {
+        const forceHideFromLocal = LocalConfig.HideSAMLLoginExperimental;
+
+        if (!forceHideFromLocal && config.EnableSaml === 'true' && license.IsLicensed === 'true' && license.SAML === 'true') {
+            const backgroundColor = config.SamlLoginButtonColor || '#34a28b';
+
+            const additionalStyle = {
+                backgroundColor
+            };
+
+            if (config.SAMLLoginButtonBorderColor) {
+                additionalStyle.borderColor = config.SamlLoginButtonBorderColor;
+            }
+
+            const textColor = config.SamlLoginButtonTextColor || 'white';
+
             return (
                 <Button
                     key='saml'
                     onPress={() => preventDoubleTap(this.goToSSO, this, ViewTypes.SAML)}
-                    containerStyle={[GlobalStyles.signupButton, {backgroundColor: '#34a28b'}]}
+                    containerStyle={[GlobalStyles.signupButton, additionalStyle]}
                 >
                     <Text
-                        style={[GlobalStyles.signupButtonText, {color: 'white'}]}
+                        style={[GlobalStyles.signupButtonText, {color: textColor}]}
                     >
                         {config.SamlLoginButtonText}
                     </Text>

assets/base/config.json

@@ -13,6 +13,11 @@
     "SegmentApiKey": "3MT7rAoC0OP7yy3ThzqFSAtKzmzqtUPX",
     "ExperimentalUsernamePressIsMention": false,
 
+    "HideEmailLoginExperimental": false,
+    "HideGitLabLoginExperimental": false,
+    "HideLDAPLoginExperimental": false,
+    "HideSAMLLoginExperimental": false,
+
     "SentryEnabled": false,
     "SentryDsnIos": "",
     "SentryDsnAndroid": "",

scripts/make-dist-assets.js

@@ -85,5 +85,4 @@ function leftMergeDirs(rootA, rootB, dest, path) {
 
 // Assumes dist/assets exists and is empty
 leftMergeDirs('assets/base/', 'assets/override/', 'dist/assets/', '');
-
 /* eslint-enable no-console */