BAEL-797 adding some basic UI stuff to show the different login states

spring-cloud/spring-cloud-bootstrap/gateway/pom.xml

@@ -100,7 +100,7 @@
                 <artifactId>maven-antrun-plugin</artifactId>
                 <executions>
                     <execution>
-                        <phase>compile</phase>
+                        <phase>generate-resources</phase>
                         <configuration>
                             <tasks>
                                 <exec executable="cmd" osfamily="windows" dir="${project.basedir}/src/main/angular/ui">

spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.html

@@ -20,14 +20,15 @@
     <div *ngIf="loginFailed">
       <div class="alert alert-warning">Login Failed</div>
     </div>
-
   </div>
 </nav>
 
 <div class="jumbotron">
   <div class="container">
     <h1>Book Rater App</h1>
-    <p class="lead">Keep track of all the latest books and their ratings.</p>
+    <p *ngIf="!principal.authenticated" class="lead">Anyone can view the books.</p>
+    <p *ngIf="principal.authenticated && !principal.isAdmin()" class="lead">Users can view and create ratings</p>
+    <p *ngIf="principal.isAdmin()"  class="lead">Admins can do anything!</p>
   </div>
 </div>
 

spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.spec.ts

@@ -1,31 +0,0 @@
-import {TestBed, async} from "@angular/core/testing";
-import {AppComponent} from "./app.component";
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-
-  it(`should have as title 'app works!'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app works!');
-  }));
-
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('app works!');
-  }));
-});

spring-cloud/spring-cloud-bootstrap/gateway/src/main/angular/ui/src/app/app.component.ts

@@ -15,23 +15,13 @@ export class AppComponent {
     username: '',
     password: ''
   };
-
   selectedBook: Book = null;
-
-  private username: String = '';
-  private password: String = '';
-
-
   principal: Principal = new Principal(false, [], null);
-  // principal: Principal = new Principal(true, [new Authority("ROLE_USER")], {username: 'user', password: 'password'});
-
   loginFailed: boolean = false;
 
   constructor(private httpService: HttpService){}
 
-  ngOnInit(): void {
+  ngOnInit(): void {}
-
-  }
 
   onLogin(form: NgForm) {
     this.loginFailed = false;

spring-cloud/spring-cloud-bootstrap/gateway/src/main/resources/public/main.bundle.js

@@ -75,7 +75,7 @@ module.exports = module.exports.toString();
 /***/ 149:
 /***/ (function(module, exports) {
 
-module.exports = "<nav class=\"navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse\">\n  <button class=\"navbar-toggler navbar-toggler-right\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n    <span class=\"navbar-toggler-icon\"></span>\n  </button>\n  <a class=\"navbar-brand\" href=\"#\">Book Rater <span *ngIf=\"principal.isAdmin()\">Admin</span></a>\n  <div class=\"collapse navbar-collapse\" id=\"navbarCollapse\">\n    <ul class=\"navbar-nav mr-auto\">\n    </ul>\n    <div *ngIf=\"!principal.authenticated; then loginForm else loginMessage\"></div>\n    <ng-template #loginForm>\n      <form (ngSubmit)=\"onLogin(f)\" class=\"form-inline mt-2 mt-md-0\" #f=\"ngForm\">\n      <input name=\"username\" [(ngModel)]=\"credentials.username\" required class=\"form-control mr-sm-2\" type=\"text\" placeholder=\"Username\">\n      <input name=\"password\" [(ngModel)]=\"credentials.password\" required class=\"form-control mr-sm-2\" type=\"password\" placeholder=\"Password\">\n      <button class=\"btn btn-outline-success my-2 my-sm-0\" type=\"submit\" [disabled]=\"!f.valid\">Login</button>\n    </form>\n    </ng-template>\n    <ng-template #loginMessage>\n      <button type=\"button\" class=\"btn btn-link\" (click)=\"onLogout()\">Logout</button>\n    </ng-template>\n    <div *ngIf=\"loginFailed\">\n      <div class=\"alert alert-warning\">Login Failed</div>\n    </div>\n\n  </div>\n</nav>\n\n<div class=\"jumbotron\">\n  <div class=\"container\">\n    <h1>Book Rater App</h1>\n    <p class=\"lead\">Keep track of all the latest books and their ratings.</p>\n  </div>\n</div>\n\n<section class=\"books\">\n  <div class=\"container\">\n    <div class=\"row\">\n      <div class=\"col-md\">\n        <div class=\"row\">\n          <div class=\"col-md-12\">\n            <app-book-list [principal]=\"principal\" (onBookSelected)=\"selectBook($event)\"></app-book-list>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"selectedBook != null\" class=\"col-md-3\">\n        <app-book-detail [selectedBook]=\"selectedBook\" [principal]=\"principal\" (closeBook)=\"closeBookDetail()\"></app-book-detail>\n      </div>\n    </div>\n  </div>\n</section>\n"
+module.exports = "<nav class=\"navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse\">\n  <button class=\"navbar-toggler navbar-toggler-right\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n    <span class=\"navbar-toggler-icon\"></span>\n  </button>\n  <a class=\"navbar-brand\" href=\"#\">Book Rater <span *ngIf=\"principal.isAdmin()\">Admin</span></a>\n  <div class=\"collapse navbar-collapse\" id=\"navbarCollapse\">\n    <ul class=\"navbar-nav mr-auto\">\n    </ul>\n    <div *ngIf=\"!principal.authenticated; then loginForm else loginMessage\"></div>\n    <ng-template #loginForm>\n      <form (ngSubmit)=\"onLogin(f)\" class=\"form-inline mt-2 mt-md-0\" #f=\"ngForm\">\n      <input name=\"username\" [(ngModel)]=\"credentials.username\" required class=\"form-control mr-sm-2\" type=\"text\" placeholder=\"Username\">\n      <input name=\"password\" [(ngModel)]=\"credentials.password\" required class=\"form-control mr-sm-2\" type=\"password\" placeholder=\"Password\">\n      <button class=\"btn btn-outline-success my-2 my-sm-0\" type=\"submit\" [disabled]=\"!f.valid\">Login</button>\n    </form>\n    </ng-template>\n    <ng-template #loginMessage>\n      <button type=\"button\" class=\"btn btn-link\" (click)=\"onLogout()\">Logout</button>\n    </ng-template>\n    <div *ngIf=\"loginFailed\">\n      <div class=\"alert alert-warning\">Login Failed</div>\n    </div>\n  </div>\n</nav>\n\n<div class=\"jumbotron\">\n  <div class=\"container\">\n    <h1>Book Rater App</h1>\n    <p *ngIf=\"!principal.authenticated\" class=\"lead\">Anyone can view the books.</p>\n    <p *ngIf=\"principal.authenticated && !principal.isAdmin()\" class=\"lead\">Users can view and create ratings</p>\n    <p *ngIf=\"principal.isAdmin()\"  class=\"lead\">Admins can do anything!</p>\n  </div>\n</div>\n\n<section class=\"books\">\n  <div class=\"container\">\n    <div class=\"row\">\n      <div class=\"col-md\">\n        <div class=\"row\">\n          <div class=\"col-md-12\">\n            <app-book-list [principal]=\"principal\" (onBookSelected)=\"selectBook($event)\"></app-book-list>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"selectedBook != null\" class=\"col-md-3\">\n        <app-book-detail [selectedBook]=\"selectedBook\" [principal]=\"principal\" (closeBook)=\"closeBookDetail()\"></app-book-detail>\n      </div>\n    </div>\n  </div>\n</section>\n"
 
 /***/ }),
 
@@ -308,14 +308,10 @@ var AppComponent = (function () {
             password: ''
         };
         this.selectedBook = null;
-        this.username = '';
-        this.password = '';
         this.principal = new __WEBPACK_IMPORTED_MODULE_1__principal__["a" /* Principal */](false, [], null);
-        // principal: Principal = new Principal(true, [new Authority("ROLE_USER")], {username: 'user', password: 'password'});
         this.loginFailed = false;
     }
-    AppComponent.prototype.ngOnInit = function () {
+    AppComponent.prototype.ngOnInit = function () { };
-    };
     AppComponent.prototype.onLogin = function (form) {
         var _this = this;
         this.loginFailed = false;