feat(frontend): login form (work in progress)

Author: kucharzyk

package.json

@@ -76,7 +76,6 @@
     "e2e": "protractor",
     "e2e:live": "protractor --elementExplorer",
     "lint": "ng lint",
-    "lint:fix": "tslint --fix \"src/main/typescript/**/*.ts\" --project src/main/typescript/tsconfig.json --type-check  && tslint --fix \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
     "pretest": "rimraf coverage && yarn run lint",
     "test": "ng test -w false --code-coverage --progress false",
     "test:live": "ng test --progress false",

src/main/typescript/app/auth/login/login.component.html

@@ -3,18 +3,18 @@
     <form class="login">
       <label class="title">Shardis Login Page</label>
       <div class="login-group">
-        <input class="username" type="text" id="login_username" placeholder="Username">
-        <input class="password" type="password" id="login_password" placeholder="Password">
+        <input class="username" name="username" type="text" id="login_username" placeholder="Username" [(ngModel)]="username">
+        <input class="password" name="password" type="password" id="login_password" placeholder="Password" [(ngModel)]="password">
         <div class="checkbox">
           <input type="checkbox" id="rememberme">
           <label for="rememberme">
             Remember me
           </label>
         </div>
-        <div class="error active">
-          Invalid user name or password
+        <div class="error active" *ngIf="authError$ | async">
+          {{ authError$ | async }}
         </div>
-        <button type="submit" class="btn btn-primary">LOG IN</button>
+        <button type="submit" class="btn btn-primary" (click)="authenticate()">LOG IN</button>
         <a href="#" [routerLink]="['/register']" class="signup">Sign up for an account</a>
       </div>
     </form>

src/main/typescript/app/auth/login/login.component.spec.ts

