feat: switch language

security-c4po-angular/src/app/app.component.html

@@ -1,6 +1,6 @@
 <nb-layout>
   <nb-layout-header *ngIf="$authState.getValue()">
-    <app-header></app-header>
+    <app-header class="header"></app-header>
   </nb-layout-header>
 
   <nb-layout-column>

security-c4po-angular/src/app/app.component.scss

@@ -1,5 +1,9 @@
 @import "../assets/@theme/styles/_variables.scss";
 
+.header {
+  flex: 1;
+}
+
 .content-container {
   width: 100%;
   height: calc(100% - #{$header-height});

security-c4po-angular/src/app/app.module.ts

@@ -6,7 +6,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {
   NbLayoutModule,
   NbToastrModule,
-  NbIconModule, NbCardModule, NbButtonModule, NbDialogService, NbDialogModule,
+  NbIconModule, NbCardModule, NbButtonModule, NbDialogService, NbDialogModule, NbSelectModule,
 } from '@nebular/theme';
 import {NbEvaIconsModule} from '@nebular/eva-icons';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
@@ -48,6 +48,7 @@ import {OverlayContainer} from '@angular/cdk/overlay';
     BrowserAnimationsModule,
     ThemeModule.forRoot(),
     NbEvaIconsModule,
+    NbSelectModule,
     ConfirmDialogModule,
     NgxsModule.forRoot([SessionState], {developmentMode: !environment.production}),
     HttpClientModule,

security-c4po-angular/src/app/header/header.component.html

@@ -1,14 +1,15 @@
-<div class="header" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="2rem">
+<div class="header" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2rem">
   <img *ngIf="currentTheme === 'corporate', else changeImage"
        src="../../assets/images/favicons/favicon.ico" alt="logo dark" class="header-icon" width="60rem" height="60rem">
   <ng-template #changeImage>
     <img src="../../assets/images/favicons/corporate_favicon.ico" alt="logo light" class="header-icon" width="60rem" height="60rem">
   </ng-template>
 
-  <div class="logo-container" fxLayoutAlign="center center">
+  <div class="logo-container">
     <h1 >{{SECURITYC4PO_TITLE}} </h1>
   </div>
-  <div fxLayoutAlign="end" fxLayoutGap="4rem">
+  <div class="filler"></div>
+  <div fxLayoutGap="4rem">
     <nb-actions size="medium">
       <nb-action class="toggle-theme">
         <button nbButton
@@ -22,5 +23,14 @@
       </nb-action>
     </nb-actions>
   </div>
+  <div *ngIf="selectedLanguage && languages" class="languageContainer">
+    <nb-select selected="{{selectedLanguage}}" fullWidth>
+      <nb-option *ngFor="let language of languages"
+                 value="{{language}}" (click)="onClickLanguage(language)" fxLayoutAlign="start center">
+          <img src="../../assets/images/flags/{{language}}.svg" class="flag" width="25rem" height="16rem" alt="">
+          <span fxFlexOffset="0.5rem"> {{'languageKeys.' + language | translate}} </span>
+      </nb-option>
+    </nb-select>
+  </div>
 </div>
 

security-c4po-angular/src/app/header/header.component.scss

@@ -1,6 +1,24 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 @import "../../assets/@theme/styles/_variables.scss";
 
+.header {
+  flex: 1;
+
+  .filler {
+    flex-grow: 1;
+  }
+
+  .languageContainer {
+    display: flex;
+    max-width: 8rem;
+    min-width: 8rem;
+
+    .flag {
+      object-fit: contain;
+    }
+  }
+}
+
 @mixin nb-overrides {
   display: inline-flex;
   justify-content: space-between;

security-c4po-angular/src/app/header/header.component.ts

@@ -4,20 +4,23 @@ import {NbThemeService} from '@nebular/theme';
 import {map} from 'rxjs/operators';
 import {untilDestroyed} from 'ngx-take-until-destroy';
 import {GlobalTitlesVariables} from '@shared/config/global-variables';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })
-export class HeaderComponent implements OnInit, OnDestroy {
+export class HeaderComponent implements OnInit, OnDestroy{
 
   readonly fa = FA;
   readonly SECURITYC4PO_TITLE = GlobalTitlesVariables.SECURITYC4PO_TITLE;
 
   currentTheme = '';
+  languages = ['en-US', 'de-DE'];
+  selectedLanguage = '';
 
-  constructor(private themeService: NbThemeService) { }
+  constructor(private themeService: NbThemeService, private translateService: TranslateService) { }
 
   ngOnInit(): void {
     this.themeService.onThemeChange()
@@ -26,6 +29,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
         untilDestroyed(this),
       )
       .subscribe(themeName => this.currentTheme = themeName);
+    this.selectedLanguage = this.translateService.currentLang;
   }
 
   onClickSwitchTheme(): void {
@@ -36,6 +40,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
     }
   }
 
+  onClickLanguage(language: string): void {
+    this.translateService.use(language);
+  }
+
   ngOnDestroy(): void {
     // This method must be present when using ngx-take-until-destroy
     // even when empty

security-c4po-angular/src/app/header/header.module.ts

@@ -1,9 +1,10 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {HeaderComponent} from './header.component';
-import {NbActionsModule, NbButtonModule, NbCardModule} from '@nebular/theme';
+import {NbActionsModule, NbButtonModule, NbCardModule, NbSelectModule} from '@nebular/theme';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {TranslateModule} from '@ngx-translate/core';
 
 @NgModule({
   declarations: [
@@ -12,14 +13,16 @@ import {FlexLayoutModule} from '@angular/flex-layout';
   exports: [
     HeaderComponent
   ],
-  imports: [
+    imports: [
-    CommonModule,
+        CommonModule,
-    NbButtonModule,
+        NbButtonModule,
-    FontAwesomeModule,
+        FontAwesomeModule,
-    NbCardModule,
+        NbCardModule,
-    NbActionsModule,
+        NbActionsModule,
-    FlexLayoutModule
+        FlexLayoutModule,
-  ]
+        NbSelectModule,
+        TranslateModule
+    ]
 })
 export class HeaderModule {
 }

security-c4po-angular/src/assets/i18n/de-DE.json

@@ -11,6 +11,10 @@
     "username": "Nutzername",
     "password": "Passwort"
   },
+  "languageKeys":{
+    "de-DE": "Deutsch",
+    "en-US": "Englisch"
+  },
   "popup": {
     "success": "✔",
     "failure": "✘",

security-c4po-angular/src/assets/i18n/en-US.json

@@ -11,6 +11,10 @@
     "username": "Username",
     "password": "Password"
   },
+  "languageKeys":{
+    "de-DE": "German",
+    "en-US": "English"
+  },
   "popup": {
     "success": "✔",
     "failure": "✘",

security-c4po-angular/src/assets/images/flags/de-DE.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 5 3">
+	<desc>Flag of Germany</desc>
+	<rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
+	<rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
+	<rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
+</svg>

security-c4po-angular/src/assets/images/flags/en-US.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650">
+<defs>
+<polygon id="pt" points="-0.1624598481164531,0 0,-0.5 0.1624598481164531,0" transform="scale(0.0616)" fill="#FFF"/>
+<g id="star"><use xlink:href="#pt" transform="rotate(-144)"/><use xlink:href="#pt" transform="rotate(-72)"/><use xlink:href="#pt"/><use xlink:href="#pt" transform="rotate(72)"/><use xlink:href="#pt" transform="rotate(144)"/></g>
+<g id="s5"><use xlink:href="#star" x="-0.252"/><use xlink:href="#star" x="-0.126"/><use xlink:href="#star"/><use xlink:href="#star" x="0.126"/><use xlink:href="#star" x="0.252"/></g>
+<g id="s6"><use xlink:href="#s5" x="-0.063"/><use xlink:href="#star" x="0.315"/></g>
+<g id="x4"><use xlink:href="#s6"/><use xlink:href="#s5" y="0.054"/><use xlink:href="#s6" y="0.108"/><use xlink:href="#s5" y="0.162"/></g>
+<g id="u"><use xlink:href="#x4" y="-0.216"/><use xlink:href="#x4"/><use xlink:href="#s6" y="0.216"/></g>
+<rect id="stripe" width="1235" height="50" fill="#B22234"/>
+</defs>
+<rect width="1235" height="650" fill="#FFF"/><use xlink:href="#stripe"/><use xlink:href="#stripe" y="100"/><use xlink:href="#stripe" y="200"/><use xlink:href="#stripe" y="300"/><use xlink:href="#stripe" y="400"/><use xlink:href="#stripe" y="500"/><use xlink:href="#stripe" y="600"/><rect width="494" height="350" fill="#3C3B6E"/><use xlink:href="#u" transform="translate(247,175) scale(650)"/></svg>