service and authguard added

src/app/api.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  let service: ApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/api.service.ts

+import { Injectable, Output, EventEmitter } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class ApiService {
+  redirectUrl: string;
+  baseUrl: string = "http://localhost/sfcode/backend/";
+
+  @Output() getLoggedInState: EventEmitter<any> = new EventEmitter();
+  constructor(private httpClient: HttpClient) { }
+  public userLogin(username: string, password: string) {
+    return this.httpClient.post<any>(this.baseUrl + '/login.php', { username, password })
+      .pipe(map(user => {
+        if (user.length == 0) throw new Error();
+        this.setToken(JSON.stringify(user));
+        this.getLoggedInState.emit(true);
+        return user;
+      }));
+  }
+
+  public userReg(name, email, pwd, username) {
+    return this.httpClient.post<any>(this.baseUrl + '/register.php', { name, email, pwd, username })
+      .pipe(map(user => {
+        return user;
+      }));
+  }
+
+  setToken(token: string) {
+    localStorage.setItem('sfcode_user_token_2n1289bpxd', token);
+  }
+  getToken() {
+    return localStorage.getItem('sfcode_user_token_2n1289bpxd');
+  }
+  deleteToken() {
+    localStorage.removeItem('sfcode_user_token_2n1289bpxd');
+  }
+  isLoggedIn() {
+    const userToken = this.getToken();
+    if (userToken != null) {
+      return true
+    }
+    return false;
+  }
+}
\ No newline at end of file

src/app/app-routing.module.ts

@@ -6,12 +6,13 @@ import { UserComponent } from './user/user.component';
 import { IdeComponent } from './ide/ide.component';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
+import { AuthGuard } from './auth.guard';
 
 const routes: Routes = [
-  { path: 'home', component: HomeComponent },
-  { path: 'arena/:id', component: ArenaComponent },
-  { path: 'arena', component: IdeComponent },
-  { path: 'user', component: UserComponent },
+  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
+  { path: 'arena/:id', component: ArenaComponent, canActivate: [AuthGuard] },
+  { path: 'arena', component: IdeComponent, canActivate: [AuthGuard] },
+  { path: 'user', component: UserComponent, canActivate: [AuthGuard] },
   { path: 'login', component: LoginComponent },
   { path: 'register', component: RegisterComponent },
   { path: '**', redirectTo: '/home' },

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'temp';
+  title = 'Segmentation Fault';
 }

src/app/app.module.ts

@@ -9,6 +9,7 @@ import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { LDModeComponent } from './l-d-mode/l-d-mode.component';
+import { ApiService } from './api.service';
 
 @NgModule({
   declarations: [
@@ -24,7 +25,7 @@ import { LDModeComponent } from './l-d-mode/l-d-mode.component';
     ReactiveFormsModule,
     HttpClientModule
   ],
-  providers: [],
+  providers: [ApiService],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

src/app/auth.guard.ts

+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate, Router } from '@angular/router';
+import { ApiService } from './api.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+
+export class AuthGuard implements CanActivate {
+    constructor(private dataService: ApiService, private router: Router) { }
+    canActivate(
+        route: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot
+    ): boolean {
+        const routeUrl: string = state.url;
+        return this.isLogin(routeUrl);
+    }
+
+    isLogin(routeUrl: string) {
+        if (this.dataService.isLoggedIn()) {
+            return true;
+        }
+        this.dataService.redirectUrl = routeUrl;
+        this.router.navigate(['/login'], { queryParams: { returnUrl: routeUrl } });
+    }
+}
\ No newline at end of file

src/app/header/header.component.html

@@ -4,4 +4,4 @@
   <a *ngIf="loggedIn" routerLink="/home" routerLinkActive="active">Home</a>
   <a *ngIf="loggedIn" routerLink="/arena" routerLinkActive="active">Arena</a>
   <a *ngIf="loggedIn" routerLink="/user" routerLinkActive="active">User</a>
-</nav>
+</nav>
\ No newline at end of file

src/app/header/header.component.ts

 import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../api.service';
 
 @Component({
   selector: 'app-header',
@@ -8,9 +9,16 @@ import { Component, OnInit } from '@angular/core';
 export class HeaderComponent implements OnInit {
   loggedIn: boolean;
 
-  constructor() {
+  constructor(private dataService: ApiService) {
   }
 
   ngOnInit(): void {
+    this.dataService.getLoggedInState.subscribe(state => this.changeState(state));
+    this.loggedIn = this.dataService.isLoggedIn();
   }
-}
+
+  private changeState(state: boolean): void {
+    this.loggedIn = state;
+  }
+
+}
\ No newline at end of file

src/app/login/login.component.html

-<form id="login_form" action="" [formGroup]="form" novalidate>
+<form id="login_form" action="" [formGroup]="form" novalidate (ngSubmit)="postData(form)">
 
   <div class="form-row">
     <label for="username">Username</label>
@@ -29,4 +29,4 @@
       information.
     </p>
   </div>
-</div>
+</div>
\ No newline at end of file

src/app/login/login.component.ts

 import { Component, OnInit } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { FormGroup, FormBuilder, Validators, NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
+import { first } from 'rxjs/operators';
+import { ApiService } from '../api.service';
 
 @Component({
   selector: 'app-login',
@@ -14,7 +16,7 @@ export class LoginComponent implements OnInit {
   user_data: any;
   submit_element: HTMLInputElement;
 
-  constructor(private fb: FormBuilder, private router: Router) {
+  constructor(private fb: FormBuilder, private dataService: ApiService, private router: Router) {
     this.form = this.fb.group({
       username: ['', [Validators.required, Validators.minLength(5)]],
       password: ['', Validators.required]
@@ -46,6 +48,22 @@ export class LoginComponent implements OnInit {
     });
   }
 
+  postData(form: FormGroup) {
+    if (this.submit_element.classList.contains('disabled')) return;
+    this.submit_element.classList.add('disabled');
+    
+    this.dataService.userLogin(form.value.username, form.value.password)
+      .pipe(first())
+      .subscribe(data => {
+        this.user_data = data;
+        const redirect = this.dataService.redirectUrl ? this.dataService.redirectUrl : '/home';
+        this.router.navigate([redirect]);
+      }, error => {
+        this.error("Incorrect username or password.");
+        form.get('password').reset();
+      });
+  }
+
   error(str: string) {
     let co = (document.getElementById('cover') as HTMLDivElement);
     let pu = (document.getElementById('error') as HTMLDivElement);
@@ -73,4 +91,12 @@ export class LoginComponent implements OnInit {
     }, 3000);
   }
 
-}
+  get username() {
+    return this.form.get('username');
+  }
+
+  get password() {
+    return this.form.get('password');
+  }
+
+}
\ No newline at end of file

src/app/register/register.component.ts

 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { first } from 'rxjs/operators';
+import { ApiService } from '../api.service';
 
 @Component({
   selector: 'app-register',
@@ -11,7 +13,7 @@ export class RegisterComponent implements OnInit {
   form: FormGroup;
   timeout: any;
 
-  constructor(private fb: FormBuilder, private router: Router) {
+  constructor(private fb: FormBuilder, private dataService: ApiService, private router: Router) {
     this.form = this.fb.group({
       name: new FormControl('', [Validators.required, Validators.minLength(1), Validators.maxLength(50)]),
       username: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(50), Validators.pattern(/^[a-zA-Z0-9_]+$/)]),
@@ -73,7 +75,16 @@ export class RegisterComponent implements OnInit {
       return;
     }
 
-    //submit...
+    this.dataService.userReg(frm.value.name, frm.value.email, frm.value.password, frm.value.username)
+      .pipe(first())
+      .subscribe(
+        data => {
+          this.success();
+        },
+
+        error => {
+          this.error('Could not register you. Please try again after some time.');
+        });
 
   }
 
@@ -133,4 +144,10 @@ export class RegisterComponent implements OnInit {
 
   }
 
+  get email() { return this.form.get('email'); }
+  get password() { return this.form.get('password'); }
+  get name() { return this.form.get('name'); }
+  get username() { return this.form.get('name'); }
+
+
 }

src/app/user.ts

@@ -4,7 +4,6 @@ export interface User {
     name: string;
     password: string;
     email: string;
-    dob: Date;
     img_url: string;
     n_attempts: number;
     correct_timeline: string;

src/app/user/user.component.html

@@ -11,7 +11,7 @@
           <div>
             <a href="" id="edit">Edit Details</a>
             &nbsp;
-            <a href="" id=" Logout">Logout</a>
+            <a href="" id=" Logout" (click)="logout()">Logout</a>
           </div>
         </div>
       </div>
@@ -35,4 +35,4 @@
       <canvas id="myChart" width="100px" height="100px"></canvas>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file

src/app/user/user.component.ts

 import { Component, OnInit } from '@angular/core';
 import { User } from '../user';
+import { ApiService } from '../api.service';
 declare var Chart: any;
 
 @Component({
@@ -14,9 +15,12 @@ export class UserComponent implements OnInit {
   hist: number[] = [];
   timeline: number[];
 
-  constructor() { }
-
+  constructor(private dataService: ApiService) { }
   ngOnInit(): void {
+    this.dataService.getLoggedInState.subscribe(state => this.changeState(state));
+    this.loggedIn = this.dataService.isLoggedIn();
+    console.log(this.dataService.getToken());
+    this.user = JSON.parse(this.dataService.getToken());
 
     (() => {
       this.timeline = JSON.parse(this.user.correct_timeline);
@@ -90,4 +94,13 @@ export class UserComponent implements OnInit {
     });
   }
 
+  private changeState(state: boolean): void {
+    this.loggedIn = state;
+  }
+
+  logout() {
+    this.dataService.deleteToken();
+    window.location.href = window.location.href;
+  }
+
 }