Added more translations

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

@@ -11,45 +11,103 @@
             </button>
             <div *ngIf="customizationSettings">
                 <div *ngIf="customizationSettings.applicationName; then aplicationNameBlock; else ombiBlock"></div>
-                <ng-template #aplicationNameBlock><a class="navbar-brand" [routerLink]="['/']">{{customizationSettings.applicationName}}</a></ng-template>
+                <ng-template #aplicationNameBlock>
-                <ng-template #ombiBlock><a class="navbar-brand" [routerLink]="['/']">Ombi</a></ng-template>
+                    <a class="navbar-brand" [routerLink]="['/']">{{customizationSettings.applicationName}}</a>
+                </ng-template>
+                <ng-template #ombiBlock>
+                    <a class="navbar-brand" [routerLink]="['/']">Ombi</a>
+                </ng-template>
             </div>
 
         </div>
 
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav">
-                <li id="Search" [routerLinkActive]="['active']"><a  [routerLink]="['/search']"><i class="fa fa-search"></i> Search</a></li>
+                <li id="Search" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/search']">
+                        <i class="fa fa-search"></i> {{ 'NavigationBar.Search' | translate }}</a>
+                </li>
             </ul>
             <ul class="nav navbar-nav">
-                <li id="Requests" [routerLinkActive]="['active']"><a [routerLink]="['/requests']"><i class="fa fa-plus"></i> Requests</a></li>
+                <li id="Requests" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/requests']">
+                        <i class="fa fa-plus"></i> {{ 'NavigationBar.Requests' | translate }}</a>
+                </li>
             </ul>
             <ul *ngIf="hasRole('Admin') || hasRole('PowerUser')" class="nav navbar-nav">
-                <li id="UserManagement" [routerLinkActive]="['active']"><a  [routerLink]="['/usermanagement']"><i class="fa fa-user"></i> User Management</a></li>
+                <li id="UserManagement" [routerLinkActive]="['active']">
+                    <a [routerLink]="['/usermanagement']">
+                        <i class="fa fa-user"></i> {{ 'NavigationBar.UserManagement' | translate }}</a>
+                </li>
             </ul>
             <ul *ngIf="hasRole('Admin') || hasRole('PowerUser')" class="nav navbar-nav">
-                <li><a href="https://www.paypal.me/PlexRequestsNet" target="_blank" pTooltip="This is how I convince my wife to let me spend my spare time developing Ombi ;)"><i class="fa fa-heart" style="color:red"></i> Donate!</a></li>
+                <li>
+                    <a href="https://www.paypal.me/PlexRequestsNet" target="_blank" pTooltip="{{ 'NavigationBar.DonateTooltip' | translate }}">
+                        <i class="fa fa-heart" style="color:red"></i> {{ 'NavigationBar.Donate' | translate }}</a>
+                </li>
             </ul>
 
 
             <ul class="nav navbar-nav navbar-right">
-                <li *ngIf="hasRole('Admin') " [routerLinkActive]="['active']"><a [routerLink]="['/Settings/About']">
+                <li *ngIf="hasRole('Admin') " [routerLinkActive]="['active']">
+                    <a [routerLink]="['/Settings/About']">
 
                         <i *ngIf="!updateAvailable" class="fa fa-cog"></i>
-                    <i *ngIf="updateAvailable" class="fa fa-warning" style="color:#f57f17" pTooltip="Update Available!" tooltipPosition="left" [tooltipZIndex]="999999"></i>
+                        <i *ngIf="updateAvailable" class="fa fa-warning" style="color:#f57f17" pTooltip="{{ 'NavigationBar.UpdateAvailableTooltip' | translate }}"
+                            tooltipPosition="left" [tooltipZIndex]="999999"></i>
 
-                    Settings
+                        {{ 'NavigationBar.Settings' | translate }}
 
-                </a></li>
+                    </a>
+                </li>
                 <li [routerLinkActive]="['active']" class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-user"></i> Welcome {{user.name}} <span class="caret"></span></a>
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+                        <i class="fa fa-user"></i>{{ 'NavigationBar.Welcome' | translate: {username: user.name} }}
+                        <span class="caret"></span>
+                    </a>
                     <ul class="dropdown-menu" role="menu">
-                        <li [routerLinkActive]="['active']"><a [routerLink]="['/usermanagement/updatedetails']"><i class="fa fa-key"></i> Update Details</a></li>
+                        <li [routerLinkActive]="['active']">
-                        <li [routerLinkActive]="['active']"><a (click)="logOut()"><i class="fa fa-sign-out"></i> Logout</a></li>
+                            <a [routerLink]="['/usermanagement/updatedetails']">
+                                <i class="fa fa-key"></i>{{ 'NavigationBar.UpdateDetails' | translate }}</a>
+                        </li>
+                        <li [routerLinkActive]="['active']">
+                            <a (click)="logOut()">
+                                <i class="fa fa-sign-out"></i> {{ 'NavigationBar.UpdateDetails' | translate }}</a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="dropdown">
+                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+                        <i class="fa fa-language" aria-hidden="true">
+                            <span class="caret"></span>
+                        </i>
+                    </a>
+                    <ul class="dropdown-menu" role="menu">
+                        <li [ngClass]="{'active': 'en' === translate.currentLang}">
+                            <a (click)="translate.use('en')"  [translate]="'NavigationBar.Language.English'"></a>
+                        </li>
+                        <li [ngClass]="{'active': 'fr' === translate.currentLang}">
+                            <a (click)="translate.use('fr')" [translate]="'NavigationBar.Language.French'"></a>
+                        </li>
+                        <li [ngClass]="{'active': 'da' === translate.currentLang}">
+                            <a (click)="translate.use('da')" [translate]="'NavigationBar.Language.Danish'"></a>
+                        </li>
+                        <li [ngClass]="{'active': 'de' === translate.currentLang}">
+                            <a (click)="translate.use('de')" [translate]="'NavigationBar.Language.German'"></a>
+                        </li>
+                        <li [ngClass]="{'active': 'it' === translate.currentLang}">
+                            <a (click)="translate.use('it')" [translate]="'NavigationBar.Language.Italian'"></a>
+                        </li>
+                        <li [ngClass]="{'active': 'es' === translate.currentLang}">
+                            <a (click)="translate.use('es')" [translate]="'NavigationBar.Language.Spanish'"></a>
+                        </li>
+                        <li [ngClass]="{'active': 'nl' === translate.currentLang}">
+                            <a (click)="translate.use('nl')" [translate]="'NavigationBar.Language.Dutch'"></a>
+                        </li>
                     </ul>
                 </li>
             </ul>
-</div>
+        </div>
     </div>
 </nav>
 
@@ -57,6 +115,3 @@
 <div [ngClass]="{'container top-spacing': showNav}">
     <router-outlet></router-outlet>
 </div>
-
-
-

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

