BAEL-797 adding some basic UI stuff to show the different login states
This commit is contained in:
tschiman
parent
f6c21f132c
commit
bf0c42c8d6
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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!');
|
||||
}));
|
||||
});
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue