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