locale + darktheme support, fixes boolean profilefield

src/app/app.component.html

@@ -15,7 +15,7 @@
     </button>
     <mat-menu #menu="matMenu">
       <a *ngFor="let locale of locales" mat-menu-item (click)="setLocale(locale)">{{'locale.' + locale + '.long' |
-        i18n}}</a>
+        i18n}} <mat-icon  inline=true  *ngIf="locale == currentLocale">done</mat-icon></a>
     </mat-menu>
   </ng-container>
 </mat-toolbar>

src/app/app.component.ts

@@ -5,7 +5,7 @@ import {I18nService} from './services/i18n.service';
 import {Router} from '@angular/router';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material/icon';
-import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
+import {DateAdapter} from '@angular/material/core';
 
 @Component({
   selector: 'app-root',
@@ -40,6 +40,10 @@ export class AppComponent {
     } else {
       this.opened = true;
     }
+
+    if(localStorage.getItem("bstly.darkTheme") == "true") {
+      window.document.body.classList.add("dark-theme");
+    }
   }
 
   setLocale(locale) {

src/app/auth/auth.guard.ts

@@ -1,7 +1,10 @@
 import {Injectable} from '@angular/core';
 import {Router} from '@angular/router';
-import {    CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
+import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
 import {AuthService} from '../services/auth.service';
+import {ProfileService} from '../services/profile.service';
+import {I18nService} from '../services/i18n.service';
+
 
 @Injectable({
     providedIn: 'root'
@@ -35,7 +38,7 @@ export class AuthGuard implements CanActivate {
     providedIn: 'root'
 })
 export class AuthenticatedGuard implements CanActivate {
-    constructor(private authService: AuthService, private router: Router) {}
+    constructor(private authService: AuthService, private profileService: ProfileService, private i18nService: I18nService, private router: Router) {}
 
     canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
         const that = this;
@@ -44,6 +47,27 @@ export class AuthenticatedGuard implements CanActivate {
                 this.router.navigateByUrl('/login');
                 return false;
             }
+
+
+            this.profileService.getAll(["locale", "darkTheme"]).toPromise().then((profileFields: any) => {
+                let reload = false;
+                for(let profileField of profileFields) {
+                    if(profileField.name == "darkTheme" && profileField.value != localStorage.getItem("bstly.darkTheme")) {
+                        localStorage.setItem("bstly.darkTheme", profileField.value);
+                        reload = true;
+                    } else if(profileField.name == "locale" && this.i18nService.locales.indexOf(profileField.value) != -1 && localStorage.getItem("bstly.locale") != profileField.value) {
+                        if(this.i18nService.locale != profileField.value) {
+                            localStorage.setItem("bstly.locale", profileField.value);
+                            reload = true;
+                        }
+                    }
+                }
+
+                if(reload) {
+                    window.location.reload();
+                }
+            })
+
             return true;
         }).catch(function(error) {
             return that.router.parseUrl('/unavailable');

src/app/services/i18n.service.ts

@@ -8,7 +8,7 @@ import {environment} from '../../environments/environment';
 export class I18nService {
 
     locale: string = "de-informal";
-    locales: any = ["de-informal"];
+    locales: any[] = ["de-informal"];
     i18n: any;
 
     constructor(private http: HttpClient) {
@@ -42,7 +42,9 @@ export class I18nService {
         }
 
         try {
-            this.locales = await this.http.get(environment.apiUrl + "/i18n").toPromise();
+            await this.http.get(environment.apiUrl + "/i18n").toPromise().then((response: any) => {
+                this.locales = response;
+            });
         } catch(e) {
             console.debug("fallback to default locales");
         }

src/app/services/profile.service.ts

@@ -11,8 +11,8 @@ export class ProfileService {
     constructor(private http: HttpClient) {
     }
 
-    getAll() {
-        return this.http.get(environment.apiUrl + "/profiles");
+    getAll(filter?: any[]) {
+        return this.http.get(environment.apiUrl + "/profiles" + (filter ? "?filter=" + filter.join(",") : ""));
     }
 
     getAllForUser(username) {

src/app/ui/profilefields/profilefield.dialog.html

@@ -34,7 +34,8 @@
         <input matInput type="email" [(ngModel)]="profileField.value" formControlName="value"
           placeholder="{{'profileField.value' | i18n}}">
       </mat-form-field>
-      <mat-slide-toggle *ngSwitchCase="'BOOL'" [(ngModel)]="profileField.value" formControlName="value">
+      <mat-slide-toggle *ngSwitchCase="'BOOL'" (change)="booleanChange(profileField)"
+        [checked]="profileField.value == 'true'">
         {{'profileField.value' | i18n}}
       </mat-slide-toggle>
       <mat-form-field *ngSwitchCase="'NUMBER'">

src/app/ui/profilefields/profilefields.component.html

@@ -17,7 +17,7 @@
                 <span *ngSwitchCase="'NUMBER'">{{profileField.value}}</span>
                 <button *ngSwitchCase="'BLOB'" mat-raised-button
                     (click)="openBlob(profileField)">{{'profileField.openBlob' | i18n}}</button>
-                <mat-slide-toggle *ngSwitchCase="'BOOL'" [(ngModel)]="profileField.value" disabled>
+                <mat-slide-toggle *ngSwitchCase="'BOOL'" [checked]="profileField.value == 'true'" disabled>
                 </mat-slide-toggle>
             </div>
         </td>

src/app/ui/profilefields/profilefields.component.ts

@@ -148,6 +148,16 @@ export class ProfileFieldDialog {
       index: ['']
     });
   }
+
+  booleanChange(profileField) {
+    if(profileField.value == 'false') {
+      profileField.value = 'true';
+    } else {
+      profileField.value = 'false';
+    }
+    console.log(profileField);
+  }
+
 }
 
 

src/assets/i18n/de-informal.json

@@ -93,11 +93,13 @@
     "edit": "Bearbeiten",
     "index": "Index",
     "name": {
-      ".": "Name",
-      "publicKey": "Öffentlicher PGP Schlüssel",
+      ".": "Key",
+      "darkTheme" : "Dunkles Thema",
       "email": "E-Mail Adresse",
+      "locale" : "Sprache",
       "primaryEmail": "E-Mail Adresse primär verwenden",
-      "prtyMap": "Partey Karte"
+      "prtyMap": "Partey Karte",
+      "publicKey": "Öffentlicher PGP Schlüssel"
     },
     "openBlob": "Anzeigen",
     "type": {
@@ -177,7 +179,7 @@
     },
     "status": {
       ".": "Status",
-      "change" : "Status ändern",
+      "change" : "Status aktualisieren",
       "hint": "Dein User Status gibt an, wie mit deinen Account Daten umgegangen wird wenn deine Berechtigungen ausgelaufen sind.",
       "NORMAL": {
         ".": "Normal",

src/assets/i18n/en.json

@@ -93,11 +93,13 @@
     "edit": "Edit",
     "index": "Index",
     "name": {
-      ".": "Name",
-      "publicKey": "Public PGP key",
+      ".": "Key",
+      "darkTheme" : "Dark Theme",
       "email": "Email address",
+      "locale" : "Locale",
       "primaryEmail": "Use email address primary",
-      "prtyMap": "Partey map"
+      "prtyMap": "Partey map",
+      "publicKey": "Public PGP key"
     },
     "openBlob": "Display",
     "type": {

src/styles.scss

@@ -21,7 +21,7 @@ $light-theme: mat-light-theme((color: (primary: $light-primary,
 
 // Define an alternate dark theme.
 $dark-theme: mat-dark-theme((color: (primary: $dark-primary,
-      accent: $dark-accent,
+      accent: $light-accent,
       warn: $dark-warn,
     )));