simple role management

src/app/app.component.ts

@@ -14,6 +14,4 @@ export class AppComponent implements OnInit {
     setTimeout(() => AppComponent.hideLoader(), 800);
 
   }
-
-  title = 'wgenerator';
 }

src/app/modules/shows/services/docx.service.ts

@@ -10,8 +10,8 @@ import {SongService} from '../../songs/services/song.service';
 import {ShowSong} from './show-song';
 import {Show} from './show';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
-import {UserService} from '../../../services/user.service';
-import {User} from '../../../services/user';
+import {UserService} from '../../../services/user/user.service';
+import {User} from '../../../services/user/user';
 
 
 @Injectable({

src/app/modules/shows/services/show-song.service.ts

@@ -4,7 +4,7 @@ import {Observable} from 'rxjs';
 import {ShowSong} from './show-song';
 import {SongDataService} from '../../songs/services/song-data.service';
 import {take} from 'rxjs/operators';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 
 @Injectable({
   providedIn: 'root'

src/app/modules/shows/services/show.service.ts

@@ -2,9 +2,9 @@ import {Injectable} from '@angular/core';
 import {ShowDataService} from './show-data.service';
 import {Show} from './show';
 import {Observable} from 'rxjs';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 import {map, switchMap} from 'rxjs/operators';
-import {User} from '../../../services/user';
+import {User} from '../../../services/user/user';
 
 @Injectable({
   providedIn: 'root'

src/app/modules/shows/show/show.component.html

@@ -11,8 +11,8 @@
                 [showSong]="song"
                 [showSongs]="showSongs"
                 [showText]="showText"
-                [song]="getSong(song.songId)"
                 [show]="show"
+                [song]="getSong(song.songId)"
                 class="song-row"
       ></app-song>
     </div>

src/app/modules/songs/song/song.component.ts

@@ -6,8 +6,8 @@ import {Song} from '../services/song';
 import {Observable} from 'rxjs';
 import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
-import {UserService} from '../../../services/user.service';
-import {User} from '../../../services/user';
+import {UserService} from '../../../services/user/user.service';
+import {User} from '../../../services/user/user';
 
 @Component({
   selector: 'app-song',

src/app/modules/user/info/info.component.html

@@ -17,3 +17,6 @@
     <button mat-button routerLink="../logout">Abmelden</button>
   </app-button-row>
 </app-card>
+
+
+<app-users *appRole="['admin']"></app-users>

src/app/modules/user/info/info.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
-import {User} from '../../../services/user';
+import {User} from '../../../services/user/user';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
 
 @Component({

src/app/modules/user/info/role.pipe.ts

@@ -1,14 +1,24 @@
 import {Pipe, PipeTransform} from '@angular/core';
+import {roles} from '../../../services/user/roles';
+
 
 @Pipe({
   name: 'role'
 })
 export class RolePipe implements PipeTransform {
 
-  transform(role: 'admin'): string {
+  transform(role: roles): string {
     switch (role) {
+      case 'none':
+        return 'keine Berechtigung';
       case 'admin':
         return 'Administrator';
+      case 'user':
+        return 'Benutzer';
+      case 'leader':
+        return 'Lobpreisleiter';
+      case 'presenter':
+        return 'Präsentator';
     }
   }
 

src/app/modules/user/info/users/users.component.html

@@ -0,0 +1,18 @@
+<app-card heading="registrierte Benutzer">
+
+  <div *ngFor="let user of users$|async" class="users">
+    <mat-form-field appearance="outline">
+      <mat-label>Name</mat-label>
+      <input (change)="onNameChanged(user.id, $event)" [ngModel]="user.name" matInput>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label>Rolle</mat-label>
+      <mat-select (ngModelChange)="onRoleChanged(user.id, $event)" [ngModel]="user.role">
+        <mat-option *ngFor="let role of ROLE_TYPES" [value]="role">{{role | role}}</mat-option>
+      </mat-select>
+
+    </mat-form-field>
+  </div>
+
+</app-card>

src/app/modules/user/info/users/users.component.less

@@ -0,0 +1,5 @@
+.users {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+}

src/app/modules/user/info/users/users.component.spec.ts

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {UsersComponent} from './users.component';
+
+describe('UsersComponent', () => {
+  let component: UsersComponent;
+  let fixture: ComponentFixture<UsersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [UsersComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/user/info/users/users.component.ts

@@ -0,0 +1,31 @@
+import {Component, OnInit} from '@angular/core';
+import {UserService} from '../../../../services/user/user.service';
+import {Observable} from 'rxjs';
+import {User} from '../../../../services/user/user';
+import {ROLE_TYPES} from '../../../../services/user/roles';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.less']
+})
+export class UsersComponent implements OnInit {
+  public users$: Observable<User[]>;
+  public ROLE_TYPES = ROLE_TYPES;
+
+  constructor(private userService: UserService) {
+    this.users$ = userService.list$();
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  public async onRoleChanged(id: string, role: any): Promise<void> {
+    await this.userService.update$(id, {role});
+  }
+
+  public async onNameChanged(id: string, name: any): Promise<void> {
+    await this.userService.update$(id, {name: name.target.value});
+  }
+}

src/app/modules/user/login/login.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 
 @Component({
   selector: 'app-login',

src/app/modules/user/logout/logout.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component} from '@angular/core';
 import {Router} from '@angular/router';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 
 @Component({
   selector: 'app-logout',

src/app/modules/user/password/password.component.ts

@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
-import {UserService} from '../../../services/user.service';
+import {UserService} from '../../../services/user/user.service';
 
 @Component({
   selector: 'app-password',

src/app/modules/user/user.module.ts

@@ -15,10 +15,12 @@ import {RolePipe} from './info/role.pipe';
 import {MatSelectModule} from '@angular/material/select';
 import {PasswordComponent} from './password/password.component';
 import {PasswordSendComponent} from './password-send/password-send.component';
+import {UsersComponent} from './info/users/users.component';
+import {RoleModule} from '../../services/user/role.module';
 
 
 @NgModule({
-  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent],
+  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent],
   imports: [
     CommonModule,
     UserRoutingModule,
@@ -30,6 +32,7 @@ import {PasswordSendComponent} from './password-send/password-send.component';
     MatButtonModule,
     MatSelectModule,
     FormsModule,
+    RoleModule,
 
 
   ]

src/app/services/user/role.directive.spec.ts

@@ -0,0 +1,8 @@
+import {RoleDirective} from './role.directive';
+
+describe('RoleDirective', () => {
+  it('should create an instance', () => {
+    const directive = new RoleDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/services/user/role.directive.ts

@@ -0,0 +1,55 @@
+import {Directive, ElementRef, Input, OnInit, TemplateRef, ViewContainerRef} from '@angular/core';
+import {roles} from './roles';
+import {UserService} from './user.service';
+import {User} from './user';
+
+@Directive({
+  selector: '[appRole]'
+})
+export class RoleDirective implements OnInit {
+  @Input() appRole: roles[] = [];
+  private currentUser: User;
+  private loggedIn: boolean;
+
+  constructor(
+    private element: ElementRef,
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private userService: UserService
+  ) {
+
+  }
+
+  public ngOnInit(): void {
+    this.userService.user$.subscribe(user => {
+      this.currentUser = user;
+      this.updateView();
+    });
+    this.userService.loggedIn$().subscribe(_ => {
+      this.loggedIn = !!_;
+      this.updateView();
+    });
+    this.updateView();
+  }
+
+  private updateView() {
+    if (this.loggedIn && this.checkPermission()) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    } else {
+      this.viewContainer.clear();
+    }
+  }
+
+  private checkPermission() {
+    if (this.currentUser && this.currentUser.role) {
+      if (this.currentUser.role === 'admin') return true;
+      for (const role of this.appRole) {
+        if (this.currentUser.role === role) return true;
+      }
+    }
+
+    return false;
+  }
+
+
+}

src/app/services/user/role.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RoleDirective} from './role.directive';
+
+@NgModule({
+  declarations: [RoleDirective],
+  exports: [RoleDirective],
+  imports: [
+    CommonModule
+  ]
+})
+export class RoleModule {
+}

src/app/services/user/roles.ts

@@ -0,0 +1,2 @@
+export type roles = 'none' | 'admin' | 'user' | 'leader' | 'presenter';
+export const ROLE_TYPES: roles[] = ['none', 'admin', 'user', 'leader', 'presenter'];

src/app/services/user/user.service.ts

@@ -3,7 +3,7 @@ import {AngularFireAuth} from '@angular/fire/auth';
 import {BehaviorSubject, Observable} from 'rxjs';
 import {filter, switchMap} from 'rxjs/operators';
 import {User} from './user';
-import {DbService} from './db.service';
+import {DbService} from '../db.service';
 
 @Injectable({
   providedIn: 'root'
@@ -22,6 +22,10 @@ export class UserService {
     return this._user$.pipe(filter(_ => !!_));
   }
 
+  public loggedIn$ = () => this.afAuth.authState;
+
+  public list$ = (): Observable<User[]> => this.db.col$('users');
+
   public getUserbyId$(userId: string): Observable<User> {
     return this.db.doc$<User>('users/' + userId);
   }

src/app/services/user/user.ts

@@ -1,4 +1,4 @@
-import {ChordMode} from '../widget-modules/components/song-text/song-text.component';
+import {ChordMode} from '../../widget-modules/components/song-text/song-text.component';
 
 export interface User {
   id: string;

src/app/widget-modules/components/application-frame/application-frame.module.ts

@@ -6,7 +6,7 @@ import {FilterComponent} from './navigation/filter/filter.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {LinkComponent} from './navigation/link/link.component';
 import {FormsModule} from '@angular/forms';
-
+import {RoleModule} from '../../../services/user/role.module';
 
 @NgModule({
   declarations: [
@@ -18,7 +18,8 @@ import {FormsModule} from '@angular/forms';
     CommonModule,
     RouterModule,
     FontAwesomeModule,
-    FormsModule
+    FormsModule,
+    RoleModule
   ],
   exports: [
     NavigationComponent

src/app/widget-modules/components/application-frame/navigation/navigation.component.html

@@ -1,8 +1,8 @@
 <nav [class.hidden]="(windowScroll$|async)>60" class="head">
   <div class="links">
-    <app-link [icon]="faSongs" link="/songs" text="Lieder"></app-link>
-    <app-link [icon]="faShows" link="/shows" text="Veranstaltungen"></app-link>
-    <app-link [icon]="faPresentation" link="/presentation" text="Präsentation"></app-link>
+    <app-link *appRole="['user','presenter', 'leader']" [icon]="faSongs" link="/songs" text="Lieder"></app-link>
+    <app-link *appRole="['leader']" [icon]="faShows" link="/shows" text="Veranstaltungen"></app-link>
+    <app-link *appRole="['presenter']" [icon]="faPresentation" link="/presentation" text="Präsentation"></app-link>
     <app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
   </div>
   <div class="actions">

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -83,6 +83,11 @@ export class SongTextComponent implements OnInit {
     scrollTo(0, this.elRef.nativeElement.offsetTop - 20);
   }
 
+  public checkDisabled(i: number) {
+    return this.index !== -1 && this.index !== i;
+
+  }
+
   private getNextChordMode(): ChordMode {
     switch (this._chordMode) {
       case 'show':
@@ -93,9 +98,4 @@ export class SongTextComponent implements OnInit {
         return 'show';
     }
   }
-
-  checkDisabled(i: number) {
-    return this.index !== -1 && this.index !== i;
-
-  }
 }

src/styles/styles.less

@@ -52,6 +52,8 @@ a {
 .content > *:not(router-outlet) {
   display: flex;
   justify-content: center;
+  flex-direction: column;
+  align-items: center;
 }
 
 .content {