src/app/app-routing.module.ts

@@ -2,13 +2,14 @@ import { NgModule } from "@angular/core";
 import { Routes, RouterModule } from "@angular/router";
 import { AppComponent } from "./app.component";
 import { AdminComponent } from "./admin/admin.component";
+import { LoginComponent } from "./login/login.component";
 import { StatusListComponent } from "./status-list/status-list.component";
 
 const routes: Routes = [
   { path: "", component: StatusListComponent },
   {
-    path: "admin",
+    path: "login",
-    component: AdminComponent
+    component: LoginComponent
   }
 ];
 

src/app/app.module.ts

@@ -46,7 +46,9 @@ import {
 } from "@angular/material";
 import { AdminComponent } from "./admin/admin.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { FormComponent } from './admin/form/form.component';
+import { FormComponent } from "./admin/form/form.component";
+import { LoginComponent } from "./login/login.component";
+import { UserService } from "./user.service";
 
 @NgModule({
   declarations: [
@@ -54,7 +56,8 @@ import { FormComponent } from './admin/form/form.component';
     StatusListComponent,
     HeaderComponent,
     AdminComponent,
-    FormComponent
+    FormComponent,
+    LoginComponent
   ],
   imports: [
     BrowserModule,

src/app/authguard.guard.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { AuthguardGuard } from './authguard.guard';
+
+describe('AuthguardGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthguardGuard]
+    });
+  });
+
+  it('should ...', inject([AuthguardGuard], (guard: AuthguardGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});

src/app/authguard.guard.ts

@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import {
+  CanActivate,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+} from "@angular/router";
+import { Observable } from "rxjs";
+import { UserService } from "./user.service";
+
+@Injectable({
+  providedIn: "root"
+})
+export class AuthgardGuard implements CanActivate {
+  constructor(private user: UserService) {}
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean> | Promise<boolean> | boolean {
+    return this.user.getUserLoggedIn();
+  }
+}

src/app/login/login.component.html

@@ -0,0 +1,16 @@
+<div style="margin-top:30px">
+  <form (submit)="loginUser($event)">
+    <div class="input">
+      <label> Nazwa użytkownika</label> <input type="text" />
+    </div>
+    <div class="input"><label>Hasło</label> <input type="password" /></div>
+    <span style="color: red">{{
+      statusLog == 1
+        ? " "
+        : statusLog == 2
+        ? "Niepoprawny login lub hasło"
+        : " "
+    }}</span>
+    <div class="input"><input type="submit" value="Login" /></div>
+  </form>
+</div>

src/app/login/login.component.less

@@ -0,0 +1,36 @@
+:host {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div.input {
+  position: relative;
+}
+
+div.input label {
+  position: absolute;
+  top: 0;
+  transform: translateY(-50%);
+  left: 10px;
+  background: white;
+  padding: 5px 2px;
+}
+
+div.input input {
+  padding: 10px 10px;
+  font-size: 20px;
+  outline: 0px;
+}
+
+div {
+  margin-bottom: 15px;
+}
+
+input[type="submit"] {
+  background-color: #0099ff;
+  border: none;
+  color: white;
+  border-radius: 5px;
+}

src/app/login/login.component.spec.ts

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

src/app/login/login.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+import { UserService } from "../user.service";
+@Component({
+  selector: "app-login",
+  templateUrl: "./login.component.html",
+  styleUrls: ["./login.component.less"]
+})
+export class LoginComponent implements OnInit {
+  constructor(private router: Router, private user: UserService) {}
+  statusLog = 0;
+  ngOnInit() {}
+
+  loginUser(e) {
+    e.preventDefault();
+    var username = e.target.elements[0].value;
+    var password = e.target.elements[1].value;
+
+    if (username == "admin" && password == "admin") {
+      this.user.setUserLoggedIn();
+      this.router.navigate(["admin"]);
+      this.statusLog = 1;
+    } else {
+      this.statusLog = 2;
+    }
+  }
+}

src/app/user.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UserService = TestBed.get(UserService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/user.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root"
+})
+export class UserService {
+  private isUserLoggedIn;
+  private username;
+
+  constructor() {
+    this.isUserLoggedIn = false;
+  }
+  setUserLoggedIn() {
+    this.isUserLoggedIn = true;
+  }
+
+  getUserLoggedIn() {
+    return this.isUserLoggedIn;
+  }
+}