add angular2-product example

examples/demo-template/angular2-product-app/pom.xml

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Copyright 2016 Red Hat, Inc. and/or its affiliates
+  ~ and other contributors as indicated by the @author tags.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+    <parent>
+        <artifactId>keycloak-examples-demo-parent</artifactId>
+        <groupId>org.keycloak</groupId>
+        <version>1.9.0.Final-SNAPSHOT</version>
+    </parent>
+
+    <modelVersion>4.0.0</modelVersion>
+    <groupId>org.keycloak.example.demo</groupId>
+    <artifactId>angular2-product-example</artifactId>
+    <packaging>war</packaging>
+    <name>Angular2 Product Portal JS</name>
+    <description/>
+
+    <build>
+        <finalName>angular2-product</finalName>
+        <plugins>
+            <plugin>
+                <groupId>org.jboss.as.plugins</groupId>
+                <artifactId>jboss-as-maven-plugin</artifactId>
+                <configuration>
+                    <skip>false</skip>
+                </configuration>
+            </plugin>
+            <plugin>
+                <groupId>org.wildfly.plugins</groupId>
+                <artifactId>wildfly-maven-plugin</artifactId>
+                <configuration>
+                    <skip>false</skip>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+</project>

examples/demo-template/angular2-product-app/src/main/webapp/app/app.js

@@ -0,0 +1,69 @@
+System.register(['angular2/http', 'angular2/core', 'rxjs/Observable', './keycloak'], function(exports_1) {
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var http_1, core_1, Observable_1, keycloak_1;
+    var AppComponent;
+    return {
+        setters:[
+            function (http_1_1) {
+                http_1 = http_1_1;
+            },
+            function (core_1_1) {
+                core_1 = core_1_1;
+            },
+            function (Observable_1_1) {
+                Observable_1 = Observable_1_1;
+            },
+            function (keycloak_1_1) {
+                keycloak_1 = keycloak_1_1;
+            }],
+        execute: function() {
+            AppComponent = (function () {
+                function AppComponent(_kc, http) {
+                    this._kc = _kc;
+                    this.http = http;
+                    this.products = [];
+                }
+                AppComponent.prototype.logout = function () {
+                    this._kc.logout();
+                };
+                AppComponent.prototype.reloadData = function () {
+                    //angular dont have http interceptor yet
+                    var _this = this;
+                    this._kc.getToken().then(function (token) {
+                        var headers = new http_1.Headers({
+                            'Accept': 'application/json',
+                            'Authorization': 'Bearer ' + token
+                        });
+                        var options = new http_1.RequestOptions({ headers: headers });
+                        _this.http.get('/database/products', options)
+                            .map(function (res) { return res.json(); })
+                            .subscribe(function (prods) { return _this.products = prods; }, function (error) { return console.log(error); });
+                    }, function (error) {
+                        console.log(error);
+                    });
+                };
+                AppComponent.prototype.handleError = function (error) {
+                    console.error(error);
+                    return Observable_1.Observable.throw(error.json().error || 'Server error');
+                };
+                AppComponent = __decorate([
+                    core_1.Component({
+                        selector: 'my-app',
+                        template: "\n<div id=\"content-area\" class=\"col-md-9\" role=\"main\">\n    <div id=\"content\">\n        <h1>Angular2 Product (Beta)</h1>\n        <h2><span>Products</span></h2>\n       \n        <button type=\"button\" (click)=\"logout()\">Sign Out</button>\n        <button type=\"button\" (click)=\"reloadData()\">Reload</button>\n        <table class=\"table\" [hidden]=\"!products.length\">\n            <thead>\n            <tr>\n                <th>Product Listing</th>\n            </tr>\n            </thead>\n            <tbody>\n            <tr *ngFor=\"#p of products\">\n                <td>{{p}}</td>\n            </tr>\n            </tbody>\n        </table>\n    </div>\n</div>\n"
+                    }), 
+                    __metadata('design:paramtypes', [keycloak_1.KeycloakService, http_1.Http])
+                ], AppComponent);
+                return AppComponent;
+            })();
+            exports_1("AppComponent", AppComponent);
+        }
+    }
+});

examples/demo-template/angular2-product-app/src/main/webapp/app/app.ts

@@ -0,0 +1,78 @@
+import {Http, Headers,
+    RequestOptions, Response}   from 'angular2/http';
+import {Component}              from 'angular2/core';
+import {Observable}             from 'rxjs/Observable';
+import {KeycloakService}        from './keycloak';
+
+
+
+
+@Component({
+    selector: 'my-app',
+    template:
+`
+<div id="content-area" class="col-md-9" role="main">
+    <div id="content">
+        <h1>Angular2 Product (Beta)</h1>
+        <h2><span>Products</span></h2>
+       
+        <button type="button" (click)="logout()">Sign Out</button>
+        <button type="button" (click)="reloadData()">Reload</button>
+        <table class="table" [hidden]="!products.length">
+            <thead>
+            <tr>
+                <th>Product Listing</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="#p of products">
+                <td>{{p}}</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+`
+})
+export class AppComponent {
+
+    constructor(private _kc:KeycloakService, private http:Http){ }
+
+    products : string[] = [];
+
+    logout(){
+        this._kc.logout();
+    }
+
+    reloadData() {
+        //angular dont have http interceptor yet
+
+        this._kc.getToken().then(
+            token=>{
+                let headers = new Headers({
+                        'Accept': 'application/json',
+                        'Authorization': 'Bearer ' + token
+                    });
+
+                let options = new RequestOptions({ headers: headers });
+
+                this.http.get('/database/products', options)
+                .map(res => <string[]> res.json())
+                .subscribe(
+                     prods => this.products = prods,
+                     error =>  console.log(error));
+
+            },
+            error=>{
+                console.log(error);
+            }
+        );
+
+    }
+
+    private handleError (error: Response) {
+        console.error(error);
+        return Observable.throw(error.json().error || 'Server error');
+    }
+
+}

