welcome screen

src/app/modules/brand/brand.component.html

@@ -0,0 +1,4 @@
+<div class="brand">
+  <app-logo></app-logo>
+  <div class="copyright">© 2020 - Benjamin Ifland</div>
+</div>

src/app/modules/brand/brand.component.less

@@ -0,0 +1,12 @@
+.copyright {
+  color: #fff;
+  opacity: 0.7;
+  font-size: 20px;
+  transform: translate(173px, -40px);
+}
+
+.brand {
+  @media screen and (max-width: 860px) {
+    transform: scale(0.5) translateY(-50%);
+  }
+}

src/app/modules/brand/brand.component.spec.ts

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

src/app/modules/brand/brand.component.ts

@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-brand',
+  templateUrl: './brand.component.html',
+  styleUrls: ['./brand.component.less']
+})
+export class BrandComponent implements OnInit {
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/modules/brand/brand.module.ts

@@ -0,0 +1,30 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {BrandComponent} from './brand.component';
+import {RouterModule, Routes} from '@angular/router';
+import {LogoModule} from '../../widget-modules/components/logo/logo.module';
+import {NewUserComponent} from './new-user/new-user.component';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: BrandComponent
+  },
+  {
+    path: 'new-user',
+    component: NewUserComponent
+  },
+];
+
+@NgModule({
+  declarations: [BrandComponent, NewUserComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    LogoModule
+  ]
+})
+export class BrandModule {
+}

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

@@ -0,0 +1,8 @@
+<div class="frame">
+  <app-brand class="brand"></app-brand>
+  <div *ngIf="user$|async as user" class="text">
+    <div class="welcome">WILLKOMMEN</div>
+    <div class="name">{{user.name}}</div>
+    <div class="roles">Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator!</div>
+  </div>
+</div>

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

