[frontend] Implement bare login process (login service, auth guard)

kibicara-frontend/src/app/auth/auth.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { LoginComponent } from './login/login.component';
-import { RegisterComponent } from './register/register.component';
-
-
-
-@NgModule({
-  declarations: [LoginComponent, RegisterComponent],
-  imports: [
-    CommonModule
-  ]
-})
-export class AuthModule { }

kibicara-frontend/src/app/auth/login/login.component.html

@@ -1 +0,0 @@
-<p>login works!</p>

kibicara-frontend/src/app/auth/login/login.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
-})
-export class LoginComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

kibicara-frontend/src/app/core/auth/auth-token-interceptor.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthTokenInterceptorService } from './auth-token-interceptor.service';
+
+describe('AuthTokenInterceptorService', () => {
+  let service: AuthTokenInterceptorService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthTokenInterceptorService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/core/auth/auth-token-interceptor.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthTokenInterceptorService {
+  constructor() {}
+
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    // const token = this.loginService.token;
+
+    // if (token) {
+    //   req = req.clone({
+    //     setHeaders: {
+    //       Authorization: 'Bearer ' + this.loginService.token,
+    //     },
+    //   });
+    // }
+    return next.handle(req);
+  }
+}

kibicara-frontend/src/app/core/auth/auth.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/core/auth/auth.guard.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import {
+  CanActivate,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  UrlTree,
+  Router,
+} from '@angular/router';
+import { Observable } from 'rxjs';
+import { LoginService } from './login.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard implements CanActivate {
+  constructor(private router: Router, private loginService: LoginService) {}
+
+  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    if (this.loginService.currentHoodAdminValue) {
+      return true;
+    }
+    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+    return false;
+  }
+}

kibicara-frontend/src/app/core/auth/login.service.spec.ts

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

kibicara-frontend/src/app/core/auth/login.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { AdminService } from '../api';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoginService {
+  private currentHoodAdminSubject: BehaviorSubject<any>;
+  public currentHoodAdmin: Observable<any>;
+
+  constructor(private readonly adminService: AdminService) {
+    this.currentHoodAdminSubject = new BehaviorSubject<any>(
+      JSON.parse(localStorage.getItem('currentHoodAdmin'))
+    );
+    this.currentHoodAdmin = this.currentHoodAdminSubject.asObservable();
+  }
+
+  public get currentHoodAdminValue() {
+    return this.currentHoodAdminSubject.value;
+  }
+
+  login(email, password) {
+    return this.adminService.login(email, password).pipe(
+      map((response) => {
+        localStorage.setItem('currentHoodAdmin', JSON.stringify(response));
+        this.currentHoodAdminSubject.next(response);
+        return response;
+      })
+    );
+  }
+
+  logout() {
+    localStorage.removeItem('currentHoodAdmin');
+    this.currentHoodAdminSubject.next(null);
+  }
+}

kibicara-frontend/src/app/login/login.component.html

@@ -0,0 +1,46 @@
+<div *ngIf="error" class="error">{{ error }}</div>
+<h2>Login</h2>
+<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+  <div class="form-group">
+    <label for="email">E-Mail</label>
+    <input
+      type="text"
+      formControlName="email"
+      class="form-control"
+      [ngClass]="{ 'is-invalid': submitted && loginForm.controls.email.errors }"
+    />
+    <div
+      *ngIf="submitted && loginForm.controls.email.errors"
+      class="invalid-feedback"
+    >
+      <div *ngIf="loginForm.controls.email.errors.required">
+        Email is required
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input
+      type="password"
+      formControlName="password"
+      class="form-control"
+      [ngClass]="{
+        'is-invalid': submitted && loginForm.controls.password.errors
+      }"
+    />
+    <div
+      *ngIf="submitted && loginForm.controls.password.errors"
+      class="invalid-feedback"
+    >
+      <div *ngIf="loginForm.controls.password.errors.required">
+        Password is required
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <button [disabled]="loading" class="btn btn-primary">
+      Login
+    </button>
+    <a routerLink="/register">Register</a>
+  </div>
+</form>

kibicara-frontend/src/app/login/login.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit } from '@angular/core';
+import { LoginService } from '../core/auth/login.service';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Validators, FormGroup, FormBuilder } from '@angular/forms';
+import { first } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss'],
+})
+export class LoginComponent implements OnInit {
+  loginForm: FormGroup;
+  returnUrl: string;
+  error: string;
+  loading = false;
+  submitted = false;
+
+  constructor(
+    private loginService: LoginService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder
+  ) {
+    if (this.loginService.currentHoodAdminValue) {
+      this.router.navigate(['/dashboard']);
+    }
+  }
+
+  ngOnInit(): void {
+    this.loginForm = this.formBuilder.group({
+      email: ['', Validators.required],
+      password: ['', Validators.required],
+    });
+    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/dashboard';
+  }
+
+  onSubmit() {
+    this.submitted = true;
+    if (this.loginForm.invalid) {
+      return;
+    }
+
+    this.loading = true;
+    this.loginService
+      .login(
+        this.loginForm.controls.email.value,
+        this.loginForm.controls.password.value
+      )
+      .pipe(first())
+      .subscribe(
+        (data) => {
+          this.router.navigate([this.returnUrl]);
+        },
+        (error) => {
+          this.error = 'Wrong credentials! Try again.';
+          this.loading = false;
+        }
+      );
+  }
+}