Merge branch 'master' of https://github.com/JonCook/tutorials

spring-security-angular/client/angular2/app/app.component.html

@@ -0,0 +1,7 @@
+<div class="jumbotron">
+    <div class="container">
+        <div class="col-sm-8 col-sm-offset-2">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
+</div>

spring-security-angular/client/angular2/app/app.component.ts

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

spring-security-angular/client/angular2/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 { HttpModule } from '@angular/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,
+        HttpModule,
+        routing
+    ],
+    declarations: [
+        AppComponent,
+        HomeComponent,
+        LoginComponent
+    ],
+    bootstrap: [AppComponent]
+})
+
+export class AppModule { }

spring-security-angular/client/angular2/app/app.routing.ts

@@ -0,0 +1,12 @@
+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/angular2/app/home/home.component.html

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

spring-security-angular/client/angular2/app/home/home.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { Http, RequestOptions, Headers } from '@angular/http';
+import 'rxjs/add/operator/map'
+
+@Component({
+    selector:'home',
+    templateUrl: './app/home/home.component.html'
+})
+
+export class HomeComponent implements OnInit {
+
+    userName: string;
+
+    constructor(private http: Http) { }
+
+    ngOnInit() {
+        let url = 'http://localhost:8082/user';
+        let headers = new Headers({
+            'Authorization': 'Basic ' + sessionStorage.getItem('token')
+        });
+        let options = new RequestOptions({ headers: headers });
+        this.http.post(url,{}, options).
+        map(res => res.json()).
+        subscribe(
+            principal => this.userName = principal.name,
+            error => {
+                if(error.status == 401)
+                    alert('Unauthorized');
+            }
+        );
+    }
+
+    logout() {
+        sessionStorage.setItem('token', '');
+    }
+}

spring-security-angular/client/angular2/app/login/login.component.html

@@ -0,0 +1,18 @@
+<div class="col-md-6 col-md-offset-3">
+    <h2>Login</h2>
+    <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
+        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
+            <label for="username">Username</label>
+            <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
+            <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
+        </div>
+        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
+            <label for="password">Password</label>
+            <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
+            <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
+        </div>
+        <div class="form-group">
+            <button [disabled]="loading" class="btn btn-primary">Login</button>
+        </div>
+    </form>
+</div>

spring-security-angular/client/angular2/app/login/login.component.ts

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

spring-security-angular/client/angular2/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);