Mercurial > hg > thermostat-ng > web-client
changeset 161:67492977d9ac
Add navbar user menu
Reviewed-by: jerboaa
Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-August/024613.html
| author | Andrew Azores <aazores@redhat.com> |
|---|---|
| date | Tue, 22 Aug 2017 08:52:48 -0400 |
| parents | e4392e130e4f |
| children | 94e4337238f9 |
| files | src/app/app.controller.js src/app/app.controller.spec.js src/app/components/auth/keycloak-auth.service.js src/app/components/auth/keycloak-auth.service.spec.js src/app/components/auth/stub-auth.service.js src/app/components/auth/stub-auth.service.spec.js src/app/en.locale.yaml src/app/index.html |
| diffstat | 8 files changed, 68 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/src/app/app.controller.js Mon Aug 21 09:02:56 2017 -0400 +++ b/src/app/app.controller.js Tue Aug 22 08:52:48 2017 -0400 @@ -43,6 +43,8 @@ authService.logout(); }; + $scope.username = authService.username; + } }
--- a/src/app/app.controller.spec.js Mon Aug 21 09:02:56 2017 -0400 +++ b/src/app/app.controller.spec.js Tue Aug 22 08:52:48 2017 -0400 @@ -106,4 +106,30 @@ }); }); + describe('$scope.username', () => { + let scope, authService; + beforeEach(inject(($controller, $rootScope) => { + 'ngInject'; + + scope = $rootScope.$new(); + authService = { + status: sinon.stub().returns(true), + login: sinon.spy(), + logout: sinon.spy(), + username: 'fake-username' + }; + + $controller('AppController', { + $scope: scope, + environment: 'testing', + authService: authService + }); + })); + + it('should be set according to authService username', () => { + scope.should.have.ownProperty('username'); + scope.username.should.equal(authService.username); + }); + }); + });
--- a/src/app/components/auth/keycloak-auth.service.js Mon Aug 21 09:02:56 2017 -0400 +++ b/src/app/components/auth/keycloak-auth.service.js Tue Aug 22 08:52:48 2017 -0400 @@ -53,4 +53,8 @@ return this.keycloak.token; } + get username () { + return this.keycloak.idTokenParsed.preferred_username; + } + }
--- a/src/app/components/auth/keycloak-auth.service.spec.js Mon Aug 21 09:02:56 2017 -0400 +++ b/src/app/components/auth/keycloak-auth.service.spec.js Tue Aug 22 08:52:48 2017 -0400 @@ -43,7 +43,10 @@ logout: logout, updateToken: refresh, authenticated: authenticated, - token: 'fakeToken' + token: 'fakeToken', + idTokenParsed: { + 'preferred_username': 'fakeUsername' + } }; keycloakAuthService = new KeycloakAuthService(mockCloak); }); @@ -91,4 +94,10 @@ res.should.equal('fakeToken'); }); }); + + describe('#get username()', () => { + it('should delegate to Keycloak object', () => { + keycloakAuthService.username.should.equal('fakeUsername'); + }); + }); });
--- a/src/app/components/auth/stub-auth.service.js Mon Aug 21 09:02:56 2017 -0400 +++ b/src/app/components/auth/stub-auth.service.js Tue Aug 22 08:52:48 2017 -0400 @@ -68,4 +68,8 @@ return 'stubAuthMockToken'; } + get username () { + return 'test-user'; + } + }
--- a/src/app/components/auth/stub-auth.service.spec.js Mon Aug 21 09:02:56 2017 -0400 +++ b/src/app/components/auth/stub-auth.service.spec.js Tue Aug 22 08:52:48 2017 -0400 @@ -119,4 +119,10 @@ stubAuthService.token.should.equal('stubAuthMockToken'); }); }); + + describe('#get username()', () => { + it('should return "test-user"', () => { + stubAuthService.username.should.equal('test-user'); + }); + }); });
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/app/en.locale.yaml Tue Aug 22 08:52:48 2017 -0400 @@ -0,0 +1,4 @@ +navbar: + TOGGLE_NAV: Toggle Navigation + USERNAME: Username + LOGOUT: Log Out
--- a/src/app/index.html Mon Aug 21 09:02:56 2017 -0400 +++ b/src/app/index.html Tue Aug 22 08:52:48 2017 -0400 @@ -16,9 +16,20 @@ <a ui-sref="landing" class="navbar-brand"> <img id="brandLogoImg" class="navbar-brand-icon" src="~images/thermostat_logo_white_600px.png" height="57" alt="Thermostat"/> </a> - <button hidden id="logoutButton" ng-show="loginStatus();" class="navbar-text btn btn-primary btn-sm" ng-click="logout()">Logout</button> <p hidden id="envHeader" class="navbar-text label label-info infotip">{{env}}</p> </div> + <nav class="collapse navbar-collapse"> + <ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility"> + <li hidden ng-show="loginStatus()" class="dropdown"> + <a class="dropdown-toggle nav-item-iconic" id="userDropwdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> + <span translate-attr="{title: 'navbar.USERNAME'}" class="fa pficon-user"></span> {{username}} <span class="caret"></span> + </a> + <ul class="dropdown-menu" aria-labelledby="userDropwdown"> + <li><a id="logoutButton" ng-click="logout()" style="cursor: pointer; cursor: hand" translate>navbar.LOGOUT</a></li> + </ul> + </li> + </ul> + </nav> </nav> </div>