eugenp · maibin · Jul 13, 2018 · Jul 10, 2018 · Jul 12, 2018 · Jul 13, 2018
diff --git a/spring-security-angular/client/anguarjs/app.js b/spring-security-angular/client/anguarjs/app.js
@@ -0,0 +1,40 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('app', ['ngRoute'])
+        .config(config)
+        .run(run);
+
+    config.$inject = ['$routeProvider', '$locationProvider'];
+    function config($routeProvider, $locationProvider) {
+        $routeProvider
+            .when('/', {
+                controller: 'HomeController',
+                templateUrl: 'home/home.view.html',
+                controllerAs: 'vm'
+            })
+            .when('/login', {
+                controller: 'LoginController',
+                templateUrl: 'login/login.view.html',
+                controllerAs: 'vm'
+            })
+            .otherwise({ redirectTo: '/login' });
+    }
+
+    run.$inject = ['$rootScope', '$location', '$http', '$window'];
+    function run($rootScope, $location, $http, $window) {
+        var userData = $window.sessionStorage.getItem('userData');
+        if (userData) {
+            $http.defaults.headers.common['Authorization'] = 'Basic ' + JSON.parse(userData).authData;
+        }
+
+        $rootScope.$on('$locationChangeStart', function (event, next, current) {
+            var restrictedPage = $.inArray($location.path(), ['/login']) === -1;
+            var loggedIn = $window.sessionStorage.getItem('userData');;
+            if (restrictedPage && !loggedIn) {
+                $location.path('/login');
+            }
+        });
+    }
+})();
diff --git a/spring-security-angular/client/anguarjs/home/home.controller.js b/spring-security-angular/client/anguarjs/home/home.controller.js
@@ -0,0 +1,34 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('app')
+        .controller('HomeController', HomeController);
+
+    HomeController.$inject = ['$window', '$http', '$scope'];
+    function HomeController($window, $http, $scope) {
+        var vm = this;
+
+        vm.user = null;
+
+        initController();
+
+        function initController() {
+
+            $http({
+                url: 'http://localhost:8082/user',
+                method: "GET"
+            }).then(function (response) {
+                vm.user = response.data.name;
+            },function(error){
+                console.log(error);
+            });
+        };
+
+        $scope.logout = function(){
+            $window.sessionStorage.setItem('userData', '');
+            $http.defaults.headers.common['Authorization'] = 'Basic';
+        }
+    }
+
+})();
diff --git a/spring-security-angular/client/anguarjs/home/home.view.html b/spring-security-angular/client/anguarjs/home/home.view.html
@@ -0,0 +1,3 @@
+<h1>Hi {{vm.user}}!</h1>
+<p>You're logged in!!</p>
+<p><a href="#!/login" class="btn btn-primary" ng-click="logout()">Logout</a></p>
diff --git a/spring-security-angular/client/anguarjs/index.html b/spring-security-angular/client/anguarjs/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html ng-app="app">
+
+<head>
+</head>
+<body>
+    <div ng-view></div>
+
+    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
+    <script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
+    <script src="//code.angularjs.org/1.6.0/angular-route.min.js"></script>
+    <script src="app.js"></script>
+    <script src="home/home.controller.js"></script>
+    <script src="login/login.controller.js"></script>
+</body>
+
+</html>
diff --git a/spring-security-angular/client/anguarjs/login/login.controller.js b/spring-security-angular/client/anguarjs/login/login.controller.js
@@ -0,0 +1,38 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('app')
+        .controller('LoginController', LoginController);
+
+    LoginController.$inject = ['$location', '$window', '$http'];
+    function LoginController($location, $window, $http) {
+        var vm = this;
+        vm.login = login;
+
+        (function initController() {
+            $window.localStorage.setItem('token', '');
+        })();
+
+        function login() {
+            $http({
+                url: 'http://localhost:8082/login',
+                method: "POST",
+                data: { 'userName': vm.username, 'password': vm.password }
+            }).then(function (response) {
+                if (response.data) {
+                    var token = $window.btoa(vm.username + ':' + vm.password);
+                    var userData = {
+                        userName: vm.username,
+                        authData: token
+                    }
+                    $window.sessionStorage.setItem('userData', JSON.stringify(userData));
+                    $http.defaults.headers.common['Authorization'] = 'Basic ' + token;
+                    $location.path('/');
+                } else {
+                    alert("Authentication failed.")
+                }
+            });
+        };
+    }
+})();
diff --git a/spring-security-angular/client/anguarjs/login/login.view.html b/spring-security-angular/client/anguarjs/login/login.view.html
@@ -0,0 +1,18 @@
+<div>
+    <h2>Login</h2>
+    <form name="form" ng-submit="vm.login()" role="form">
+        <div>
+            <label for="username">Username</label>
+            <input type="text" name="username" id="username" ng-model="vm.username" required />
+            <span ng-show="form.username.$dirty && form.username.$error.required">Username is required</span>
+        </div>
+        <div>
+            <label for="password">Password</label>
+            <input type="password" name="password" id="password" ng-model="vm.password" required />
+            <span ng-show="form.password.$dirty && form.password.$error.required">Password is required</span>
+        </div>
+        <div class="form-actions">
+            <button type="submit" ng-disabled="form.$invalid || vm.dataLoading">Login</button>
+        </div>
+    </form>
+</div>
diff --git a/spring-security-angular/client/angular2/app.css b/spring-security-angular/client/angular2/app.css
@@ -0,0 +1,7 @@
+a {
+    cursor: pointer;
+}
+
+.help-block {
+    font-size: 12px;
+}
diff --git a/spring-security-angular/client/angular2/app/app.component.html b/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>
diff --git a/spring-security-angular/client/angular2/app/app.component.ts b/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 { }
diff --git a/spring-security-angular/client/angular2/app/app.module.ts b/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 { }
diff --git a/spring-security-angular/client/angular2/app/app.routing.ts b/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);
diff --git a/spring-security-angular/client/angular2/app/home/home.component.html b/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>
diff --git a/spring-security-angular/client/angular2/app/home/home.component.ts b/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', '');
+    }
+}
diff --git a/spring-security-angular/client/angular2/app/login/login.component.html b/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>
diff --git a/spring-security-angular/client/angular2/app/login/login.component.ts b/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.");
+            }
+        });
+    }
+}
diff --git a/spring-security-angular/client/angular2/app/main.ts b/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);
diff --git a/spring-security-angular/client/angular2/index.html b/spring-security-angular/client/angular2/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <base href="/" />
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+        System.import('app').catch(function (err) { console.error(err); });
+    </script>
+</head>
+<body>
+    <app>Loading...</app>
+</body>
+</html>
diff --git a/spring-security-angular/client/angular2/package.json b/spring-security-angular/client/angular2/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "angular2-quickstart",
+  "version": "1.0.0",
+  "description": "Sample of how easy and fast to start hacking with Angular2 and ng2-bootstrap",
+  "scripts": {
+    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
+    "lite": "lite-server",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "@angular/common": "2.4.4",
+    "@angular/compiler": "2.4.4",
+    "@angular/core": "2.4.4",
+    "@angular/forms": "2.4.4",
+    "@angular/http": "2.4.4",
+    "@angular/platform-browser": "2.4.4",
+    "@angular/platform-browser-dynamic": "2.4.4",
+    "@angular/router": "3.4.4",
+    "@angular/upgrade": "2.4.4",
+    "angular2-in-memory-web-api": "0.0.21",
+    "bootstrap": "^3.3.7",
+    "core-js": "^2.4.1",
+    "ng2-bootstrap": "1.3.0",
+    "reflect-metadata": "^0.1.8",
+    "rxjs": "5.0.3",
+    "systemjs": "0.20.0",
+    "zone.js": "0.7.6"
+  },
+  "devDependencies": {
+    "concurrently": "3.1.0",
+    "lite-server": "^2.2.0",
+    "typescript": "2.1.5"
+  },
+  "repository": {}
+}