Add i18n attributes

2 files changed, 30 insertions, 23 deletions

diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index b7fd25d27..1f6cfdb90 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -1,5 +1,5 @@
 <div class="margin-content">
-  <div class="title-page title-page-single">
+  <div i18n class="title-page title-page-single">
     Login
   </div>
 
@@ -8,21 +8,21 @@
   <form role="form" (ngSubmit)="login()" [formGroup]="form">
     <div class="form-group">
       <div>
-        <label for="username">User</label>
+        <label i18n for="username">User</label>
         <input
-          type="text" id="username" placeholder="Username or email address" required tabindex="1"
+          type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
           formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
         >
-        <a *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
+        <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
           or create an account
         </a>
 
-        <a *ngIf="signupAllowed === false" href="https://joinpeertube.org/en/#getting-started" target="_blank" class="create-an-account">
+        <a i18n *ngIf="signupAllowed === false" href="https://joinpeertube.org/en/#getting-started" target="_blank" class="create-an-account">
           or create an account on another instance
         </a>
 
         <my-help
-          *ngIf="signupAllowed === false" helpType="custom"
+          *ngIf="signupAllowed === false" helpType="custom" i18n-customHtml
           customHtml="User registration is not allowed on this instance, but you can register on many others!"
         ></my-help>
       </div>
@@ -33,13 +33,13 @@
     </div>
 
     <div class="form-group">
-      <label for="password">Password</label>
+      <label i18n for="password">Password</label>
       <div>
         <input
-          type="password" name="password" id="password" placeholder="Password" required tabindex="2"
+          type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2"
           formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
         >
-        <div class="forgot-password-button" (click)="openForgotPasswordModal()">I forgot my password</div>
+        <div i18n class="forgot-password-button" (click)="openForgotPasswordModal()">I forgot my password</div>
       </div>
       <div *ngIf="formErrors.password" class="form-error">
         {{ formErrors.password }}
@@ -56,25 +56,25 @@
 
       <div class="modal-header">
         <span class="close" aria-hidden="true" (click)="hideForgotPasswordModal()"></span>
-        <h4 class="modal-title">Forgot your password</h4>
+        <h4 i18n class="modal-title">Forgot your password</h4>
       </div>
 
       <div class="modal-body">
         <div class="form-group">
-          <label for="forgot-password-email">Email</label>
+          <label i18n for="forgot-password-email">Email</label>
           <input
-            type="email" id="forgot-password-email" placeholder="Email address" required
+            type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
             [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
           >
         </div>
 
         <div class="form-group inputs">
-          <span class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">
+          <span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">
             Cancel
           </span>
 
           <input
-            type="submit" value="Send me an email to reset my password" class="action-button-submit"
+            type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
             (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
           >
         </div>
diff --git a/client/src/app/login/login.component.ts b/client/src/app/login/login.component.ts
index 2514faf94..a14cb2eb7 100644
--- a/client/src/app/login/login.component.ts
+++ b/client/src/app/login/login.component.ts
@@ -7,6 +7,7 @@ import { NotificationsService } from 'angular2-notifications'
 import { ModalDirective } from 'ngx-bootstrap/modal'
 import { AuthService } from '../core'
 import { FormReactive } from '../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-login',
@@ -35,12 +36,15 @@ export class LoginComponent extends FormReactive implements OnInit {
   }
   forgotPasswordEmail = ''
 
-  constructor (private authService: AuthService,
-               private userService: UserService,
-               private serverService: ServerService,
-               private redirectService: RedirectService,
-               private notificationsService: NotificationsService,
-               private formBuilder: FormBuilder) {
+  constructor (
+    private authService: AuthService,
+    private userService: UserService,
+    private serverService: ServerService,
+    private redirectService: RedirectService,
+    private notificationsService: NotificationsService,
+    private formBuilder: FormBuilder,
+    private i18n: I18n
+  ) {
     super()
   }
 
@@ -78,12 +82,15 @@ export class LoginComponent extends FormReactive implements OnInit {
     this.userService.askResetPassword(this.forgotPasswordEmail)
       .subscribe(
         res => {
-          const message = `An email with the reset password instructions will be sent to ${this.forgotPasswordEmail}.`
-          this.notificationsService.success('Success', message)
+          const message = this.i18n(
+            'An email with the reset password instructions will be sent to {{ email }}.',
+            { email: this.forgotPasswordEmail }
+          )
+          this.notificationsService.success(this.i18n('Success'), message)
           this.hideForgotPasswordModal()
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('Error'), err.message)
       )
   }