Add logged in user profile icon and name on sidebar

src/main/webapp/app/account/settings/settings.component.spec.ts

@@ -18,6 +18,7 @@ describe('Component Tests', () => {
     let fixture: ComponentFixture<SettingsComponent>;
     let mockAccountService: AccountService;
     const account: Account = {
+      id: 0,
       firstName: 'John',
       lastName: 'Doe',
       activated: true,

src/main/webapp/app/core/auth/account.model.ts

@@ -1,5 +1,6 @@
 export class Account {
   constructor(
+    public id: number,
     public activated: boolean,
     public authorities: string[],
     public email: string,

src/main/webapp/app/core/auth/account.service.spec.ts

@@ -19,6 +19,7 @@ import { AccountService } from './account.service';
 
 function accountWithAuthorities(authorities: string[]): Account {
   return {
+    id: 0,
     activated: true,
     authorities,
     email: '',

src/main/webapp/app/home/home.component.spec.ts

@@ -17,6 +17,7 @@ describe('Component Tests', () => {
     let mockAccountService: AccountService;
     let mockRouter: Router;
     const account: Account = {
+      id: 0,
       activated: true,
       authorities: [],
       email: '',

src/main/webapp/app/layouts/sidebar/sidebar.component.html

@@ -9,12 +9,12 @@
 <div class="sidebar-wrapper">
   <div class="user" routerLink="/account/settings">
     <div class="photo mb-2">
-      <img src="../../../content/profile_icons/C2.png" />
+      <img src="../../../content/profile_icons/C{{ usuarioExtra?.iconoPerfil }}.png" />
     </div>
     <div class="info">
       <a data-toggle="collapse" class="collapsed">
         <span>
-          Pablo Bonilla
+          {{ usuarioExtra?.nombre }}
           <!-- <b class="caret"></b> -->
         </span>
       </a>

src/main/webapp/app/layouts/sidebar/sidebar.component.ts

@@ -8,6 +8,8 @@ import { LoginService } from 'app/login/login.service';
 import { ProfileService } from 'app/layouts/profiles/profile.service';
 import { SessionStorageService } from 'ngx-webstorage';
 import { Router } from '@angular/router';
+import { UsuarioExtraService } from 'app/entities/usuario-extra/service/usuario-extra.service';
+import { UsuarioExtra } from 'app/entities/usuario-extra/usuario-extra.model';
 
 @Component({
   selector: 'jhi-sidebar',
@@ -24,12 +26,15 @@ export class SidebarComponent {
   version = '';
   account: Account | null = null;
 
+  usuarioExtra: UsuarioExtra | null = null;
+
   constructor(
     private loginService: LoginService,
     private sessionStorageService: SessionStorageService,
     private accountService: AccountService,
     private profileService: ProfileService,
-    private router: Router
+    private router: Router,
+    private usuarioExtraService: UsuarioExtraService
   ) {
     if (VERSION) {
       this.version = VERSION.toLowerCase().startsWith('v') ? VERSION : 'v' + VERSION;
@@ -48,7 +53,16 @@ export class SidebarComponent {
       this.inProduction = profileInfo.inProduction;
       this.openAPIEnabled = profileInfo.openAPIEnabled;
     });
-    this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
+
+    // Get jhi_user and usuario_extra information
+    this.accountService.getAuthenticationState().subscribe(account => {
+      this.account = account;
+      if (account !== null) {
+        this.usuarioExtraService.find(account.id).subscribe(usuarioExtra => {
+          this.usuarioExtra = usuarioExtra.body;
+        });
+      }
+    });
   }
 
   ngAfterViewInit() {}