From 30f9ea4788f723c5534a92bccc6cc984daa91351 Mon Sep 17 00:00:00 2001 From: Unknown Date: Tue, 15 Jan 2019 14:09:29 +0100 Subject: [PATCH] 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; + } +}