From 530d707ddc054b7f40f7891ca3314870c76e51e2 Mon Sep 17 00:00:00 2001 From: Baozier Date: Thu, 2 Jan 2025 19:00:27 -0500 Subject: [PATCH] Rename and add more color specific branding configs (#207) --- admin-panel/app/[lang]/dashboard/page.tsx | 9 ++++- docs/auth-server.md | 34 +++++++++++++++--- server/src/__tests__/normal/other.test.tsx | 12 +++++-- server/src/configs/type.ts | 12 +++++-- server/src/handlers/other.ts | 12 +++++-- server/src/services/branding.ts | 24 +++++++++---- server/src/views/AuthorizeAccount.tsx | 2 +- server/src/views/AuthorizeConsent.tsx | 4 +-- server/src/views/AuthorizeEmailMfa.tsx | 2 +- server/src/views/AuthorizeOtpMfa.tsx | 2 +- server/src/views/AuthorizePassword.tsx | 4 +-- server/src/views/AuthorizeReset.tsx | 6 ++-- server/src/views/AuthorizeSmsMfa.tsx | 4 +-- server/src/views/ChangeEmail.tsx | 4 +-- server/src/views/ChangePassword.tsx | 2 +- server/src/views/ResetMfa.tsx | 2 +- server/src/views/components/Layout.tsx | 42 +++++++++++----------- server/wrangler.toml | 12 +++++-- 18 files changed, 127 insertions(+), 62 deletions(-) diff --git a/admin-panel/app/[lang]/dashboard/page.tsx b/admin-panel/app/[lang]/dashboard/page.tsx index 86bc866..b0e52ca 100644 --- a/admin-panel/app/[lang]/dashboard/page.tsx +++ b/admin-panel/app/[lang]/dashboard/page.tsx @@ -18,7 +18,14 @@ const Page = () => { const configTypes = [ { name: t('dashboard.brandingConfigs'), - value: ['COMPANY_LOGO_URL', 'BG_COLOR', 'PRIMARY_BUTTON_BG_COLOR', 'PRIMARY_BUTTON_FG_COLOR', 'EMAIL_SENDER_NAME', 'TERMS_LINK', 'PRIVACY_POLICY_LINK'], + value: [ + 'COMPANY_LOGO_URL', + 'LAYOUT_COLOR', 'LABEL_COLOR', + 'PRIMARY_BUTTON_COLOR', 'PRIMARY_BUTTON_LABEL_COLOR', 'PRIMARY_BUTTON_BORDER_COLOR', + 'SECONDARY_BUTTON_COLOR', 'SECONDARY_BUTTON_LABEL_COLOR', 'SECONDARY_BUTTON_BORDER_COLOR', + 'CRITICAL_INDICATOR_COLOR', + 'EMAIL_SENDER_NAME', 'TERMS_LINK', 'PRIVACY_POLICY_LINK', + ], }, { name: t('dashboard.localeConfigs'), diff --git a/docs/auth-server.md b/docs/auth-server.md index 884142b..297d2b8 100644 --- a/docs/auth-server.md +++ b/docs/auth-server.md @@ -226,17 +226,41 @@ npm run prod:deploy - **Default:** https://raw.githubusercontent.com/ValueMelody/melody-homepage/main/logo.jpg - **Description:** The logo used for branding. -#### BG_COLOR +#### LAYOUT_COLOR - **Default:** lightgray -- **Description:** Specifies the background color of authentication pages. +- **Description:** Specifies the background color of the layout on authentication pages. -#### PRIMARY_BUTTON_BG_COLOR +#### LABEL_COLOR +- **Default:** black +- **Description:** Specifies the color of labels on authentication pages. + +#### PRIMARY_BUTTON_COLOR - **Default:** white - **Description:** Specifies the background color of primary buttons on authentication pages. -#### PRIMARY_BUTTON_FG_COLOR +#### PRIMARY_BUTTON_LABEL_COLOR +- **Default:** black +- **Description:** Specifies the label color of primary buttons on authentication pages. + +#### PRIMARY_BUTTON_BORDER_COLOR - **Default:** black -- **Description:** Specifies the foreground color of primary buttons on authentication pages. +- **Description:** Specifies the border color of primary buttons on authentication pages. + +#### SECONDARY_BUTTON_COLOR +- **Default:** white +- **Description:** Specifies the background color of secondary buttons on authentication pages. + +#### SECONDARY_BUTTON_LABEL_COLOR +- **Default:** black +- **Description:** Specifies the label color of secondary buttons on authentication pages. + +#### SECONDARY_BUTTON_BORDER_COLOR +- **Default:** black +- **Description:** Specifies the border color of secondary buttons on authentication pages. + +### CRITICAL_INDICATOR_COLOR +- **Default:** #e00 +- **Description:** Specifies the color of critical indicators, such as error messages, on authentication pages. #### EMAIL_SENDER_NAME - **Default:** "Melody Auth" diff --git a/server/src/__tests__/normal/other.test.tsx b/server/src/__tests__/normal/other.test.tsx index 87fa4ab..15edbaf 100644 --- a/server/src/__tests__/normal/other.test.tsx +++ b/server/src/__tests__/normal/other.test.tsx @@ -74,10 +74,16 @@ describe( ENABLE_EMAIL_LOG: false, ENABLE_SMS_LOG: false, ENABLE_SIGN_IN_LOG: false, - PRIMARY_BUTTON_BG_COLOR: 'white', - PRIMARY_BUTTON_FG_COLOR: 'black', - BG_COLOR: 'lightgray', ENABLE_PASSWORD_SIGN_IN: true, + LAYOUT_COLOR: 'lightgray', + LABEL_COLOR: 'black', + PRIMARY_BUTTON_COLOR: 'white', + PRIMARY_BUTTON_LABEL_COLOR: 'black', + PRIMARY_BUTTON_BORDER_COLOR: 'lightgray', + SECONDARY_BUTTON_COLOR: 'white', + SECONDARY_BUTTON_LABEL_COLOR: 'black', + SECONDARY_BUTTON_BORDER_COLOR: 'white', + CRITICAL_INDICATOR_COLOR: '#e00', }) }, ) diff --git a/server/src/configs/type.ts b/server/src/configs/type.ts index bca5063..35d0640 100644 --- a/server/src/configs/type.ts +++ b/server/src/configs/type.ts @@ -35,9 +35,15 @@ export type Bindings = { ID_TOKEN_EXPIRES_IN: number; SERVER_SESSION_EXPIRES_IN: number; COMPANY_LOGO_URL: string; - BG_COLOR: string; - PRIMARY_BUTTON_BG_COLOR: string; - PRIMARY_BUTTON_FG_COLOR: string; + LAYOUT_COLOR: string; + LABEL_COLOR: string; + PRIMARY_BUTTON_COLOR: string; + PRIMARY_BUTTON_LABEL_COLOR: string; + PRIMARY_BUTTON_BORDER_COLOR: string; + SECONDARY_BUTTON_COLOR: string; + SECONDARY_BUTTON_LABEL_COLOR: string; + SECONDARY_BUTTON_BORDER_COLOR: string; + CRITICAL_INDICATOR_COLOR: string; EMAIL_SENDER_NAME: string; SMTP_SENDER_ADDRESS: string; AUTH_SERVER_URL: string; diff --git a/server/src/handlers/other.ts b/server/src/handlers/other.ts index eb57126..ee30eb4 100644 --- a/server/src/handlers/other.ts +++ b/server/src/handlers/other.ts @@ -50,9 +50,15 @@ export const getSystemInfo = async (c: Context) => { ENABLE_EMAIL_LOG: environment.ENABLE_EMAIL_LOG, ENABLE_SMS_LOG: environment.ENABLE_SMS_LOG, ENABLE_SIGN_IN_LOG: environment.ENABLE_SIGN_IN_LOG, - BG_COLOR: environment.BG_COLOR, - PRIMARY_BUTTON_BG_COLOR: environment.PRIMARY_BUTTON_BG_COLOR, - PRIMARY_BUTTON_FG_COLOR: environment.PRIMARY_BUTTON_FG_COLOR, + LAYOUT_COLOR: environment.LAYOUT_COLOR, + LABEL_COLOR: environment.LABEL_COLOR, + PRIMARY_BUTTON_COLOR: environment.PRIMARY_BUTTON_COLOR, + PRIMARY_BUTTON_LABEL_COLOR: environment.PRIMARY_BUTTON_LABEL_COLOR, + PRIMARY_BUTTON_BORDER_COLOR: environment.PRIMARY_BUTTON_BORDER_COLOR, + SECONDARY_BUTTON_COLOR: environment.SECONDARY_BUTTON_COLOR, + SECONDARY_BUTTON_LABEL_COLOR: environment.SECONDARY_BUTTON_LABEL_COLOR, + SECONDARY_BUTTON_BORDER_COLOR: environment.SECONDARY_BUTTON_BORDER_COLOR, + CRITICAL_INDICATOR_COLOR: environment.CRITICAL_INDICATOR_COLOR, ENABLE_PASSWORD_SIGN_IN: environment.ENABLE_PASSWORD_SIGN_IN, } diff --git a/server/src/services/branding.ts b/server/src/services/branding.ts index dae165d..6619ff4 100644 --- a/server/src/services/branding.ts +++ b/server/src/services/branding.ts @@ -6,15 +6,27 @@ import { Branding } from 'views/components/Layout' export const getDefaultBranding = (c: Context): Branding => { const { COMPANY_LOGO_URL: logoUrl, - BG_COLOR: bgColor, - PRIMARY_BUTTON_BG_COLOR: primaryButtonBgColor, - PRIMARY_BUTTON_FG_COLOR: primaryButtonFgColor, + LAYOUT_COLOR: layoutColor, + LABEL_COLOR: labelColor, + PRIMARY_BUTTON_COLOR: primaryButtonColor, + PRIMARY_BUTTON_LABEL_COLOR: primaryButtonLabelColor, + PRIMARY_BUTTON_BORDER_COLOR: primaryButtonBorderColor, + SECONDARY_BUTTON_COLOR: secondaryButtonColor, + SECONDARY_BUTTON_LABEL_COLOR: secondaryButtonLabelColor, + SECONDARY_BUTTON_BORDER_COLOR: secondaryButtonBorderColor, + CRITICAL_INDICATOR_COLOR: criticalIndicatorColor, } = env(c) return { logoUrl, - bgColor, - primaryButtonBgColor, - primaryButtonFgColor, + layoutColor, + labelColor, + primaryButtonColor, + primaryButtonLabelColor, + primaryButtonBorderColor, + secondaryButtonColor, + secondaryButtonLabelColor, + secondaryButtonBorderColor, + criticalIndicatorColor, } } diff --git a/server/src/views/AuthorizeAccount.tsx b/server/src/views/AuthorizeAccount.tsx index b6fb8df..2359488 100644 --- a/server/src/views/AuthorizeAccount.tsx +++ b/server/src/views/AuthorizeAccount.tsx @@ -117,7 +117,7 @@ const AuthorizeAccount = ({ {localeConfig.authorizeAccount.signIn[queryDto.locale]} diff --git a/server/src/views/AuthorizeConsent.tsx b/server/src/views/AuthorizeConsent.tsx index 7068bfc..891ea89 100644 --- a/server/src/views/AuthorizeConsent.tsx +++ b/server/src/views/AuthorizeConsent.tsx @@ -48,14 +48,14 @@ const AuthorizeConsent = ({
{localeConfig.authorizeReset.backSignIn[queryDto.locale]} diff --git a/server/src/views/AuthorizeSmsMfa.tsx b/server/src/views/AuthorizeSmsMfa.tsx index ce50334..4d358ba 100644 --- a/server/src/views/AuthorizeSmsMfa.tsx +++ b/server/src/views/AuthorizeSmsMfa.tsx @@ -47,7 +47,7 @@ const AuthorizeSmsMfa = ({