Use snackbar for success/error labels; Add material loading indicator

static/src/app/admin/admin.component.html

@@ -2,11 +2,6 @@
 
   <h2>Admin Panel</h2>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-        Erfolgreich gespeichert
-  </span>
-
   <div class="pull-left" style="margin-top:20px;">
     <div class="table-container" style="width: 75%; min-width: 500px">
       <table class="table table-hover">

static/src/app/admin/admin.component.ts

@@ -4,6 +4,8 @@ import {Observable} from 'rxjs/Observable';
 import {AppUserService} from '../services/app-user-service/app-user.service';
 import {SquadService} from '../services/army-management/squad.service';
 import {Fraction} from '../utils/fraction.enum';
+import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../i18n/de.messages';
 
 
 @Component({
@@ -17,12 +19,11 @@ export class AdminComponent implements OnInit {
 
   squads: Squad[] = [];
 
-  showSuccessLabel = false;
-
   readonly fraction = Fraction;
 
   constructor(private appUserService: AppUserService,
-              private squadService: SquadService) {
+              private squadService: SquadService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -46,10 +47,7 @@ export class AdminComponent implements OnInit {
 
     this.appUserService.updateUser(updateObject)
         .subscribe(resUser => {
-          this.showSuccessLabel = true;
+          this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-          setTimeout(() => {
-            this.showSuccessLabel = false;
-          }, 2000);
         });
   }
 

static/src/app/app.component.html

@@ -103,7 +103,7 @@
 </div>
 
 <div>
-  <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
+  <mat-spinner class="load-indicator" *ngIf="loading"></mat-spinner>
   <div id="left">
     <router-outlet></router-outlet>
   </div>

static/src/app/app.module.ts

@@ -23,9 +23,11 @@ import {UserService} from './services/army-management/user.service';
 import {UserStore} from './services/stores/user.store';
 import {CookieService} from 'ngx-cookie-service';
 import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
+import {MaterialComponentsModule} from './material-components.module';
 
 @NgModule({
-  imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule],
+  imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule,
+    MaterialComponentsModule],
   providers: [
     HttpClient,
     LoginService,

static/src/app/army/army-member.component.ts

@@ -7,7 +7,7 @@ import {RouteConfig} from '../app.config';
 import {AwardingService} from '../services/army-management/awarding.service';
 import {Fraction} from '../utils/fraction.enum';
 import {DOCUMENT} from '@angular/common';
-import {CSSHelpers} from '../global.helpers';
+import {CSSHelpers} from '../utils/global.helpers';
 
 
 @Component({

static/src/app/army/army.component.ts

@@ -5,7 +5,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {Fraction} from '../utils/fraction.enum';
 import {DOCUMENT} from '@angular/common';
 import {RouteConfig} from '../app.config';
-import {CSSHelpers} from '../global.helpers';
+import {CSSHelpers} from '../utils/global.helpers';
 
 
 @Component({

static/src/app/common/modules/material-components.module.ts

@@ -1,52 +0,0 @@
-/**
- * Angular material imports
- */
-
-import { NgModule } from '@angular/core';
-import {
-  MatSidenavModule,
-  MatFormFieldModule,
-  MatInputModule,
-  MatButtonModule,
-  MatCheckboxModule,
-  MatTableModule,
-  MatPaginatorModule,
-  MatSortModule,
-  MatIconModule,
-  MatSnackBarModule,
-  MatToolbarModule,
-  MatExpansionModule
-} from '@angular/material';
-
-@NgModule({
-  imports: [
-    MatSidenavModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatTableModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatIconModule,
-    MatSnackBarModule,
-    MatToolbarModule,
-    MatExpansionModule
-  ],
-  exports: [
-    MatSidenavModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatTableModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatIconModule,
-    MatSnackBarModule,
-    MatToolbarModule,
-    MatExpansionModule
-  ]
-})
-
-export class MaterialComponentsModule {}

static/src/app/decorations/edit-decoration/edit-decoration.component.html

@@ -75,11 +75,4 @@
           [disabled]="!form.valid">
     Bestätigen
   </button>
-
-  <span *ngIf="showSuccessLabel"
-        class="label label-success label-small"
-        style="margin-left: inherit">
-        Erfolgreich gespeichert
-  </span>
-
 </form>

static/src/app/decorations/edit-decoration/edit-decoration.component.ts

@@ -5,6 +5,8 @@ import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {Subscription} from 'rxjs/Subscription';
 import {Fraction} from '../../utils/fraction.enum';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 @Component({
   templateUrl: './edit-decoration.component.html',
@@ -22,15 +24,14 @@ export class EditDecorationComponent implements OnInit, OnDestroy {
 
   imagePreviewSrc;
 
-  showSuccessLabel = false;
-
   @ViewChild(NgForm) form: NgForm;
 
   readonly fraction = Fraction;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private decorationService: DecorationService) {
+              private decorationService: DecorationService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -81,10 +82,7 @@ export class EditDecorationComponent implements OnInit, OnDestroy {
               this.imagePreviewSrc = 'resource/decoration/' + this.decoration._id + '.png?' + Date.now();
             }, 300);
             fileInput.value = '';
-            this.showSuccessLabel = true;
+            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-            setTimeout(() => {
-              this.showSuccessLabel = false;
-            }, 2000);
           });
     }
   }

static/src/app/i18n/de.messages.ts

@@ -0,0 +1,5 @@
+export enum Message {
+  SIGN_UP_SUCCESS = 'Account erfolgreich erstellt',
+  SUCCESS_SAVE = 'Erfolgreich gespeichert',
+  DUPLICATED_NAME_ERR = 'Benutzername existiert bereits',
+}

static/src/app/login/signup.component.html

@@ -21,28 +21,12 @@
     <input #secret type="text" id="inputSecret" class="form-control" placeholder="Geheimer Text für PN Abgleich"
            required="">
 
-
     <div class="form-group">
       <button type="submit" class="btn btn-lg btn-block btn-primary">
         <span *ngIf="!loading">Registrieren</span>
         <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
       </button>
-      <h3 class="text-center">
-        <span *ngIf="showSuccessLabel"
-              class="label label-success label-small"
-              style="margin-left: inherit">
-          Account erfolgreich erstellt
-        </span>
-      </h3>
-      <span *ngIf="showErrorLabel"
-            class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
-        {{error}}
-    </span>
     </div>
-
-
   </div>
-
-
 </form>
 

static/src/app/login/signup.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {LoginService} from '../services/app-user-service/login-service';
 import {RouteConfig} from '../app.config';
+import {Message} from '../i18n/de.messages';
+import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -12,19 +14,14 @@ import {RouteConfig} from '../app.config';
 
 export class SignupComponent implements OnInit {
 
-  showErrorLabel = false;
-
-  showSuccessLabel = false;
-
-  error: string;
-
   loading = false;
 
   returnUrl: string;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -41,15 +38,11 @@ export class SignupComponent implements OnInit {
           .subscribe(
             data => {
               this.loading = false;
-              this.showSuccessLabel = true;
+              this.snackBarService.showSuccess(Message.SIGN_UP_SUCCESS);
             },
             error => {
-              this.error = error;
-              this.showErrorLabel = true;
-              setTimeout(() => {
-                this.showErrorLabel = false;
-              }, 4000);
               this.loading = false;
+              this.snackBarService.showError(error, 10000);
             });
     }
   }

static/src/app/material-components.module.ts

@@ -0,0 +1,55 @@
+/**
+ * Angular material imports
+ */
+
+import { NgModule } from '@angular/core';
+import {
+  MatSidenavModule,
+  MatFormFieldModule,
+  MatInputModule,
+  MatButtonModule,
+  MatCheckboxModule,
+  MatTableModule,
+  MatPaginatorModule,
+  MatSortModule,
+  MatIconModule,
+  MatSnackBarModule,
+  MatToolbarModule,
+  MatExpansionModule,
+  MatProgressSpinnerModule
+} from '@angular/material';
+
+@NgModule({
+  imports: [
+    // MatSidenavModule,
+    // MatFormFieldModule,
+    // MatInputModule,
+    // MatButtonModule,
+    // MatCheckboxModule,
+    // MatTableModule,
+    // MatPaginatorModule,
+    // MatSortModule,
+    // MatIconModule,
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+    // MatToolbarModule,
+    // MatExpansionModule
+  ],
+  exports: [
+    // MatSidenavModule,
+    // MatFormFieldModule,
+    // MatInputModule,
+    // MatButtonModule,
+    // MatCheckboxModule,
+    // MatTableModule,
+    // MatPaginatorModule,
+    // MatSortModule,
+    // MatIconModule,
+    MatSnackBarModule,
+    MatProgressSpinnerModule,
+    // MatToolbarModule,
+    // MatExpansionModule
+  ]
+})
+
+export class MaterialComponentsModule {}

static/src/app/pub/decoration-overview/decoration-overview.component.ts

@@ -3,7 +3,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 
 import {DOCUMENT} from '@angular/common';
 import {Fraction} from '../../utils/fraction.enum';
-import {CSSHelpers} from '../../global.helpers';
+import {CSSHelpers} from '../../utils/global.helpers';
 import {RouteConfig} from '../../app.config';
 import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';

static/src/app/pub/rank-overview/rank-overview.component.ts

@@ -3,7 +3,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 
 import {DOCUMENT} from '@angular/common';
 import {Fraction} from '../../utils/fraction.enum';
-import {CSSHelpers} from '../../global.helpers';
+import {CSSHelpers} from '../../utils/global.helpers';
 import {RouteConfig} from '../../app.config';
 import {Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';

static/src/app/ranks/edit-rank/edit-rank.component.html

@@ -56,11 +56,4 @@
           [disabled]="!form.valid">
     Bestätigen
   </button>
-
-  <span *ngIf="showSuccessLabel"
-        class="label label-success label-small"
-        style="margin-left: inherit">
-        Erfolgreich gespeichert
-  </span>
-
 </form>

static/src/app/ranks/edit-rank/edit-rank.component.ts

@@ -5,6 +5,8 @@ import {Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';
 import {Subscription} from 'rxjs/Subscription';
 import {Fraction} from '../../utils/fraction.enum';
+import {Message} from '../../i18n/de.messages';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -25,15 +27,14 @@ export class EditRankComponent implements OnInit, OnDestroy {
 
   imagePreviewSrc;
 
-  showSuccessLabel = false;
-
   @ViewChild(NgForm) form: NgForm;
 
   readonly fraction = Fraction;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private rankService: RankService) {
+              private rankService: RankService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -85,10 +86,7 @@ export class EditRankComponent implements OnInit, OnDestroy {
               this.imagePreviewSrc = 'resource/rank/' + this.rank._id + '.png?' + Date.now();
             }, 300);
             fileInput.value = '';
-            this.showSuccessLabel = true;
+            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-            setTimeout(() => {
-              this.showSuccessLabel = false;
-            }, 2000);
           });
     }
   }

static/src/app/request/award/req-award.component.html

@@ -62,11 +62,6 @@
     Bestätigen
   </button>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-  Erfolgreich gespeichert
-  </span>
-
   <div class="table-container" *ngIf="showForm">
     <table class="table table-hover">
       <thead>

static/src/app/request/award/req-award.component.ts

@@ -6,6 +6,8 @@ import {AwardingService} from '../../services/army-management/awarding.service';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {UserService} from '../../services/army-management/user.service';
 import {LoginService} from '../../services/app-user-service/login-service';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -18,8 +20,6 @@ export class RequestAwardComponent implements OnInit {
 
   showForm = false;
 
-  showSuccessLabel = false;
-
   user: User = {_id: '0'};
 
   decoration: Decoration = {_id: '0'};
@@ -39,7 +39,8 @@ export class RequestAwardComponent implements OnInit {
               private userService: UserService,
               private awardingService: AwardingService,
               private decorationService: DecorationService,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -93,10 +94,7 @@ export class RequestAwardComponent implements OnInit {
               this.decoration = {_id: '0'};
               this.reason = previewImage.src = descriptionField.innerHTML = '';
               this.decoPreviewDisplay = 'none';
-              this.showSuccessLabel = true;
+              this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-              setTimeout(() => {
-                this.showSuccessLabel = false;
-              }, 2000);
             });
       });
     }

static/src/app/request/confirm-award/confirm-award.component.html

@@ -1,11 +1,6 @@
 <form #form="ngForm" class="overview">
   <h3>Offene Anträge - Auszeichnungen</h3>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-  Erfolgreich gespeichert
-  </span>
-
   <div class="table-container">
     <table class="table table-hover">
       <thead>

static/src/app/request/confirm-award/confirm-award.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {Award} from '../../models/model-interfaces';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {LoginService} from '../../services/app-user-service/login-service';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -12,10 +14,9 @@ export class ConfirmAwardComponent implements OnInit {
 
   awards: Award[];
 
-  showSuccessLabel = false;
-
   constructor(private awardingService: AwardingService,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -46,13 +47,8 @@ export class ConfirmAwardComponent implements OnInit {
         if (awards.length < 1) {
           this.awardingService.hasUnprocessedAwards = false;
         }
-        this.showSuccessLabel = true;
+        this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-        setTimeout(() => {
-          this.showSuccessLabel = false;
-        }, 2000);
       });
     });
   }
-
-
 }

