From 45d2f704aca7076d510749985d1f7a5f111f73d5 Mon Sep 17 00:00:00 2001
From: shentao999 <shentao@chinamobile.com>
Date: Tue, 2 Apr 2019 09:56:55 +0800
Subject: [PATCH] Modify html label to support multi-language

Change-Id: I2f189dd935307488d8e63db624931ddbb1a18e95
Issue-ID: PORTAL-377
Signed-off-by: shentao999 <shentao@chinamobile.com>
---
 .../account-onboarding/account-onboarding.tpl.html |  5 +-
 .../client/app/views/admins/admins.tpl.html        | 12 ++--
 .../client/app/views/catalog/catalog.tpl.html      | 10 +--
 .../client/app/views/dashboard/dashboard.tpl.html  | 82 ++++++++++------------
 .../client/app/views/header/header.controller.js   | 56 +++++++++++----
 .../client/app/views/header/header.tpl.html        | 25 ++++---
 .../microservice-onboarding.tpl.html               |  4 +-
 .../app/views/portal-admin/portal-admin.tpl.html   | 12 ++--
 .../client/app/views/role/role_list.html           | 16 ++---
 .../client/app/views/users/users.tpl.html          | 14 ++--
 .../views/widget-catalog/widget-catalog.tpl.html   |  2 +-
 .../widget-onboarding/widget-onboarding.tpl.html   |  5 +-
 12 files changed, 130 insertions(+), 113 deletions(-)

diff --git a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.tpl.html b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.tpl.html
index e4df68ed..eb3d4ae1 100644
--- a/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/account-onboarding/account-onboarding.tpl.html
@@ -39,7 +39,7 @@
 	<div class="w-ecomp-main-container">
 		<div class="account-onboarding" id="page-content">
 			<div id="account-onboarding-title" class="w-ecomp-main-view-title">
-				<h1 class="heading-page" >App Account Management</h1>
+				<h1 class="heading-page" >{{'App Account Management'|T}}</h1>
 			</div>
 			<div class="account-table">
 				<div class="table-control">
@@ -48,8 +48,7 @@
 						<button class="btn btn-alt btn-small"
 							id="account-onboarding-button-add"
 							ng-click="accountOnboarding.openAddNewAccountModal()">
-							<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add
-							Account
+							<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;{{'Add Account'|T}}
 						</button>
 					</div>
 
diff --git a/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html b/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
index 961151b7..299e6038 100644
--- a/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/admins/admins.tpl.html
@@ -38,7 +38,7 @@
 <div class="w-ecomp-admins-page-main">
     <div class="admins-home-container" id="page-content">
             <div id="title" class="w-ecomp-main-view-title">
-	 			<h1 class="heading-page" >Admins</h1>
+	 			<h1 class="heading-page" >{{'Admins'|T}}</h1>
 			</div>
             <div class="admins-table">
                 <div class="table-control">
@@ -51,7 +51,7 @@
 						<div >
 							<input id="input-table-search" placeholder="Search in entire table" class="table-search-field" type="text" data-ng-model="admins.searchString">
 						</div>
-						<button class="btn btn-alt btn-small" id="admin-button-add"  ng-click="admins.openAddNewAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Admin</button> 
+						<button class="btn btn-alt btn-small" id="admin-button-add"  ng-click="admins.openAddNewAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;{{'Add Admin'|T}}</button> 
 					</div>                  
             	</div>
                 <span class="ecomp-spinner" ng-show="admins.isLoadingTable"></span>
@@ -59,10 +59,10 @@
 					<table>
 						<thead b2b-table-row type="header">
 							<tr >
-								<th b2b-table-header key="firstName" sortable="true" id="col1" default-sort="a">First Name</th>
-								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>
-								<th b2b-table-header key="orgUserId" sortable="true" id="col3">User ID</th>
-								<th b2b-table-header key="" sortable="falses" id="col4">Applications</th>
+								<th b2b-table-header key="firstName" sortable="true" id="col1" default-sort="a">{{'First Name'|T}}</th>
+								<th b2b-table-header key="lastName" sortable="true" id="col2">{{'Last Name'|T}}</th>
+								<th b2b-table-header key="orgUserId" sortable="true" id="col3">{{'User Id'|T}}</th>
+								<th b2b-table-header key="" sortable="falses" id="col4">{{'Applications'|T}}</th>
 							</tr>
 						</thead>
 						<tbody b2b-table-row type="body" 	row-repeat="rowData in admins.adminsTableData | filter: admins.portalsRowFilter" class="table-admins-div">
