fix: Login services button colors (#32570)

.changeset/fifty-mails-admire.md

@@ -0,0 +1,8 @@
+---
+'@rocket.chat/web-ui-registration': patch
+"@rocket.chat/meteor": minor
+---
+
+Login services button was not respecting the button color and text color settings. Implemented a fix to respect these settings and change the button colors accordingly.
+
+Added a warning on all settings which allow admins to change OAuth button colors, so that they can be alerted about WCAG (Web Content Accessibility Guidelines) compliance.

apps/meteor/app/meteor-accounts-saml/server/lib/settings.ts

@@ -230,10 +230,12 @@ export const addSettings = async function (name: string): Promise<void> {
 					await this.add(`SAML_Custom_${name}_button_label_color`, '#FFFFFF', {
 						type: 'string',
 						i18nLabel: 'Accounts_OAuth_Custom_Button_Label_Color',
+						alert: 'OAuth_button_colors_alert',
 					});
 					await this.add(`SAML_Custom_${name}_button_color`, '#1d74f5', {
 						type: 'string',
 						i18nLabel: 'Accounts_OAuth_Custom_Button_Color',
+						alert: 'OAuth_button_colors_alert',
 					});
 				});
 

apps/meteor/server/lib/oauth/addOAuthService.ts

@@ -118,13 +118,15 @@ export async function addOAuthService(name: string, values: { [k: string]: strin
 		section: `Custom OAuth: ${name}`,
 		i18nLabel: 'Accounts_OAuth_Custom_Button_Label_Color',
 		persistent: true,
+		alert: 'OAuth_button_colors_alert',
 	});
 	await settingsRegistry.add(`Accounts_OAuth_Custom-${name}-button_color`, values.buttonColor || '#1d74f5', {
 		type: 'string',
 		group: 'OAuth',
 		section: `Custom OAuth: ${name}`,
 		i18nLabel: 'Accounts_OAuth_Custom_Button_Color',
 		persistent: true,
+		alert: 'OAuth_button_colors_alert',
 	});
 	await settingsRegistry.add(`Accounts_OAuth_Custom-${name}-key_field`, values.keyField || 'username', {
 		type: 'select',

apps/meteor/server/settings/cas.ts

@@ -33,8 +33,8 @@ export const createCasSettings = () =>
 			await this.add('CAS_popup_width', 810, { type: 'int', group: 'CAS', public: true });
 			await this.add('CAS_popup_height', 610, { type: 'int', group: 'CAS', public: true });
 			await this.add('CAS_button_label_text', 'CAS', { type: 'string', group: 'CAS' });
-			await this.add('CAS_button_label_color', '#FFFFFF', { type: 'color', group: 'CAS' });
-			await this.add('CAS_button_color', '#1d74f5', { type: 'color', group: 'CAS' });
+			await this.add('CAS_button_label_color', '#FFFFFF', { type: 'color', group: 'CAS', alert: 'OAuth_button_colors_alert' });
+			await this.add('CAS_button_color', '#1d74f5', { type: 'color', group: 'CAS', alert: 'OAuth_button_colors_alert' });
 			await this.add('CAS_autoclose', true, { type: 'boolean', group: 'CAS' });
 		});
 	});

apps/meteor/server/settings/oauth.ts

@@ -115,12 +115,14 @@ export const createOauthSettings = () =>
 				public: true,
 				i18nLabel: 'Accounts_OAuth_Custom_Button_Label_Color',
 				persistent: true,
+				alert: 'OAuth_button_colors_alert',
 			});
 			await this.add('Accounts_OAuth_Nextcloud_button_color', '#0082c9', {
 				type: 'string',
 				public: true,
 				i18nLabel: 'Accounts_OAuth_Custom_Button_Color',
 				persistent: true,
+				alert: 'OAuth_button_colors_alert',
 			});
 		});
 
@@ -273,11 +275,13 @@ export const createOauthSettings = () =>
 				type: 'string',
 				i18nLabel: 'Accounts_OAuth_Custom_Button_Label_Color',
 				persistent: true,