@@ -0,0 +1,118 @@
+@animation-duration: 20s;
+
+.frame {
+  width: 512px;
+  position: relative;
+}
+
+.brand {
+  position: absolute;
+  left: 0;
+  animation: @animation-duration brand ease-in-out forwards;
+  opacity: 0;
+}
+
+.text {
+  position: absolute;
+  left: 0;
+  transform: translateX(50%);
+  color: #fff;
+  margin-top: 60px;
+
+  .welcome {
+    opacity: 0;
+    font-size: 80px;
+    animation: @animation-duration welcome ease-in-out forwards;
+  }
+
+  .name {
+    opacity: 0;
+    font-size: 50px;
+    animation: @animation-duration name ease-in-out forwards;
+  }
+
+  .roles {
+    opacity: 0;
+    font-size: 20px;
+    margin-top: 40px;
+    animation: @animation-duration roles ease-in-out forwards;
+  }
+}
+
+@keyframes brand {
+  10% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+  15% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  20% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  25% {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes welcome {
+  30% {
+    opacity: 0;
+    transform: scale(1.4);
+    filter: blur(50px);
+  }
+  40% {
+    opacity: 1;
+    transform: translateX(0);
+    filter: blur(0px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes name {
+  50% {
+    opacity: 0;
+    transform: scale(1.4);
+    filter: blur(50px);
+  }
+  60% {
+    opacity: 1;
+    transform: translateX(0);
+    filter: blur(0px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes roles {
+  70% {
+    opacity: 0;
+    transform: scale(1.4);
+    filter: blur(50px);
+  }
+  80% {
+    opacity: 1;
+    transform: translateX(0);
+    filter: blur(0px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

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

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

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

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {UserService} from '../../../services/user/user.service';
+import {Observable} from 'rxjs';
+import {User} from '../../../services/user/user';
+
+@Component({
+  selector: 'app-new-user',
+  templateUrl: './new-user.component.html',
+  styleUrls: ['./new-user.component.less']
+})
+export class NewUserComponent {
+  public user$: Observable<User>
+
+  constructor(private userService: UserService) {
+    this.user$ = userService.user$
+  }
+}

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

@@ -1,5 +1,8 @@
 <app-card *ngIf="user$|async as user" heading="Hallo {{user.name}}">
-  <p>{{user.role|role}}</p>
+  <p>
+    <span *ngIf="getUserRoles(user.role).length===0" class="warn">Es wurden noch keine Berechtigungen zugeteilt, bitte wende Dich an den Administrator!</span>
+    <span>{{transdormUserRoles(user.role)}}</span>
+  </p>
 
   <mat-form-field appearance="outline">
     <mat-label>bevorzugte Anzeige der Akkorde</mat-label>

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

@@ -1,3 +1,7 @@
-.mat-form-field {
-  width: 100%;
+.warn {
+  color: #621700;
+}
+
+p {
+  margin-bottom: 20px;
 }

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

@@ -25,4 +25,7 @@ export class InfoComponent implements OnInit {
     await this.userService.update$(uid, {chordMode: value});
   }
 
+  public getUserRoles = (roles: string): string[] => roles?.split(';') ?? [];
+  public transdormUserRoles = (roles: string): string => this.getUserRoles(roles).join(', ');
+
 }

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

@@ -1,4 +1,4 @@
-<app-card>
+<!--<app-card>
   <div [formGroup]="form" class="form">
     <mat-form-field appearance="outline">
       <mat-label>E-Mail Addresse</mat-label>
@@ -18,4 +18,27 @@
 
   </div>
 
-</app-card>
+</app-card>-->
+
+<div class="frame">
+  <app-logo></app-logo>
+  <div class="login">
+    <div [formGroup]="form" class="form">
+      <mat-form-field appearance="outline">
+        <mat-label>E-Mail Addresse</mat-label>
+        <input (keyup.enter)="onLogin()" formControlName="user" matInput>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline">
+        <mat-label>Passwort</mat-label>
+        <input (keyup.enter)="onLogin()" formControlName="pass" matInput type="password">
+      </mat-form-field>
+      <p *ngIf="errorMessage" class="error">{{errorMessage|authMessage}}</p>
+      <button (click)="onLogin()" class="btn-login" color="primary" mat-stroked-button>Anmelden</button>
+      <button class="btn-password" mat-stroked-button routerLink="/user/password">Passwort zurücksetzen</button>
+      <button class="btn-user" mat-stroked-button routerLink="/user/new">neuen Benutzer anlegen</button>
+
+
+    </div>
+  </div>
+</div>

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

@@ -6,3 +6,47 @@ p.error {
   margin: 8px 10px;
   color: darkred;
 }
+
+.login {
+  padding: 20px;
+  width: 400px;
+  margin: 100px 0;
+  background: #fffc;
+  border-radius: 8px;
+  font-size: 18px;
+  @media screen and (max-width: 860px) {
+    margin: 20px;
+    box-sizing: border-box;
+    width: 90vw;
+  }
+}
+
+button {
+  font-size: 18px;
+}
+
+.btn-login {
+  margin-bottom: 40px;
+}
+
+.btn-password {
+  margin-bottom: 20px;
+  color: #888;
+}
+
+.btn-user {
+  color: #888;
+}
+
+.frame {
+  display: flex;
+  position: relative;
+  flex-wrap: wrap;
+}
+
+app-logo {
+  transform: scale(0.84);
+  @media screen and (max-width: 860px) {
+    display: none;
+  }
+}

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

@@ -20,6 +20,7 @@ import {RoleModule} from '../../services/user/role.module';
 import {UserComponent} from './info/users/user/user.component';
 import {NewComponent} from './new/new.component';
 import {ButtonModule} from '../../widget-modules/components/button/button.module';
+import {LogoModule} from '../../widget-modules/components/logo/logo.module';
 
 
 @NgModule({
@@ -37,6 +38,7 @@ import {ButtonModule} from '../../widget-modules/components/button/button.module
     FormsModule,
     RoleModule,
     ButtonModule,
+    LogoModule,
 
 
   ]