diff --git a/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html b/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
index 3ba37854..2dfb9142 100644
--- a/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/catalog/catalog.tpl.html
@@ -38,7 +38,7 @@
 <div class="w-ecomp-app-catalog">
 	<div class="app-catalog-container" id="page-content">
 	        <div id="title" class="w-ecomp-main-view-title">
-			<h1 class="heading-page">Application Catalog</h1>
+			<h1 class="heading-page">{{'Application Catalog'|T}}</h1>
 		</div>
 		<div class="app-catalog-list">
 			<div class="simulateCatGridHeader"> 
@@ -48,28 +48,28 @@
 				</span> <br> <br> 
 				<div class="catalog-radio-div"> 
 					<label for="radio-button-all" class="radio"> 
-						<span>Filter: </span> 
+						<span>{{'Filter'|T}}: </span> 
 					</label> 
 				</div> 
 				<div class="catalog-radio-div"> 
 					<label for="radio-button-all" class="radio"> 
 		                <input type="radio" ng-model="radioValue" id="radio-button-all" name="All" value="All" > 
 		                <i class="skin"></i> 
-		                <span>All</span> 
+		                <span>{{'All'|T}}</span> 
 		            </label> 
 				</div> 
 				<div class="catalog-radio-div"> 
 		            <label for="radio-button-accessible" class="radio"> 
 		                <input type="radio" ng-model="radioValue" id="radio-button-accessible" name="Accessible" value="Accessible" > 
 		                <i class="skin"></i> 
-		                <span>Accessible</span> 
+		                <span>{{'Accessible'|T}}</span> 
 		            </label> 
 	            </div> 
 	            <div class="catalog-radio-div"> 
 		            <label for="radio-button-homepage" class="radio"> 
 		                <input type="radio" ng-model="radioValue" id="radio-button-homepage" name="Selected" value="Selected"> 
 		                <i class="skin"></i> 
-		                <span>On Home Page</span> 
+		                <span>{{'On Home Page'|T}}</span> 
 		            </label> 
 				</div> 
 			</div>
diff --git a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html
index afabca60..171fd09d 100644
--- a/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/dashboard/dashboard.tpl.html
@@ -38,15 +38,13 @@
 <div class="w-ecomp-dashboard-home" id="widgets">
 	<div class="dashboard-home-container" id="page-content">
 		<div align="center" id="errorInfo" class="error-info-txt">
-			<span class="">You don't have a user account in that
-				application. Please ask the system administrator. </span>
+			<span class="">{{'No account'|T}}. </span>
 		</div>
 		<div class="portals-list">
 			<div>
 				<div class="simulateGridHeader">
-					<span class="simulateGridHeaderTitle">Applications <span
-						class="dashboardSortHeader">Sort by:</span>
-						
+					<span class="simulateGridHeaderTitle">{{'Applications'|T}}<span
+						class="dashboardSortHeader">{{'Sort by'|T}}:</span>
 						<div class="dashboard-dropdown" id="sort-by-dropdownid-{{selectedSortType.value}}">
 						<select id="sort-by-{{selectedSortType.value}}" name="dropdown1" b2b-dropdown  ng-model="selectedSortType.value" ng-change="selectedSortTypeChanged(selectedSortType.value)">  
 				        <option b2b-dropdown-list option-repeat="d in sort_options" value="{{d.value}}">{{d.title}}</option>
@@ -92,8 +90,7 @@
 										<div class="gridster-box-header gridster-box-pointer"
 											ng-click="dashboard.goToCatalog()">
 											<i class="icon-content-gridguide"></i>
-											<h3>Select applications...</h3>
-
+											<h3>{{'Select applications'|T}}...</h3>
 										</div>
 										<div class="gridster-box-content"
 										id="gridster-personalize"
@@ -106,9 +103,10 @@
 										'padding': '4px',
 										'opacity': '1'}"
 											ng-click="dashboard.goToCatalog()" class="gridsterContent">