@@ -25,8 +25,8 @@ export class AppComponent implements OnInit {
                 private readonly router: Router,
                 private readonly settingsService: SettingsService,
                 private readonly jobService: JobService,
-                private readonly translate: TranslateService) { 
+                public readonly translate: TranslateService) { 
-                    this.translate.addLangs(["en", "de"]);
+                    this.translate.addLangs(["en", "de", "fr","da","es","it","nl"]);
                     // this language will be used as a fallback when a translation isn't found in the current language
                     this.translate.setDefaultLang("en");
                     

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

@@ -20,28 +20,28 @@
                 </div>
                 <div *ngIf="mediaServerStatus">
                     <div *ngIf="mediaServerStatus.fullyAvailable">
-                        <h3 class="online"><i class="fa fa-check-circle "></i> Currently Online</h3>
+                        <h3 class="online"><i class="fa fa-check-circle "></i> {{ 'LandingPage.OnlineHeading' | translate }}</h3>
-                        <span>The media server is currently online</span>
+                        <span [translate]="'LandingPage.OnlineParagraph'"></span>
-                        <p>Check this page for continous site updates.</p>
+                        <p [translate]="'CheckPageForUpdates'"></p>
                     </div>
                     
                     <div *ngIf="mediaServerStatus.partiallyDown">
-                        <h3 class="partial"><i class="fa fa-exclamation-triangle "></i> Partially Online</h3>
+                        <h3 class="partial"><i class="fa fa-exclamation-triangle "></i> {{ 'LandingPage.PartiallyOnlineHeading' | translate }}</h3>
-                        <span>The media server is partially online. </span>
+                        <span [translate]="'LandingPage.PartiallyOnlineParagraph'"></span>
-                        <p *ngIf="mediaServerStatus.serversUnavailable > 1">There are {{mediaServerStatus.serversUnavailable}} servers offline out of {{mediaServerStatus.totalServers}}.</p>
+                        <p *ngIf="mediaServerStatus.serversUnavailable > 1" [translate]="'LandingPage.MultipleServersUnavailable'" [translateParams]="{serversUnavailable: mediaServerStatus.serversUnavailable, totalServers: mediaServerStatus.totalServers}"></p>
-                        <p *ngIf="mediaServerStatus.serversUnavailable == 1">There is {{mediaServerStatus.serversUnavailable}} server offline out of {{mediaServerStatus.totalServers}}.</p>
+                        <p *ngIf="mediaServerStatus.serversUnavailable == 1" [translate]="'LandingPage.SingleServerUnavailable'" [translateParams]="{serversUnavailable: mediaServerStatus.serversUnavailable, totalServers: mediaServerStatus.totalServers}">There is {{mediaServerStatus.serversUnavailable}} server offline out of {{mediaServerStatus.totalServers}}.</p>
-                        <p>Check this page for continous site updates.</p>
+                        <p [translate]="'CheckPageForUpdates'"></p>
                     </div>
 
                     <div *ngIf="mediaServerStatus.completelyDown">
-                        <h3 class="offline"><i class="fa fa-times "></i> Currently Offline</h3>
+                        <h3 class="offline"><i class="fa fa-times "></i> {{ 'LandingPage.OfflineHeading' | translate }}</h3>
-                        <span>The media server is currently offline</span>
+                        <span [translate]="'LandingPage.OfflineParagraph'"></span>
-                        <p>Check this page for continous site updates.</p>
+                        <p [translate]="'CheckPageForUpdates'"></p>
                     </div>
                 </div>
             </div>
             <div class="col-md-3 col-md-push-4 vcenter">
-                <button [routerLink]="['/login', 'true']" class="btn btn-lg btn-success-outline">Continue</button>
+                <button [routerLink]="['/login', 'true']" class="btn btn-lg btn-success-outline" [translate]="'Common.ContinueButton'"></button>
             </div>
         </div>
     </div>

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

@@ -11,8 +11,8 @@ include the remember me checkbox
             <p id="profile-name" class="profile-name-card"></p>
 
             <form class="form-signin" novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
-                <input type="email" id="inputEmail" class="form-control" formControlName="email" placeholder="Email Address" autofocus>
+                <input type="email" id="inputEmail" class="form-control" formControlName="email" [attr.placeholder]="'ResetPassword.EmailAddressPlaceholder' | translate" autofocus>
-                <button class="btn btn-success-outline" [disabled]="form.invalid" type="submit">Reset Password</button>
+                <button class="btn btn-success-outline" [disabled]="form.invalid" type="submit" [translate]="'ResetPassword.ResetPasswordButton'"></button>
                 
             </form><!-- /form -->
         </div><!-- /card-container -->

src/Ombi/wwwroot/translations/en.json

@@ -1,9 +1,51 @@
 {
   "Login": {
     "SignInButton": "Sign in",
-        "UsernamePlaceholder":"Username",
+    "UsernamePlaceholder": "Username",
-        "PasswordPlaceholder":"Password",
+    "PasswordPlaceholder": "Password",
-        "RememberMe":"Remember Me",
+    "RememberMe": "Remember Me",
-        "ForgottenPassword":"Forgot your password?"
+    "ForgottenPassword": "Forgot your password?"
+  },
+  "Common":{
+      "ContinueButton":"Continue"
+  },
+  "PasswordReset": {
+    "EmailAddressPlaceholder": "Email Address",
+    "ResetPasswordButton": "Reset Password"
+  },
+  "LandingPage": {
+      "OnlineHeading":"Currently Online",
+      "OnlineParagraph":"The media server is currently online",
+
+      "PartiallyOnlineHeading":"Partially Online",
+      "PartiallyOnlineParagraph":"The media server is partially online.",
+      "MultipleServersUnavailable":"There are {{serversUnavailable}} servers offline out of {{totalServers}}.",
+      "SingleServerUnavailable":"There is {{serversUnavailable}} server offline out of {{totalServers}}.",
+
+      "OfflineHeading":"Currently Offline",
+      "OfflineParagraph":"The media server is currently offline.",
+
+      "CheckPageForUpdates":"Check this page for continous site updates."
+  },
+  "NavigationBar":{
+      "Search":"Search",
+      "Requests":"Requests",
+      "UserManagement":"User Management",
+      "Donate":"Donate!",
+      "DonateTooltip":"This is how I convince my wife to let me spend my spare time developing Ombi ;)",
+      "UpdateAvailableTooltip":"Update Available!",
+      "Settings":"Settings",
+      "Welcome":"Welcome {{username}}",
+      "UpdateDetails":"Update Details",
+      "Logout":"Logout",
+      "Language":{
+          "English":"English",
+          "French":"French",
+          "Spanish":"Spanish",
+          "German":"German",
+          "Italian":"Italian",
+          "Danish":"Danish",
+          "Dutch":"Dutch"
+      }      
   }
 }