Translate Login and Home

src/app/clients/clients-view/identities-tab/identities-tab.component.html

@@ -13,16 +13,21 @@
           <td mat-cell *matCellDef="let identity">{{identity.id}}</td>
         </ng-container>
 
-        <ng-container matColumnDef="description">
-          <th mat-header-cell *matHeaderCellDef> Description </th>
-          <td mat-cell *matCellDef="let identity"> {{identity.description}} </td>
-        </ng-container>
-
         <ng-container matColumnDef="type">
           <th mat-header-cell *matHeaderCellDef> type </th>
           <td mat-cell *matCellDef="let identity"> {{identity.documentType.name}}</td>
         </ng-container>
 
+        <ng-container matColumnDef="documentKey">
+          <th mat-header-cell *matHeaderCellDef> Key </th>
+          <td mat-cell *matCellDef="let identity"> {{identity.documentKey}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="description">
+          <th mat-header-cell *matHeaderCellDef> Description </th>
+          <td mat-cell *matCellDef="let identity"> {{identity.description}} </td>
+        </ng-container>
+
         <ng-container matColumnDef="documents">
           <th mat-header-cell *matHeaderCellDef>Identity Documents </th>
           <td mat-cell *matCellDef="let identity">
@@ -44,7 +49,7 @@
           <th mat-header-cell *matHeaderCellDef> Actions </th>
           <td mat-cell *matCellDef="let identity; let i = index">
             <button class="identity-action-button" mat-raised-button color="primary" (click)="uploadDocument(i,identity.id)" *mifosxHasPermission="'CREATE_DOCUMENT'">
-              <fa-icon icon="cloud-upload-alt"></fa-icon>
+              <fa-icon icon="eye"></fa-icon>
             </button>
             <button class="identity-action-button" mat-raised-button color="warn" (click)="deleteIdentifier(identity.clientId,identity.id,i)" *mifosxHasPermission="'DELETE_CLIENTIDENTIFIER'">
               <fa-icon icon="times"></fa-icon>
@@ -57,4 +62,4 @@
 
     </table>
 
-</div>
+</div>

src/app/clients/clients-view/identities-tab/identities-tab.component.ts

@@ -34,7 +34,7 @@ export class IdentitiesTabComponent {
   /** Client Id */
   clientId: string;
   /** Identities Columns */
-  identitiesColumns: string[] = ['id', 'description', 'type', 'documents', 'status', 'actions'];
+  identitiesColumns: string[] = ['id', 'description', 'type', 'documentKey', 'documents', 'status', 'actions'];
 
   /** Identifiers Table */
   @ViewChild('identifiersTable', { static: true }) identifiersTable: MatTable<Element>;

src/app/core/shell/breadcrumb/breadcrumb.component.html

@@ -1,24 +1,24 @@
 <nav class="breadcrumb-wrapper">
   <ul class="breadcrumb">
-    <span #breadcrumb class="breadcrumb-title">{{ breadcrumbs[breadcrumbs.length-1].label }}</span>
+    <span #breadcrumb class="breadcrumb-title">{{ 'labels.breadcrumbs.' + breadcrumbs[breadcrumbs.length-1].label | translate }}</span>
     <span *ngIf="breadcrumbs.length-1 !== 0" class="separator">
       <li *ngFor="let breadcrumb of breadcrumbs; let last = last" class="breadcrumb-label">
         <span *ngIf="!last" class="breadcrumb-link">
-          <a *ngIf="breadcrumb.url" [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
-          <span *ngIf="!breadcrumb.url">{{ breadcrumb.label }}</span>
+          <a *ngIf="breadcrumb.url" [routerLink]="breadcrumb.url">{{ breadcrumb.label | translate }}</a>
+          <span *ngIf="!breadcrumb.url">{{ breadcrumb.label | translate }}</span>
         </span>
-        <span *ngIf="last">{{ breadcrumb.label }}</span>
+        <span *ngIf="last">{{ breadcrumb.label | translate }}</span>
       </li>
     </span>
   </ul>
 </nav>
 
 <ng-template #templateBreadcrumb let-popover="popover">
-  <h2>Breadcrumbs</h2>
+  <h2>{{ 'labels.popovers.Breadcrumbs' | translate }}</h2>
   <p class="mw300">This will show the user's current location in the app.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{ 'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{ 'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/core/shell/sidenav/sidenav.component.html

@@ -8,7 +8,7 @@
     <!-- TODO: Allow customization by organization -->
     <div class="app-brand" [routerLink]="['/home']">
       <img src="assets/images/MifosX_logo.png" alt="app-logo" class="app-logo">
-      <span #logo class="app-logo-text text-muted">Mifos</span>
+      <span #logo class="app-logo-text text-muted">{{ 'APP_NAME' | translate }}</span>
     </div>
 
     <div class="app-user">
@@ -20,10 +20,10 @@
         {{ username }}
       </span>
       <div #userPanel class="app-user-controls">
-        <button class="xs-button" mat-icon-button matTooltip="Settings" [routerLink]="['/settings']">
+        <button class="xs-button" mat-icon-button matTooltip="{{ 'tooltips.Settings' | translate }}" [routerLink]="['/settings']">
           <fa-icon icon="cog"></fa-icon>
         </button>
-        <button class="xs-button" mat-icon-button matTooltip="Sign Out" (click)="logout()">
+        <button class="xs-button" mat-icon-button matTooltip="{{ 'tooltips.Sign Out' | translate }}" (click)="logout()">
           <fa-icon icon="sign-out-alt"></fa-icon>
         </button>
       </div>
@@ -34,7 +34,7 @@
       <div #frequentlyAccessed>
       <div class="mt-1 mb-1 nav-item-sep">
         <mat-divider></mat-divider>
-        <span class="text-muted icon-menu-title">Frequently Accessed</span>
+        <span class="text-muted icon-menu-title">{{ 'labels.menus.Frequently Accessed' | translate }}</span>
       </div>
       </div>
       <div class="icon-menu">
@@ -47,7 +47,7 @@
 
       <div class="nav-item-sep">
         <mat-divider></mat-divider>
-        <span class="text-muted">Main Items</span>
+        <span class="text-muted">{{ 'labels.menus.Main Items' | translate }}</span>
       </div>
 
       <mat-nav-list>
@@ -55,61 +55,61 @@
           <mat-icon matListIcon >
             <fa-icon icon="tachometer-alt" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #dashboard>Dashboard</a>
+          <a matLine #dashboard>{{ 'labels.menus.Dashboard' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/navigation']" matTooltip="Navigation">
           <mat-icon matListIcon>
             <fa-icon icon="location-arrow" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #navigation>Navigation</a>
+          <a matLine #navigation>{{ 'labels.menus.Navigation' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/checker-inbox-and-tasks/checker-inbox']" matTooltip="Checker Inbox and Tasks">
           <mat-icon matListIcon>
             <i class="fa fa-check" ></i>
           </mat-icon>
-          <a matLine>Checker Inbox and Tasks</a>
+          <a matLine>{{ 'labels.menus.Checker Inbox and Tasks' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/collections/individual-collection-sheet']" matTooltip="Individual Collection Sheet">
           <mat-icon matListIcon>
             <i class="fa fa-tasks "></i>
           </mat-icon>
-          <a matLine>Individual Collection Sheet</a>
+          <a matLine>{{ 'labels.menus.Individual Collection Sheet' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/notifications']" matTooltip="Notifications">
           <mat-icon matListIcon>
             <fa-icon icon="bell" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine>Notifications</a>
+          <a matLine>{{ 'labels.menus.Notifications' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/accounting/journal-entries/frequent-postings']" matTooltip="Frequent Postings">
           <mat-icon matListIcon>
             <fa-icon icon="sync" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #frequentPostings>Frequent Postings</a>
+          <a matLine #frequentPostings>{{ 'labels.menus.Frequent Postings' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/accounting/journal-entries/create']" matTooltip="Create Journal Entry">
           <mat-icon matListIcon>
             <fa-icon icon="plus" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #createJournalEntry>Create Journal Entry</a>
+          <a matLine #createJournalEntry>{{ 'labels.menus.Create Journal Entry' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/accounting/chart-of-accounts']" matTooltip="Chart Of Accounts">
           <mat-icon matListIcon>
             <fa-icon icon="sitemap" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #chartOfAccounts>Chart of Accounts</a>
+          <a matLine #chartOfAccounts>{{ 'labels.menus.Chart of Accounts' | translate }}</a>
         </mat-list-item>
         <mat-list-item (click)="showKeyboardShortcuts()" matTooltip="Keyboard Shortcuts">
           <mat-icon matListIcon>
             <fa-icon icon="keyboard" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine>Keyboard Shortcuts</a>
+          <a matLine>{{ 'labels.menus.Keyboard Shortcuts' | translate }}</a>
         </mat-list-item>
         <mat-list-item matTooltip="Help">
           <mat-icon matListIcon (click)="help()">
             <fa-icon icon="question-circle" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine>Help</a>
+          <a matLine>{{ 'labels.menus.Help' | translate }}</a>
         </mat-list-item>
       </mat-nav-list>
 
@@ -130,7 +130,7 @@
 </ng-template>
 
 <ng-template #templateUserPanel let-popover="popover">
-  <h2>User Panel</h2>
+  <h2>{{ 'labels.menus.User Panel' | translate }}</h2>
   <p class="mw300">This section contains user name, user photograph, user settings and sign out button.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -140,7 +140,7 @@
 </ng-template>
 
 <ng-template #templateFrequentlyAccessed let-popover="popover">
-  <h2>Frequently Accessed</h2>
+  <h2>{{ 'labels.menus.Frequently Accessed' | translate }}</h2>
   <p class="mw300">This contains shortcut to the frequently accessed components.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -150,7 +150,7 @@
 </ng-template>
 
 <ng-template #templateDashboard let-popover="popover">
-  <h2>Dashboard</h2>
+  <h2>{{ 'labels.menus.Dashboard' | translate }}</h2>
   <p class="mw300">This will navigate the user to dashboard component.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -160,7 +160,7 @@
 </ng-template>
 
 <ng-template #templateNavigation let-popover="popover">
-  <h2>Navigation</h2>
+  <h2>{{ 'labels.menus.Navigation' | translate }}</h2>
   <p class="mw300">This will navigate the user to entity navigation screen.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -170,7 +170,7 @@
 </ng-template>
 
 <ng-template #templateFrequentPostings let-popover="popover">
-  <h2>Frequent Postings</h2>
+  <h2>{{ 'labels.menus.Frequent Postings' | translate }}</h2>
   <p class="mw300">Shortcut to Journal entry screen with accouting rules in place</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -180,7 +180,7 @@
 </ng-template>
 
 <ng-template #templateCreateJournalEntry let-popover="popover">
-  <h2>Create Journal Entry</h2>
+  <h2>{{ 'labels.menus.Create Journal Entry' | translate }}</h2>
   <p class="mw300">Shortcut to the create journal entry screen.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -190,7 +190,7 @@
 </ng-template>
 
 <ng-template #templateChartOfAccounts let-popover="popover">
-  <h2>Chart of Accounts</h2>
+  <h2>{{ 'labels.menus.Chart of Accounts' | translate }}</h2>
   <p class="mw300">Shortcut to chart of accounts screen to add/modify the ledger accounts.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>

src/app/core/shell/toolbar/toolbar.component.html

@@ -13,31 +13,31 @@
 
     <a #institution mat-tab-link class="tab-link" [matMenuTriggerFor]="institutionMenu" #institutionMenuTrigger="matMenuTrigger">
       <fa-icon class="mr-05" icon="university" size="lg"></fa-icon>
-      {{ 'Institution' | translate }}
+      {{ 'labels.menus.Institution' | translate }}
     </a>
 
     <span fxHide.lt-lg="true">
 
       <a #accounting mat-tab-link class="tab-link" [routerLink]="['/accounting']">
         <fa-icon class="mr-05" icon="money-bill-alt" size="lg"></fa-icon>
-        {{ 'Accounting' | translate }}
+        {{ 'labels.menus.Accounting' | translate }}
       </a>
       <a #reports mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" >
         <fa-icon class="mr-05" icon="chart-bar" size="lg"></fa-icon>
-        {{ 'Reports' | translate }}
+        {{ 'labels.menus.Reports' | translate }}
       </a>
       <a #admin mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger">
         <fa-icon class="mr-05" icon="shield-alt" size="lg"></fa-icon>
-        {{ 'Admin' | translate }}
+        {{ 'labels.menus.Admin' | translate }}
       </a>
       <a #selfService mat-tab-link class="tab-link" [matMenuTriggerFor]="selfServiceMenu" #selfServiceMenuTrigger="matMenuTrigger">
         <fa-icon class="mr-05" icon="users" size="lg"></fa-icon>
-        {{ 'Self Service' | translate }}
+        {{ 'labels.menus.Self Service' | translate }}
       </a>
 
       <a #configWizard mat-tab-link class="tab-link" (click)="openDialog()">
         <fa-icon class="mr-05" icon="info" size="lg"></fa-icon>
-        Configuration Wizard
+        {{ 'labels.menus.Configuration Wizard' | translate }}
       </a>
 
     </span>
@@ -57,7 +57,7 @@
   <div #themePicker>
     <mifosx-theme-picker fxHide.lt-md></mifosx-theme-picker>
   </div>
-  
+
   <div #notifications>
     <mifosx-notifications-tray fxHide.lt-md></mifosx-notifications-tray>
   </div>
@@ -70,40 +70,40 @@
 </mat-toolbar>
 
 <mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item routerLink="/clients">Clients</button>
-  <button mat-menu-item routerLink="/groups">Groups</button>
-  <button mat-menu-item routerLink="/centers">Centers</button>
+  <button mat-menu-item routerLink="/clients">{{ 'labels.menus.Clients' | translate }}</button>
+  <button mat-menu-item routerLink="/groups">{{ 'labels.menus.Groups' | translate }}</button>
+  <button mat-menu-item routerLink="/centers">{{ 'labels.menus.Centers' | translate }}</button>
   <span fxHide.lg>
-    <button mat-menu-item [routerLink]="['/accounting']">Accounting</button>
-    <button mat-menu-item [matMenuTriggerFor]="reportsMenu">Reports</button>
-    <button mat-menu-item [matMenuTriggerFor]="adminMenu">Admin</button>
-    <button mat-menu-item [matMenuTriggerFor]="selfServiceMenu">Self Service</button>
+    <button mat-menu-item [routerLink]="['/accounting']">{{ 'labels.menus.Accounting' | translate }}</button>
+    <button mat-menu-item [matMenuTriggerFor]="reportsMenu">{{ 'labels.menus.Reports' | translate }}</button>
+    <button mat-menu-item [matMenuTriggerFor]="adminMenu">{{ 'labels.menus.Admin' | translate }}</button>
+    <button mat-menu-item [matMenuTriggerFor]="selfServiceMenu">{{ 'labels.menus.Self Service' | translate }}</button>
   </span>
 </mat-menu>
 
 <!-- Toolbar Menus -->
 <mat-menu #reportsMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item [routerLink]="['/reports']">All</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Client']">Clients</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Loan']">Loans</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Savings']">Savings</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Fund']">Funds</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Accounting']">Accounting</button>
-  <button mat-menu-item [routerLink]="['/xbrl']">XBRL</button>
+  <button mat-menu-item [routerLink]="['/reports']">{{ 'labels.menus.All' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Client']">{{ 'labels.menus.Clients' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Loan']">{{ 'labels.menus.Loans' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Savings']">{{ 'labels.menus.Savings' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Fund']">{{ 'labels.menus.Funds' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Accounting']">{{ 'labels.menus.Accounting' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/xbrl']">{{ 'labels.menus.XBRL' | translate }}</button>
 </mat-menu>
 
 <mat-menu #adminMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item [routerLink]="['/users']">Users</button>
-  <button mat-menu-item [routerLink]="['/organization']">Organization</button>
-  <button mat-menu-item [routerLink]="['/system']">System</button>
-  <button mat-menu-item [routerLink]="['/products']">Products</button>
-  <button mat-menu-item [routerLink]="['/templates']">Templates</button>
+  <button mat-menu-item [routerLink]="['/users']">{{ 'labels.menus.Users' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/organization']">{{ 'labels.menus.Organization' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/system']">{{ 'labels.menus.System' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/products']">{{ 'labels.menus.Products' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/templates']">{{ 'labels.menus.Templates' | translate }}</button>
 </mat-menu>
 
 <mat-menu #selfServiceMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item [routerLink]="['/self-service/users']">User Management</button>
-  <button mat-menu-item [routerLink]="['/self-service/app-configuration']">App Configuration</button>
-  <button mat-menu-item [routerLink]="['/self-service/task-management']">Task Management</button>
+  <button mat-menu-item [routerLink]="['/self-service/users']">{{ 'labels.menus.User Management' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/self-service/app-configuration']">{{ 'labels.menus.App Configuration' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/self-service/task-management']">{{ 'labels.menus.Task Management' | translate }}</button>
 </mat-menu>
 
 <!-- Application User Help Menu -->
@@ -112,31 +112,31 @@
     <mat-icon matListIcon>
       <fa-icon icon="question-circle" size="sm"></fa-icon>
     </mat-icon>
-    <span>Help</span>
+    <span>{{ 'labels.menus.Help' | translate }}</span>
   </button>
   <button mat-menu-item [routerLink]="['/profile']">
     <mat-icon>
       <fa-icon icon="user" size="sm"></fa-icon>
     </mat-icon>
-    <span>Profile</span>
+    <span>{{ 'labels.menus.Profile' | translate }}</span>
   </button>
   <button mat-menu-item [routerLink]="['/settings']">
     <mat-icon>
       <fa-icon icon="cog" size="sm"></fa-icon>
     </mat-icon>
-    <span>Settings</span>
+    <span>{{ 'labels.menus.Settings' | translate }}</span>
   </button>
   <button mat-menu-item (click)="logout()" id="logout">
     <mat-icon>
       <fa-icon icon="sign-out-alt" size="sm"></fa-icon>
     </mat-icon>
-    <span>Sign Out</span>
+    <span>{{ 'labels.menus.Sign Out' | translate }}</span>
   </button>
 </mat-menu>
 
 
 <ng-template #templateInstitution let-popover="popover">
-  <h2>Institution</h2>
+  <h2>{{ 'labels.menus.Institution' | translate }}</h2>
   <p class="mw300">This button will be used for individual accounts, groups and centers</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -145,7 +145,7 @@
 </ng-template>
 
 <ng-template #templateAccounting let-popover="popover">
-  <h2>Accounting</h2>
+  <h2>{{ 'labels.menus.Accounting' | translate }}</h2>
   <p class="mw300">This button opens the menu to access the system tools required by the accounting department.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -155,7 +155,7 @@
 </ng-template>
 
 <ng-template #templateReports let-popover="popover">
-  <h2>Reports</h2>
+  <h2>{{ 'labels.menus.Reports' | translate }}</h2>
   <p class="mw300">Dropdown provides access to all types of system reports including the defualt reports provided by the Mifos and system reports that will be developed by the organization.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -165,7 +165,7 @@
 </ng-template>
 
 <ng-template #templateAdmin let-popover="popover">
-  <h2>Admin</h2>
+  <h2>{{ 'labels.menus.Admin' | translate }}</h2>
   <p class="mw300">This is where the system is setup according to your organization including users, organization, products and templates.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -175,7 +175,7 @@
 </ng-template>
 
 <ng-template #templateSelfService let-popover="popover">
-  <h2>Self Service</h2>
+  <h2>{{ 'labels.menus.Self Service' | translate }}</h2>
   <p class="mw300">Dropdown provides access to self service user administrative portal, app configuration and task management.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -185,7 +185,7 @@
 </ng-template>
 
 <ng-template #templateConfigWizard let-popover="popover">
-  <h2>Configuration Wizard</h2>
+  <h2>{{ 'labels.menus.Configuration Wizard' | translate }}</h2>
   <p class="mw300">This buttons opens up the configuration wizard to help the user in initial setup and application tour.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -195,7 +195,7 @@
 </ng-template>
 
 <ng-template #templateGlobalSearch let-popover="popover">
-  <h2>Global Search</h2>
+  <h2>{{ 'labels.menus.Global Search' | translate }}</h2>
   <p class="mw300">This will allow the user to quickly navigate the system selecting entity while searching makes the navigation more robust.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -205,7 +205,7 @@
 </ng-template>
 
 <ng-template #templateLanguageSelector let-popover="popover">
-  <h2>Language Selector</h2>
+  <h2>{{ 'labels.menus.Language Selector' | translate }}</h2>
   <p class="mw300">Organization can select a language here from the available languages here.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -215,7 +215,7 @@
 </ng-template>
 
 <ng-template #templateThemePicker let-popover="popover">
-  <h2>Theme Picker</h2>
+  <h2>{{ 'labels.menus.Theme Picker' | translate }}</h2>
   <p class="mw300">This will be used to choose a theme as per organization will.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -225,7 +225,7 @@
 </ng-template>
 
 <ng-template #templateNotifications let-popover="popover">
-  <h2>Notifications</h2>
+  <h2>{{ 'labels.menus.Notifications' | translate }}</h2>
   <p class="mw300">This shows all the notifications.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -235,7 +235,7 @@
 </ng-template>
 
 <ng-template #templateAppMenu let-popover="popover">
-  <h2>Application Menu</h2>
+  <h2>{{ 'labels.menus.Application Menu' | translate }}</h2>
   <p class="mw300">This will have logged in user settings and sign out button.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>

src/app/home/home.component.html

@@ -3,7 +3,7 @@
   <div #buttonDashboard class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
       <fa-icon icon="tachometer-alt"></fa-icon>&nbsp;&nbsp;
-      Dashboard
+      {{ 'labels.buttons.Dashboard' | translate }}
     </button>
   </div>
 
@@ -15,15 +15,15 @@
 
     <mat-card-header>
       <mat-card-title class="title">
-        Welcome, {{ username }}!
+        {{ 'labels.texts.Welcome' | translate }}, {{ username }}!
       </mat-card-title>
     </mat-card-header>
 
     <mat-card-content #searchActivity>
-        
+
       <div fxLayout="column">
         <mat-form-field>
-          <mat-label>Search Activity</mat-label>
+          <mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
           <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText">
         </mat-form-field>
       </div>

src/app/home/home.module.ts

@@ -12,6 +12,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { AmountCollectedPieComponent } from './dashboard/amount-collected-pie/amount-collected-pie.component';
 import { AmountDisbursedPieComponent } from './dashboard/amount-disbursed-pie/amount-disbursed-pie.component';
 import { ClientTrendsBarComponent } from './dashboard/client-trends-bar/client-trends-bar.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 /**
  * Home Component
@@ -22,7 +23,8 @@ import { ClientTrendsBarComponent } from './dashboard/client-trends-bar/client-t
   imports: [
     SharedModule,
     PipesModule,
-    HomeRoutingModule
+    HomeRoutingModule,
+    TranslateModule.forRoot(),
   ],
   declarations: [
     HomeComponent,

src/app/loans/loans-view/loans-view.component.html

@@ -29,7 +29,7 @@
               </h3>
             </div>
 
-            <div *ngIf="loanDetailsData.summary" class="loansOverview mat-typography" fxFlex="50%">
+            <div *ngIf="loanDetailsData.summary" class="loans-overview mat-typography" fxFlex="50%">
               <h3> Loan Account OverView </h3>
               <span>Current Balance: {{loanDetailsData.currency.displaySymbol}}
                 {{loanDetailsData.summary.totalOutstanding | number}}</span><br>
@@ -47,7 +47,7 @@
 
       <ng-container *ngFor="let item of buttonConfig.singleButtons" class="loan-span">
         <button mat-raised-button *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">
-          <i class="{{item.icon}}"></i> {{item.name}} </button>
+          <i ng-class="{{item.icon}}"></i> {{item.name}} </button>
       </ng-container>
 
       <ng-container *ngIf="buttonConfig.optionsPayment.length" class="loan-span">

src/app/loans/loans-view/loans-view.component.scss

@@ -35,6 +35,6 @@
   }
 }
 
-.loansOverview{
+.loans-overview{
   font-size: 14px;
 }

src/app/login/login-form/login-form.component.html

@@ -4,10 +4,10 @@
     <span matPrefix>
       <fa-icon icon="user-circle" size="lg"></fa-icon>&nbsp;&nbsp;
     </span>
-    <mat-label>Username</mat-label>
+    <mat-label>{{ 'labels.inputs.Username' | translate }}</mat-label>
     <input matInput type="text" autocomplete="off" formControlName="username">
     <mat-error *ngIf="loginForm.controls.username.hasError('required')">
-      Username is <strong>required</strong>
+      {{ 'labels.inputs.Username' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
@@ -15,7 +15,7 @@
     <span matPrefix>
       <fa-icon icon="lock" size="lg"></fa-icon>&nbsp;&nbsp;
     </span>
-    <mat-label>Password</mat-label>
+    <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
     <input matInput type="{{ passwordInputType }}" formControlName="password">
     <button mat-button *ngIf="loginForm.controls.password.value && !loading" matSuffix mat-icon-button
       (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
@@ -23,19 +23,19 @@
       <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
     </button>
     <mat-error *ngIf="loginForm.controls.password.hasError('required')">
-      Password is <strong>required</strong>
+      {{ 'labels.inputs.Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
-  <mat-checkbox fxFlexAlign="center" formControlName="remember" class="m-t-10">Remember me</mat-checkbox>
+  <mat-checkbox fxFlexAlign="center" formControlName="remember" class="m-t-10">{{ 'labels.inputs.Remember me' | translate }}</mat-checkbox>
 
   <button mat-raised-button color="primary" fxFlexAlign="center" class="login-button" [disabled]="!loginForm.valid">
-    Login
+    {{ 'labels.buttons.Login' | translate }}
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
 
   <button type="button" mat-button fxFlexAlign="center" class="login-button" (click)="forgotPassword()" [disabled]="loading">
-    Forgot Password?
+    {{ 'labels.links.Forgot Password?' | translate }}
   </button>
 
 </form>

src/app/login/login.component.html

@@ -12,9 +12,9 @@
 
   <div fxFlex="70%" fxLayout="column" fxLayoutAlign="center center" fxHide.lt-md class="cover">
     <div class="cover-content">
-      <h1 class="mat-display-1 cover-title">Mifos</h1>
+      <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate }}</h1>
       <p class="mat-headline cover-description">
-        Mifos X is designed by the <a href="http://www.openmf.org" target="_blank" class="cover-link">Mifos Initiative</a>. A <a href="http://mifos.org/resources/community/" target="_blank" class="cover-link">global community</a> that aims to speed the elimination of poverty by enabling Organizations to more effectively and efficiently deliver responsible financial services to the world’s poor and unbanked.
+        {{ 'APP_NAME' | translate }} is designed by the <a href="http://www.openmf.org" target="_blank" class="cover-link">Mifos Initiative</a>. A <a href="http://mifos.org/resources/community/" target="_blank" class="cover-link">global community</a> that aims to speed the elimination of poverty by enabling Organizations to more effectively and efficiently deliver responsible financial services to the world’s poor and unbanked.
         Sounds interesting? <a href="http://mifos.org/take-action/volunteer/" target="_blank" class="cover-link">Get involved!</a>
       </p>
     </div>
@@ -40,7 +40,7 @@
 
     <!-- Logo with Organization Name -->
     <div fxLayout="row" fxLayoutAlign="center center" fxFlex="1 0 auto">
-      <img src="assets/images/mifos-logo-flat.png" alt="Mifos X Logo" class="img-container">
+      <img src="assets/images/mifos-logo-flat.png" alt="{{ 'APP_NAME' | translate }} Logo" class="img-container">
     </div>
 
     <!--
@@ -58,9 +58,9 @@
 
     <!-- Contact Information/Resources (hidden on smaller screens) -->
     <mat-list fxHide.lt-lg fxLayout="row" fxFlexAlign="center" fxFlex="3 0 auto" class="information-list">
-      <mat-list-item><button mat-button [matMenuTriggerFor]="resourcesMenu">Resources</button></mat-list-item>
-      <mat-list-item><button mat-button [matMenuTriggerFor]="communityMenu">Community</button></mat-list-item>
-      <mat-list-item><button mat-button [matMenuTriggerFor]="contributeMenu">Contribute</button></mat-list-item>
+      <mat-list-item><button mat-button [matMenuTriggerFor]="resourcesMenu">{{ 'labels.links.Resources' | translate }}</button></mat-list-item>
+      <mat-list-item><button mat-button [matMenuTriggerFor]="communityMenu">{{ 'labels.links.Community' | translate }}</button></mat-list-item>
+      <mat-list-item><button mat-button [matMenuTriggerFor]="contributeMenu">{{ 'labels.links.Contribute' | translate }}</button></mat-list-item>
     </mat-list>
 
     <!-- Footer -->
@@ -72,19 +72,19 @@
 
 <!-- Contact Information/Resources Menus -->
 <mat-menu #resourcesMenu="matMenu">
-  <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/52035622/User+Manual" target="_blank" mat-menu-item>User Manual</a>
-  <a href="https://cwiki.apache.org/confluence/display/FINERACT/Apache+Fineract+1.0+Functional+Specifications" target="_blank" mat-menu-item>Functional Specifications</a>
-  <a href="https://cwiki.apache.org/confluence/display/FINERACT/Contributor%27s+Zone" target="_blank" mat-menu-item>Developer Zone</a>
+  <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/52035622/User+Manual" target="_blank" mat-menu-item>{{ 'labels.links.User Manual' | translate }}</a>
+  <a href="https://cwiki.apache.org/confluence/display/FINERACT/Apache+Fineract+1.0+Functional+Specifications" target="_blank" mat-menu-item>{{ 'labels.links.Functional Specifications' | translate }}</a>
+  <a href="https://cwiki.apache.org/confluence/display/FINERACT/Contributor%27s+Zone" target="_blank" mat-menu-item>{{ 'labels.links.Developer Zone' | translate }}</a>
 </mat-menu>
 
 <mat-menu #communityMenu="matMenu">
-  <a href="https://groups.google.com/forum/#!forum/mifosusers" target="_blank" mat-menu-item>User Group</a>
-  <a href="https://groups.google.com/forum/#!forum/mifosdeveloper" target="_blank" mat-menu-item>Developer Group</a>
-  <a href="http://mifos.org/resources/community/communications/#mifos-irc" target="_blank" mat-menu-item>IRC</a>
+  <a href="https://groups.google.com/forum/#!forum/mifosusers" target="_blank" mat-menu-item>{{ 'labels.links.User Group' | translate }}</a>
+  <a href="https://groups.google.com/forum/#!forum/mifosdeveloper" target="_blank" mat-menu-item>{{ 'labels.links.Developer Group' | translate }}</a>
+  <a href="http://mifos.org/resources/community/communications/#mifos-irc" target="_blank" mat-menu-item>{{ 'labels.links.IRC' | translate }}</a>
 </mat-menu>
 
 <mat-menu #contributeMenu="matMenu">
-  <a href="https://mifosforge.jira.com/wiki/spaces/MDZ/pages/92012624/Key+Design+Principles" target="_blank" mat-menu-item>Key Design Principles</a>
-  <a href="https://sourceforge.net/projects/mifos/" target="_blank" mat-menu-item>Working with Code</a>
-  <a href="http://mifos.org/donate/" target="_blank" mat-menu-item>Donate</a>
+  <a href="https://mifosforge.jira.com/wiki/spaces/MDZ/pages/92012624/Key+Design+Principles" target="_blank" mat-menu-item>{{ 'labels.links.Key Design Principles' | translate }}</a>
+  <a href="https://sourceforge.net/projects/mifos/" target="_blank" mat-menu-item>{{ 'labels.links.Working with Code' | translate }}</a>
+  <a href="http://mifos.org/donate/" target="_blank" mat-menu-item>{{ 'labels.links.Donate' | translate }}</a>
 </mat-menu>

src/app/login/login.module.ts

@@ -10,6 +10,7 @@ import { LoginComponent } from './login.component';
 import { LoginFormComponent } from './login-form/login-form.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
 import { TwoFactorAuthenticationComponent } from './two-factor-authentication/two-factor-authentication.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 /**
  * Login Module
@@ -19,7 +20,8 @@ import { TwoFactorAuthenticationComponent } from './two-factor-authentication/tw
 @NgModule({
   imports: [
     SharedModule,
-    LoginRoutingModule
+    LoginRoutingModule,
+    TranslateModule.forRoot()
   ],
   declarations: [
     LoginComponent,

src/app/shared/footer/footer.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="column" id="footer" class="m-b-20">
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
-  <p fxFlexAlign="center" class="footer-content">Version <b>{{ version }}</b> - <b>{{ hash }}</b></p>
+  <p fxFlexAlign="center" class="footer-content">{{ 'labels.texts.Version' | translate }} <b>{{ version }}</b> - <b>{{ hash }}</b></p>
   <p fxFlexAlign="center" class="footer-content" *ngIf="isBusinessDateDefined">Current Business Date: <b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></p>
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
-  <p fxFlexAlign="center" class="footer-content">Mifos X by Mifos</p>
+  <p fxFlexAlign="center" class="footer-content">{{ 'APP_NAME' | translate }} {{ 'labels.texts.by' | translate }} Mifos</p>
 </div>

src/app/shared/language-selector/language-selector.component.html

@@ -1,8 +1,8 @@
 <mat-form-field id="language-selector">
-  <mat-label>{{ 'Language' | translate }}</mat-label>
+  <mat-label>{{ 'labels.inputs.Language' | translate }}</mat-label>
   <mat-select [formControl]="languageSelector" (selectionChange)="setLanguage()" class="languageselector">
     <mat-option *ngFor="let language of languages" [value]="language">
-      {{ language }}
+      {{ 'languages.' + language | translate }}
     </mat-option>
   </mat-select>
 </mat-form-field>

src/app/shared/server-selector/server-selector.component.html

@@ -1,19 +1,19 @@
 <mat-form-field id="server-selector" *ngIf="existMoreThanOneServer">
-    <mat-label>{{ 'Server' | translate }}</mat-label>
+    <mat-label>{{ 'labels.inputs.Server' | translate }}</mat-label>
     <mat-select [formControl]="serverSelector" (selectionChange)="setServer()">
         <div class="sticky">
             <form [formGroup]="form" (ngSubmit)="addNewServer()">
                 <div class="actions">
                     <mat-form-field class="ml" fxFlexAlign="start">
                         <span matPrefix><mat-icon>language</mat-icon></span>
-                        <mat-label>{{ 'Add new server' | translate }}</mat-label>
+                        <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
                         <input matInput type="text" autocomplete="off" formControlName="url">
                         <mat-error *ngIf="form.controls.url.hasError('required')">
-                            Url <strong>{{'is required' | translate }}</strong>
+                          {{ 'labels.inputs.Url' | translate }} <strong>{{'labels.commons.is required' | translate }}</strong>
                         </mat-error>
                     </mat-form-field>
 
-                    <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">{{'Add' | translate }}</button>
+                    <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">{{ 'labels.buttons.Add' | translate }}</button>
                 </div>
             </form>
         </div>