refactor(portal): Add links on navbar

gravitee-io · Apr 5, 2017 · aebf783 · aebf783
1 parent 6c351fe
commit aebf783
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 52 deletions.
diff --git a/src/components/sidenav/sidenav.html b/src/components/sidenav/sidenav.html
@@ -46,15 +46,5 @@
                     icon="{{$ctrl.reducedMode?'chevron_right':'chevron_left'}}"></ng-md-icon>
       </md-button>
     </md-list-item>
-    <md-list-item>
-      <a ui-sref="login" ng-if="!$ctrl.graviteeUser.enabled">
-        <ng-md-icon icon="login"></ng-md-icon>
-        <span ng-if="!$ctrl.reducedMode">Login</span>
-      </a>
-      <a ui-sref="logout" ng-if="$ctrl.graviteeUser.enabled">
-        <ng-md-icon icon="logout"></ng-md-icon>
-        <span ng-if="!$ctrl.reducedMode">Sign out</span>
-      </a>
-    </md-list-item>
   </md-list>
 </md-sidenav>
diff --git a/src/components/sidenav/submenu.component.ts b/src/components/sidenav/submenu.component.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import SidenavService from "./sidenav.service";
+import SidenavService from './sidenav.service';
 
 export const SubmenuComponent: ng.IComponentOptions = {
   template: require('./submenu.html'),

diff --git a/src/index.route.ts b/src/index.route.ts
@@ -16,6 +16,7 @@
 import UserService from './services/user.service';
 import LoginController from './user/login/login.controller';
 import { User } from './entities/user';
+import {IScope} from 'angular';
 
 function routerConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider: ng.ui.IUrlRouterProvider) {
   'ngInject';
@@ -43,7 +44,7 @@ function routerConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider:
             component: 'gvSidenav',
           },
           '': {
-            template: '<div ui-view layout="column" flex></div>'
+            template: '<div ui-view layout="column" style="padding-top: 50px;" flex></div>'
           }
         },
         resolve: {
@@ -100,9 +101,9 @@ function routerConfig($stateProvider: ng.ui.IStateProvider, $urlRouterProvider:
       }
     })
     .state('logout', {
-      controller: (UserService, $state: ng.ui.IStateService) => {
+      controller: (UserService: UserService, $state: ng.ui.IStateService, $rootScope: IScope) => {
         UserService.logout().then(
-          () => { $state.go('home'); }
+          () => { $rootScope.$broadcast('graviteeUserRefresh');$state.go('portal.home'); }
         );
       }
     });

diff --git a/src/portal/components/navbar/_navbar.scss b/src/portal/components/navbar/_navbar.scss
@@ -9,3 +9,12 @@ md-toolbar.topnavbar {
 .topnavbar-brand {
   margin-left: 4px;
 }
+
+.gv-navbar-link:hover, .gv-navbar-link:focus {
+  color: inherit;
+}
+
+.gv-navbar-user-link {
+  padding-top: 2px;
+  margin-top: 2px;
+}
diff --git a/...tal/components/navbar/navbar.directive.ts → ...tal/components/navbar/navbar.component.ts b/...tal/components/navbar/navbar.directive.ts → ...tal/components/navbar/navbar.component.ts
@@ -13,27 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export function NavbarDirective() {
-  'ngInject';
+import UserService from "../../../services/user.service";
+import {IScope} from "angular";
+export const NavbarComponent: ng.IComponentOptions = {
+  template: require('./navbar.html'),
+  controller: function(UserService: UserService, $scope: IScope) {
+    const vm = this;
 
-  let directive = {
-    restrict: 'E',
-    template: require('./navbar.html'),
-    scope: {
-      reducedMode: '='
-    },
-    controller: function (UserService) {
-      const vm = this;
+    $scope.$on('graviteeUserRefresh', function () {
+      UserService.current().then(function (user) {
+        vm.graviteeUser = user;
+      });
+    });
 
-      vm.$onInit = function() {
-        UserService.current().then(function (user) {
-          vm.graviteeUser = user;
-        });
-      };
-    },
-    controllerAs: 'vm',
-    bindToController: true
-  };
+    vm.$onInit = function () {
+      $scope.$emit('graviteeUserRefresh');
+    }
 
-  return directive;
-}
+    vm.hasRoles = function (roles) {
+      return UserService.isUserInRoles(roles);
+    }
+  }
+};
diff --git a/src/portal/components/navbar/navbar.html b/src/portal/components/navbar/navbar.html
@@ -17,34 +17,40 @@
 -->
 <md-toolbar class="topnavbar" layout="row" layout-align="left center">
   <div class="topnavbar-brand navigation-header">
-    <a ui-sref="management" style="text-decoration: none; color: #fff;">
+    <a ui-sref="portal.home" style="text-decoration: none; color: #fff;">
       <img style="vertical-align: middle;" width="50" height="50" ng-src="assets/GRAVITEE_LOGOclair-04.png" alt="logo"/>
     </a>
+    <md-button class="gv-navbar-link" ui-sref="portal.apis.list">{{'menu.gallery' | translate}}</md-button>
   </div>
   <span flex></span>
-  <md-button ng-if="!vm.graviteeUser.username" ui-sref="login">LOGIN</md-button>
-  <md-menu ng-if="vm.graviteeUser.username">
-    <md-button ng-click="$mdMenu.open($event)" aria-label="Open user menu">
+  <md-button ng-if="!$ctrl.graviteeUser.username" ui-sref="login">{{'menu.login' | translate}}</md-button>
+  <md-menu ng-if="$ctrl.graviteeUser.username">
+    <md-button class="gv-navbar-user-link" ng-click="$mdMenu.open($event)" aria-label="Open user menu">
       <img style="vertical-align: middle;" width="50" height="50"
-           ng-src="{{vm.graviteeUser.picture || 'assets/GRAVITEE_LOGO1-01.png'}}" alt="user-picture"/>
-      <span>Administrator</span>
+           ng-src="{{$ctrl.graviteeUser.picture || 'assets/GRAVITEE_LOGO1-01.png'}}" alt="user-picture"/>
+      <span>{{$ctrl.graviteeUser.username}}</span>
     </md-button>
     <md-menu-content width="6" style="padding-bottom: 0px;">
       <div layout="row">
         <div>
-          <img width="120" height="120" ng-src="{{vm.graviteeUser.picture || 'assets/GRAVITEE_LOGO1-01.png'}}" alt="user-picture" />
+          <img width="100" height="100" ng-src="{{$ctrl.graviteeUser.picture || 'assets/GRAVITEE_LOGO1-01.png'}}" alt="user-picture" />
         </div>
         <div layout="column">
-          <h5 style="margin-bottom: 0px;">{{vm.graviteeUser.firstname}} {{vm.graviteeUser.lastname}}</h5>
+          <h5 style="margin-bottom: 0px;">{{$ctrl.graviteeUser.firstname}} {{$ctrl.graviteeUser.lastname}}</h5>
           <h5
-            ng-if="!(vm.graviteeUser.firstname && vm.graviteeUser.lastname)">{{vm.graviteeUser.username}}</h5>
-          <small>administrator@mail.com</small>
-          <md-button style="background-color: #34A0D4; padding: 0; margin-left: 0px; margin-top: 15px; width: 110px;" class="md-raised md-primary">My Account</md-button>
+            ng-if="!($ctrl.graviteeUser.firstname && $ctrl.graviteeUser.lastname)">{{$ctrl.graviteeUser.username}}</h5>
+          <small>{{$ctrl.graviteeUser.email}}</small>
+
+          <div layout="column">
+            <a ui-sref="user">{{'menu.profile' | translate}}</a>
+            <a ui-sref="management" ng-if="$ctrl.hasRoles(['API_PUBLISHER', 'ADMIN'])">{{'menu.management' | translate}}</a>
+            <a ui-sref="management.applications.list">{{'menu.applications' | translate}}</a>
+          </div>
         </div>
       </div>
       <md-divider></md-divider>
       <div layout="row" layout-align="end end" style="background-color: #F5F5F5;">
-        <md-button ng-click="vm.logout()" style="border: 1px solid grey; font-size: 12px;">Sign out</md-button>
+        <md-button ui-sref="logout" style="border: 1px solid grey; font-size: 12px;">{{'menu.logout' | translate}}</md-button>
       </div>
     </md-menu-content>
   </md-menu>

diff --git a/src/portal/i18n/en.json b/src/portal/i18n/en.json
@@ -20,6 +20,14 @@
       "all": "See all APIs"
     }
   },