+				alert: 'OAuth_button_colors_alert',
 			});
 			await this.add('Accounts_OAuth_Dolphin_button_color', '#1d74f5', {
 				type: 'string',
 				i18nLabel: 'Accounts_OAuth_Custom_Button_Color',
 				persistent: true,
+				alert: 'OAuth_button_colors_alert',
 			});
 		});
 		await this.section('Facebook', async function () {

apps/meteor/tests/e2e/page-objects/auth.ts

@@ -20,7 +20,7 @@ export class Registration {
 	}
 
 	get btnLoginWithSaml(): Locator {
-		return this.page.locator('role=button[name="SAML"]');
+		return this.page.locator('role=button[name="SAML test login button"]');
 	}
 
 	get btnLoginWithGoogle(): Locator {

apps/meteor/tests/e2e/saml.spec.ts

@@ -10,6 +10,7 @@ import * as constants from './config/constants';
 import { createUserFixture } from './fixtures/collections/users';
 import { Users } from './fixtures/userStates';
 import { Registration } from './page-objects';
+import { convertHexToRGB } from './utils/convertHexToRGB';
 import { createCustomRole, deleteCustomRole } from './utils/custom-role';
 import { getUserInfo } from './utils/getUserInfo';
 import { parseMeteorResponse } from './utils/parseMeteorResponse';
@@ -59,6 +60,8 @@ const resetTestData = async ({ api, cleanupOnly = false }: { api?: any; cleanupO
 		{ _id: 'SAML_Custom_Default_issuer', value: 'http://localhost:3000/_saml/metadata/test-sp' },
 		{ _id: 'SAML_Custom_Default_entry_point', value: 'http://localhost:8080/simplesaml/saml2/idp/SSOService.php' },
 		{ _id: 'SAML_Custom_Default_idp_slo_redirect_url', value: 'http://localhost:8080/simplesaml/saml2/idp/SingleLogoutService.php' },
+		{ _id: 'SAML_Custom_Default_button_label_text', value: 'SAML test login button' },
+		{ _id: 'SAML_Custom_Default_button_color', value: '#185925' },
 	];
 
 	await Promise.all(settings.map(({ _id, value }) => setSettingValueById(api, _id, value)));
@@ -152,6 +155,10 @@ test.describe('SAML', () => {
 			await expect(poRegistration.btnLoginWithSaml).toBeVisible({ timeout: 10000 });
 		});
 
+		await test.step('expect to have SAML login button to have the required background color', async () => {
+			await expect(poRegistration.btnLoginWithSaml).toHaveCSS('background-color', convertHexToRGB('#185925'));
+		});
+
 		await test.step('expect to be redirected to the IdP for login', async () => {
 			await poRegistration.btnLoginWithSaml.click();
 

apps/meteor/tests/e2e/utils/convertHexToRGB.ts

@@ -0,0 +1,9 @@
+export const convertHexToRGB = (hex: string) => {
+	hex = hex.replace(/^#/, '');
+
+	const red = parseInt(hex.substring(0, 2), 16);
+	const green = parseInt(hex.substring(2, 4), 16);
+	const blue = parseInt(hex.substring(4, 6), 16);
+
+	return `rgb(${red}, ${green}, ${blue})`;
+};

packages/i18n/src/locales/en.i18n.json

@@ -3982,6 +3982,7 @@
   "OAuth": "OAuth",
   "OAuth_Description": "Configure authentication methods beyond just username and password.",
   "OAuth_Application": "OAuth Application",
+  "OAuth_button_colors_alert": "Changing the color may result in non-compliance with WCAG (Web Content Accessibility Guidelines) requirements. Please ensure that the new colors meet the recommended contrast and readability standards to maintain accessibility for all users.",
   "Objects": "Objects",
   "Off": "Off",
   "Off_the_record_conversation": "Off-the-Record Conversation",

packages/web-ui-registration/src/LoginServicesButton.tsx

@@ -15,6 +15,8 @@ const LoginServicesButton = <T extends LoginService>({
 	className,
 	disabled,
 	setError,
+	buttonColor,
+	buttonLabelColor,
 	...props
 }: T & {
 	className?: string;
@@ -43,6 +45,8 @@ const LoginServicesButton = <T extends LoginService>({
 			alignItems='center'
 			display='flex'
 			justifyContent='center'
+			color={buttonLabelColor}
+			backgroundColor={buttonColor}
 		>
 			{buttonLabelText || t('Sign_in_with__provider__', { provider: title })}
 		</Button>