Added login page

Author: Bernardo-MG

src/app/app.module.ts

@@ -4,6 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { AuthenticationModule } from './authentication/authentication.module';
 import { NavigationModule } from './navigation/navigation.module';
 
 @NgModule({
@@ -14,7 +15,8 @@ import { NavigationModule } from './navigation/navigation.module';
     BrowserModule,
     AppRoutingModule,
     NavigationModule,
-    HttpClientModule
+    HttpClientModule,
+    AuthenticationModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/authentication/authentication.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { AuthInterceptor } from './interceptor/authentication.interceptor';
+import { AuthenticationService } from './service/authentication.service';
+import { AuthenticationTokenService } from './service/authentication-token.service';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ],
+  providers: [
+    AuthenticationService,
+    AuthenticationTokenService,
+    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
+  ]
+})
+export class AuthenticationModule { }

src/app/authentication/interceptor/authentication.interceptor.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthenticationInterceptor } from './authentication.interceptor';
+
+describe('AuthenticationInterceptor', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      AuthenticationInterceptor
+      ]
+  }));
+
+  it('should be created', () => {
+    const interceptor: AuthenticationInterceptor = TestBed.inject(AuthenticationInterceptor);
+    expect(interceptor).toBeTruthy();
+  });
+});

src/app/authentication/interceptor/authentication.interceptor.ts

@@ -0,0 +1,22 @@
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { AuthenticationTokenService } from '../service/authentication-token.service';
+
+
+@Injectable()
+export class AuthInterceptor implements HttpInterceptor {
+
+  private tokenHeaderKey = 'Authorization';
+
+  constructor(private token: AuthenticationTokenService) { }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    let authReq = req;
+    const token = this.token.getToken();
+    if (token != null) {
+      authReq = req.clone({ headers: req.headers.set(this.tokenHeaderKey, 'Bearer ' + token) });
+    }
+    return next.handle(authReq);
+  }
+}

src/app/authentication/model/user.ts

@@ -0,0 +1,6 @@
+export class User {
+    id: number = 0;
+    username: string = '';
+    password: string = '';
+    authdata?: string;
+}

src/app/authentication/service/authentication-token.service.spec.ts

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

src/app/authentication/service/authentication-token.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthenticationTokenService {
+
+  private tokenKey = 'auth-token';
+  private userKey = 'auth-user';
+
+  constructor() { }
+
+  public signOut(): void {
+    window.sessionStorage.clear();
+  }
+
+  public saveToken(token: string): void {
+    window.sessionStorage.removeItem(this.tokenKey);
+    window.sessionStorage.setItem(this.tokenKey, token);
+  }
+
+  public getToken(): string | null {
+    return window.sessionStorage.getItem(this.tokenKey);
+  }
+
+  public saveUser(user: any): void {
+    window.sessionStorage.removeItem(this.userKey);
+    window.sessionStorage.setItem(this.userKey, JSON.stringify(user));
+  }
+
+  public getUser(): any {
+    const user = window.sessionStorage.getItem(this.userKey);
+    if (user) {
+      return JSON.parse(user);
+    }
+    return {};
+  }
+
+}

src/app/authentication/service/authentication.service.spec.ts

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

src/app/authentication/service/authentication.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from '@environments/environment';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthenticationService {
+
+    private httpOptions = {
+        headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+    };
+
+    constructor(private http: HttpClient) { }
+
+    login(username: string, password: string): Observable<any> {
+        return this.http.post(environment.apiUrl + '/api/auth/' + 'signin', {
+            username,
+            password
+        }, this.httpOptions);
+    }
+
+    register(username: string, email: string, password: string): Observable<any> {
+        return this.http.post(environment.apiUrl + 'signup', {
+            username,
+            email,
+            password
+        }, this.httpOptions);
+    }
+}

src/app/login/login-form/login-form.component.html

@@ -1 +1,65 @@
-<p>login-form works!</p>
+<div class="col-md-12">
+    <div class="card card-container">
+      <form
+        *ngIf="!isLoggedIn"
+        name="form"
+        (ngSubmit)="f.form.valid && onSubmit()"
+        #f="ngForm"
+        novalidate
+      >
+        <div class="form-group">
+          <label for="username">Username</label>
+          <input
+            type="text"
+            class="form-control"
+            name="username"
+            [(ngModel)]="form.username"
+            required
+            #username="ngModel"
+          />
+          <div
+            class="alert alert-danger"
+            role="alert"
+            *ngIf="username.errors && f.submitted"
+          >
+            Username is required!
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="password">Password</label>
+          <input
+            type="password"
+            class="form-control"
+            name="password"
+            [(ngModel)]="form.password"
+            required
+            #password="ngModel"
+          />
+          <div
+            class="alert alert-danger"
+            role="alert"
+            *ngIf="password.errors && f.submitted"
+          >
+            <div *ngIf="password.errors.required">Password is required</div>
+          </div>
+        </div>
+        <div class="form-group">
+          <button class="btn btn-primary btn-block">
+            Login
+          </button>
+        </div>
+        <div class="form-group">
+          <div
+            class="alert alert-danger"
+            role="alert"
+            *ngIf="f.submitted && isLoginFailed"
+          >
+            Login failed: {{ errorMessage }}
+          </div>
+        </div>
+      </form>
+      <div class="alert alert-success" *ngIf="isLoggedIn">
+        Logged in as {{ roles }}.
+      </div>
+    </div>
+  </div>