From 30f9ea4788f723c5534a92bccc6cc984daa91351 Mon Sep 17 00:00:00 2001 From: Unknown Date: Tue, 15 Jan 2019 14:09:29 +0100 Subject: [PATCH 1/3] autentyfikacja --- src/app/admin/admin.component.html | 1 + src/app/admin/admin.component.ts | 3 +- src/app/app-routing.module.ts | 5 ++- src/app/app.module.ts | 24 +++++++++++- src/app/authgard.guard.spec.ts | 15 ++++++++ src/app/authgard.guard.ts | 16 ++++++++ src/app/login/login.component.html | 22 +++++++++++ src/app/login/login.component.less | 37 +++++++++++++++++++ src/app/login/login.component.spec.ts | 25 +++++++++++++ src/app/login/login.component.ts | 34 +++++++++++++++++ .../status-list/status-list.component.less | 13 +------ src/app/user.service.spec.ts | 12 ++++++ src/app/user.service.ts | 21 +++++++++++ 13 files changed, 211 insertions(+), 17 deletions(-) create mode 100644 src/app/authgard.guard.spec.ts create mode 100644 src/app/authgard.guard.ts create mode 100644 src/app/login/login.component.html create mode 100644 src/app/login/login.component.less create mode 100644 src/app/login/login.component.spec.ts create mode 100644 src/app/login/login.component.ts create mode 100644 src/app/user.service.spec.ts create mode 100644 src/app/user.service.ts diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html index 5dcd606..faed646 100644 --- a/src/app/admin/admin.component.html +++ b/src/app/admin/admin.component.html @@ -65,3 +65,4 @@ + diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts index 8ad83e1..62655d3 100644 --- a/src/app/admin/admin.component.ts +++ b/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) { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0c94865..bb4ea1e 100644 --- a/src/app/app-routing.module.ts +++ b/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 } ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 61fa9a9..4bf4eb6 100644 --- a/src/app/app.module.ts +++ b/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 {} diff --git a/src/app/authgard.guard.spec.ts b/src/app/authgard.guard.spec.ts new file mode 100644 index 0000000..2c750cb --- /dev/null +++ b/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(); + })); +}); diff --git a/src/app/authgard.guard.ts b/src/app/authgard.guard.ts new file mode 100644 index 0000000..40486df --- /dev/null +++ b/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 | Promise | boolean { + return this.user.getUserLoggedIn(); + } +} diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html new file mode 100644 index 0000000..f5fb91b --- /dev/null +++ b/src/app/login/login.component.html @@ -0,0 +1,22 @@ + + +
+
+ + +
+
+ + +
+{{ statusLog == 1 + ? " " + : statusLog == 2 + ? "Niepoprawny login lub hasło" + : " "}} +
+ +
+
+ +
\ No newline at end of file diff --git a/src/app/login/login.component.less b/src/app/login/login.component.less new file mode 100644 index 0000000..a723acd --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts new file mode 100644 index 0000000..d6d85a8 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LoginComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts new file mode 100644 index 0000000..5d675ec --- /dev/null +++ b/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; + + } + + } + +} diff --git a/src/app/status-list/status-list.component.less b/src/app/status-list/status-list.component.less index 1c8bd49..fa96ac7 100644 --- a/src/app/status-list/status-list.component.less +++ b/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; diff --git a/src/app/user.service.spec.ts b/src/app/user.service.spec.ts new file mode 100644 index 0000000..9e7fd1c --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/user.service.ts b/src/app/user.service.ts new file mode 100644 index 0000000..2ca0374 --- /dev/null +++ b/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; + } +} -- 2.20.1 From 55c2deb7014880000f04bf5a11be65f7356f1b06 Mon Sep 17 00:00:00 2001 From: Unknown Date: Tue, 15 Jan 2019 23:43:40 +0100 Subject: [PATCH 2/3] admin usuwanie + wylistowanie --- src/app/admin/admin.component.html | 38 ++++++++++++++++--- src/app/admin/admin.component.ts | 35 +++++++++++++---- .../status-list/status-list.component.html | 2 +- 3 files changed, 62 insertions(+), 13 deletions(-) diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html index faed646..ed0e7c8 100644 --- a/src/app/admin/admin.component.html +++ b/src/app/admin/admin.component.html @@ -8,7 +8,7 @@ @@ -17,7 +17,7 @@ >Podaj nazwę czujnika (w przypadku ESPEasy name device) - {{ nameDevice.value.length }} / 100 + {{ nameDevice.value.length }} / 20
@@ -25,7 +25,7 @@ @@ -48,7 +48,7 @@ @@ -64,5 +64,33 @@
- + + + + + + + + + + + + + + + + + + + + + + + + + + +
NazwaIPEdytujUsuń
{{device.name}}{{device.ip}}edytuj
diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts index 62655d3..72f1a12 100644 --- a/src/app/admin/admin.component.ts +++ b/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 { StatusService } from "../shared/status/status.service"; import {UserService} from '../user.service'; import "rxjs/Rx"; @@ -14,8 +15,8 @@ export class AdminComponent implements OnInit { name = new FormControl(""); ip = new FormControl(""); ipDelete = new FormControl(""); - - constructor(private http: HttpClient, private user: UserService) {} + devices = []; + constructor(private http: HttpClient, private user: UserService, private statusService: StatusService) {} onAddDevice() { if (this.name.value.length > 0 && this.ip.value.length > 0) { @@ -31,15 +32,35 @@ export class AdminComponent implements OnInit { } } - onDeviceDelete() { - if (this.ipDelete.value.length > 0) { + onDeviceDelete(i) { + + if (this.devices[i].ip.length > 0) { this.http - .delete("http://localhost:3000/device/" + this.ipDelete.value) + .delete("http://localhost:3000/device/" + this.devices[i].ip) .subscribe(data => { - this.ipDelete.reset(); + }); } + + } - ngOnInit() {} + + onDeviceEdit() { + + + + } + + + + ngOnInit() { + + this.statusService.getDB().subscribe(data => { + this.devices = data; + + }); + } + + } diff --git a/src/app/status-list/status-list.component.html b/src/app/status-list/status-list.component.html index 2b840a0..4230599 100644 --- a/src/app/status-list/status-list.component.html +++ b/src/app/status-list/status-list.component.html @@ -94,7 +94,7 @@ > min

- Przewidywane zakończenie: + Przewidywane zakończenie za: 10 min -- 2.20.1 From b33a61e29b12a8becba44168f96334f5e1494314 Mon Sep 17 00:00:00 2001 From: Unknown Date: Fri, 18 Jan 2019 21:26:56 +0100 Subject: [PATCH 3/3] full admin + logout + RWD --- src/app/admin/admin.component.html | 9 ++++++--- src/app/admin/admin.component.ts | 12 ++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html index ed0e7c8..2af5b7f 100644 --- a/src/app/admin/admin.component.html +++ b/src/app/admin/admin.component.html @@ -1,3 +1,4 @@ + Wyloguj
@@ -67,7 +68,7 @@ - +
@@ -88,9 +89,11 @@ - - + + +
{{device.name}} {{device.ip}}edytuj
+ diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts index 72f1a12..2a5be5f 100644 --- a/src/app/admin/admin.component.ts +++ b/src/app/admin/admin.component.ts @@ -46,6 +46,18 @@ export class AdminComponent implements OnInit { } + deleteRow(i){ + + + this.devices.splice(i,1); + + + } + + + + + onDeviceEdit() { -- 2.20.1