From f33d7bd80b74082ae87d904c92ca6fd9f4c9c104 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Fri, 7 Jun 2024 21:19:02 +0530 Subject: [PATCH 1/8] fix login services button colors --- packages/web-ui-registration/src/LoginServicesButton.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/web-ui-registration/src/LoginServicesButton.tsx b/packages/web-ui-registration/src/LoginServicesButton.tsx index d9f43b0e484c..ba16d360d9c1 100644 --- a/packages/web-ui-registration/src/LoginServicesButton.tsx +++ b/packages/web-ui-registration/src/LoginServicesButton.tsx @@ -15,6 +15,8 @@ const LoginServicesButton = ({ className, disabled, setError, + buttonColor, + buttonLabelColor, ...props }: T & { className?: string; @@ -43,6 +45,8 @@ const LoginServicesButton = ({ alignItems='center' display='flex' justifyContent='center' + color={buttonLabelColor} + backgroundColor={buttonColor} > {buttonLabelText || t('Sign_in_with__provider__', { provider: title })} From 3133b86995ffd480269c55f77451fe8a539a015f Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Fri, 7 Jun 2024 21:20:19 +0530 Subject: [PATCH 2/8] add cs --- .changeset/fifty-mails-admire.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fifty-mails-admire.md diff --git a/.changeset/fifty-mails-admire.md b/.changeset/fifty-mails-admire.md new file mode 100644 index 000000000000..8bf6b7884974 --- /dev/null +++ b/.changeset/fifty-mails-admire.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/web-ui-registration': patch +--- + +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. From 0296a60f63454e27ad1b261e6ced254855592825 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Mon, 10 Jun 2024 16:08:16 +0530 Subject: [PATCH 3/8] button props e2e test --- apps/meteor/tests/e2e/page-objects/auth.ts | 2 +- apps/meteor/tests/e2e/saml.spec.ts | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/apps/meteor/tests/e2e/page-objects/auth.ts b/apps/meteor/tests/e2e/page-objects/auth.ts index 8d5fe1edad20..46ec7e1f38dc 100644 --- a/apps/meteor/tests/e2e/page-objects/auth.ts +++ b/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 { diff --git a/apps/meteor/tests/e2e/saml.spec.ts b/apps/meteor/tests/e2e/saml.spec.ts index 8859e46e71c5..24985d1a4206 100644 --- a/apps/meteor/tests/e2e/saml.spec.ts +++ b/apps/meteor/tests/e2e/saml.spec.ts @@ -74,6 +74,14 @@ const resetTestData = async (cleanupOnly = false) => { _id: 'SAML_Custom_Default_role_attribute_name', value: 'role', }, + { + _id: 'SAML_Custom_Default_button_label_text', + value: 'SAML test login button', + }, + { + _id: 'SAML_Custom_Default_button_color', + value: 'green', + }, ].map((setting) => connection .db() @@ -167,8 +175,9 @@ test.describe('SAML', () => { }); test('Login', async ({ page, api }) => { - await test.step('expect to have SAML login button available', async () => { + await test.step('expect to have SAML login button available in green color', async () => { await expect(poRegistration.btnLoginWithSaml).toBeVisible({ timeout: 10000 }); + await expect(poRegistration.btnLoginWithSaml.evaluate((el) => window.getComputedStyle(el).getPropertyValue('background-color'))).toBe('green'); }); await test.step('expect to be redirected to the IdP for login', async () => { From e61e3d8b08e90f08ae8ea744d8e8cfabbffbaf93 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Mon, 10 Jun 2024 17:13:11 +0530 Subject: [PATCH 4/8] try 2 --- apps/meteor/tests/e2e/saml.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/meteor/tests/e2e/saml.spec.ts b/apps/meteor/tests/e2e/saml.spec.ts index 24985d1a4206..93575b91e925 100644 --- a/apps/meteor/tests/e2e/saml.spec.ts +++ b/apps/meteor/tests/e2e/saml.spec.ts @@ -177,7 +177,7 @@ test.describe('SAML', () => { test('Login', async ({ page, api }) => { await test.step('expect to have SAML login button available in green color', async () => { await expect(poRegistration.btnLoginWithSaml).toBeVisible({ timeout: 10000 }); - await expect(poRegistration.btnLoginWithSaml.evaluate((el) => window.getComputedStyle(el).getPropertyValue('background-color'))).toBe('green'); + await expect(poRegistration.btnLoginWithSaml.evaluate((el) => window.getComputedStyle(el).getPropertyValue('background-color'))).toBe('green !important'); }); await test.step('expect to be redirected to the IdP for login', async () => { From 1db3959a0d39ba8788f1d8db1188621c1ce79c5e Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Mon, 10 Jun 2024 19:14:15 +0530 Subject: [PATCH 5/8] stop testing bg color --- apps/meteor/tests/e2e/saml.spec.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/apps/meteor/tests/e2e/saml.spec.ts b/apps/meteor/tests/e2e/saml.spec.ts index 93575b91e925..b03d514b279f 100644 --- a/apps/meteor/tests/e2e/saml.spec.ts +++ b/apps/meteor/tests/e2e/saml.spec.ts @@ -78,10 +78,6 @@ const resetTestData = async (cleanupOnly = false) => { _id: 'SAML_Custom_Default_button_label_text', value: 'SAML test login button', }, - { - _id: 'SAML_Custom_Default_button_color', - value: 'green', - }, ].map((setting) => connection .db() @@ -175,9 +171,8 @@ test.describe('SAML', () => { }); test('Login', async ({ page, api }) => { - await test.step('expect to have SAML login button available in green color', async () => { + await test.step('expect to have SAML login button available', async () => { await expect(poRegistration.btnLoginWithSaml).toBeVisible({ timeout: 10000 }); - await expect(poRegistration.btnLoginWithSaml.evaluate((el) => window.getComputedStyle(el).getPropertyValue('background-color'))).toBe('green !important'); }); await test.step('expect to be redirected to the IdP for login', async () => { From eadbd4817d8897d9501e21a008329a1a75c1d33d Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Fri, 21 Jun 2024 21:05:45 +0530 Subject: [PATCH 6/8] check bg color of saml login button --- apps/meteor/tests/e2e/saml.spec.ts | 6 ++++++ apps/meteor/tests/e2e/utils/convertHexToRGB.ts | 9 +++++++++ 2 files changed, 15 insertions(+) create mode 100644 apps/meteor/tests/e2e/utils/convertHexToRGB.ts diff --git a/apps/meteor/tests/e2e/saml.spec.ts b/apps/meteor/tests/e2e/saml.spec.ts index 4cec69b9113c..272411ae1b39 100644 --- a/apps/meteor/tests/e2e/saml.spec.ts +++ b/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'; @@ -58,6 +59,7 @@ const resetTestData = async ({ api, cleanupOnly = false }: { api?: any; cleanupO { _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))); @@ -151,6 +153,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(); diff --git a/apps/meteor/tests/e2e/utils/convertHexToRGB.ts b/apps/meteor/tests/e2e/utils/convertHexToRGB.ts new file mode 100644 index 000000000000..9b20671cfcaa --- /dev/null +++ b/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})`; +}; From 5e96c7188428abf70d37181b77bd32b5efd5898b Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Tue, 9 Jul 2024 00:37:44 +0530 Subject: [PATCH 7/8] add alert wanring on colors settings --- apps/meteor/app/meteor-accounts-saml/server/lib/settings.ts | 2 ++ apps/meteor/server/lib/oauth/addOAuthService.ts | 2 ++ apps/meteor/server/settings/cas.ts | 4 ++-- apps/meteor/server/settings/oauth.ts | 4 ++++ packages/i18n/src/locales/en.i18n.json | 1 + 5 files changed, 11 insertions(+), 2 deletions(-) diff --git a/apps/meteor/app/meteor-accounts-saml/server/lib/settings.ts b/apps/meteor/app/meteor-accounts-saml/server/lib/settings.ts index bb9567260337..5c16716720b0 100644 --- a/apps/meteor/app/meteor-accounts-saml/server/lib/settings.ts +++ b/apps/meteor/app/meteor-accounts-saml/server/lib/settings.ts @@ -230,10 +230,12 @@ export const addSettings = async function (name: string): Promise { 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', }); }); diff --git a/apps/meteor/server/lib/oauth/addOAuthService.ts b/apps/meteor/server/lib/oauth/addOAuthService.ts index 2a49a23a1f4e..db84cb467ffc 100644 --- a/apps/meteor/server/lib/oauth/addOAuthService.ts +++ b/apps/meteor/server/lib/oauth/addOAuthService.ts @@ -118,6 +118,7 @@ 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', @@ -125,6 +126,7 @@ export async function addOAuthService(name: string, values: { [k: string]: strin 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', diff --git a/apps/meteor/server/settings/cas.ts b/apps/meteor/server/settings/cas.ts index 48a13d8cbd9c..f8ae4e6ca65a 100644 --- a/apps/meteor/server/settings/cas.ts +++ b/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' }); }); }); diff --git a/apps/meteor/server/settings/oauth.ts b/apps/meteor/server/settings/oauth.ts index c67286771a0a..acc397faa37d 100644 --- a/apps/meteor/server/settings/oauth.ts +++ b/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 () { diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 46b91babb6fd..1ae3577790b7 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -3955,6 +3955,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", From 0f9eeb6e3017270cfd4b6a8a2f985aaf0c7cc5f3 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Tue, 9 Jul 2024 00:45:26 +0530 Subject: [PATCH 8/8] update CS --- .changeset/fifty-mails-admire.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.changeset/fifty-mails-admire.md b/.changeset/fifty-mails-admire.md index 8bf6b7884974..b87fd11d47ee 100644 --- a/.changeset/fifty-mails-admire.md +++ b/.changeset/fifty-mails-admire.md @@ -1,5 +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.