feat: Login Translate Module (#1810)

src/app/login/login.component.html

@@ -14,8 +14,9 @@
     <div class="cover-content">
       <h1 class="mat-display-1 cover-title">{{ 'APP_NAME' | translate }}</h1>
       <p class="mat-headline cover-description">
-        {{ '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>
+        {{ 'APP_NAME' | translate }} {{ 'labels.text.is designed by the' | translate }} <a href="http://www.openmf.org" target="_blank" class="cover-link">{{ 'labels.text.Mifos Initiative' | translate }}</a>. {{ 'labels.text.A' | translate }} <a href="http://mifos.org/resources/community/" target="_blank" class="cover-link">{{ 'labels.text.global community' | translate }}</a> 
+        {{ 'labels.text.elimination of poverty' | translate }}
+        <a href="http://mifos.org/take-action/volunteer/" target="_blank" class="cover-link">{{ 'labels.text.Get involved' | translate }}!</a>
       </p>
     </div>
   </div>

src/app/login/reset-password/reset-password.component.html

@@ -1,4 +1,4 @@
-<p>Please update your password:</p>
+<p>{{ 'labels.text.Please update your password"  |translate}}:</p>
 
 <mat-divider></mat-divider>
 
@@ -8,7 +8,7 @@
     <span matPrefix>
       <fa-icon icon="lock" size="lg" class="m-r-10"></fa-icon>
     </span>
-    <mat-label>Password</mat-label>
+    <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
     <input type="{{ passwordInputType }}" matInput required formControlName="password">
     <button mat-button *ngIf="resetPasswordForm.controls.password.value && !loading" matSuffix mat-icon-button
       (mousedown)="passwordInputType = 'text'" (mouseup)="passwordInputType = 'password'">
@@ -16,7 +16,7 @@
       <fa-icon *ngIf="passwordInputType === 'text'" icon="eye-slash"></fa-icon>
     </button>
     <mat-error *ngIf="resetPasswordForm.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>
 
@@ -24,20 +24,20 @@
     <span matPrefix>
       <fa-icon icon="check-circle" size="lg" class="m-r-10"></fa-icon>
     </span>
-    <mat-label>Confirm Password</mat-label>
+    <mat-label>{{ 'labels.inputs.Confirm Password' | translate }}</mat-label>
     <input type="password" matInput required formControlName="repeatPassword">
     <mat-error *ngIf="resetPasswordForm.controls.repeatPassword.hasError('required')">
-      Confirm Password is <strong>required</strong>
+      {{ 'labels.inputs.Confirm Password' | translate }} <strong>{{ 'labels.commons.is required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
   <p class="reset-password-error" *ngIf="resetPasswordForm.errors?.passwordsDoNotMatch &&
     (!resetPasswordForm.controls.password.hasError('required') && !resetPasswordForm.controls.repeatPassword.hasError('required'))">
-    Passwords <strong>do not match</strong>
+    {{ 'labels.text.Passwords"  |translate}} <strong>{{ 'labels.text.do not match"  |translate}}</strong>
   </p>
 
   <button mat-raised-button color="primary" fxFlexAlign="center" class="reset-password-button" [disabled]="!resetPasswordForm.valid">
-    Reset Password
+    {{"labels.buttons.Reset Password"  |translate}}
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
 

src/app/login/two-factor-authentication/two-factor-authentication.component.html

@@ -1,9 +1,9 @@
-<p><strong>Two Factor Authentication</strong></p>
+<p><strong>{{ 'labels.text.Two Factor Authentication"  |translate}}</strong></p>
 
 <mat-divider></mat-divider>
 
 <!-- Select delivery method to receive OTP -->
-<p *ngIf="!otpRequested">Please select a delivery method:</p>
+<p *ngIf="!otpRequested">{{ 'labels.text.Please select a delivery method"  |translate}}:</p>
 
 <form fxLayout="column" *ngIf="!otpRequested" [formGroup]="twoFactorAuthenticationDeliveryMethodForm" class="two-factor-auth-form"
   (ngSubmit)="requestOTP()">
@@ -11,19 +11,19 @@
   <mat-radio-group fxLayout="column" fxFlexAlign="center" formControlName="twoFactorAuthenticationDeliveryMethod">
     <mat-radio-button *ngFor="let twoFactorAuthenticationDeliveryMethod of twoFactorAuthenticationDeliveryMethods"
       [value]="twoFactorAuthenticationDeliveryMethod">
-        Send {{ twoFactorAuthenticationDeliveryMethod.name }} to {{ twoFactorAuthenticationDeliveryMethod.target }}
+      {{ 'labels.inputs.Send"  |translate}} {{ twoFactorAuthenticationDeliveryMethod.name }} {{ 'labels.inputs.to"  |translate}} {{ twoFactorAuthenticationDeliveryMethod.target }}
     </mat-radio-button>
   </mat-radio-group>
 
   <button mat-raised-button color="primary" fxFlexAlign="center" fxFlexFill [disabled]="!twoFactorAuthenticationDeliveryMethodForm.valid">
-    Request OTP
+    {{"labels.buttons.Request OTP"  |translate}}
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
 
 </form>
 
 <!-- Show input for OTP -->
-<p *ngIf="otpRequested">Please enter the OTP:</p>
+<p *ngIf="otpRequested">{{ 'labels.text.Please enter the OTP"  |translate}}:</p>
 
 <form fxLayout="column" *ngIf="otpRequested" [formGroup]="twoFactorAuthenticationForm" class="two-factor-auth-form"
   (ngSubmit)="validateOTP()">
@@ -32,28 +32,28 @@
     <span matPrefix>
       <fa-icon icon="user-shield" class="m-r-10"></fa-icon>
     </span>
-    <mat-label>OTP</mat-label>
+    <mat-label>{{ 'labels.inputs.OTP"  |translate}}</mat-label>
     <input type="password" matInput autocomplete="off" required formControlName="otp">
     <mat-hint align="start">
-      <strong>Delivery Method:</strong> {{ selectedTwoFactorAuthenticationDeliveryMethod.name }}
+      <strong>{{ 'labels.inputs.Delivery Method"  |translate}}:</strong> {{ selectedTwoFactorAuthenticationDeliveryMethod.name }}
     </mat-hint>
     <mat-hint align="end">
-      <strong>Validity:</strong> {{ tokenValidityTime / 60 }} mins
+      <strong>{{ 'labels.inputs.Validity"  |translate}}:</strong> {{ tokenValidityTime / 60 }} {{ 'labels.inputs.mins"  |translate}}
     </mat-hint>
     <mat-error *ngIf="twoFactorAuthenticationForm.controls.otp.hasError('required')">
-      OTP is <strong>required</strong>
+      {{ 'labels.inputs.OTP"  |translate}} {{ 'labels.commons.is' | translate }} <strong>{{ 'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
   <button mat-raised-button color="primary" fxFlexAlign="center" class="two-factor-auth-button"
     [disabled]="!twoFactorAuthenticationForm.valid">
-    Validate OTP
+    {{"labels.buttons.Validate OTP"  |translate}}
     <mat-spinner [diameter]="20" *ngIf="loading"></mat-spinner>
   </button>
 
   <button type="button" mat-button fxFlexAlign="center" class="two-factor-auth-button" (click)="resendOTP()"
     [disabled]="loading || resendOTPLoading">
-    Resend OTP
+    {{"labels.buttons.Resend OTP"  |translate}}
     <mat-spinner [diameter]="20" *ngIf="resendOTPLoading"></mat-spinner>
   </button>