static/src/app/request/confirm-promotion/confirm-promotion.component.html

@@ -1,11 +1,6 @@
 <form #form="ngForm" class="overview">
   <h3>Offene Anträge - Beförderung</h3>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-  Erfolgreich gespeichert
-  </span>
-
   <div class="table-container">
     <table class="table table-hover">
       <thead>
@@ -55,6 +50,4 @@
       </tbody>
     </table>
   </div>
-
-
 </form>

static/src/app/request/confirm-promotion/confirm-promotion.component.ts

@@ -3,6 +3,8 @@ import {Promotion, Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {LoginService} from '../../services/app-user-service/login-service';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -11,15 +13,14 @@ import {LoginService} from '../../services/app-user-service/login-service';
 })
 export class ConfirmPromotionComponent implements OnInit {
 
-  showSuccessLabel = false;
-
   ranks: Rank[];
 
   promotions: Promotion[];
 
   constructor(private rankService: RankService,
               private promotionService: PromotionService,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -50,12 +51,8 @@ export class ConfirmPromotionComponent implements OnInit {
         if (promotions.length < 1) {
           this.promotionService.hasUnprocessedPromotion = false;
         }
-        this.showSuccessLabel = true;
+        this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-        setTimeout(() => {
-          this.showSuccessLabel = false;
-        }, 2000);
       });
     });
   }