examples/demo-template/angular2-product-app/src/main/webapp/app/keycloak.js

@@ -0,0 +1,66 @@
+System.register(['angular2/core'], function(exports_1) {
+    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    var __metadata = (this && this.__metadata) || function (k, v) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+    };
+    var core_1;
+    var KeycloakService;
+    return {
+        setters:[
+            function (core_1_1) {
+                core_1 = core_1_1;
+            }],
+        execute: function() {
+            KeycloakService = (function () {
+                function KeycloakService() {
+                }
+                KeycloakService.init = function () {
+                    var keycloakAuth = new Keycloak('keycloak.json');
+                    KeycloakService.auth.loggedIn = false;
+                    return new Promise(function (resolve, reject) {
+                        keycloakAuth.init({ onLoad: 'login-required' })
+                            .success(function () {
+                            KeycloakService.auth.loggedIn = true;
+                            KeycloakService.auth.authz = keycloakAuth;
+                            KeycloakService.auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/demo/tokens/logout?redirect_uri=/angular2-product/index.html";
+                            resolve(null);
+                        })
+                            .error(function () {
+                            reject(null);
+                        });
+                    });
+                };
+                KeycloakService.prototype.logout = function () {
+                    console.log('*** LOGOUT');
+                    KeycloakService.auth.loggedIn = false;
+                    KeycloakService.auth.authz = null;
+                    window.location.href = KeycloakService.auth.logoutUrl;
+                };
+                KeycloakService.prototype.getToken = function () {
+                    return new Promise(function (resolve, reject) {
+                        if (KeycloakService.auth.authz.token) {
+                            KeycloakService.auth.authz.updateToken(5).success(function () {
+                                resolve(KeycloakService.auth.authz.token);
+                            })
+                                .error(function () {
+                                reject('Failed to refresh token');
+                            });
+                        }
+                    });
+                };
+                KeycloakService.auth = {};
+                KeycloakService = __decorate([
+                    core_1.Injectable(), 
+                    __metadata('design:paramtypes', [])
+                ], KeycloakService);
+                return KeycloakService;
+            })();
+            exports_1("KeycloakService", KeycloakService);
+        }
+    }
+});

examples/demo-template/angular2-product-app/src/main/webapp/app/keycloak.ts

@@ -0,0 +1,49 @@
+import {Injectable} from 'angular2/core';
+
+
+declare var Keycloak: any;
+
+@Injectable()
+export class KeycloakService {
+
+    static auth : any = {};
+
+    static init() : Promise<any>{
+        let keycloakAuth : any = new Keycloak('keycloak.json');
+        KeycloakService.auth.loggedIn = false;
+
+        return new Promise((resolve,reject)=>{
+            keycloakAuth.init({ onLoad: 'login-required' })
+                .success( () => {
+                    KeycloakService.auth.loggedIn = true;
+                    KeycloakService.auth.authz = keycloakAuth;
+                    KeycloakService.auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/demo/tokens/logout?redirect_uri=/angular2-product/index.html";
+                    resolve(null);
+                })
+                .error(()=> {
+                    reject(null);
+                });
+        });
+    }
+
+    logout(){
+        console.log('*** LOGOUT');
+        KeycloakService.auth.loggedIn = false;
+        KeycloakService.auth.authz = null;
+
+        window.location.href = KeycloakService.auth.logoutUrl;
+    }
+
+    getToken(): Promise<string>{
+        return new Promise<string>((resolve,reject)=>{
+            if (KeycloakService.auth.authz.token) {
+                KeycloakService.auth.authz.updateToken(5).success(function() {
+                    resolve(<string>KeycloakService.auth.authz.token);
+                })
+                .error(function() {
+                    reject('Failed to refresh token');
+                });
+            }
+        });
+    }
+}

examples/demo-template/angular2-product-app/src/main/webapp/app/main.js

@@ -0,0 +1,26 @@
+System.register(['rxjs/Rx', 'angular2/platform/browser', 'angular2/http', './keycloak', './app'], function(exports_1) {
+    var browser_1, http_1, keycloak_1, app_1;
+    return {
+        setters:[
+            function (_1) {},
+            function (browser_1_1) {
+                browser_1 = browser_1_1;
+            },
+            function (http_1_1) {
+                http_1 = http_1_1;
+            },
+            function (keycloak_1_1) {
+                keycloak_1 = keycloak_1_1;
+            },
+            function (app_1_1) {
+                app_1 = app_1_1;
+            }],
+        execute: function() {
+            keycloak_1.KeycloakService.init().then(function (o) {
+                browser_1.bootstrap(app_1.AppComponent, [http_1.HTTP_BINDINGS, keycloak_1.KeycloakService]);
+            }, function (x) {
+                window.location.reload();
+            });
+        }
+    }
+});

examples/demo-template/angular2-product-app/src/main/webapp/app/main.ts

@@ -0,0 +1,14 @@
+import 'rxjs/Rx';
+import {bootstrap}    from 'angular2/platform/browser';
+import {HTTP_BINDINGS} from 'angular2/http';
+import {KeycloakService} from './keycloak';
+import {AppComponent} from './app';
+
+KeycloakService.init().then(
+    o=>{
+        bootstrap(AppComponent,[HTTP_BINDINGS, KeycloakService]);
+    },
+    x=>{
+        window.location.reload();
+    }
+);