feat(welcome-admin-cockpit): add message translation and i18n support

Gruntfile.js

@@ -83,6 +83,18 @@ module.exports = function(grunt) {
     sourceDir: pkg.gruntConfig.welcomeSourceDir,
     buildTarget: pkg.gruntConfig.welcomeBuildTarget
   });
+
+  require('./grunt/config/localescompile')(config, localesConf, {
+    appName: 'admin',
+    sourceDir: pkg.gruntConfig.adminSourceDir,
+    buildTarget: pkg.gruntConfig.adminBuildTarget
+  });
+
+  require('./grunt/config/localescompile')(config, localesConf, {
+    appName: 'cockpit',
+    sourceDir: pkg.gruntConfig.cockpitSourceDir,
+    buildTarget: pkg.gruntConfig.cockpitBuildTarget
+  });
 
   var watchConf = {
     commons_styles: {

ui/admin/client/scripts/camunda-admin-ui.js

@@ -20,6 +20,7 @@ module.exports = function(pluginDependencies) {
   var ngDependencies = [
     'ng',
     'ngResource',
+    'pascalprecht.translate',
     camCommonsUi.name,
     directivesModule.name,
     filtersModule.name,
@@ -32,6 +33,15 @@ module.exports = function(pluginDependencies) {
 
   var appNgModule = angular.module(APP_NAME, ngDependencies);
 
+  function getUri(id) {
+    var uri = $('base').attr(id);
+    if (!id) {
+      throw new Error('Uri base for ' + id + ' could not be resolved');
+    }
+
+    return uri;
+  }
+
   var ModuleConfig = [
     '$routeProvider',
     'UriProvider',
@@ -41,16 +51,6 @@ module.exports = function(pluginDependencies) {
     ) {
       $routeProvider.otherwise({ redirectTo: '/' });
 
-
-      function getUri(id) {
-        var uri = $('base').attr(id);
-        if (!id) {
-          throw new Error('Uri base for ' + id + ' could not be resolved');
-        }
-
-        return uri;
-      }
-
       UriProvider.replace(':appName', 'admin');
       UriProvider.replace('app://', getUri('href'));
       UriProvider.replace('cockpitbase://', getUri('app-root') + '/app/cockpit/');
@@ -70,16 +70,22 @@ module.exports = function(pluginDependencies) {
       }]);
     }];
 
+  appNgModule.provider('configuration', require('./../../../common/scripts/services/cam-configuration')(window.camAdminConf, 'Admin'));
+
   appNgModule.config(ModuleConfig);
 
+  require('./../../../common/scripts/services/locales')(appNgModule, getUri('app-root'), 'admin');
+
   appNgModule.controller('camAdminAppCtrl', [
     '$scope',
     '$route',
     'camAPI',
+    'configuration',
     function(
       $scope,
       $route,
-      camAPI
+      camAPI,
+      configuration
     ) {
       var userService = camAPI.resource('user');
       function getUserProfile(auth) {
@@ -105,6 +111,14 @@ module.exports = function(pluginDependencies) {
       });
 
       getUserProfile($scope.authentication);
+
+      $scope.langs = configuration.getAvailableLocales();
+      $scope.langCurrent = localStorage.getItem('lang_cam') || navigator.language
+        || window.navigator.language || configuration.getFallbackLocale();
+      $scope.selectLang = function(langSelect) {
+        localStorage.setItem('lang_cam', langSelect);
+        location.reload();
+      };
     }]);
 
   if (typeof window.adminConf !== 'undefined' && window.adminConf.polyfills) {

ui/admin/client/scripts/config.js

@@ -13,4 +13,9 @@ window.camAdminConf = {
   //     'custom-ui': 'custom-ui/scripts'
   //   }
   // }
+
+  'locales': {
+    'availableLocales': ['es', 'en'],
+    'fallbackLocale': 'en'
+  }
 };

ui/admin/client/scripts/index.html

@@ -57,36 +57,55 @@
          authentication="authentication"
          user-name="userFullName"
          current-app="admin"
+         sign-out="{{ 'SIGN_OUT_ACTION' | translate }}"
+         my-profile="{{ 'MY_PROFILE' | translate }}"
          brand-name="Camunda Admin"
          ng-cloak>
       <ul cam-if-logged-in
           ng-controller="NavigationController">
 
         <li ng-class="activeClass('#/user')">
-          <a href="#/users">Users</a>
+          <a href="#/users">{{ 'USERS_USERS' | translate }}</a>
         </li>
 
         <li ng-class="activeClass('#/group')">
-          <a href="#/groups">Groups</a>
+          <a href="#/groups">{{ 'GROUPS_GROUPS' | translate }}</a>
         </li>
 
         <li ng-class="activeClass('#/tenant')">
-          <a href="#/tenants">Tenants</a>
+          <a href="#/tenants">{{ 'TENANTS_TENANTS' | translate }}</a>
         </li>
 
         <li ng-class="activeClass('#/authorization')"
             show-if-authorized
             auth-permission="ALL"
             auth-resource-name="authorization">
-          <a href="#/authorization?resource=0">Authorizations</a>
+          <a href="#/authorization?resource=0">{{ 'AUTHORIZATION_AUTHORIZATIONS' | translate }}</a>
         </li>
         <li ng-class="activeClass('#/system')"
             show-if-authorized
             auth-permission="ALL"
             auth-resource-name="authorization">
-          <a href="#/system?section=system-settings-general">System</a>
+          <a href="#/system?section=system-settings-general">{{ 'SYSTEM_SYSTEM' | translate }}</a>
         </li>
       </ul>
+
+      <ul class="languages">
+        <li class="app-switch dropdown">
+          <a href
+             class="dropdown-toggle">
+            <span class="glyphicon glyphicon-flag"></span>
+            <span class="caret"></span>
+          </a>
+
+          <ul class="dropdown-menu dropdown-menu-right">
+            <li ng-repeat="lang in langs" ng-class="{active : lang === langCurrent}">
+              <a ng-click="selectLang(lang)">{{ lang  }}</a>
+            </li>
+          </ul>
+       </li>
+     </ul>
+
     </div>
 
     <!-- content -->