-
 }

static/src/app/request/promotion/req-promotion.component.html

@@ -57,12 +57,6 @@
     Bestätigen
   </button>
 
-  <span *ngIf="showSuccessLabel"
-        class="absolute-label label label-success label-small">
-  Erfolgreich gespeichert
-  </span>
-
-
   <div class="table-container">
     <label>Beförderungsanträge</label>
     <table class="table table-hover">

static/src/app/request/promotion/req-promotion.component.ts

@@ -6,6 +6,8 @@ import {UserService} from '../../services/army-management/user.service';
 import {RankService} from '../../services/army-management/rank.service';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {LoginService} from '../../services/app-user-service/login-service';
+import {Message} from '../../i18n/de.messages';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -18,8 +20,6 @@ export class RequestPromotionComponent implements OnInit {
 
   showForm = false;
 
-  showSuccessLabel = false;
-
   user: User = {_id: '0'};
 
   newLevel: number;
@@ -37,7 +37,8 @@ export class RequestPromotionComponent implements OnInit {
               private userService: UserService,
               private rankService: RankService,
               private promotionService: PromotionService,
-              private loginService: LoginService) {
+              private loginService: LoginService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -79,10 +80,7 @@ export class RequestPromotionComponent implements OnInit {
         this.uncheckedPromotions = promotions;
         this.showForm = false;
         this.user = {_id: '0'};
-        this.showSuccessLabel = true;
+        this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-        setTimeout(() => {
-          this.showSuccessLabel = false;
-        }, 2000);
       });
     });
   }