-											<label id="add-icon-label"  class="gridster-txt">Click
-												here to personalize <br> this applications page
-											</label> <i  id="add-icon" class="icon-controls-add-maximize"
+											<label id="add-icon-label" class="gridster-txt">{{'Click
+                        here to personalize'|T}} <br> {{'this applications page'|T}}
+											</label>
+                      <i id="add-icon" class="icon-controls-add-maximize"
 												class="gridster-icon"></i>
 										</div>
 									</div>
@@ -124,13 +122,9 @@
 			<br> <br>
 
 			<div class="simulateGridHeader">
-				<span class="simulateGridHeaderTitle">Widgets </span>
+				<span class="simulateGridHeaderTitle">{{'Widgets'|T}}</span>
 			</div>
-			
-			<div 
-				ng-show=dashboard.isCommError>Failed to communicate with the
-				widget microservice.</div>
-			
+			<div ng-show=dashboard.isCommError>{{'widget microservice failed'|T}}.</div>
 			<div id="widget-boarder" class="content" gridster="dashboard.gridsterWidgetOpts">
 				<ul>
 					<li gridster-item="widget" ng-repeat="widget in widgetsViewData">
@@ -140,34 +134,30 @@
 								<h3>{{ widget.headerText}}</h3>
 								<div class="box-header-btns pull-right"
 									ng-if="isAdminPortalAdmin == true" class="ng-scope">
-										<span id="widgetHeaderBtns-{{widget.headerText.split(' ').join('-')}}"
-											class="widgetHeaderBtn widgetHeaderBtnPosition singleBtnBorder"
-											ng-class="singleBtnBorder" alt="Settings"
-											ng-mousedown="showImpResOption=!showImpResOption"
-											ng-mouseleave="showImpResOption=false" title="Settings"
-											ddh-accessibility-click="13,32" tabindex="0"><span
-											class="widgetHeaderBtns-span"><span class="icon-controls-moreapplications"></span></span></span>
-
-										<ul class="optionsMenu widget-menu-options"											
-											ng-show="showImpResOption"
-											ng-mouseenter="showImpResOption=true"
-											ng-mouseleave="showImpResOption=false">
-											<!-- ngIf: widget.duplicateAllowed -->
-											<li ng-show="widget.widgetIdentifier != ''"
-												ng-click="editWidgetModalPopup(importResData, widget.widgetIdentifier);">
-												<a id="edit-widget-popup" class="optionsMenuLink" href="javascript:void(0)"
-												ddh-accessibility-click="13,32">Edit</a>
-											</li>
-											
-											<li
-												ng-click="editWidgetParameters(widget.widgetid);">
-												<a id="parameters-widget-popup" class="optionsMenuLink" href="javascript:void(0)"
-												ddh-accessibility-click="13,32">Parameters</a>
-											</li>
-											
-											<!-- end ngIf: widget.duplicateAllowed  -->
-										</ul>
-
+									<span id="widgetHeaderBtns-{{widget.headerText.split(' ').join('-')}}"
+										class="widgetHeaderBtn widgetHeaderBtnPosition singleBtnBorder"
+										ng-class="singleBtnBorder" alt="Settings"
+										ng-mousedown="showImpResOption=!showImpResOption"
+										ng-mouseleave="showImpResOption=false" title="Settings"
+										ddh-accessibility-click="13,32" tabindex="0">
+					                    <span class="widgetHeaderBtns-span">
+					                      <span class="icon-controls-moreapplications"></span>
+					                    </span>
+					                  </span>
+									<ul class="optionsMenu widget-menu-options"											
+										ng-show="showImpResOption"
+										ng-mouseenter="showImpResOption=true"
+										ng-mouseleave="showImpResOption=false">
+										<!-- ngIf: widget.duplicateAllowed -->
+										<li ng-show="widget.widgetIdentifier != ''"
+											ng-click="editWidgetModalPopup(importResData, widget.widgetIdentifier);">
+											<a id="edit-widget-popup" class="optionsMenuLink" href="javascript:void(0)" ddh-accessibility-click="13,32">{{'Edit'|T}}</a>
+										</li>
+										<li ng-click="editWidgetParameters(widget.widgetid);">
+											<a id="parameters-widget-popup" class="optionsMenuLink" href="javascript:void(0)" ddh-accessibility-click="13,32">{{'Parameters'|T}}</a>
+										</li>
+										<!-- end ngIf: widget.duplicateAllowed  -->
+									</ul>
 								</div>
 							</div>
 							<div class="box-content">
@@ -182,12 +172,12 @@
 				<div id="dashboardAddWidgetPreference"
 					ng-style="{'cursor':'pointer'}"
 					ng-click="dashboard.goToWidgetCatLog()">
-					<i class="icon-controls-add-maximize"></i> Add Widget
+					<i class="icon-controls-add-maximize"></i>{{'Add Widget'|T}} 
 				</div>
 				&nbsp;
 				<div id="dashboardDefaultPreference" ng-style="{'cursor':'pointer'}"
 					ng-click="restoreSortSelected()">
-					<i class="icon-arrows-replay-restart"></i> Reset Widget Layout
+					<i class="icon-arrows-replay-restart"></i> {{'Reset Widget Layout'|T}} 
 				</div>
 			</div>
 		</div>
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.controller.js b/ecomp-portal-FE-common/client/app/views/header/header.controller.js
index e76ec169..e4640481 100644
--- a/ecomp-portal-FE-common/client/app/views/header/header.controller.js
+++ b/ecomp-portal-FE-common/client/app/views/header/header.controller.js
@@ -38,20 +38,46 @@
 'use strict';
 (function () {
 	class HeaderCtrl {
-        constructor($log, $window, userProfileService, menusService, $scope, ECOMP_URL_REGEX, $cookies, $state,auditLogService,notificationService,ngDialog,$modal) {
-            this.firstName = '';
-            this.lastName = '';
-            this.$log = $log;
-            this.menusService = menusService;
-            this.$scope = $scope;
-            this.favoritesMenuItems = '';
-            $scope.favoriteItemsCount = 0;
-            $scope.favoritesMenuItems = '';
-            $scope.showFavorites = false;
-            $scope.emptyFavorites = false;
-            $scope.favoritesWindow = false;
-            $scope.notificationCount=0;
-            $scope.showNotification = true;
+    constructor($log, $window, $translate, translateService,userProfileService, menusService, $scope, ECOMP_URL_REGEX, $cookies, $state,auditLogService,notificationService,ngDialog,$modal) {
+      this.firstName = '';
+      this.lastName = '';
+      this.$log = $log;
+      this.menusService = menusService;
+      this.$scope = $scope;
+      this.favoritesMenuItems = '';
+      $scope.cur_lang = '';
+      $scope.langList = []
+      $scope.favoriteItemsCount = 0;
+      $scope.favoritesMenuItems = '';
+      $scope.showFavorites = false;
+      $scope.emptyFavorites = false;
+      $scope.favoritesWindow = false;
+      $scope.notificationCount=0;
+      $scope.showNotification = true;
+      // get all languages
+      var loginId = sessionStorage.getItem('userId')
+      translateService.getCurrentLang(loginId).then(res => {
+        $scope.cur_lang = res.languageAlias
+        $translate.use($scope.cur_lang);
+      })
+      translateService.getLangList().then(res => {
+        $scope.langList = res.languageList
+      })
+      // switch language
+      $scope.switching = function(lang) {
+        $translate.use(lang);
+        var langs = $scope.langList
+        var langId = ''
+        var selectedLang = langs.find(function(item) {
+          return item.languageAlias === lang;
+        });
+        langId = selectedLang.languageId
+        var loginId = sessionStorage.getItem('userId')
+        translateService.saveSelectedLang(loginId, {'languageId': langId}).then(res => {
+          window.location.reload();
+        })
+      }
+      $scope.cur_lang = $translate.use();
 
             $scope.hideMenus = false;
 
@@ -434,7 +460,7 @@
     
     NotificationCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout', 'sessionService','notificationService','$interval','ngDialog','$modal'];
     LoginSnippetCtrl.$inject = ['$log', '$scope', '$cookies', '$timeout','userProfileService', 'sessionService'];
-    HeaderCtrl.$inject = ['$log', '$window', 'userProfileService', 'menusService', '$scope', 'ECOMP_URL_REGEX','$cookies','$state','auditLogService','notificationService','ngDialog','$modal'];
+    HeaderCtrl.$inject = ['$log', '$window', '$translate', 'translateService', 'userProfileService', 'menusService', '$scope', 'ECOMP_URL_REGEX','$cookies','$state','auditLogService','notificationService','ngDialog','$modal'];
     angular.module('ecompApp').controller('HeaderCtrl', HeaderCtrl);
     angular.module('ecompApp').controller('loginSnippetCtrl', LoginSnippetCtrl);
     angular.module('ecompApp').controller('notificationCtrl', NotificationCtrl);
diff --git a/ecomp-portal-FE-common/client/app/views/header/header.tpl.html b/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
index 83abf7de..ed240b9a 100644
--- a/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/header/header.tpl.html
@@ -92,8 +92,8 @@
 			                                        <p id="p-no-favs-icon" class="no-fav-icon">
 			                                        	<span class="icon-star" ></span>
 			                                        </p>
-			                                        <p id="p-no-favs" class="largeText">No Favorites</p>
-			                                        <p id="p-no-favs-desc"  class="normal">Add your favorite items for quick access.</p>
+							                    	<p id="p-no-favs" class="largeText">{{'No Favorites'|T}}</p>
+							                        <p id="p-no-favs-desc"  class="normal">{{'Add your favorite items for quick access'|T}}.</p>
 				                                </div>
 			                                </li>
 			                            </ul>
@@ -155,6 +155,10 @@
             </li>
 <!-- Right side of the Menu - User Icon and Notification flag -->
             <div class="login-section">
+        <!-- Language Select -->
+				<select ng-controller="HeaderCtrl" ng-model="cur_lang" ng-change="switching(cur_lang)" style="float:right">
+					<option value="{{x.languageAlias}}" ng-repeat="x in langList">{{x.languageName}}</option>
+				</select>
      <!-- User Icon -->
             <li class="header__item profile" aria-haspopup="true">
 				<b2b-flyout>
@@ -171,31 +175,30 @@
 					                        <div class="reg-userName-table">
 					                            <div id="reg-userName-table-row">
 					                                <div id="reg-userName-table-cell">
-					                                    <h3 >
-					                                    {{firstName}} {{lastName}}&nbsp;</h3>
+                              							<h3 >{{firstName}} {{lastName}}&nbsp;</h3>
 					                                    <span>&nbsp;</span>
 					                                </div>
 					                            </div>
 					                        </div>
 					                    </li>
-										<li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn reg-common-label-spn-txt" >Email<span class="visuallyhidden">:
+										<li><div class="reg-userEmail-label"><span class="reg-userEmail-label-spn reg-common-label-spn-txt" >{{'Email'|T}}<span class="visuallyhidden">:
 					                    </span></span></div></li>
 										<li><div class="reg-userEmail-value"><span class="reg-userEmail-value-spn">
 					                        {{loginSnippetEmail}}</span></div></li>
 					                    <li>&nbsp;</li>
 										<li><div class="reg-userRole-label"><span class="reg-userRole-label-spn reg-common-label-spn-txt">
-					                        User Id<span class="visuallyhidden">:</span></span></div></li>
+					                        {{'User Id'|T}}<span class="visuallyhidden">:</span></span></div></li>
 										<li><div class="reg-userRole-value"><span class="reg-userRole-value-spn">
 					                        {{loginSnippetUserid}}<span class="visuallyhidden"></span></span></div></li>
 					                    <li>&nbsp;</li>
 										<li><div class="reg-userLastLogin-label"><span class="reg-userLastLogin-label-spn reg-common-label-spn-txt">
-					                        Last login<span class="visuallyhidden">:</span></span></div></li>
+					                        {{'Last login'|T}}<span class="visuallyhidden">:</span></span></div></li>
 										<li><div class="reg-userLastLogin-value"><span class="reg-userLastLogin-value-spn">
 					                        {{ lastLogin | date : 'medium' }}<span class="visuallyhidden"></span></span></div></li>
 						                <li>&nbsp;</li>
 					 					<li>
 					               			<div class="display-userAppRoles-label">
-					                			<a href="javascript:void(0);"  ng-click="getUserApplicationRoles()"  class="icon-primary-accordion-plus" ng-class="{true: 'icon-primary-accordion-plus', false: 'icon-primary-accordion-minus'}[ !displayUserAppRoles]" ><span class="business-card-app-role">Applications and Roles</span></a>
+					                			<a href="javascript:void(0);"  ng-click="getUserApplicationRoles()"  class="icon-primary-accordion-plus" ng-class="{true: 'icon-primary-accordion-plus', false: 'icon-primary-accordion-minus'}[ !displayUserAppRoles]" ><span class="business-card-app-role">{{'Applications and Roles'|T}}</span></a>
 					                 		</div>
 					                 		<br>
 					                        <div class="display-userAppRoles-label display-userAppRoles-label-txt" ng-show="displayUserAppRoles">
@@ -215,7 +218,7 @@
 					                <div ng-include class="profile-detail-extension" src="'app/views/header/header-extension.tpl.html'"></div>				                							
 					                <div id="reg-logout-div" class="logout-btn-div">
 					                     <button href="javascript:void(0)" id="allLogout" ng-click="allAppsLogout()" class="btn btn-alt btn-small">
-											Log out
+											{{'Log out'|T}}
 										</button>
 					                </div>
 						        </div>
@@ -240,7 +243,7 @@
 									</div>
 									<div class="notification-header">
 										<div class="notification-common-position">
-											<p class="notification-heading">Notifications</p>
+      										<p class="notification-heading">{{'Notifications'| T}}</p>
 										</div>
 										<div class="notification-common-space"></div>
 									</div>
@@ -250,7 +253,7 @@
 												<div align="center" class="icon-information notification-info-icon"></div>
 											</div>
 										<div>
-										<p class="notification-text">No New Notifications.</p>
+										<p class="notification-text">{{'No New Notifications'| T}}.</p>
 									</div>
 									
 								</div>
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
index 5ad29fca..cdac9174 100644
--- a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
@@ -39,13 +39,13 @@
 	<div class="w-ecomp-main-container">
 		<div class="microservice-onboarding" id="page-content">
 			<div id="microservice-onboarding-title" class="w-ecomp-main-view-title">
-				<h1 class="heading-page" >Microservice Onboarding</h1>
+				<h1 class="heading-page" >{{'Microservice Onboarding'|T}}</h1>
 			</div>
 			<div class="microservices-table">
 				<div class="table-control">
 	                <div class="table-control-buttons">
 						<button class="btn btn-alt btn-small"  id="microservice-onboarding-button-add" ng-click="microserviceOnboarding.openAddNewMicroserviceModal()">
-		                	<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Microservice
+		                	<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;{{'Add Microservice'|T}}
 		                </button> 
 					</div>
 					<div>
diff --git a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html
index 0d761bbb..c894006b 100644
--- a/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/portal-admin/portal-admin.tpl.html
@@ -39,7 +39,7 @@
     <div class="w-ecomp-main-container" >
         <div class="portal-admins-page-main" id="page-content" >
             <div id="title" class="w-ecomp-main-view-title">
-            	 <h1 class="heading-page" >Portal Admins</h1>
+            	 <h1 class="heading-page" >{{'Portal Admins'|T}}</h1>
             </div>
             <div class="portal-admins-table">
                 <div class="table-control">
@@ -47,7 +47,7 @@
 						<input id="input-table-search" placeholder="Search in entire table" class="table-search-field" type="text" data-ng-model="portalAdmin.searchString">
 					</div>
 					<div class="table-control-buttons">
-						<button class="btn btn-alt btn-small" id="portal-admin-button-add" ng-click="portalAdmin.openAddNewPortalAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Portal Admin</button> 		
+						<button class="btn btn-alt btn-small" id="portal-admin-button-add" ng-click="portalAdmin.openAddNewPortalAdminModal()"><i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;{{'Add Portal Admin'|T}}</button> 		
 					</div>      
                 </div>
 
@@ -57,10 +57,10 @@
 					<table>
 						<thead b2b-table-row type="header">
 							<tr >
-								<th b2b-table-header key="firstName" sortable="true" id="col1" default-sort="a">First Name</th>
-								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>
-								<th b2b-table-header key="loginId" sortable="true" id="col3">User ID</th>
-								<th b2b-table-header key="" sortable="falses" id="col4">Delete</th>
+								<th b2b-table-header key="firstName" sortable="true" id="col1" default-sort="a">{{'First Name'|T}}</th>
+								<th b2b-table-header key="lastName" sortable="true" id="col2">{{'Last Name'|T}}</th>
+								<th b2b-table-header key="loginId" sortable="true" id="col3">{{'User Id'|T}}</th>
+								<th b2b-table-header key="" sortable="falses" id="col4">{{'Delete'|T}}</th>
 							</tr>
 						</thead>
 						<tbody b2b-table-row type="body" 	row-repeat="rowData in portalAdmin.portalAdminsTableData">
diff --git a/ecomp-portal-FE-common/client/app/views/role/role_list.html b/ecomp-portal-FE-common/client/app/views/role/role_list.html
index 34244b5f..7f397dcd 100644
--- a/ecomp-portal-FE-common/client/app/views/role/role_list.html
+++ b/ecomp-portal-FE-common/client/app/views/role/role_list.html
@@ -43,7 +43,7 @@
 <div class="w-ecomp-admins-page-main">
 	<div class="admins-home-container" id="page-content">
 		<div id="title" class="w-ecomp-main-view-title">
-			<h1 class="heading-page" >Roles</h1>
+			<h1 class="heading-page" >{{'Roles'|T}}</h1>
 		</div>
 		<div class="admins-table">
 		
@@ -58,23 +58,23 @@
 		<br/>
 		
 			<div id="button-create-role" align="left" class="admins-table-btn-create" >
-				<button id="button-create-role" ng-click="addRoleModalPopup(apps.selectedCentralizedApp)" class = "btn btn-alt btn-small">Create</button>
+				<button id="button-create-role" ng-click="addRoleModalPopup(apps.selectedCentralizedApp)" class = "btn btn-alt btn-small">{{'Create'|T}}</button>
 				<button id="button-sync-role"  ng-show="syncRolesApplied" ng-click="syncRolesFromExternalAuthSystem(apps.selectedCentralizedApp)" class = "btn btn-alt btn-small"><i class="icon-arrows-update-refresh-syncL" aria-hidden="true"></i>&nbsp;Sync Roles</button>
 				<button id="button-bulk-upload" ng-show="syncRolesApplied" ng-click="openBulkUploadRolesAndFunctionsModal(apps.selectedCentralizedApp)" class = "btn btn-alt btn-small"><i class="icon-arrows-upload" aria-hidden="true"></i>&nbsp;Bulk Upload</button>
 			</div>
 			<br>
 			  <div class="property-label">
-					<span ID="required" style="color: Red;font-size: 210%;"	visible="false"> *</span>-----Indicates Global Roles	</div>
+					<span ID="required" style="color: Red;font-size: 210%;"	visible="false"> *</span>-----{{'Indicates Global Roles'|T}}</div>
 			<div b2b-table table-data="availableRoles"  search-string="searchString" class="b2b-table-div">
 			<span class="ecomp-spinner" ng-show="showSpinner"></span>
 		        <table>
 		            <thead b2b-table-row type="header">
 		                <tr>
-		                    <th b2b-table-header key="name" sortable="true" default-sort="a" id="col1">Name</th>
-		                    <th b2b-table-header key="priority" sortable="true" id="col2">Priority</th>
-		                    <th b2b-table-header id="col3" sortable="false">Active</th>
-		                    <th b2b-table-header id="col4" sortable="false">Edit</th>
-		                    <th ng-if="apps.selectedCentralizedApp != 1" b2b-table-header id="col4" sortable="false">Delete</th>
+		                    <th b2b-table-header key="name" sortable="true" default-sort="a" id="col1">{{'Name'|T}}</th>
+		                    <th b2b-table-header key="priority" sortable="true" id="col2">{{'Priority'|T}}</th>
+		                    <th b2b-table-header id="col3" sortable="false">{{'Active'|T}}</th>
+		                    <th b2b-table-header id="col4" sortable="false">{{'Edit'|T}}</th>
+		                    <th ng-if="apps.selectedCentralizedApp != 1" b2b-table-header id="col4" sortable="false">{{'Delete'|T}}</th>
 		                </tr>
 		            </thead>
 		            <tbody b2b-table-row type="body" row-repeat="rowData in availableRoles">
diff --git a/ecomp-portal-FE-common/client/app/views/users/users.tpl.html b/ecomp-portal-FE-common/client/app/views/users/users.tpl.html
index ef08e50b..40175810 100644
--- a/ecomp-portal-FE-common/client/app/views/users/users.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/users/users.tpl.html
@@ -39,7 +39,7 @@
     <div class="w-ecomp-main-container" >
         <div class="users-page-main" id="page-content">
             <div id="users-page-title" class="w-ecomp-main-view-title">
-            	 <h1 class="heading-page" >Users</h1>
+            	 <h1 class="heading-page" >{{'Users'|T}}</h1>
             </div>
             <div class="users-table">
                 <div class="table-control">
@@ -58,7 +58,7 @@
                 </div>
                 <div ng-hide="users.isLoadingTable">
                     <div class="error-text" id="div-select-app" ng-show="noAppSelected">
-                        <p class="error-help">Use the 'Select application' dropdown to see users.</p>
+                        <p class="error-help">{{'Use dropdown'|T}}.</p>
                     </div>
                     <div class="error-text"
                          id="div-error-no-users"
@@ -83,10 +83,10 @@
 					<table>
 						<thead b2b-table-row type="header">
 							<tr >
-								<th b2b-table-header key="firstName" sortable="true" id="col1" default-sort="a">First Name</th>
-								<th b2b-table-header key="lastName" sortable="true" id="col2">Last Name</th>
-								<th b2b-table-header key="orgUserId" sortable="true" id="col3">User ID</th>
-								<th b2b-table-header key="" sortable="falses" id="col4">Roles</th>
+								<th b2b-table-header key="firstName" sortable="true" id="col1" default-sort="a">{{'First Name'|T}}</th>
+								<th b2b-table-header key="lastName" sortable="true" id="col2">{{'Last Name'|T}}</th>
+								<th b2b-table-header key="orgUserId" sortable="true" id="col3">{{'User Id'|T}}</th>
+								<th b2b-table-header key="" sortable="falses" id="col4">{{'Roles'|T}}</th>
 							</tr>
 						</thead>
 						<tbody b2b-table-row type="body" 	row-repeat="rowData in users.accountUsers" class="table-users-div">
@@ -103,7 +103,7 @@
 				</div>
             </div>
             <div class="error-text"  id="div-error-403" ng-show="adminAppsIsNull==true">
-                <h1>Attention:</h1>
+                <h1>{{'Attention'|T}}:</h1>
                 <p>&nbsp;</p>
                 <p class="error-help">It appears that you have not been added as an admin yet to an application.</p>
                 <p>&nbsp;</p>
diff --git a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html
index e8647c7d..e58de4ba 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/widget-catalog/widget-catalog.tpl.html
@@ -39,7 +39,7 @@
 	<div class="w-ecomp-main-container">
 		<div class="widget-catalog" id="page-content">
 			<div id="title" class="w-ecomp-main-view-title">
-				<h1 class="heading-page">Widget Catalog</h1>
+				<h1 class="heading-page">{{'Widget Catalog'|T}}</h1>
 			</div>
 			<div class="widget-centerAlignment">
 				<div class="portals-list">
diff --git a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html
index 3612bbdb..4033c3cb 100644
--- a/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html
+++ b/ecomp-portal-FE-common/client/app/views/widget-onboarding/widget-onboarding.tpl.html
@@ -39,7 +39,7 @@
 	<div class="w-ecomp-main-container">
 		<div class="widget-onboarding" id="page-content">
 			<div id="title" class="w-ecomp-main-view-title">
-				<h1 class="heading-page">Widget Onboarding</h1>
+				<h1 class="heading-page">{{'Widget Onboarding'|T}}</h1>
 			</div>
 			<div class="widgets-table">
 				<div class="table-control">
@@ -62,8 +62,7 @@
 					<button id="widget-onboarding-button-add"
 						class="btn btn-alt btn-small"
 						ng-click="widgetOnboarding.openWidgetCatalogDetailsModal()">
-						<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add
-						Widget
+						<i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;{{'Add Widget'|T}}
 					</button>
 
 					<div id="widget-onboarding-communcation-message"
-- 
2.16.6