+  "menu": {
+    "login": "Login",
+    "gallery": "API gallery",
+    "profile": "My account",
+    "management": "Back office",
+    "applications": "Applications",
+    "logout": "Sign out"
+  },
   "apis": {
     "all": "All APIs",
     "filter": "Filter...",

diff --git a/src/portal/i18n/fr.json b/src/portal/i18n/fr.json
@@ -20,6 +20,14 @@
       "all": "Voir toutes les APIs"
     }
   },
+  "menu": {
+    "login": "Connexion",
+    "gallery": "Galerie d'APIs",
+    "profile": "Mon compte",
+    "management": "Back office",
+    "applications": "Applications",
+    "logout": "Déconnexion"
+  },
   "apis": {
     "all": "Toutes les APIs",
     "filter": "Filtrer...",

diff --git a/src/portal/portal.module.ts b/src/portal/portal.module.ts
@@ -39,7 +39,7 @@ import ApiSubscribeComponent from './api/subscribe/api-subscribe.component';
 import ApiPagesComponent from './api/documentation/api-pages.component';
 import ApiPageComponent from './api/documentation/api-page.component';
 
-import { NavbarDirective } from './components/navbar/navbar.directive';
+import { NavbarComponent } from './components/navbar/navbar.component';
 
 angular.module('gravitee-portal', ['ui.router', 'ngMaterial', 'pascalprecht.translate'])
   .config(portalRouterConfig)
@@ -53,7 +53,7 @@ angular.module('gravitee-portal', ['ui.router', 'ngMaterial', 'pascalprecht.tran
   .component('apiPages', ApiPagesComponent)
   .component('apiPage', ApiPageComponent)
   .component('apiSubscribe', ApiSubscribeComponent)
-  .directive('graviteeNavbar', NavbarDirective)
+  .component('graviteeNavbar', NavbarComponent)
   .filter('humanDateFilter', function () {
     return function(input) {
       if (!moment().subtract(1, 'weeks').isAfter(input)) {

diff --git a/src/services/user.service.ts b/src/services/user.service.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { User } from "../entities/user";
+import { User } from '../entities/user';
 
 class UserService {
   private baseURL: string;

diff --git a/src/user/login/login.controller.ts b/src/user/login/login.controller.ts
@@ -14,22 +14,25 @@
  * limitations under the License.
  */
 import UserService from '../../services/user.service';
+import {IScope} from 'angular';
 
 class LoginController {
   user = {};
   userCreationEnabled: boolean;
 
-  constructor(private UserService: UserService, private $state: ng.ui.IStateService, Constants) {
+  constructor(private UserService: UserService, private $state: ng.ui.IStateService, Constants, private $rootScope: IScope) {
     'ngInject';
     this.userCreationEnabled = Constants.userCreationEnabled;
     this.$state = $state;
+    this.$rootScope = $rootScope;
   }
 
   login($event: Event) {
     $event.preventDefault();
     const that = this;
     this.UserService.login(this.user).then(() => {
-      that.$state.go('management');
+      that.$rootScope.$broadcast('graviteeUserRefresh');
+      that.$state.go('portal.home');
     });
   }
 }