translate 2fa modal

src/app/user/settings/mfa-modal/mfa-modal.component.html

@@ -2,13 +2,13 @@
   <div class="modal-background"></div>
   <div class="modal-card">
     <header class="modal-card-head">
-      <p class="modal-card-title">Get ready to make your account more secure!</p>
+      <p class="modal-card-title">{{ 'user.settings.mfa.modal.tagline' | translate }}</p>
     </header>
     <section class="modal-card-body">
-      <h5 class="title">Set up 2fa</h5>
-      <p>Scan the QR code with your authenticator app and enter the number in the input below</p>
+      <h5 class="title">{{ 'user.settings.mfa.modal.title' | translate }}</h5>
+      <p>{{ 'user.settings.mfa.modal.imageTop' | translate }}</p>
       <img [src]="mfaSettings.qrCode" alt="QR code for an authenticator app"/>
-      <p>Alternatively, you can manually enter this code: {{ mfaSettings.secretKey }}</p>
+      <p>{{ 'user.settings.mfa.modal.manualCode' | translate: { 'code': mfaSettings.secretKey } }}</p>
       <br />
       <input class="input"
              type="number"
@@ -21,13 +21,13 @@ <h5 class="title">Set up 2fa</h5>
       <button class="button is-warning"
               (click)="mfaResult.emit(false)"
               [ngClass]="{ 'is-loading': loading }">
-        Cancel
+        {{ 'action.cancel' | translate }}
       </button>
       <button class="button is-success"
               [disabled]="!mfaCode"
               (click)="saveMfa()"
               [ngClass]="{ 'is-loading': loading }">
-        Save
+        {{ 'action.save' | translate }}
       </button>
     </footer>
   </div>

src/app/user/settings/settings.component.html

@@ -110,20 +110,20 @@ <h4 class="title is-4">{{'user.settings.general' | translate}}</h4>
     </div>
 
     <div class="field">
-      <label for="enable-2fa" class="label">Two factor authentication</label>
+      <label for="enable-2fa" class="label">{{ 'user.settings.mfa.label' | translate }}</label>
       <div class="control">
         <button type="button"
                 *ngIf="user.mfaEnabled; else noMfa"
                 class="button is-warning"
                 [disabled]="mfaLoading"
                 [class]="{  'is-loading': mfaLoading }"
-                id="enable-2fa" >Disable two factor authentication</button>
+                id="enable-2fa" >{{ 'user.settings.mfa.disableButton' | translate }}</button>
         <ng-template #noMfa>
           <button type="button"
                   class="button is-success"
                   [disabled]="mfaLoading"
                   [class]="{  'is-loading': mfaLoading }"
-                  id="enable-2fa" (click)="initMfa()">Enable two factor authentication</button>
+                  id="enable-2fa" (click)="initMfa()">{{ 'user.settings.mfa.enableButton' | translate }}</button>
         </ng-template>
       </div>
     </div>