static/src/app/services/user-interface/snack-bar/snack-bar.service.ts

@@ -31,7 +31,7 @@ export class SnackBarService {
     return this.show(message, undefined, 2500, ['custom-snack-bar', 'label-success']);
   }
 
-  showError(message: string) {
+  showError(message: string, duration?: number) {
-    return this.show(message, 'OK', undefined, ['custom-snack-bar', 'label-danger']);
+    return this.show(message, 'OK', duration, ['custom-snack-bar', 'label-danger']);
   }
 }

static/src/app/shared.module.ts

@@ -2,11 +2,10 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ShowErrorComponent} from './common/show-error/show-error.component';
 import {CommonModule} from '@angular/common';
-import {MaterialComponentsModule} from './common/modules/material-components.module';
 
 @NgModule({
   declarations: [ShowErrorComponent],
-  imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialComponentsModule],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule],
   exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent],
 })
 export class SharedModule {

static/src/app/squads/edit-squad/edit-squad.component.html

@@ -56,11 +56,4 @@
           [disabled]="!form.valid">
     Bestätigen
   </button>
-
-  <span *ngIf="showSuccessLabel"
-        class="label label-success label-small"
-        style="margin-left: inherit">
-        Erfolgreich gespeichert
-  </span>
-
 </form>

static/src/app/squads/edit-squad/edit-squad.component.ts

@@ -5,6 +5,8 @@ import {Squad} from '../../models/model-interfaces';
 import {SquadService} from '../../services/army-management/squad.service';
 import {Subscription} from 'rxjs/Subscription';
 import {Fraction} from '../../utils/fraction.enum';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -23,8 +25,6 @@ export class EditSquadComponent implements OnInit, OnDestroy {
 
   showImageError = false;
 
-  showSuccessLabel = false;
-
   imagePreviewSrc;
 
   @ViewChild(NgForm) form: NgForm;
@@ -33,7 +33,8 @@ export class EditSquadComponent implements OnInit, OnDestroy {
 
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private squadService: SquadService) {
+              private squadService: SquadService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -85,10 +86,7 @@ export class EditSquadComponent implements OnInit, OnDestroy {
               this.imagePreviewSrc = 'resource/squad/' + this.squad._id + '.png?' + Date.now();
             }, 300);
             fileInput.value = '';
-            this.showSuccessLabel = true;
+            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-            setTimeout(() => {
-              this.showSuccessLabel = false;
-            }, 2000);
           });
     }
   }

