Allow change font using configs (#208)

admin-panel/app/[lang]/dashboard/page.tsx

@@ -20,11 +20,20 @@ const Page = () => {
       name: t('dashboard.brandingConfigs'),
       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',
+        'FONT_FAMILY',
+        'FONT_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',
+        'EMAIL_SENDER_NAME',
+        'TERMS_LINK',
+        'PRIVACY_POLICY_LINK',
       ],
     },
     {
@@ -33,19 +42,45 @@ const Page = () => {
     },
     {
       name: t('dashboard.suppressionConfigs'),
-      value: ['ENABLE_NAMES', 'NAMES_IS_REQUIRED', 'ENABLE_SIGN_UP', 'ENABLE_PASSWORD_SIGN_IN', 'ENABLE_EMAIL_VERIFICATION', 'ENABLE_PASSWORD_RESET', 'PASSWORD_RESET_EMAIL_THRESHOLD', 'ENABLE_USER_APP_CONSENT'],
+      value: [
+        'ENABLE_NAMES',
+        'NAMES_IS_REQUIRED',
+        'ENABLE_SIGN_UP',
+        'ENABLE_PASSWORD_SIGN_IN',
+        'ENABLE_EMAIL_VERIFICATION',
+        'ENABLE_PASSWORD_RESET',
+        'ENABLE_USER_APP_CONSENT',
+      ],
     },
     {
       name: t('dashboard.authConfigs'),
-      value: ['OTP_MFA_IS_REQUIRED', 'SMS_MFA_IS_REQUIRED', 'SMS_MFA_MESSAGE_THRESHOLD', 'EMAIL_MFA_IS_REQUIRED', 'EMAIL_MFA_EMAIL_THRESHOLD', 'CHANGE_EMAIL_EMAIL_THRESHOLD', 'ENFORCE_ONE_MFA_ENROLLMENT', 'ALLOW_EMAIL_MFA_AS_BACKUP', 'ACCOUNT_LOCKOUT_THRESHOLD', 'ACCOUNT_LOCKOUT_EXPIRES_IN', 'UNLOCK_ACCOUNT_VIA_PASSWORD_RESET'],
+      value: [
+        'AUTHORIZATION_CODE_EXPIRES_IN',
+        'SPA_ACCESS_TOKEN_EXPIRES_IN',
+        'SPA_REFRESH_TOKEN_EXPIRES_IN',
+        'S2S_ACCESS_TOKEN_EXPIRES_IN',
+        'ID_TOKEN_EXPIRES_IN',
+        'SERVER_SESSION_EXPIRES_IN',
+      ],
     },
     {
       name: t('dashboard.mfaConfigs'),
-      value: ['OTP_MFA_IS_REQUIRED', 'SMS_MFA_IS_REQUIRED', 'SMS_MFA_MESSAGE_THRESHOLD', 'EMAIL_MFA_IS_REQUIRED', 'EMAIL_MFA_EMAIL_THRESHOLD', 'CHANGE_EMAIL_EMAIL_THRESHOLD', 'ENFORCE_ONE_MFA_ENROLLMENT', 'ALLOW_EMAIL_MFA_AS_BACKUP'],
+      value: [
+        'OTP_MFA_IS_REQUIRED',
+        'SMS_MFA_IS_REQUIRED',
+        'EMAIL_MFA_IS_REQUIRED',
+        'ENFORCE_ONE_MFA_ENROLLMENT',
+        'ALLOW_EMAIL_MFA_AS_BACKUP',
+      ],
     },
     {
       name: t('dashboard.bruteForceConfigs'),
-      value: ['ACCOUNT_LOCKOUT_THRESHOLD', 'ACCOUNT_LOCKOUT_EXPIRES_IN', 'UNLOCK_ACCOUNT_VIA_PASSWORD_RESET'],
+      value: [
+        'ACCOUNT_LOCKOUT_THRESHOLD', 'ACCOUNT_LOCKOUT_EXPIRES_IN',
+        'UNLOCK_ACCOUNT_VIA_PASSWORD_RESET', 'PASSWORD_RESET_EMAIL_THRESHOLD',
+        'ACCOUNT_LOCKOUT_THRESHOLD', 'EMAIL_MFA_EMAIL_THRESHOLD',
+        'SMS_MFA_MESSAGE_THRESHOLD',
+      ],
     },
     {
       name: t('dashboard.ssoConfigs'),

docs/auth-server.md

@@ -226,6 +226,14 @@ npm run prod:deploy
 - **Default:** https://raw.githubusercontent.com/ValueMelody/melody-homepage/main/logo.jpg
 - **Description:** The logo used for branding.
 
+#### FONT_FAMILY
+- **Default:** Inter
+- **Description:** The font family on authentication pages.
+
+#### FONT_URL
+- **Default:** https://fonts.googleapis.com/css2?family=Inter:wght@400..600&display=swap
+- **Description:** Provides the URL to load the specified font (in this case, “Inter”) from Google Fonts, ensuring that the authentication pages have the appropriate font styles and weights applied.
+
 #### LAYOUT_COLOR
 - **Default:** lightgray
 - **Description:** Specifies the background color of the layout on authentication pages.

server/src/__tests__/normal/other.test.tsx

@@ -46,6 +46,8 @@ describe(
           SUPPORTED_LOCALES: ['en', 'fr'],
           ENABLE_LOCALE_SELECTOR: true,
           COMPANY_LOGO_URL: 'https://raw.githubusercontent.com/ValueMelody/melody-homepage/main/logo.jpg',
+          FONT_FAMILY: 'Inter',
+          FONT_URL: 'https://fonts.googleapis.com/css2?family=Inter:wght@400..600&display=swap',
           EMAIL_SENDER_NAME: 'Melody Auth',
           GOOGLE_AUTH_CLIENT_ID: '',
           FACEBOOK_AUTH_CLIENT_ID: '',

server/src/configs/type.ts

@@ -35,6 +35,8 @@ export type Bindings = {
   ID_TOKEN_EXPIRES_IN: number;
   SERVER_SESSION_EXPIRES_IN: number;
   COMPANY_LOGO_URL: string;
+  FONT_FAMILY: string;
+  FONT_URL: string;
   LAYOUT_COLOR: string;
   LABEL_COLOR: string;
   PRIMARY_BUTTON_COLOR: string;

server/src/handlers/other.ts

@@ -52,6 +52,8 @@ export const getSystemInfo = async (c: Context<typeConfig.Context>) => {
     ENABLE_SIGN_IN_LOG: environment.ENABLE_SIGN_IN_LOG,
     LAYOUT_COLOR: environment.LAYOUT_COLOR,
     LABEL_COLOR: environment.LABEL_COLOR,
+    FONT_FAMILY: environment.FONT_FAMILY,
+    FONT_URL: environment.FONT_URL,
     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,

server/src/services/branding.ts

@@ -6,6 +6,8 @@ import { Branding } from 'views/components/Layout'
 export const getDefaultBranding = (c: Context<typeConfig.Context>): Branding => {
   const {
     COMPANY_LOGO_URL: logoUrl,
+    FONT_FAMILY: fontFamily,
+    FONT_URL: fontUrl,
     LAYOUT_COLOR: layoutColor,
     LABEL_COLOR: labelColor,
     PRIMARY_BUTTON_COLOR: primaryButtonColor,
@@ -16,9 +18,10 @@ export const getDefaultBranding = (c: Context<typeConfig.Context>): Branding =>
     SECONDARY_BUTTON_BORDER_COLOR: secondaryButtonBorderColor,
     CRITICAL_INDICATOR_COLOR: criticalIndicatorColor,
   } = env(c)
-
   return {
     logoUrl,
+    fontFamily,
+    fontUrl,
     layoutColor,
     labelColor,
     primaryButtonColor,

server/src/views/components/Layout.tsx

@@ -8,6 +8,8 @@ import {
 
 export interface Branding {
   logoUrl: string;
+  fontFamily: string;
+  fontUrl: string;
   layoutColor: string;
   labelColor: string;
   primaryButtonColor: string;
@@ -40,11 +42,11 @@ const Layout = ({
         rel='preconnect'
         href='https://fonts.gstatic.com' />
       <link
-        href='https://fonts.googleapis.com/css2?family=Inter:wght@400..600&display=swap'
+        href={branding.fontUrl}
         rel='stylesheet' />
       <Style>
         {css`
-          body { padding: 0; margin: 0; font-family: "Inter", sans-serif; font-size: 16px; }
+          body { padding: 0; margin: 0; font-family: ${branding.fontFamily}; font-size: 16px; }
           a { text-decoration: none; }
           p { padding: 0; margin: 0; }
           h1 { padding: 0; margin: 0; }

server/wrangler.toml

@@ -6,6 +6,8 @@ keep_vars = true
 
 # Branding
 COMPANY_LOGO_URL="https://raw.githubusercontent.com/ValueMelody/melody-homepage/main/logo.jpg"
+FONT_FAMILY="Inter"
+FONT_URL="https://fonts.googleapis.com/css2?family=Inter:wght@400..600&display=swap"
 LAYOUT_COLOR="lightgray"
 LABEL_COLOR="black"
 PRIMARY_BUTTON_COLOR="white"
@@ -44,7 +46,6 @@ SERVER_SESSION_EXPIRES_IN=1800 # Set to 0 to disable session
 OTP_MFA_IS_REQUIRED=false
 EMAIL_MFA_IS_REQUIRED=false # Please set up your mailer first https://auth.valuemelody.com/auth-server.html#mailer-setup
 SMS_MFA_IS_REQUIRED=false # Please set up your sms provider first https://auth.valuemelody.com/auth-server.html#sms-setup
-SMS_MFA_MESSAGE_THRESHOLD=5 # Maximum number of SMS MFA message requests allowed per 30 minutes for a single account based on ip address. 0 means no restriction.
 ENFORCE_ONE_MFA_ENROLLMENT=['otp', 'email'] # Enforce one MFA type from the list. Available options are ‘email’, ‘otp’, and ‘sms’. This setting is only effective if OTP_MFA_IS_REQUIRED, SMS_MFA_IS_REQUIRED, and EMAIL_MFA_IS_REQUIRED are all set to false. An empty list means no MFA type will be enforced. You must enable email functionality for the email MFA option to work.
 ALLOW_EMAIL_MFA_AS_BACKUP=true
 
@@ -55,6 +56,7 @@ ACCOUNT_LOCKOUT_THRESHOLD=5 # Number of failed login attempts before the user ac
 EMAIL_MFA_EMAIL_THRESHOLD=10 # Maximum number of Email MFA email requests allowed per 30 minutes for a single account based on ip address. 0 means no restriction.
 CHANGE_EMAIL_EMAIL_THRESHOLD=5 # Maximum number of change email verification code requests allowed per 30 minutes for a single account. 0 means no restriction.
 ACCOUNT_LOCKOUT_EXPIRES_IN=86400 # Set to 0 for indefinite lockout until manual intervention.
+SMS_MFA_MESSAGE_THRESHOLD=5 # Maximum number of SMS MFA message requests allowed per 30 minutes for a single account based on ip address. 0 means no restriction.
 
 # Social Sign-in
 GOOGLE_AUTH_CLIENT_ID="" # Google Sign-in will be suppressed if it is empty