- {{title}} -
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0567822..f819bd8 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,16 @@
import { Component } from '@angular/core';
+import { environment } from '../environments/environment';
+
@Component({
selector: 'cru-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
- title = 'cru works!';
+
+ constructor() {
+ console.log(JSON.stringify(environment));
+ }
+
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 67ae491..a713782 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,18 +1,33 @@
-import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
+import { HomeModule } from './home/home.module';
+import { LoginModule } from './login/login.module';
+import { SharedModule } from './shared/shared.module';
+import { AppRoutingModule } from './app.routing';
+
@NgModule({
- declarations: [
- AppComponent
- ],
+ declarations: [AppComponent],
imports: [
+ // @angular/platform-browser
BrowserModule,
+ // @angular/forms
FormsModule,
- HttpModule
+ // @angular/http
+ HttpModule,
+ // app.routing
+ AppRoutingModule,
+ // shared/shared.module
+ SharedModule,
+ // home/home.module
+ HomeModule,
+ // login/login.module
+ LoginModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
new file mode 100644
index 0000000..2cd4c9a
--- /dev/null
+++ b/src/app/app.routing.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { HomeRoutes } from './home/';
+import { LoginRoutes } from './login/';
+
+const AppRoutes: Routes = [
+ ...HomeRoutes,
+ ...LoginRoutes
+];
+
+/**
+ * This module provides all the routes of the application. Any feature routes are imported through their respective
+ * module and added to the `AppRoutes` array.
+ */
+@NgModule({
+ imports: [RouterModule.forRoot(AppRoutes)],
+ exports: [RouterModule],
+ providers: []
+})
+export class AppRoutingModule { }
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
new file mode 100644
index 0000000..101b9f5
--- /dev/null
+++ b/src/app/home/home.component.html
@@ -0,0 +1,18 @@
+
+
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
new file mode 100644
index 0000000..70e4c9b
--- /dev/null
+++ b/src/app/home/home.component.scss
@@ -0,0 +1,3 @@
+#wordwrap {
+ word-wrap: break-word;
+}
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
new file mode 100644
index 0000000..e7eae4d
--- /dev/null
+++ b/src/app/home/home.component.spec.ts
@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+
+describe('Component: Home', () => {
+ it('should create an instance', () => {
+ let component = new HomeComponent();
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
new file mode 100644
index 0000000..2a9c765
--- /dev/null
+++ b/src/app/home/home.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+
+import { AuthenticationService } from '../shared/';
+
+/**
+ * This class represents the lazy loaded HomeComponent.
+ */
+@Component({
+ selector: 'cru-home',
+ templateUrl: './home.component.html',
+ styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+ currentUser: any;
+ user: string;
+ token: string;
+
+ /**
+ * Creates a new LoginComponent with the injected AuthenticationService.
+ * @param {AuthenticationService} authenticationService - The injected AuthenticationService.
+ * @constructor
+ */
+ constructor(private authenticationService: AuthenticationService) { }
+
+ /**
+ * Initialises the component.
+ */
+ ngOnInit() {
+ this.currentUser = JSON.parse(this.authenticationService.getCurrentUser());
+ this.user = this.currentUser.username;
+ this.token = this.currentUser.token;
+ }
+
+}
diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts
new file mode 100644
index 0000000..0f0e35e
--- /dev/null
+++ b/src/app/home/home.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../shared/shared.module';
+import { HomeComponent } from './index';
+
+@NgModule({
+ imports: [CommonModule, SharedModule],
+ declarations: [HomeComponent],
+ exports: [HomeComponent]
+})
+export class HomeModule { }
diff --git a/src/app/home/home.routing.ts b/src/app/home/home.routing.ts
new file mode 100644
index 0000000..870db93
--- /dev/null
+++ b/src/app/home/home.routing.ts
@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+import { AuthenticationGuard } from '../shared/';
+import { HomeComponent } from './home.component';
+
+export const HomeRoutes: Routes = [
+ { path: '', component: HomeComponent, canActivate: [AuthenticationGuard] }
+];
diff --git a/src/app/home/index.ts b/src/app/home/index.ts
new file mode 100644
index 0000000..b8072e7
--- /dev/null
+++ b/src/app/home/index.ts
@@ -0,0 +1,2 @@
+export * from './home.component';
+export * from './home.routing';
diff --git a/src/app/login/index.ts b/src/app/login/index.ts
new file mode 100644
index 0000000..892f85c
--- /dev/null
+++ b/src/app/login/index.ts
@@ -0,0 +1,2 @@
+export * from './login.component';
+export * from './login.routing';
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
new file mode 100644
index 0000000..409353a
--- /dev/null
+++ b/src/app/login/login.component.html
@@ -0,0 +1,42 @@
+
+
+ Hello.
+
+ 
+
+
+Good day to you {{ user }}
+Your encoded token is:
+
+
+ + {{ token }} +
+
+
+
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
new file mode 100644
index 0000000..d7ef9dc
--- /dev/null
+++ b/src/app/login/login.component.spec.ts
@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { LoginComponent } from './login.component';
+
+describe('Component: Login', () => {
+ it('should create an instance', () => {
+ let component = new LoginComponent();
+ 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..96d19c9
--- /dev/null
+++ b/src/app/login/login.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthenticationService } from '../shared/';
+
+/**
+ * This class represents the lazy loaded LoginComponent.
+ */
+@Component({
+ selector: 'cru-login',
+ templateUrl: './login.component.html',
+ styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+ user: any = { };
+ loading: boolean = false;
+ error: string = '';
+
+ /**
+ * Creates a new LoginComponent with the injected Router and AuthenticationService.
+ * @param {Router} router - The injected Router.
+ * @param {AuthenticationService} authenticationService - The injected AuthenticationService.
+ * @constructor
+ */
+ constructor(private router: Router, private authenticationService: AuthenticationService) { }
+
+ /**
+ * Initialises the component and resets the login status.
+ */
+ ngOnInit() {
+ this.authenticationService.logout();
+ }
+
+ /**
+ * Attempts to login the user with the given credentials of the login form.
+ */
+ login() {
+ this.loading = true;
+ this.authenticationService.login(this.user.username, this.user.password)
+ .subscribe(result => {
+ if (result === true) {
+ this.router.navigate(['/']);
+ } else {
+ this.error = 'Username or password is incorrect';
+ this.loading = false;
+ }
+ }
+ );
+ }
+
+}
diff --git a/src/app/login/login.module.ts b/src/app/login/login.module.ts
new file mode 100644
index 0000000..7dcec74
--- /dev/null
+++ b/src/app/login/login.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { SharedModule } from '../shared/shared.module';
+import { LoginComponent } from './index';
+
+@NgModule({
+ imports: [CommonModule, SharedModule],
+ declarations: [LoginComponent],
+ exports: [LoginComponent]
+})
+export class LoginModule { }
diff --git a/src/app/login/login.routing.ts b/src/app/login/login.routing.ts
new file mode 100644
index 0000000..ab20829
--- /dev/null
+++ b/src/app/login/login.routing.ts
@@ -0,0 +1,7 @@
+import { Routes } from '@angular/router';
+
+import { LoginComponent } from './login.component';
+
+export const LoginRoutes: Routes = [
+ { path: 'login', component: LoginComponent }
+];
diff --git a/src/app/shared/authentication/authentication.guard.ts b/src/app/shared/authentication/authentication.guard.ts
new file mode 100644
index 0000000..9a8c58c
--- /dev/null
+++ b/src/app/shared/authentication/authentication.guard.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+
+/**
+ * This class implements a guard for routes that require successful authentication.
+ */
+@Injectable()
+export class AuthenticationGuard implements CanActivate {
+
+ /**
+ * Creates an instance of the AuthenticationGuard class.
+ * @param {Router} router - The injected Router
+ * @constructor
+ */
+ constructor(private router: Router) { }
+
+ /**
+ * To protect routes from being accessible without previous authentication,
+ * the `canActivate()` method checks if the LocalStorage contains a
+ * `currentUser`, which equates to a user being logged in. Only then the
+ * navigation will pass on to the requested route. Otherwise the user will be
+ * redirected to the login view.
+ */
+ canActivate() {
+ if (localStorage.getItem('currentUser')) {
+ return true;
+ }
+ this.router.navigate(['/login']);
+ return false;
+ }
+
+}
diff --git a/src/app/shared/authentication/authentication.module.ts b/src/app/shared/authentication/authentication.module.ts
new file mode 100644
index 0000000..de28f2c
--- /dev/null
+++ b/src/app/shared/authentication/authentication.module.ts
@@ -0,0 +1,20 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+
+import { AuthenticationGuard, AuthenticationService } from './index';
+
+/**
+ * Do not specify providers for modules that might be imported by a lazy loaded module.
+ */
+@NgModule({ })
+export class AuthenticationModule {
+
+ static forRoot(): ModuleWithProviders {
+ return {
+ ngModule: AuthenticationModule,
+ providers: [
+ AuthenticationGuard, AuthenticationService
+ ]
+ };
+ }
+
+}
diff --git a/src/app/shared/authentication/authentication.service.ts b/src/app/shared/authentication/authentication.service.ts
new file mode 100644
index 0000000..765830e
--- /dev/null
+++ b/src/app/shared/authentication/authentication.service.ts
@@ -0,0 +1,91 @@
+import { Injectable } from '@angular/core';
+import { Headers, Http, RequestOptions, Response } from '@angular/http';
+import { Observable } from 'rxjs';
+import 'rxjs/add/operator/map'
+
+import { environment } from '../../../environments/environment';
+
+/**
+ * This class implements a JWT authorisation for the application.
+ */
+@Injectable()
+export class AuthenticationService {
+
+ token: string;
+ baseUrl: string;
+
+ /**
+ * Creates an instance of the AuthenticationService class.
+ * @param {Http} http - The injected Http
+ * @constructor
+ */
+ constructor(private http: Http) {
+ // set token if saved in local storage
+ const currentUser = JSON.parse(localStorage.getItem('currentUser'));
+ this.token = currentUser && currentUser.token;
+ this.baseUrl = environment.apiBaseUrl;
+ }
+
+ /**
+ * Authorises the given credentials. An error will be thrown if the username or password is not correct.
+ * @param {string} username - The username
+ * @param {string} password - The password
+ * @return {boolean} `true` if the authorisation was successful, otherwise `false`.
+ */
+ login(username: string, password: string): Observable
+
+ Login.
+
+
+
+
+ {{ loginFailedMessage }}
+
+
+