ui enhancements and song state

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

@@ -1,5 +1,4 @@
-<app-card *ngIf="user$|async as user">
-  <h2>Hallo {{user.name}}</h2>
+<app-card *ngIf="user$|async as user" heading="Hallo {{user.name}}">
   <p>{{user.role|role}}</p>
 
   <mat-form-field appearance="outline">

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

@@ -9,7 +9,7 @@ export class RolePipe implements PipeTransform {
 
   transform(role: roles): string {
     switch (role) {
-      case 'distributor':
+      case 'contributor':
         return 'Mitarbeiter';
       case 'none':
         return 'keine Berechtigung';

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

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {User} from '../../../../../services/user/user';
 import {UserService} from '../../../../../services/user/user.service';
 import {ROLE_TYPES} from '../../../../../services/user/roles';
@@ -8,7 +8,7 @@ import {ROLE_TYPES} from '../../../../../services/user/roles';
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.less']
 })
-export class UserComponent implements OnInit {
+export class UserComponent {
   public id: string;
   public name: string
   public roles: string[];
@@ -23,10 +23,6 @@ export class UserComponent implements OnInit {
     this.roles = this.getRoleArray(value.role);
   };
 
-  ngOnInit(): void {
-
-  }
-
   public async onRoleChanged(id: string, roles: string[]): Promise<void> {
     const role = roles.join(';');
     await this.userService.update$(id, {role});

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

@@ -11,7 +11,8 @@
     </mat-form-field>
     <app-button-row>
       <button (click)="onLogin()" mat-button>Anmelden</button>
-      <button mat-button routerLink="/user/password">neues Passwort anfordern</button>
+      <button mat-button routerLink="/user/password">Passwort zurücksetzen</button>
+      <button mat-button routerLink="/user/new">neuen Benutzer anlegen</button>
       <p *ngIf="errorMessage" class="error">{{errorMessage|authMessage}}</p>
     </app-button-row>
 

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

@@ -1 +0,0 @@
-<p>logout works!</p>

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

@@ -0,0 +1,18 @@
+<app-card [formGroup]="form" closeLink="../" heading="neuen Benutzer anlegen">
+  <mat-form-field appearance="outline">
+    <mat-label>Name</mat-label>
+    <input formControlName="name" matInput>
+  </mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>E-Mail Adresse</mat-label>
+    <input formControlName="email" matInput>
+  </mat-form-field>
+  <mat-form-field appearance="outline">
+    <mat-label>Passwort</mat-label>
+    <input formControlName="password" matInput>
+  </mat-form-field>
+
+  <app-button-row>
+    <button (click)="onCreate()" mat-button>Benutzer anlegen</button>
+  </app-button-row>
+</app-card>

src/app/modules/user/new/new.component.less

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

src/app/modules/user/new/new.component.spec.ts

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

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

@@ -0,0 +1,35 @@
+import {Component, OnInit} from '@angular/core';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {UserService} from '../../../services/user/user.service';
+
+@Component({
+  selector: 'app-new',
+  templateUrl: './new.component.html',
+  styleUrls: ['./new.component.less']
+})
+export class NewComponent implements OnInit {
+  public form: FormGroup;
+
+  constructor(private fb: FormBuilder, private userService: UserService) {
+  }
+
+  ngOnInit(): void {
+    this.form = this.fb.group({
+      email: new FormControl(null, [Validators.required, Validators.email]),
+      name: new FormControl(null, [Validators.required]),
+      password: new FormControl(null, [Validators.required, Validators.minLength(6)]),
+    })
+  }
+
+  public async onCreate(): Promise<void> {
+    this.form.updateValueAndValidity();
+    console.log(this.form);
+    if (this.form.valid) {
+      try {
+        await this.userService.createNewUser(this.form.value.email, this.form.value.name, this.form.value.password);
+      } catch (ex) {
+        console.error(ex);
+      }
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-<app-card>
+<app-card closeLink="../" heading="Passwort zurücksetzen">
   <div [formGroup]="form" class="form">
     <mat-form-field appearance="outline">
       <mat-label>E-Mail Addresse</mat-label>

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

@@ -6,6 +6,7 @@ import {LogoutComponent} from './logout/logout.component';
 import {AngularFireAuthGuard, redirectUnauthorizedTo} from '@angular/fire/auth-guard';
 import {PasswordComponent} from './password/password.component';
 import {PasswordSendComponent} from './password-send/password-send.component';
+import {NewComponent} from './new/new.component';
 
 
 const routes: Routes = [
@@ -26,6 +27,10 @@ const routes: Routes = [
     path: 'password',
     component: PasswordComponent
   },
+  {
+    path: 'new',
+    component: NewComponent
+  },
   {
     path: 'password-send',
     component: PasswordSendComponent

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

@@ -18,10 +18,11 @@ import {PasswordSendComponent} from './password-send/password-send.component';
 import {UsersComponent} from './info/users/users.component';
 import {RoleModule} from '../../services/user/role.module';
 import {UserComponent} from './info/users/user/user.component';
+import {NewComponent} from './new/new.component';
 
 
 @NgModule({
-  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent],
+  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent, NewComponent],
   imports: [
     CommonModule,
     UserRoutingModule,