Merge branch 'dev' into feature/US-01

package.json

@@ -80,6 +80,8 @@
     "@ng-bootstrap/ng-bootstrap": "9.1.3",
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "6.0.0",
+    "@types/gapi.auth2": "0.0.54",
+    "angularx-social-login": "^4.0.1",
     "bootstrap": "4.6.0",
     "dayjs": "1.10.5",
     "ngx-infinite-scroll": "10.0.1",

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/app.module.ts

@@ -17,6 +17,10 @@ import { SharedModule } from 'app/shared/shared.module';
 import { AppRoutingModule } from './app-routing.module';
 import { HomeModule } from './home/home.module';
 import { EntityRoutingModule } from './entities/entity-routing.module';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
+import { GoogleLoginProvider } from 'angularx-social-login';
 // jhipster-needle-angular-add-module-import JHipster will add new module here
 import { NgbDateDayjsAdapter } from './config/datepicker-adapter';
 import { fontAwesomeIcons } from './config/font-awesome-icons';
@@ -37,6 +41,7 @@ import { SidebarComponent } from './layouts/sidebar/sidebar.component';
     // jhipster-needle-angular-add-module JHipster will add new module here
     EntityRoutingModule,
     AppRoutingModule,
+    SocialLoginModule,
     // Set this to true to enable service worker (PWA)
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),
     HttpClientModule,
@@ -58,6 +63,18 @@ import { SidebarComponent } from './layouts/sidebar/sidebar.component';
     { provide: LOCALE_ID, useValue: 'es' },
     { provide: NgbDateAdapter, useClass: NgbDateDayjsAdapter },
     httpInterceptorProviders,
+    {
+      provide: 'SocialAuthServiceConfig',
+      useValue: {
+        autoLogin: false,
+        providers: [
+          {
+            id: GoogleLoginProvider.PROVIDER_ID,
+            provider: new GoogleLoginProvider('178178891217-b517thad8f15d4at2vk2410v7a09dcvt.apps.googleusercontent.com'),
+          },
+        ],
+      } as SocialAuthServiceConfig,
+    },
   ],
   declarations: [MainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, FooterComponent, SidebarComponent],
   bootstrap: [MainComponent],

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() {}

src/main/webapp/app/login/login.component.html

@@ -128,6 +128,12 @@
                 <button type="submit" class="btn btn-primary w-100" data-cy="submit">Iniciar sesion</button>
               </div>
             </form>
+
+            <div class="mb-3 mb-0">
+              <button class="btn" (click)="signInWithGoogle()">
+                <i class="fa fa-Google">Iniciar con Google</i>
+              </button>
+            </div>
           </div>
           <!-- end card-body -->
         </div>

src/main/webapp/app/login/login.component.ts

@@ -4,6 +4,8 @@ import { Router } from '@angular/router';
 
 import { LoginService } from 'app/login/login.service';
 import { AccountService } from 'app/core/auth/account.service';
+import { SocialAuthService } from 'angularx-social-login';
+import { GoogleLoginProvider } from 'angularx-social-login';
 
 @Component({
   selector: 'jhi-login',
@@ -26,10 +28,12 @@ export class LoginComponent implements OnInit, AfterViewInit {
     private accountService: AccountService,
     private loginService: LoginService,
     private router: Router,
-    private fb: FormBuilder
+    private fb: FormBuilder,
+    private authService: SocialAuthService
   ) {}
 
   ngOnInit(): void {
+    //console.log("Google ID: "+ GoogleLoginProvider.PROVIDER_ID)
     // if already authenticated then navigate to home page
     this.accountService.identity().subscribe(() => {
       if (this.accountService.isAuthenticated()) {
@@ -42,6 +46,10 @@ export class LoginComponent implements OnInit, AfterViewInit {
     this.username.nativeElement.focus();
   }
 
+  signInWithGoogle(): void {
+    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
+  }
+
   login(): void {
     this.loginService
       .login({

src/main/webapp/app/login/usuario-google-log-in.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UsuarioGoogleLogInService } from './usuario-google-log-in.service';
+
+describe('UsuarioGoogleLogInService', () => {
+  let service: UsuarioGoogleLogInService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UsuarioGoogleLogInService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/main/webapp/app/login/usuario-google-log-in.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UsuarioGoogleLogInService {
+  constructor(private auth2: gapi.auth2.GoogleAuth, private subject: ReplaySubject<gapi.auth2.GoogleUser>) {
+    gapi.load('auth2', () => {
+      this.auth2 = gapi.auth2.init({
+        client_id: '178178891217-b517thad8f15d4at2vk2410v7a09dcvt.apps.googleusercontent.com',
+      });
+    });
+  }
+
+  public sigIn() {
+    this.auth2
+      .signIn({
+        //
+      })
+      .then(user => {
+        this.subject.next(user);
+      })
+      .catch(() => {
+        this.subject.next(); //NULL
+      });
+  }
+
+  public observable(): Observable<gapi.auth2.GoogleUser> {
+    return this.subject.asObservable();
+  }
+}

src/main/webapp/index.html

@@ -12,6 +12,7 @@
     <link rel="icon" href="favicon.ico" />
     <link rel="manifest" href="manifest.webapp" />
     <link rel="stylesheet" href="content/css/loading.css" />
+    <script src="https://apis.google.com/js/platform.js" async defer></script>
     <!-- jhipster-needle-add-resources-to-root - JHipster will add new resources here -->
   </head>
   <body>

tsconfig.app.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./target/classes/static/app",
-    "types": []
+    "types": ["gapi", "gapi.auth2"]
   },
   "files": ["src/main/webapp/main.ts", "src/main/webapp/polyfills.ts"],
   "include": ["src/main/webapp/**/*.d.ts"]