i18n: Adding new languages: Part 1 (#1882)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/system/external-services/amazon-s3/amazon-s3.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate}}
   </button>
 </div>
 
@@ -10,12 +10,12 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ configuration.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ getConfigurationValue(configuration) }} </td>
     </ng-container>
 

src/app/system/external-services/amazon-s3/edit-amazon-s3/edit-amazon-s3.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>S3 Bucket Name</mat-label>
+            <mat-label>{{'labels.inputs.S3 Bucket Name' | translate}}</mat-label>
             <input matInput required formControlName="s3_bucket_name">
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_bucket_name.hasError('required')">
-              S3 Bucket Name is <strong>required</strong>
+              {{'labels.inputs.S3 Bucket Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>S3 Access Key</mat-label>
+            <mat-label>{{'labels.inputs.S3 Access Key' | translate}}</mat-label>
             <input matInput required type="{{ accessKeyInputType }}" formControlName="s3_access_key">
             <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.value" matSuffix mat-icon-button
               (mousedown)="accessKeyInputType = 'text'" (mouseup)="accessKeyInputType = 'password'">
@@ -25,12 +25,12 @@
               <fa-icon *ngIf="accessKeyInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_access_key.hasError('required')">
-              S3 Access Key is <strong>required</strong>
+              {{'labels.inputs.S3 Access Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>S3 Secret Key</mat-label>
+            <mat-label>{{'labels.inputs.S3 Secret Key' | translate}}</mat-label>
             <input matInput required type="{{ secretKeyInputType }}" formControlName="s3_secret_key">
             <button mat-button *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.value" matSuffix mat-icon-button
               (mousedown)="secretKeyInputType = 'text'" (mouseup)="secretKeyInputType = 'password'">
@@ -38,7 +38,7 @@
               <fa-icon *ngIf="secretKeyInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="amazonS3ConfigurationForm.controls.s3_secret_key.hasError('required')">
-              S3 Secret Key is <strong>required</strong>
+              {{'labels.inputs.S3 Secret Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -47,8 +47,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!amazonS3ConfigurationForm.valid || amazonS3ConfigurationForm.pristine">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!amazonS3ConfigurationForm.valid || amazonS3ConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/external-services/email/edit-email/edit-email.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Username</mat-label>
+            <mat-label>{{'labels.inputs.Username' | translate}}</mat-label>
             <input matInput required formControlName="username">
             <mat-error *ngIf="emailConfigurationForm.controls.username.hasError('required')">
-              Username is <strong>required</strong>
+              {{'labels.inputs.Username' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Password</mat-label>
+            <mat-label>{{'labels.inputs.Password' | translate}}</mat-label>
             <input matInput required type="{{ passwordInputType }}" formControlName="password">
             <button mat-button *ngIf="emailConfigurationForm.controls.password.value" matSuffix mat-icon-button
               (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
@@ -25,43 +25,43 @@
               <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
             </button>
             <mat-error *ngIf="emailConfigurationForm.controls.password.hasError('required')">
-              Password is <strong>required</strong>
+              {{'labels.inputs.Password' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Host</mat-label>
+            <mat-label>{{'labels.inputs.Host' | translate}}</mat-label>
             <input matInput required formControlName="host">
             <mat-error *ngIf="emailConfigurationForm.controls.host.hasError('required')">
-              Host is <strong>required</strong>
+              {{'labels.inputs.Host' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Port</mat-label>
+            <mat-label>{{'labels.inputs.Port' | translate}}</mat-label>
             <input matInput type="number" required formControlName="port">
             <mat-error *ngIf="emailConfigurationForm.controls.port.hasError('required')">
-              Port is <strong>required</strong>
+              {{'labels.inputs.Port' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="useTLS" class="margin-v">
-            Use TLS?
+            {{'labels.inputs.Use TLS' | translate}}?
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>From Email</mat-label>
+            <mat-label>{{'labels.inputs.From Email' | translate}}</mat-label>
             <input matInput type="email" required formControlName="fromEmail">
             <mat-error *ngIf="emailConfigurationForm.controls.fromEmail.hasError('required')">
-              From Email is <strong>required</strong>
+              {{'labels.inputs.From Email' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>From Name</mat-label>
+            <mat-label>{{'labels.inputs.From Name' | translate}}</mat-label>
             <input matInput required formControlName="fromName">
             <mat-error *ngIf="emailConfigurationForm.controls.fromName.hasError('required')">
-              From Name is <strong>required</strong>
+              {{'labels.inputs.From Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
         </div>
@@ -69,9 +69,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
         <button mat-raised-button color="primary"
-          [disabled]="!emailConfigurationForm.valid || emailConfigurationForm.pristine">Submit</button>
+          [disabled]="!emailConfigurationForm.valid || emailConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/external-services/email/email.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate}}
   </button>
 </div>
 
@@ -10,12 +10,12 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ configuration.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ configuration.value }} </td>
     </ng-container>
 

src/app/system/external-services/external-services.component.html

@@ -12,16 +12,16 @@
             <mat-icon matListIcon>
               <fa-icon icon="cloud" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>S3 Amazon External Service</h4>
-            <p matLine>S3 Amazon Service Configuration</p>
+            <h4 matLine>{{'labels.heading.S3 Amazon External Service' | translate}}</h4>
+            <p matLine>{{'labels.text.S3 Amazon Service Configuration' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['sms']">
             <mat-icon matListIcon>
               <fa-icon icon="comment-alt" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>SMS External Service</h4>
-            <p matLine>SMS Service Configuration</p>
+            <h4 matLine>{{'labels.heading.SMS External Service' | translate}}</h4>
+            <p matLine>{{'labels.text.SMS Service Configuration' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>
@@ -36,16 +36,16 @@
             <mat-icon matListIcon>
               <fa-icon icon="envelope" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Email External Service</h4>
-            <p matLine>Email Service Configuration</p>
+            <h4 matLine>{{'labels.heading.Email External Service' | translate}}</h4>
+            <p matLine>{{'labels.text.Email Service Configuration' | translate}}</p>
           </mat-list-item>
 
           <mat-list-item [routerLink]="['notification']">
             <mat-icon matListIcon>
               <fa-icon icon="bell" size="sm"></fa-icon>
             </mat-icon>
-            <h4 matLine>Notification External Service</h4>
-            <p matLine>Notification Service Configuration</p>
+            <h4 matLine> {{'labels.heading.Notification External Service' | translate}}</h4>
+            <p matLine>{{'labels.text.Notification Service Configuration' | translate}}</p>
           </mat-list-item>
 
         </mat-nav-list>

src/app/system/external-services/notification/edit-notification/edit-notification.component.html

@@ -9,26 +9,26 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Server Key</mat-label>
+            <mat-label>{{'labels.inputs.Server Key' | translate}}</mat-label>
             <input matInput required formControlName="server_key">
             <mat-error *ngIf="notificationConfigurationForm.controls.server_key.hasError('required')">
-              Server Key is <strong>required</strong>
+              {{'labels.inputs.Server Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>GCM End Point</mat-label>
+            <mat-label>{{'labels.inputs.GCM End Point' | translate}}</mat-label>
             <input matInput required formControlName="gcm_end_point">
             <mat-error *ngIf="notificationConfigurationForm.controls.gcm_end_point.hasError('required')">
-              GCM End Point is <strong>required</strong>
+              {{'labels.inputs.GCM End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>FCM End Point</mat-label>
+            <mat-label>{{'labels.inputs.FCM End Point' | translate}}</mat-label>
             <input matInput required formControlName="fcm_end_point">
             <mat-error *ngIf="notificationConfigurationForm.controls.fcm_end_point.hasError('required')">
-              FCM End Point is <strong>required</strong>
+              {{'labels.inputs.FCM End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -37,8 +37,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!notificationConfigurationForm.valid || notificationConfigurationForm.pristine">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!notificationConfigurationForm.valid || notificationConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/external-services/notification/notification.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate}}
   </button>
 </div>
 
@@ -10,12 +10,12 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ configuration.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ configuration.value }} </td>
     </ng-container>
 

src/app/system/external-services/sms/edit-sms/edit-sms.component.html

@@ -1,56 +1,56 @@
 <div class="container">
 
-    <mat-card>
-  
-      <form [formGroup]="smsConfigurationForm" (ngSubmit)="submit()">
-  
-        <mat-card-content>
-  
-          <div fxLayout="column">
-  
-            <mat-form-field>
-              <mat-label>Host Name</mat-label>
-              <input matInput required formControlName="host_name">
-              <mat-error *ngIf="smsConfigurationForm.controls.host_name.hasError('required')">
-                Host Name is <strong>required</strong>
-              </mat-error>
-            </mat-form-field>
-  
-            <mat-form-field>
-              <mat-label>Port Number</mat-label>
-              <input matInput required formControlName="port_number">
-              <mat-error *ngIf="smsConfigurationForm.controls.port_number.hasError('required')">
-                Port Number is <strong>required</strong>
-              </mat-error>
-            </mat-form-field>
-  
-            <mat-form-field>
-              <mat-label>End Point</mat-label>
-              <input matInput required formControlName="end_point">
-              <mat-error *ngIf="smsConfigurationForm.controls.end_point.hasError('required')">
-                End Point is <strong>required</strong>
+  <mat-card>
+
+    <form [formGroup]="smsConfigurationForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="column">
+
+          <mat-form-field>
+            <mat-label>{{'labels.inputs.Host Name' | translate}}</mat-label>
+            <input matInput required formControlName="host_name">
+            <mat-error *ngIf="smsConfigurationForm.controls.host_name.hasError('required')">
+              {{'labels.inputs.Host Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>{{'labels.inputs.Port Number' | translate}}</mat-label>
+            <input matInput required formControlName="port_number">
+            <mat-error *ngIf="smsConfigurationForm.controls.port_number.hasError('required')">
+              {{'labels.inputs.Port Number' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+            <mat-label>{{'labels.inputs.End Point' | translate}}</mat-label>
+            <input matInput required formControlName="end_point">
+            <mat-error *ngIf="smsConfigurationForm.controls.end_point.hasError('required')">
+              {{'labels.inputs.End Point' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
+            </mat-error>
+          </mat-form-field>
+
+          <mat-form-field>
+              <mat-label>{{'labels.inputs.Tenant App Key' | translate}}</mat-label>
+              <input matInput required formControlName="tenant_app_key">
+              <mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
+                {{'labels.inputs.Tenant App Key' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field>
-                <mat-label>Tenant App Key</mat-label>
-                <input matInput required formControlName="tenant_app_key">
-                <mat-error *ngIf="smsConfigurationForm.controls.tenant_app_key.hasError('required')">
-                  Tenant App Key is <strong>required</strong>
-                </mat-error>
-              </mat-form-field>
-  
-          </div>
-  
-        </mat-card-content>
-  
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!smsConfigurationForm.valid || smsConfigurationForm.pristine">Submit</button>
-        </mat-card-actions>
-  
-      </form>
-  
-    </mat-card>
-  
-  </div>
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!smsConfigurationForm.valid || smsConfigurationForm.pristine">{{'labels.buttons.Submit' | translate}}</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/system/external-services/sms/sms.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate}}
   </button>
 </div>
 
@@ -10,12 +10,12 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ configuration.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="value">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Value' | translate}} </th>
       <td mat-cell *matCellDef="let configuration"> {{ configuration.value }} </td>
     </ng-container>