New config.json variable to set the ACS default language

Author: hsato03

server/src/main/java/org/apache/cloudstack/gui/theme/GuiThemeServiceImpl.java

@@ -60,7 +60,7 @@ public class GuiThemeServiceImpl implements GuiThemeService {
 
     protected Logger logger = LogManager.getLogger(getClass());
 
-    private static final List<String> ALLOWED_PRIMITIVE_PROPERTIES = List.of("appTitle", "footer", "loginFooter", "logo", "minilogo", "banner");
+    private static final List<String> ALLOWED_PRIMITIVE_PROPERTIES = List.of("appTitle", "footer", "loginFooter", "logo", "minilogo", "banner", "defaultLanguage");
 
     private static final List<String> ALLOWED_ERROR_PROPERTIES = List.of("403", "404", "500");
 

ui/public/config.json

@@ -117,5 +117,6 @@
     "message": "🤔 <strong>Sample Announcement</strong>: New Feature Available: Check out our latest dashboard improvements! <a href='/features'>Learn more</a>",
     "startDate": "2025-06-01T00:00:00Z",
     "endDate": "2025-07-16T00:00:00Z"
-  }
+  },
+  "defaultLanguage": "en"
 }

ui/src/components/header/TranslationMenu.vue

@@ -52,6 +52,7 @@
 import moment from 'moment'
 import 'moment/locale/zh-cn'
 import { loadLanguageAsync } from '@/locales'
+import { vueProps } from '@/vue-app'
 
 moment.locale('en')
 
@@ -63,7 +64,7 @@ export default {
     }
   },
   mounted () {
-    this.language = this.$localStorage.get('LOCALE') || 'en'
+    this.language = this.$localStorage.get('LOCALE') || vueProps.$config?.defaultLanguage || 'en'
     this.setLocale(this.language)
   },
   methods: {

ui/src/utils/guiTheme.js

@@ -17,6 +17,7 @@
 
 import { vueProps } from '@/vue-app'
 import { getAPI } from '@/api'
+import { loadLanguageAsync } from '../locales'
 
 export async function applyCustomGuiTheme (accountid, domainid) {
   await fetch('config.json').then(response => response.json()).then(config => {
@@ -69,6 +70,7 @@ async function applyDynamicCustomization (response) {
   vueProps.$config.logo = jsonConfig?.logo ?? vueProps.$config.logo
   vueProps.$config.minilogo = jsonConfig?.minilogo ?? vueProps.$config.minilogo
   vueProps.$config.banner = jsonConfig?.banner ?? vueProps.$config.banner
+  vueProps.$config.defaultLanguage = vueProps.$localStorage.get('LOCALE') ?? jsonConfig?.defaultLanguage ?? vueProps.$config.defaultLanguage
 
   if (jsonConfig?.error) {
     vueProps.$config.error[403] = jsonConfig?.error[403] ?? vueProps.$config.error[403]
@@ -85,6 +87,9 @@ async function applyDynamicCustomization (response) {
   vueProps.$config.favicon = jsonConfig?.favicon ?? vueProps.$config.favicon
   vueProps.$config.css = response?.css ?? null
 
+  vueProps.$localStorage.set('LOCALE', vueProps.$config.defaultLanguage)
+  loadLanguageAsync(vueProps.$config.defaultLanguage)
+
   await applyStaticCustomization(vueProps.$config.favicon, vueProps.$config.css)
 }