static/src/app/statistic/war/war-submit/war-submit.component.ts

@@ -4,6 +4,7 @@ import {NgForm} from '@angular/forms';
 import {WarService} from '../../../services/logs/war.service';
 import {War} from '../../../models/model-interfaces';
 import {CampaignService} from '../../../services/logs/campaign.service';
+import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service';
 
 
 @Component({
@@ -22,8 +23,6 @@ export class WarSubmitComponent {
 
   showFileError = false;
 
-  showErrorLabel = false;
-
   loading = false;
 
   error;
@@ -33,6 +32,7 @@ export class WarSubmitComponent {
   constructor(private route: ActivatedRoute,
               private router: Router,
               private warService: WarService,
+              private snackBarService: SnackBarService,
               public campaignService: CampaignService) {
   }
 
@@ -48,7 +48,9 @@ export class WarSubmitComponent {
   }
 
   saveWar() {
-    if (this.fileList) {
+    if (!this.fileList) {
+      return window.alert(`Logfile ist ein Pflichtfeld`);
+    }
     const file: File = this.fileList[0];
     this.loading = true;
 
@@ -57,13 +59,10 @@ export class WarSubmitComponent {
             this.router.navigate(['../war/' + war._id], {relativeTo: this.route});
           },
           error => {
-              this.error = error._body.error.message;
-              this.showErrorLabel = true;
             this.loading = false;
+            const errorMsg = JSON.parse(error._body).error.message;
+            this.snackBarService.showError('Error: '.concat(errorMsg), 10000);
           });
-    } else {
-      return window.alert(`Logfile ist ein Pflichtfeld`);
-    }
   }
 
   cancel() {

static/src/app/style/load-indicator.css

@@ -1,9 +1,38 @@
 .load-indicator {
   position: absolute;
   top: 50%;
-  left: 48.5%;
   z-index: 1;
 }
+@media only screen and (max-width: 1199px) {
+  .load-indicator {
+    left: 46%;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .load-indicator {
+    left: 46%;
+  }
+}
+@media only screen and (min-width: 1376px) {
+  .load-indicator {
+    left: 46.5%;
+  }
+}
+@media only screen and (min-width: 1600px) {
+  .load-indicator {
+    left: 47.5%;
+  }
+}
+@media only screen and (min-width: 1925px) {
+  .load-indicator {
+    left: 48%;
+  }
+}
+
+:host /deep/ .mat-progress-spinner circle, .mat-spinner circle {
+  stroke: #000000 !important;
+  stroke-linecap: round;
+}
 
 .load-arrow {
   background: url(../../assets/loading.png) no-repeat;

static/src/app/users/award-user/award-user.component.html

@@ -58,12 +58,6 @@
     Bestätigen
   </button>
 
-  <span *ngIf="showSuccessLabel"
-        class="label label-success label-small"
-        style="margin-left: inherit">
-        Erfolgreich gespeichert
-  </span>
-
   <div class="table-container">
     <table class="table table-hover">
       <thead>

static/src/app/users/award-user/award-user.component.ts

@@ -5,6 +5,8 @@ import {NgForm} from '@angular/forms';
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {Fraction} from '../../utils/fraction.enum';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -15,8 +17,6 @@ export class AwardUserComponent implements OnInit {
 
   @ViewChild(NgForm) form: NgForm;
 
-  showSuccessLabel = false;
-
   userId: string;
 
   decorations: Decoration[];
@@ -30,7 +30,8 @@ export class AwardUserComponent implements OnInit {
   constructor(private router: Router,
               private route: ActivatedRoute,
               private awardingService: AwardingService,
-              private decorationService: DecorationService) {
+              private decorationService: DecorationService,
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -83,10 +84,7 @@ export class AwardUserComponent implements OnInit {
               this.decoPreviewDisplay = 'none';
               decorationField.value = undefined;
               reasonField.value = previewImage.src = descriptionField.innerHTML = '';
-              this.showSuccessLabel = true;
+              this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-              setTimeout(() => {
-                this.showSuccessLabel = false;
-              }, 2000);
             });
       });
     }
@@ -104,11 +102,7 @@ export class AwardUserComponent implements OnInit {
               });
         });
       });
