Allow to customize Custom OAuth login button

client/stylesheets/base.less

@@ -3546,9 +3546,6 @@ a.github-fork {
 		padding: 0;
 		-webkit-flex-grow: 1;
 		flex-grow: 1;
-		span {
-			display: none;
-		}
 	}
 }
 

client/views/login/services.coffee

@@ -8,11 +8,10 @@ Template.loginServices.helpers
 	loginService: ->
 		services = []
 
-		authServices = _.pluck ServiceConfiguration.configurations.find({}, { service: 1 }).fetch(), 'service'
+		authServices = ServiceConfiguration.configurations.find({}, { sort: {service: 1} }).fetch()
 
-		authServices.sort()
 		authServices.forEach (service) ->
-			switch service
+			switch service.service
 				when 'meteor-developer'
 					serviceName = 'Meteor'
 					icon = 'meteor'
@@ -21,10 +20,10 @@ Template.loginServices.helpers
 					icon = 'github-circled'
 				when 'gitlab'
 					serviceName = 'Gitlab'
-					icon = service
+					icon = service.service
 				else
-					serviceName = _.capitalize service
-					icon = service
+					serviceName = _.capitalize service.service
+					icon = service.service
 
 			services.push
 				service: service

client/views/login/services.html

@@ -2,7 +2,7 @@
 	{{#if loginService.length}}
 		<div class="social-login">
 			{{#each loginService}}
-				<button type="button" class="button external-login {{service}}"><i class="icon-{{icon}} service-icon"></i><i class="icon-spin4 animate-spin loading-icon hidden"></i><span>{{displayName}}</span></button>
+				<button type="button" class="button external-login {{service.service}}" title="{{displayName}}" style="{{#if service.buttonColor}}background-color:{{service.buttonColor}};{{/if}}{{#if service.buttonLabelColor}}color:{{service.buttonLabelColor}};{{/if}}"><i class="icon-{{icon}} service-icon"></i><i class="icon-spin4 animate-spin loading-icon hidden"></i><span>{{service.buttonLabelText}}</span></button>
 			{{/each}}
 		</div>
 	{{/if}}

i18n/en.i18n.json

@@ -29,6 +29,9 @@
   "Accounts_OAuth_Custom_Identity_Path": "Identity Path",
   "Accounts_OAuth_Custom_Secret": "Secret",
   "Accounts_OAuth_Custom_Enable": "Enable",
+  "Accounts_OAuth_Custom_Button_Label_Text": "Button Text",
+  "Accounts_OAuth_Custom_Button_Label_Color": "Button Text Color",
+  "Accounts_OAuth_Custom_Button_Color": "Button Color",
   "Add_Members" : "Add Members",
   "Add_users" : "Add users",
   "Administration" : "Administration",

packages/rocketchat-lib/settings/server/addOAuthService.coffee

 Meteor.methods
 	addOAuthService: (name) ->
-		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}"              , false          , { type: 'boolean', group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Enable'}
-		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_url"          , ''             , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_URL'}
-		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_token_path"   , '/oauth/token' , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Token_Path'}
-		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_identity_path", '/me'          , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Identity_Path'}
-		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_id"           , ''             , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_ID'}
-		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_secret"       , ''             , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Secret'}
+		name = s.capitalize(name)
+		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}"                   , false          , { type: 'boolean', group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Enable'}
+		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_url"               , ''             , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_URL'}
+		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_token_path"        , '/oauth/token' , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Token_Path'}
+		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_identity_path"     , '/me'          , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Identity_Path'}
+		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_id"                , ''             , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_ID'}
+		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_secret"            , ''             , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Secret'}
+		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_button_label_text" , ''             , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Button_Label_Text'}
+		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_button_label_color", '#FFFFFF'      , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Button_Label_Color'}
+		RocketChat.settings.add "Accounts_OAuth_Custom_#{name}_button_color"      , '#13679A'      , { type: 'string' , group: 'Accounts', section: name, i18nLabel: 'Accounts_OAuth_Custom_Button_Color'}

packages/rocketchat-lib/settings/server/updateServices.coffee

@@ -24,6 +24,9 @@ updateServices = ->
 					data.serverURL = Settings.findOne({_id: "#{service._id}_url"})?.value
 					data.tokenPath = Settings.findOne({_id: "#{service._id}_token_path"})?.value
 					data.identityPath = Settings.findOne({_id: "#{service._id}_identity_path"})?.value
+					data.buttonLabelText = Settings.findOne({_id: "#{service._id}_button_label_text"})?.value
+					data.buttonLabelColor = Settings.findOne({_id: "#{service._id}_button_label_color"})?.value
+					data.buttonColor = Settings.findOne({_id: "#{service._id}_button_color"})?.value
 					new CustomOAuth serviceName.toLowerCase(),
 						serverURL: data.serverURL
 						tokenPath: data.tokenPath