add login with dummy Data

add login page
add subcomponents

src/app/app.module.ts

@@ -6,7 +6,6 @@ import { HeaderComponent } from './header/header.component';
 import { PaymentComponent } from './payment/payment.component';
 import { QRCodeModule } from 'angularx-qrcode';
 import { PayComponent } from './pay/pay.component';
-import { RouterModule } from '@angular/router';
 import { HelloComponent } from './hello/hello.component';
 import { SocketIoConfig, SocketIoModule } from 'ngx-socket-io';
 import { HttpClientModule } from '@angular/common/http';
@@ -17,6 +16,9 @@ import { PushNotificationsModule } from 'ng-push-ivy';
 import { ClipboardModule } from 'ngx-clipboard';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { LoginComponent } from './dashboard/login/login.component';
+import { FormsModule } from '@angular/forms';
+import { OverviewComponent } from './dashboard/overview/overview.component';
+import { DashboardHeaderComponent } from './dashboard/header/header.component';
 
 const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} };
 
@@ -30,7 +32,9 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} };
     NotFoundComponent,
     CartComponent,
     DashboardComponent,
-    LoginComponent
+    LoginComponent,
+    OverviewComponent,
+    DashboardHeaderComponent
   ],
   imports: [
     BrowserModule,
@@ -39,7 +43,9 @@ const config: SocketIoConfig = { url: 'http://localhost:2009', options: {} };
     AppRoutingModule,
     SocketIoModule.forRoot(config),
     PushNotificationsModule,
-    ClipboardModule
+    ClipboardModule,
+    FormsModule,
+    SocketIoModule.forRoot(config)
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dashboard.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DashboardService } from './dashboard.service';
+
+describe('DashboardService', () => {
+  let service: DashboardService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DashboardService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/dashboard.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+
+export interface IUser {
+  username: string;
+  token: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DashboardService {
+
+  user: IUser | undefined;
+
+  constructor() { }
+
+  login(username: string, password: string): boolean {
+    if (username === 'admin' && password === 'password') {
+      this.user = {
+        username: 'admin',
+        token: 'abc'
+      }
+      return true;
+    } else {
+      return false;
+    }
+  }
+}

src/app/dashboard/dashboard.component.html

@@ -1 +1,2 @@
-<p>dashboard works!</p>
+<dashboard-header></dashboard-header>
+<router-outlet></router-outlet>

src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { DashboardService } from '../dashboard.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardComponent implements OnInit {
 
-  constructor() { }
+  constructor(public dashboard: DashboardService) { }
 
   ngOnInit(): void {
   }

src/app/dashboard/header/header.component.css

@@ -0,0 +1,10 @@
+.header {
+    position: fixed;
+    top: 1rem;
+    left: 5vw;
+    width: 90vw;
+    margin: 0 auto;
+    background-color: #27293D;
+    z-index: 999;
+    border-radius: 8px;
+}

src/app/dashboard/header/header.component.html

@@ -0,0 +1,3 @@
+<div class="header" *ngIf="this.dashboard.user != undefined">
+    <p>HEADER</p>
+</div>

src/app/dashboard/header/header.component.spec.ts

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

src/app/dashboard/header/header.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { DashboardService } from 'src/app/dashboard.service';
+
+@Component({
+  selector: 'dashboard-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class DashboardHeaderComponent implements OnInit {
+
+  constructor(
+    public dashboard: DashboardService,
+    public router: Router
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/dashboard/login/login.component.css

@@ -0,0 +1,133 @@
+.frame {
+    background-color: #1D1D28;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    font-family: 'Inter', sans-serif;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400&display=swap');
+.btn {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    padding: 4px 10px 4px;
+    margin-bottom: 0;
+    font-size: 13px;
+    line-height: 18px;
+    color: #333333;
+    text-align: center;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+    vertical-align: middle;
+    background-color: #f5f5f5;
+    background-repeat: repeat-x;
+    border-color: #e6e6e6 #e6e6e6 #e6e6e6;
+    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    border: 1px solid #e6e6e6;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    *margin-left: .3em;
+}
+
+.btn:hover,
+.btn:active,
+.btn.active,
+.btn.disabled,
+.btn[disabled] {
+    background-color: #e6e6e6;
+}
+
+.btn-large {
+    padding: 9px 14px;
+    font-size: 15px;
+    line-height: normal;
+    border-radius: 5px;
+}
+
+.btn:hover {
+    color: #333333;
+    text-decoration: none;
+    background-color: #e6e6e6;
+    background-position: 0 -15px;
+    transition: background-position 0.1s linear;
+    transition: ease 0.5;
+}
+
+.btn-primary,
+.btn-primary:hover {
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+    color: #ffffff;
+}
+
+.btn-primary.active {
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.btn-primary {
+    background-color: #1D1D28;
+    background-image: linear-gradient(top, #6eb6de, #4a77d4);
+    background-repeat: repeat-x;
+    border: 1px solid #3762bc;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
+    transition: ease;
+}
+
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.active,
+.btn-primary.disabled,
+.btn-primary[disabled] {
+    filter: none;
+    background-color: #4a77d4;
+}
+
+.btn-block {
+    width: 100%;
+    display: block;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.login {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -150px 0 0 -150px;
+    width: 300px;
+    height: 300px;
+}
+
+.login h1 {
+    color: #fff;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    letter-spacing: 1px;
+    text-align: center;
+    font-weight: 200;
+}
+
+input {
+    width: 100%;
+    margin-bottom: 10px;
+    background: #1D1D28;
+    border: none;
+    outline: none;
+    padding: 10px;
+    font-size: 13px;
+    color: #fff;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgb(138, 138, 138);
+    border-radius: 4px;
+    box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0), 0 1px 1px rgba(255, 255, 255, 0.2);
+    transition: box-shadow .5s ease;
+}
+
+input:focus {
+    box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.4), 0 1px 1px rgba(255, 255, 255, 0.2);
+}

src/app/dashboard/login/login.component.html

@@ -1 +1,10 @@
-<p>login works!</p>
+<div class="frame">
+    <div class="login">
+        <h1>Login</h1>
+        <form (submit)="login()">
+            <input type="text" placeholder="Username" required="required" [(ngModel)]="username" [ngModelOptions]="{standalone: true}" />
+            <input type="password" placeholder="Password" required="required" [(ngModel)]="password" [ngModelOptions]="{standalone: true}" />
+            <button type="submit" value="login" id="login-form-submit" onclick="return check(this.form)" class="btn btn-primary btn-block btn-large">Login</button>
+        </form>
+    </div>
+</div>

src/app/dashboard/login/login.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { DashboardService } from 'src/app/dashboard.service';
 
 @Component({
   selector: 'app-login',
@@ -7,9 +9,25 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  username = '';
+  password = '';
+
+  constructor(
+    public dashboard: DashboardService,
+    private router: Router
+  ) { }
 
   ngOnInit(): void {
   }
 
-}
+  login() {
+    const loginStatus = this.dashboard.login(this.username, this.password);
+
+    if (loginStatus) {
+      this.router.navigate(['dashboard', 'overview']);
+    } else {
+      // TODO: Meldung anzeigen
+    }
+  }
+
+}

src/app/dashboard/overview/overview.component.html

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

src/app/dashboard/overview/overview.component.spec.ts

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

src/app/dashboard/overview/overview.component.ts

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

src/assets/history.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path d="M13.5 8H12v5l4.28 2.54l.72-1.21l-3.5-2.08V8M13 3a9 9 0 0 0-9 9H1l3.96 4.03L9 12H6a7 7 0 0 1 7-7a7 7 0 0 1 7 7a7 7 0 0 1-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.896 8.896 0 0 0 13 21a9 9 0 0 0 9-9a9 9 0 0 0-9-9" fill="white"/><rect x="0" y="0" width="24" height="24" fill="rgba(0, 0, 0, 0)" /></svg>

src/routes.ts

@@ -1,11 +1,22 @@
 import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
+import { DashboardComponent } from "./app/dashboard/dashboard.component";
+import { LoginComponent } from "./app/dashboard/login/login.component";
+import { OverviewComponent } from "./app/dashboard/overview/overview.component";
 import { HelloComponent } from "./app/hello/hello.component";
 import { NotFoundComponent } from "./app/not-found/not-found.component";
 import { PayComponent } from "./app/pay/pay.component";
 
 const routes: Routes = [
     { path: 'pay/:id', component: PayComponent, data: { title: 'Payment' } },
+    { path: 'dashboard', component: DashboardComponent, children: [
+        {
+            path: 'login', component: LoginComponent
+        },
+        {
+            path: 'overview', component: OverviewComponent 
+        }
+    ]},
     { path: '', component: HelloComponent },
     { path: '**', component: NotFoundComponent }
 ]