#17 Used ng2-translate plugin

ng2-components/ng2-alfresco-login/package.json

@@ -40,7 +40,8 @@
         "es6-shim": "^0.35.0",
         "reflect-metadata": "0.1.2",
         "rxjs": "5.0.0-beta.2",
-        "zone.js": "0.6.10"
+        "zone.js": "0.6.10",
+        "ng2-translate": "^1.11.2"
     },
     "peerDependencies": {
         "angular2": "2.0.0-beta.15",

ng2-components/ng2-alfresco-login/src/login.component.html

@@ -1,17 +1,17 @@
 <div class="login-card-wide mdl-card mdl-shadow--4dp">
     <form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">
         <div class="mdl-card__title">
-            <h2 class="mdl-card__title-text ">Login</h2>
+            <h2 class="mdl-card__title-text ">{{'login' | translate }}</h2>
         </div>
         <div class="mdl-card__supporting-text">
             <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
-                <label for="username" class="mdl-textfield__label">Username</label>
+                <label for="username" class="mdl-textfield__label">{{'username' | translate }}</label>
                 <input type="text" class="mdl-textfield__input" id="username" ngControl="username" />
                 <span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="form.controls.username.hasError('required')">
-                        <span>Required.</span>
+                        <span>{{'input-required-message' | translate }}</span>
                 </span>
                 <span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="form.controls.username.hasError('minlength')">
-                        <span>Your username needs to be at least 4 characters.</span>
+                        <span>{{'input-min-message' | translate }}</span>
                 </span>
             </div>
 
@@ -19,13 +19,13 @@
                 <label for="password" class="mdl-textfield__label">Password</label>
                 <input type="password" class="mdl-textfield__input" id="password" ngControl="password" />
                 <span class="mdl-tooltip mdl-tooltip--validation" for="password" *ngIf="form.controls.password.hasError('required')">
-                        <span>Required.</span>
+                        <span>{{'input-required-message' | translate }}</span>
                 </span>
             </div>
         </div>
         <div class="mdl-card__actions mdl-card--border">
-            <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" [disabled]="!form.valid">Login</button>
+            <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" [disabled]="!form.valid">{{'login-button' | translate }}</button>
-            <div *ngIf="error">You have entered an invalid username or password</div>
+            <div *ngIf="error">{{'login-error-message' | translate }}</div>
         </div>
         <div class="mdl-card__menu">
             <div class="mdl-spinner mdl-js-spinner"></div>

ng2-components/ng2-alfresco-login/src/login.component.js

@@ -1,4 +1,4 @@
-System.register(['angular2/core', 'angular2/router', 'angular2/common', './authentication.service'], function(exports_1, context_1) {
+System.register(['angular2/core', 'angular2/router', 'angular2/common', './authentication.service', 'ng2-translate/ng2-translate'], function(exports_1, context_1) {
     "use strict";
     var __moduleName = context_1 && context_1.id;
     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -10,7 +10,7 @@ System.register(['angular2/core', 'angular2/router', 'angular2/common', './authe
     var __metadata = (this && this.__metadata) || function (k, v) {
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
     };
-    var core_1, router_1, common_1, authentication_service_1;
+    var core_1, router_1, common_1, authentication_service_1, ng2_translate_1;
     var Login;
     return {
         setters:[
@@ -25,6 +25,9 @@ System.register(['angular2/core', 'angular2/router', 'angular2/common', './authe
             },
             function (authentication_service_1_1) {
                 authentication_service_1 = authentication_service_1_1;
+            },
+            function (ng2_translate_1_1) {
+                ng2_translate_1 = ng2_translate_1_1;
             }],
         execute: function() {
             Login = (function () {
@@ -86,6 +89,7 @@ System.register(['angular2/core', 'angular2/router', 'angular2/common', './authe
                         directives: [router_1.ROUTER_DIRECTIVES, common_1.FORM_DIRECTIVES],
                         templateUrl: './login.component.html',
                         styleUrls: ['./login.component.css'],
+                        pipes: [ng2_translate_1.TranslatePipe]
                     }), 
                     __metadata('design:paramtypes', [common_1.FormBuilder, authentication_service_1.Authentication, router_1.Router])
                 ], Login);

ng2-components/ng2-alfresco-login/src/login.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"login.component.js","sourceRoot":"","sources":["login.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAeA;gBAMI;;;;;mBAKG;gBACH,eAAY,EAAc,EAAS,IAAmB,EAAS,MAAa;oBAAzC,SAAI,GAAJ,IAAI,CAAe;oBAAS,WAAM,GAAN,MAAM,CAAO;oBAXnE,WAAM,GAAU,KAAK,CAAC;oBAG/B,UAAK,GAAW,KAAK,CAAC;oBASlB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,KAAK,CAAC;wBACjB,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAU,CAAC,OAAO,CAAC,CAAC,mBAAU,CAAC,QAAQ,EAAE,mBAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAClF,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAU,CAAC,QAAQ,CAAC;qBACtC,CAAC,CAAC;gBACP,CAAC;gBAED;;;;mBAIG;gBACH,wBAAQ,GAAR,UAAS,KAAS,EAAE,KAAK;oBAAzB,iBAWC;oBAVG,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;wBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBAC3B,CAAC;oBACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC;yBACvD,SAAS,CACV,UAAC,KAAS,IAAK,OAAA,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAA9B,CAA8B,EAC7C;wBACI,KAAI,CAAC,KAAK,GAAG,IAAI,CAAC;oBACtB,CAAC,CACJ,CAAC;gBACN,CAAC;gBAED;;;;mBAIG;gBACH,4BAAY,GAAZ,UAAa,KAAkB;oBAC3B,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;wBACnB,gBAAgB,CAAC,oBAAoB,EAAE,CAAC;oBAC5C,CAAC;oBACD,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;wBACd,MAAM,CAAC,KAAK,CAAC;oBACjB,CAAC;oBAAC,IAAI,CAAC,CAAC;wBACJ,MAAM,CAAC,IAAI,CAAC;oBAChB,CAAC;gBACL,CAAC;gBAlDD;oBAAC,YAAK,EAAE;;qDAAA;gBATZ;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,gBAAgB;wBAC1B,QAAQ,EAAE,YAAY;wBACtB,UAAU,EAAE,CAAC,0BAAiB,EAAE,wBAAe,CAAC;wBAChD,WAAW,EAAE,wBAAwB;wBACrC,SAAS,EAAE,CAAC,uBAAuB,CAAC;qBAEvC,CAAC;;yBAAA;gBAqDF,YAAC;YAAD,CAAC,AApDD,IAoDC;YApDD,yBAoDC,CAAA"}
+{"version":3,"file":"login.component.js","sourceRoot":"","sources":["login.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAiBA;gBAMI;;;;;mBAKG;gBACH,eAAY,EAAc,EAAS,IAAmB,EAAS,MAAa;oBAAzC,SAAI,GAAJ,IAAI,CAAe;oBAAS,WAAM,GAAN,MAAM,CAAO;oBAXnE,WAAM,GAAU,KAAK,CAAC;oBAG/B,UAAK,GAAW,KAAK,CAAC;oBASlB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,KAAK,CAAC;wBACjB,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAU,CAAC,OAAO,CAAC,CAAC,mBAAU,CAAC,QAAQ,EAAE,mBAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAClF,QAAQ,EAAE,CAAC,EAAE,EAAE,mBAAU,CAAC,QAAQ,CAAC;qBACtC,CAAC,CAAC;gBACP,CAAC;gBAED;;;;mBAIG;gBACH,wBAAQ,GAAR,UAAS,KAAS,EAAE,KAAK;oBAAzB,iBAWC;oBAVG,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;wBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBAC3B,CAAC;oBACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC;yBACvD,SAAS,CACV,UAAC,KAAS,IAAK,OAAA,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,EAA9B,CAA8B,EAC7C;wBACI,KAAI,CAAC,KAAK,GAAG,IAAI,CAAC;oBACtB,CAAC,CACJ,CAAC;gBACN,CAAC;gBAED;;;;mBAIG;gBACH,4BAAY,GAAZ,UAAa,KAAkB;oBAC3B,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;wBACnB,gBAAgB,CAAC,oBAAoB,EAAE,CAAC;oBAC5C,CAAC;oBACD,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;wBACd,MAAM,CAAC,KAAK,CAAC;oBACjB,CAAC;oBAAC,IAAI,CAAC,CAAC;wBACJ,MAAM,CAAC,IAAI,CAAC;oBAChB,CAAC;gBACL,CAAC;gBAlDD;oBAAC,YAAK,EAAE;;qDAAA;gBAVZ;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,gBAAgB;wBAC1B,QAAQ,EAAE,YAAY;wBACtB,UAAU,EAAE,CAAC,0BAAiB,EAAE,wBAAe,CAAC;wBAChD,WAAW,EAAE,wBAAwB;wBACrC,SAAS,EAAE,CAAC,uBAAuB,CAAC;wBACpC,KAAK,EAAE,CAAC,6BAAa,CAAC;qBAEzB,CAAC;;yBAAA;gBAqDF,YAAC;YAAD,CAAC,AApDD,IAoDC;YApDD,yBAoDC,CAAA"}

ng2-components/ng2-alfresco-login/src/login.component.ts

@@ -2,6 +2,7 @@ import {Component, Input} from 'angular2/core';
 import {Router, ROUTER_DIRECTIVES} from 'angular2/router';
 import {FORM_DIRECTIVES, ControlGroup, FormBuilder, Validators} from 'angular2/common';
 import {Authentication} from './authentication.service';
+import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
 declare let componentHandler;
 declare let __moduleName:string;
 
@@ -11,6 +12,7 @@ declare let __moduleName:string;
     directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.css'],
+    pipes: [TranslatePipe]
 
 })
 export class Login {