From 1e2c012a7ea4f7c1149def172e5dc3c8ed7bf8fa Mon Sep 17 00:00:00 2001 From: Dawid Kubicki Date: Sun, 20 Jan 2019 13:20:02 +0100 Subject: [PATCH] login added --- src/app/app-routing.module.ts | 5 ++-- src/app/app.module.ts | 7 ++++-- src/app/authguard.guard.spec.ts | 15 +++++++++++ src/app/authguard.guard.ts | 21 ++++++++++++++++ src/app/login/login.component.html | 16 ++++++++++++ src/app/login/login.component.less | 36 +++++++++++++++++++++++++++ src/app/login/login.component.spec.ts | 25 +++++++++++++++++++ src/app/login/login.component.ts | 27 ++++++++++++++++++++ src/app/user.service.spec.ts | 12 +++++++++ src/app/user.service.ts | 20 +++++++++++++++ 10 files changed, 180 insertions(+), 4 deletions(-) create mode 100644 src/app/authguard.guard.spec.ts create mode 100644 src/app/authguard.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/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 26fbe35..6fc1bdd 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/authguard.guard.spec.ts b/src/app/authguard.guard.spec.ts new file mode 100644 index 0000000..1c15a0f --- /dev/null +++ b/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(); + })); +}); diff --git a/src/app/authguard.guard.ts b/src/app/authguard.guard.ts new file mode 100644 index 0000000..0dad0f5 --- /dev/null +++ b/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 | 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..752d4a1 --- /dev/null +++ b/src/app/login/login.component.html @@ -0,0 +1,16 @@ +
+
+
+ +
+
+ {{ + statusLog == 1 + ? " " + : statusLog == 2 + ? "Niepoprawny login lub hasło" + : " " + }} +
+
+
diff --git a/src/app/login/login.component.less b/src/app/login/login.component.less new file mode 100644 index 0000000..2c6e15c --- /dev/null +++ b/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; +} 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..23385c8 --- /dev/null +++ b/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; + } + } +} 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..4a10328 --- /dev/null +++ b/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; + } +}