-
+      this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
-      this.showSuccessLabel = true;
-      setTimeout(() => {
-        this.showSuccessLabel = false;
-      }, 4000);
     }
   }
 

static/src/app/users/edit-user/edit-user.component.html

@@ -56,10 +56,4 @@
           [disabled]="!form.valid">
     Bestätigen
   </button>
-
-  <span *ngIf="showErrorLabel"
-        class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
-    {{error}}
-  </span>
-
 </form>

static/src/app/users/edit-user/edit-user.component.ts

@@ -8,6 +8,7 @@ import {Subscription} from 'rxjs/Subscription';
 import {NgForm} from '@angular/forms';
 import {Fraction} from '../../utils/fraction.enum';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {Message} from '../../i18n/de.messages';
 
 
 @Component({
@@ -26,12 +27,8 @@ export class EditUserComponent implements OnInit {
 
   ranks: Rank[] = [];
 
-  showSuccessLabel = false;
-
   ranksDisplay = 'none';
 
-  showErrorLabel = false;
-
   error: string;
 
   readonly fraction = Fraction;
@@ -103,7 +100,7 @@ export class EditUserComponent implements OnInit {
               user.squad = '0';
             }
             this.user = user;
-            this.snackBarService.showSuccess('Erfolgreich gespeichert');
+            this.snackBarService.showSuccess(Message.SUCCESS_SAVE);
           });
     } else {
       this.userService.submitUser(updateObject)
@@ -114,7 +111,7 @@ export class EditUserComponent implements OnInit {
             error => {
               // duplicated user error message
               if (error._body.includes('duplicate')) {
-                this.snackBarService.showError('Benutzername existiert bereits');
+                this.snackBarService.showError(Message.DUPLICATED_NAME_ERR, 10000);
               }
             });
     }