Added translations

src/Ombi/ClientApp/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { NavigationStart, Router } from "@angular/router";
+import { TranslateService } from "@ngx-translate/core";
 import { AuthService } from "./auth/auth.service";
 import { ILocalUser } from "./auth/IUserLogin";
 import { NotificationService } from "./services";
@@ -23,7 +24,16 @@ export class AppComponent implements OnInit {
                 public authService: AuthService,
                 private readonly router: Router,
                 private readonly settingsService: SettingsService,
-                private readonly jobService: JobService) { }
+                private readonly jobService: JobService,
+                private readonly translate: TranslateService) { 
+                    this.translate.addLangs(["en", "de"]);
+                    // this language will be used as a fallback when a translation isn't found in the current language
+                    this.translate.setDefaultLang("en");
+                    
+                    // See if we can match the supported langs with the current browser lang
+                    const browserLang: string = translate.getBrowserLang();
+                    this.translate.use(browserLang.match(/en|fr/) ? browserLang : "en");
+                }
 
     public ngOnInit() {
         this.user = this.authService.claims();

src/Ombi/ClientApp/app/app.module.ts

@@ -1,3 +1,4 @@
+import { HttpClient, HttpClientModule} from "@angular/common/http";
 import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { HttpModule } from "@angular/http";
@@ -9,6 +10,8 @@ import { RouterModule, Routes } from "@angular/router";
 // Third Party
 //import { DragulaModule, DragulaService } from 'ng2-dragula/ng2-dragula';
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
+import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { GrowlModule } from "primeng/components/growl/growl";
 import { ButtonModule, CaptchaModule,ConfirmationService, ConfirmDialogModule, DataTableModule,DialogModule, SharedModule, TooltipModule } from "primeng/primeng";
 
@@ -39,7 +42,6 @@ import { SearchModule } from "./search/search.module";
 import { SettingsModule } from "./settings/settings.module";
 import { UserManagementModule } from "./usermanagement/usermanagement.module";
 import { WizardModule } from "./wizard/wizard.module";
-//import { PipeModule } from './pipes/pipe.module';
 
 const routes: Routes = [
     { path: "*", component: PageNotFoundComponent },
@@ -53,10 +55,16 @@ const routes: Routes = [
     { path: "landingpage", component: LandingPageComponent },
 ];
 
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+    return new TranslateHttpLoader(http, "/translations/", ".json");
+}
+
 @NgModule({
     imports: [
         RouterModule.forRoot(routes),
         BrowserModule,
+        HttpClientModule,
         BrowserAnimationsModule,
         HttpModule,
         GrowlModule,
@@ -71,7 +79,6 @@ const routes: Routes = [
         DialogModule,
         MatButtonModule,
         NgbModule.forRoot(),
-        //DragulaModule,
         MatCardModule,
         MatInputModule,
         MatTabsModule,
@@ -80,7 +87,14 @@ const routes: Routes = [
         RequestsModule,
         CaptchaModule,
         TooltipModule,
-        ConfirmDialogModule,
+        ConfirmDialogModule,        
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient],
+            },
+        }),
     ],
     declarations: [
         AppComponent,
@@ -100,8 +114,7 @@ const routes: Routes = [
         StatusService,
         LandingPageService,
         ConfirmationService,
-ImageService,
-    //DragulaService
+        ImageService,
     ],
     bootstrap: [AppComponent],
 })

src/Ombi/ClientApp/app/login/login.component.html

@@ -15,20 +15,20 @@ include the remember me checkbox
             <form class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
                 
                
-                <input type="email" id="inputEmail" class="form-control" formControlName="username" placeholder="Username" autofocus>
-                <input type="password" id="inputPassword" class="form-control" formControlName="password" placeholder="Password">
+                <input type="email" id="inputEmail" class="form-control" formControlName="username" [attr.placeholder]="'Login.UsernamePlaceholder' | translate" autofocus>
+                <input type="password" id="inputPassword" class="form-control" formControlName="password" [attr.placeholder]="'Login.PasswordPlaceholder' | translate">
                 <div class="form-group">
                     <div class="checkbox">
                         <input type="checkbox" id="RememberMe" formControlName="rememberMe" >
                         
-                        <label for="RememberMe"> Remember Me</label>
+                        <label for="RememberMe" [translate]="'Login.RememberMe'"></label>
                     
                     </div>
                 </div>
-                <button class="btn btn-success" type="submit">Sign in</button>
+                <button class="btn btn-success" type="submit" [translate]="'Login.SignInButton'"></button>
             </form><!-- /form -->
             <a [routerLink]="['/reset']" class="forgot-password col-md-12">
-                <b>Forgot your password?</b>
+                <b [translate]="'Login.ForgottenPassword'"></b>
             </a>
         </div><!-- /card-container -->
     </div><!-- /container -->

src/Ombi/Ombi.csproj

@@ -88,6 +88,7 @@
 
   <ItemGroup>
     <None Include="wwwroot\loading.css" />
+    <None Include="wwwroot\translations\*.json" />
   </ItemGroup>
  
 </Project>

src/Ombi/package-lock.json

@@ -107,6 +107,16 @@
       "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.5.tgz",
       "integrity": "sha1-2iuQZrNwGihMrFoWFop33vlHtKs="
     },
+    "@ngx-translate/core": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-8.0.0.tgz",
+      "integrity": "sha1-dR/WtRLYDzp0jS3o38lt/vopr+A="
+    },
+    "@ngx-translate/http-loader": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-2.0.0.tgz",
+      "integrity": "sha1-nBbQfNBwxnraJwoulAKB64JrP0M="
+    },
     "@types/chai": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.0.4.tgz",

src/Ombi/package.json

@@ -22,6 +22,8 @@
     "@angular/platform-server": "^4.4.6",
     "@angular/router": "^4.4.6",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
+    "@ngx-translate/core": "^8.0.0",
+    "@ngx-translate/http-loader": "^2.0.0",
     "@types/core-js": "^0.9.43",
     "@types/extract-text-webpack-plugin": "^3.0.0",
     "@types/intro.js": "^2.4.3",

src/Ombi/webpack.config.vendor.ts

@@ -64,6 +64,8 @@ module.exports = (env: any) => {
                 "ngx-clipboard",
                 "angular2-jwt",
                 "ng2-cookies",
+                "@ngx-translate/core",
+                "@ngx-translate/http-loader",
             ],
         },
         output: {

src/Ombi/wwwroot/translations/de.json

@@ -0,0 +1,7 @@
+{
+    "Login": {
+        "SignInButton": "Eintragen",
+        "UsernamePlaceholder":"Useraname",
+        "PasswordPlaceholder":"Password",
+    }
+}

src/Ombi/wwwroot/translations/en.json

@@ -0,0 +1,9 @@
+{
+    "Login": {
+        "SignInButton": "Sign in",
+        "UsernamePlaceholder":"Username",
+        "PasswordPlaceholder":"Password",
+        "RememberMe":"Remember Me",
+        "ForgottenPassword":"Forgot your password?"
+    }
+}