Rename and add more color specific branding configs (#207)

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'),

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"

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',
         })
       },
     )

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;

server/src/handlers/other.ts

@@ -50,9 +50,15 @@ export const getSystemInfo = async (c: Context<typeConfig.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,
   }
 

server/src/services/branding.ts

@@ -6,15 +6,27 @@ import { Branding } from 'views/components/Layout'
 export const getDefaultBranding = (c: Context<typeConfig.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,
   }
 }

server/src/views/AuthorizeAccount.tsx

@@ -117,7 +117,7 @@ const AuthorizeAccount = ({
         </section>
       </form>
       <a
-        class='button-text'
+        class='button-secondary'
         href={`${routeConfig.IdentityRoute.AuthorizePassword}?${queryString}`}
       >
         {localeConfig.authorizeAccount.signIn[queryDto.locale]}

server/src/views/AuthorizeConsent.tsx

@@ -48,14 +48,14 @@ const AuthorizeConsent = ({
       <SubmitError />
       <section class='mt-4 flex-row gap-8 w-full'>
         <button
-          class='button-outline w-full'
+          class='button-secondary w-full'
           type='button'
           onclick='handleDecline()'
         >
           {localeConfig.authorizeConsent.decline[queryDto.locale]}
         </button>
         <button
-          class='button-outline w-full'
+          class='button-secondary w-full'
           type='button'
           onclick='handleAccept()'
         >

server/src/views/AuthorizeEmailMfa.tsx

@@ -49,7 +49,7 @@ const AuthorizeEmailMfa = ({
             <button
               id='resend-btn'
               type='button'
-              class='button-text'
+              class='button-secondary'
               onclick='resendCode()'
             >
               {localeConfig.authorizeEmailMfa.resend[queryDto.locale]}

server/src/views/AuthorizeOtpMfa.tsx

@@ -50,7 +50,7 @@ const AuthorizeOtpMfa = ({
           {showEmailMfaBtn && (
             <button
               type='button'
-              class='button-text w-text'
+              class='button-secondary w-text'
               onclick='switchToEmail()'
             >
               {localeConfig.authorizeOtpMfa.switchToEmail[queryDto.locale]}

server/src/views/AuthorizePassword.tsx

@@ -178,15 +178,15 @@ const AuthorizePassword = ({
         <section class='flex-col gap-4'>
           {enableSignUp && (
             <a
-              class='button-text'
+              class='button-secondary'
               href={`${routeConfig.IdentityRoute.AuthorizeAccount}?${queryString}`}
             >
               {localeConfig.authorizePassword.signUp[queryDto.locale]}
             </a>
           )}
           {enablePasswordReset && (
             <a
-              class='button-text'
+              class='button-secondary'
               href={`${routeConfig.IdentityRoute.AuthorizeReset}?${queryString}`}
             >
               {localeConfig.authorizePassword.passwordReset[queryDto.locale]}

server/src/views/AuthorizeReset.tsx

@@ -35,7 +35,7 @@ const AuthorizeReset = ({
       >
         <p class='text-green text-semibold'>{localeConfig.authorizeReset.success[queryDto.locale]}</p>
         <a
-          class='button-text'
+          class='button-secondary'
           href={`${routeConfig.IdentityRoute.AuthorizePassword}?${queryString}`}
         >
           {localeConfig.authorizeReset.signIn[queryDto.locale]}
@@ -68,7 +68,7 @@ const AuthorizeReset = ({
             <button
               id='resend-btn'
               type='button'
-              class='button-text hidden'
+              class='button-secondary hidden'
               onclick='resendCode()'
             >
               {localeConfig.authorizeReset.resend[queryDto.locale]}
@@ -93,7 +93,7 @@ const AuthorizeReset = ({
           </section>
         </form>
         <a
-          class='button-text'
+          class='button-secondary'
           href={`${routeConfig.IdentityRoute.AuthorizePassword}?${queryString}`}
         >
           {localeConfig.authorizeReset.backSignIn[queryDto.locale]}

server/src/views/AuthorizeSmsMfa.tsx

@@ -47,7 +47,7 @@ const AuthorizeSmsMfa = ({
           <button
             id='resend-btn'
             type='button'
-            class={`button-text ${phoneNumber ? '' : 'hidden'}`}
+            class={`button-secondary ${phoneNumber ? '' : 'hidden'}`}
             onclick='resendCode()'
           >
             {localeConfig.authorizeSmsMfa.resend[queryDto.locale]}
@@ -63,7 +63,7 @@ const AuthorizeSmsMfa = ({
             <button
               id='switch-to-email'
               type='button'
-              class='button-text w-text'
+              class='button-secondary w-text'
               onclick='switchToEmail()'
             >
               {localeConfig.authorizeSmsMfa.switchToEmail[queryDto.locale]}

server/src/views/ChangeEmail.tsx

@@ -35,7 +35,7 @@ const ChangeEmail = ({
       >
         <p class='text-green text-semibold'>{localeConfig.changePassword.success[queryDto.locale]}</p>
         <a
-          class='button-text'
+          class='button-secondary'
           href={`${redirectUri}`}
         >
           {localeConfig.changeEmail.redirect[queryDto.locale]}
@@ -67,7 +67,7 @@ const ChangeEmail = ({
             <button
               id='resend-btn'
               type='button'
-              class='button-text hidden'
+              class='button-secondary hidden'
               onclick='resendCode()'
             >
               {localeConfig.changeEmail.resend[queryDto.locale]}

server/src/views/ChangePassword.tsx

@@ -34,7 +34,7 @@ const ChangePassword = ({
       >
         <p class='text-green text-semibold'>{localeConfig.changePassword.success[queryDto.locale]}</p>
         <a
-          class='button-text'
+          class='button-secondary'
           href={`${redirectUri}`}
         >
           {localeConfig.changePassword.redirect[queryDto.locale]}

server/src/views/ResetMfa.tsx

@@ -30,7 +30,7 @@ const ResetMfa = ({
       >
         <p class='text-green text-semibold'>{localeConfig.resetMfa.success[queryDto.locale]}</p>
         <a
-          class='button-text'
+          class='button-secondary'
           href={`${redirectUri}`}
         >
           {localeConfig.resetMfa.redirect[queryDto.locale]}

server/src/views/components/Layout.tsx

@@ -8,9 +8,15 @@ import {
 
 export interface Branding {
   logoUrl: string;
-  bgColor: string;
-  primaryButtonBgColor: string;
-  primaryButtonFgColor: string;
+  layoutColor: string;
+  labelColor: string;
+  primaryButtonColor: string;
+  primaryButtonLabelColor: string;
+  primaryButtonBorderColor: string;
+  secondaryButtonColor: string;
+  secondaryButtonLabelColor: string;
+  secondaryButtonBorderColor: string;
+  criticalIndicatorColor: string;
 }
 
 const Layout = ({
@@ -53,7 +59,7 @@ const Layout = ({
           .hidden { display: none; }
           .text-semibold { font-weight: 600; }
           .text-sm { font-size: 14px; }
-          .text-red { color: #e00; }
+          .text-red { color: ${branding.criticalIndicatorColor}; }
           .text-green { color: green; }
           .text-gray { color: gray; }
           .text-center { text-align: center; }
@@ -76,7 +82,8 @@ const Layout = ({
           .w-half { width: 50%; }
           .w-text { width: 280px; }
           .main {
-            background-color: ${branding.bgColor};
+            background-color: ${branding.layoutColor};
+            color: ${branding.labelColor};
             height: 100vh;
             width: 100%;
           }
@@ -92,33 +99,24 @@ const Layout = ({
             width: 280px;
           }
           .button {
-            background-color: ${branding.primaryButtonBgColor};
-            color: ${branding.primaryButtonFgColor};
+            background-color: ${branding.primaryButtonColor};
+            color: ${branding.primaryButtonLabelColor};
             cursor: pointer;
-            border: 1px solid lightgray;
-            padding: 8px;
-            border-radius: 8px;
-            font-weight: 500;
-            font-size: 16px;
-          }
-          .button-outline {
-            background-color: white;
-            cursor: pointer;
-            border: none;
+            border: 1px solid ${branding.primaryButtonBorderColor};
             padding: 8px;
             border-radius: 8px;
             font-weight: 500;
             font-size: 16px;
           }
-          .button-text {
-            background-color: unset;
+          .button-secondary {
+            background-color: ${branding.secondaryButtonColor};
+            color: ${branding.secondaryButtonLabelColor};
+            border: 1px solid ${branding.secondaryButtonBorderColor};
             text-align: center;
             cursor: pointer;
-            border: none;
             border-radius: 8px;
             font-weight: 500;
             font-size: 16px;
-            color: darkslategray;
           }
           .code-input {
             background-color: white;
@@ -142,7 +140,7 @@ const Layout = ({
             width: 62px;
           }
           .alert {
-            background-color: red;
+            background-color: ${branding.criticalIndicatorColor};
             color: white;
             border-radius: 8px;
             padding: 8px 16px;