@@ -5,6 +5,9 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {CoreModule} from '../../core/core.module';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ClarityModule} from 'clarity-angular';
+import {AuthService} from '../../core/store/auth/auth.service';
+import {MockBackend} from '@angular/http/testing';
+import {Http, ConnectionBackend, RequestOptions, BaseRequestOptions} from '@angular/http';
 
 describe('LoginComponent', () => {
   let fixture: ComponentFixture<LoginComponent>;
@@ -20,6 +23,18 @@ describe('LoginComponent', () => {
         ReactiveFormsModule,
         ClarityModule.forRoot(),
         RouterTestingModule
+      ],
+      providers: [
+        BaseRequestOptions,
+        MockBackend,
+        {
+          provide: Http,
+          useFactory: function (backend: ConnectionBackend, defaultOptions: RequestOptions) {
+            return new Http(backend, defaultOptions);
+          },
+          deps: [MockBackend, BaseRequestOptions]
+        },
+        AuthService
       ]
     })
       .compileComponents();

src/main/typescript/app/auth/login/login.component.ts

@@ -1,4 +1,8 @@
 import {Component, OnInit} from '@angular/core';
+import {AuthService} from '../../core/store/auth/auth.service';
+import {Observable} from 'rxjs/Observable';
+import {Store} from '@ngrx/store';
+import {RootState} from '../../core/store/index';
 
 @Component({
   selector: 'shardis-login',
@@ -7,7 +11,17 @@ import {Component, OnInit} from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() {
+  username = 'admin';
+  password = 'xxxxxx';
+  authError$: Observable<string>;
+
+  constructor(private authService: AuthService, private store: Store<RootState>) {
+    this.authError$ = store.select(s => s.auth.error);
+  }
+
+  authenticate() {
+    console.log('authenticate');
+    this.authService.authenticate(this.username, this.password);
   }
 
   ngOnInit() {

src/main/typescript/app/core/store/auth/auth.actions.ts

@@ -3,6 +3,8 @@ import {uniqueActionType} from '../shared/unique-action-type';
 
 export const ActionTypes = {
   LOGOUT: uniqueActionType('[Auth] Logout'),
+  PROCESS_TOKEN: uniqueActionType('[Auth] Process token'),
+  AUTH_ERROR: uniqueActionType('[Auth] Auth error')
 };
 
 export class LogoutAction implements Action {
@@ -12,6 +14,22 @@ export class LogoutAction implements Action {
   }
 }
 
+export class ProcessTokenAction implements Action {
+  type = ActionTypes.PROCESS_TOKEN;
+
+  constructor(public jwtToken: string) {
+  }
+}
+
+export class AuthErrorAction implements Action {
+  type = ActionTypes.AUTH_ERROR;
+
+  constructor(public error: string) {
+  }
+}
+
 
 export type Actions
-  = LogoutAction;
+  = LogoutAction
+  | ProcessTokenAction
+  | AuthErrorAction;

src/main/typescript/app/core/store/auth/auth.reducer.ts

@@ -3,15 +3,29 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/let';
 import {AuthState, initialState} from './auth.state';
 import {Actions, ActionTypes} from './auth.actions';
+import {AuthService} from './auth.service';
 
 export function authReducer(state = initialState, action: Actions): AuthState {
   switch (action.type) {
+
     case ActionTypes.LOGOUT:
-      return initialState;
+      return Object.assign({}, initialState);
+
+    case ActionTypes.PROCESS_TOKEN:
+      const userData = AuthService.decodeAccessToken(action.jwtToken);
+      return Object.assign({}, initialState, {
+        authenticated: true,
+        tokenExpirationDate: new Date(userData.exp * 1000),
+        userData: userData,
+        jwtToken: action.jwtToken
+      });
+
+    case ActionTypes.AUTH_ERROR:
+      return Object.assign({}, userData, {error: action.error});
+
     default:
       return state;
   }
 }
 
-
 export const isAuthenticated = (state: AuthState) => state.authenticated;

src/main/typescript/app/core/store/auth/auth.service.ts

@@ -1,15 +1,20 @@
 import {Injectable} from '@angular/core';
-import {Http} from '@angular/http';
+import {Http, Headers} from '@angular/http';
 import {Store} from '@ngrx/store';
 import {RootState} from '../index';
 import {Observable} from 'rxjs/Observable';
+import {LogoutAction, ProcessTokenAction, AuthErrorAction} from './auth.actions';
 
 
 @Injectable()
 export class AuthService {
 
   private authenticated$: Observable<boolean>;
 
+  public static decodeAccessToken(access_token: string) {
+    return JSON.parse(window.atob(access_token.split('.')[1]));
+  }
+
   constructor(public http: Http, private store: Store<RootState>) {
     this.authenticated$ = store.select(s => s.auth.authenticated);
   }
@@ -18,4 +23,45 @@ export class AuthService {
     return this.authenticated$;
   }
 
+  public authenticate(username: string, password: string): void {
+
+    console.log('Authentication pending...');
+
+    if (!username.trim()) {
+      this.store.dispatch(new AuthErrorAction('Username cannot be blank'));
+      return;
+    }
+    if (!password.trim()) {
+      this.store.dispatch(new AuthErrorAction('Password cannot be blank'));
+      return;
+    }
+
+    const headers = new Headers();
+    headers.append('Content-Type', `application/x-www-form-urlencoded`);
+
+    const payload = 'username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password);
+
+    this.http
+      .post('/api/authentication', payload, {headers: headers})
+      .subscribe(
+        data => {
+          const jwtToken = data.text();
+          localStorage.setItem('tokenData', jwtToken);
+          this.store.dispatch(new ProcessTokenAction(jwtToken));
+        },
+        err => {
+          console.log(err);
+          this.store.dispatch(new AuthErrorAction('Username and password doesn\'t match'));
+          return;
+        }
+      );
+
+  }
+
+  public logout(): void {
+    localStorage.removeItem('tokenData');
+    this.store.dispatch(new LogoutAction());
+  }
+
+
 }

src/main/typescript/app/core/store/auth/auth.state.ts

@@ -3,13 +3,15 @@ export interface AuthState {
   tokenExpirationDate: Date;
   userData: any;
   jwtToken: string;
+  error: string;
 }
 
 export const initialState: AuthState = {
   authenticated: false,
   tokenExpirationDate: null,
   userData: null,
-  jwtToken: null
+  jwtToken: null,
+  error: null
 };
 
 

src/main/typescript/app/core/store/index.ts

@@ -24,7 +24,7 @@ const reducers = {
 
 const developmentReducer: ActionReducer<RootState> = compose(
   storeFreeze,
-  localStorageSync(['counter', 'auth'], true),
+  localStorageSync(['counter', 'auth', 'router'], true),
   combineReducers)(reducers);
 
 const productionReducer: ActionReducer<RootState> = compose(combineReducers)(reducers);