[BAEL-3392] Formatted code examples for [BAEL-3392]

spring-security-angular/client/angular6/src/app/app.component.html

@@ -0,0 +1,2 @@
+
+<router-outlet></router-outlet>

spring-security-angular/client/angular6/src/app/app.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html'
+})
+
+export class AppComponent { }

spring-security-angular/client/angular6/src/app/app.module.ts

@@ -0,0 +1,27 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent }  from './app.component';
+import { routing }        from './app.routing';
+
+import { HomeComponent } from './home/home.component';
+import { LoginComponent } from './login/login.component';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpClientModule,
+        routing
+    ],
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        LoginComponent
+    ],
+    bootstrap: [AppComponent]
+})
+
+export class AppModule { }

spring-security-angular/client/angular6/src/app/app.routing.ts

@@ -0,0 +1,11 @@
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { LoginComponent } from './login/login.component';
+
+const appRoutes: Routes = [
+    { path: '', component: HomeComponent },
+    { path: 'login', component: LoginComponent },
+    { path: '**', redirectTo: '' }
+];
+
+export const routing = RouterModule.forRoot(appRoutes);

spring-security-angular/client/angular6/src/app/home/home.component.html

@@ -0,0 +1,4 @@
+<div class="col-md-6 col-md-offset-3">
+    <h1>Hi {{userName}}!</h1>
+    <p><a [routerLink]="['/login']" (click) ="logout()">Logout</a></p>
+</div>

spring-security-angular/client/angular6/src/app/home/home.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError, map, tap} from 'rxjs/operators';
+@Component({
+    selector: 'home',
+    templateUrl: './home.component.html'
+})
+
+export class HomeComponent implements OnInit {
+
+    userName: string;
+
+    constructor(private http: HttpClient) { }
+
+    ngOnInit() {
+        let url = 'http://localhost:8082/user';
+
+        let headers: HttpHeaders = new HttpHeaders({
+            'Authorization': 'Basic ' + sessionStorage.getItem('token')
+        });
+
+        let options = { headers: headers };
+        this.http.post<Observable<Object>>(url, {}, options).
+            subscribe(principal => {
+                this.userName = principal['name'];
+            },
+            error => {
+                if(error.status == 401)
+                    alert('Unauthorized');
+            }
+        );
+    }
+
+    logout() {
+        sessionStorage.setItem('token', '');
+    }
+    private handleError(error: HttpErrorResponse) {
+        if (error.error instanceof ErrorEvent) {
+          console.error('An error occurred:', error.error.message);
+        } else {
+          console.error(
+            `Backend returned code ${error.status}, ` +
+            `body was: ${error.error}`);
+        }
+        return throwError(
+          'Something bad happened; please try again later.');
+      };
+}

spring-security-angular/client/angular6/src/app/login/login.component.html

@@ -0,0 +1,15 @@
+<form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
+    <div [ngClass]="{ 'has-error': f.submitted && !username.valid }">
+        <label for="username">Username</label>
+        <input type="text" name="username" [(ngModel)]="model.username" #username="ngModel" required />
+        <div *ngIf="f.submitted && !username.valid">Username is required</div>
+    </div>
+    <div [ngClass]="{ 'has-error': f.submitted && !password.valid }">
+        <label for="password">Password</label>
+        <input type="password" name="password" [(ngModel)]="model.password" #password="ngModel" required />
+        <div *ngIf="f.submitted && !password.valid">Password is required</div>
+    </div>
+    <div>
+        <button [disabled]="loading">Login</button>
+    </div>
+</form>

spring-security-angular/client/angular6/src/app/login/login.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Component({
+    selector: 'login',
+    templateUrl: './login.component.html'
+})
+
+export class LoginComponent implements OnInit {
+
+    model: any = {};
+
+    constructor(
+        private route: ActivatedRoute,
+        private router: Router,
+        private http: HttpClient
+    ) { }
+
+    ngOnInit() {
+        sessionStorage.setItem('token', '');
+    }
+
+    login() {
+        let url = 'http://localhost:8082/login';
+        this.http.post<Observable<boolean>>(url, {
+            userName: this.model.username,
+            password: this.model.password
+        }).subscribe(isValid => {
+            if (isValid) {
+                sessionStorage.setItem('token', btoa(this.model.username + ':' + this.model.password));
+                this.router.navigate(['']);
+            } else {
+                alert("Authentication failed.")
+            }
+        });
+    }
+}