src/app/admin/admin.component.html

@@ -65,3 +65,4 @@
     </div>
   </div>
 </div>
+

src/app/admin/admin.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { HttpClient } from "@angular/common/http";
 import { Observable } from "rxjs/Observable";
+import {UserService} from '../user.service';
 import "rxjs/Rx";
 
 @Component({
@@ -14,7 +15,7 @@ export class AdminComponent implements OnInit {
   ip = new FormControl("");
   ipDelete = new FormControl("");
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient, private user: UserService) {}
 
   onAddDevice() {
     if (this.name.value.length > 0 && this.ip.value.length > 0) {

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",
-    component: AdminComponent
+    path: "login",
+    component: LoginComponent
   }
 ];
 

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { HttpClientModule } from "@angular/common/http";
 import { StatusListComponent } from "./status-list/status-list.component";
 import { HeaderComponent } from "./header/header.component";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import {UserService} from './user.service';
 import {
   MatAutocompleteModule,
   MatButtonModule,
@@ -46,15 +47,34 @@ import {
 } from "@angular/material";
 import { AdminComponent } from "./admin/admin.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { LoginComponent } from './login/login.component';
+import {RouterModule, Routes} from '@angular/router';
+import {AuthgardGuard} from './authgard.guard';
+
+const appRoutes:Routes = [
+{
+  path: '',
+  component: LoginComponent
+},
+{
+  path: 'admin',
+  component: AdminComponent,
+  canActivate: [AuthgardGuard]
+}
+]
+
+
 
 @NgModule({
   declarations: [
     AppComponent,
     StatusListComponent,
     HeaderComponent,
-    AdminComponent
+    AdminComponent,
+    LoginComponent
   ],
   imports: [
+    RouterModule.forRoot(appRoutes),
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
@@ -73,7 +93,7 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
     MatFormFieldModule,
     MatInputModule
   ],
-  providers: [StatusService],
+  providers: [StatusService, UserService, AuthgardGuard],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/authgard.guard.spec.ts

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

src/app/authgard.guard.ts

@@ -0,0 +1,16 @@
+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,22 @@
+
+
+<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,37 @@
+: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,34 @@
+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/status-list/status-list.component.less

@@ -110,18 +110,7 @@ table {
   margin-bottom: 20px;
 }
 
-.room-button:hover {
-  -webkit-box-shadow: inset 0 0 0 2px #24a1fc;
-  box-shadow: inset 0 0 0 2px #24a1fc;
-}
-.room-button:active {
-  -webkit-box-shadow: inset 0 0 0 2px #24a1fc;
-  box-shadow: inset 0 0 0 2px #24a1fc;
-}
-.room-button:focus {
-  -webkit-box-shadow: inset 0 0 0 2px #24a1fc;
-  box-shadow: inset 0 0 0 2px #24a1fc;
-}
+
 @media only screen and (max-width: 1000px) {
   .machine-image {
     margin-left: 50px;

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,21 @@
+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;
+   }
+}