From c7b3dd74bee7be94cbd7971007d7707608cbe19a Mon Sep 17 00:00:00 2001 From: Yash Rajpal <58601732+yash-rajpal@users.noreply.github.com> Date: Thu, 1 Aug 2024 19:52:58 +0530 Subject: [PATCH] Revert "fix: Login services button colors" (#32955) --- .changeset/fifty-mails-admire.md | 8 -------- .../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 ---- apps/meteor/tests/e2e/page-objects/auth.ts | 2 +- apps/meteor/tests/e2e/saml.spec.ts | 7 ------- apps/meteor/tests/e2e/utils/convertHexToRGB.ts | 9 --------- packages/i18n/src/locales/en.i18n.json | 1 - packages/web-ui-registration/src/LoginServicesButton.tsx | 4 ---- 10 files changed, 3 insertions(+), 40 deletions(-) delete mode 100644 .changeset/fifty-mails-admire.md delete mode 100644 apps/meteor/tests/e2e/utils/convertHexToRGB.ts diff --git a/.changeset/fifty-mails-admire.md b/.changeset/fifty-mails-admire.md deleted file mode 100644 index b87fd11d47ee..000000000000 --- a/.changeset/fifty-mails-admire.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -'@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. 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 5c16716720b0..bb9567260337 100644 --- a/apps/meteor/app/meteor-accounts-saml/server/lib/settings.ts +++ b/apps/meteor/app/meteor-accounts-saml/server/lib/settings.ts @@ -230,12 +230,10 @@ 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 db84cb467ffc..2a49a23a1f4e 100644 --- a/apps/meteor/server/lib/oauth/addOAuthService.ts +++ b/apps/meteor/server/lib/oauth/addOAuthService.ts @@ -118,7 +118,6 @@ 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', @@ -126,7 +125,6 @@ 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 f8ae4e6ca65a..48a13d8cbd9c 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', 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_button_label_color', '#FFFFFF', { type: 'color', group: 'CAS' }); + await this.add('CAS_button_color', '#1d74f5', { type: 'color', group: 'CAS' }); 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 acc397faa37d..c67286771a0a 100644 --- a/apps/meteor/server/settings/oauth.ts +++ b/apps/meteor/server/settings/oauth.ts @@ -115,14 +115,12 @@ 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', }); }); @@ -275,13 +273,11 @@ 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/apps/meteor/tests/e2e/page-objects/auth.ts b/apps/meteor/tests/e2e/page-objects/auth.ts index 46ec7e1f38dc..8d5fe1edad20 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 test login button"]'); + return this.page.locator('role=button[name="SAML"]'); } get btnLoginWithGoogle(): Locator { diff --git a/apps/meteor/tests/e2e/saml.spec.ts b/apps/meteor/tests/e2e/saml.spec.ts index fe1295ca0b4b..3d5935107bb1 100644 --- a/apps/meteor/tests/e2e/saml.spec.ts +++ b/apps/meteor/tests/e2e/saml.spec.ts @@ -10,7 +10,6 @@ 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'; @@ -60,8 +59,6 @@ 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))); @@ -155,10 +152,6 @@ 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 deleted file mode 100644 index 9b20671cfcaa..000000000000 --- a/apps/meteor/tests/e2e/utils/convertHexToRGB.ts +++ /dev/null @@ -1,9 +0,0 @@ -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})`; -}; diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json index 523888f0912a..82e48bc4fc3a 100644 --- a/packages/i18n/src/locales/en.i18n.json +++ b/packages/i18n/src/locales/en.i18n.json @@ -3964,7 +3964,6 @@ "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", diff --git a/packages/web-ui-registration/src/LoginServicesButton.tsx b/packages/web-ui-registration/src/LoginServicesButton.tsx index ba16d360d9c1..d9f43b0e484c 100644 --- a/packages/web-ui-registration/src/LoginServicesButton.tsx +++ b/packages/web-ui-registration/src/LoginServicesButton.tsx @@ -15,8 +15,6 @@ const LoginServicesButton = ({ className, disabled, setError, - buttonColor, - buttonLabelColor, ...props }: T & { className?: string; @@ -45,8 +43,6 @@ const LoginServicesButton = ({ alignItems='center' display='flex' justifyContent='center' - color={buttonLabelColor} - backgroundColor={buttonColor} > {buttonLabelText || t('Sign_in_with__provider__', { provider: title })}