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$
+  }
+}