Cambios de estilo boton Google 2.0

package-lock.json

@@ -4368,16 +4368,6 @@
       "integrity": "sha512-MkUl3szxXolQ2scI1PM14WOT951KnaTNJ0eMKg7WzOI4kvSxyNo/Cygx4LOBNhwyINhAuSQpJW1rYD9aBSxGaw==",
       "dev": true
     },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -7961,13 +7951,6 @@
         "flat-cache": "^3.0.4"
       }
     },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "dev": true,
-      "optional": true
-    },
     "filelist": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz",
@@ -12947,13 +12930,6 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
-    "nan": {
-      "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
-      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
-      "dev": true,
-      "optional": true
-    },
     "nanoid": {
       "version": "3.1.23",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
@@ -19645,11 +19621,7 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true,
+          "optional": true
-          "requires": {
-            "bindings": "^1.5.0",
-            "nan": "^2.12.1"
-          }
         },
         "glob-parent": {
           "version": "3.1.0",

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

@@ -129,31 +129,49 @@
               </div>
             </form>
 
-            <div class="mb-3 mb-0">
+            <!-- <div class="google-btn mb-3 mb-0"  >
+              <div class="google-icon-wrapper">
+                <img class="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"/>
+              </div>
+              <p  type="button" class="btn-text" onclick="authenticacionGoogle()"><b>Iniciar con Google</b></p>
+            </div>
+-->
+
+            <div class="google-btn mb-3 mb-0">
+              <div class="google-icon-wrapper">
+                <img class="google-icon" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
+              </div>
+              <button class="btn-text" (click)="signInWithGoogle()">
+                <i>Iniciar con Google</i>
+              </button>
+            </div>
+
+            <!--<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>
-          <!-- end card-body -->
+          <!-- end card -->
-        </div>
-        <!-- end card -->
 
-        <div class="row mt-3">
+          <div class="row mt-3">
-          <div class="col-12 text-center">
+            <div class="col-12 text-center">
-            <p class="text-muted">
+              <p class="text-muted">
-              ¿Listo para explorar?
+                ¿Listo para explorar?
-              <a routerLink="/account/register" class="text-muted ms-1"><b>Crea una cuenta</b></a>
+                <a routerLink="/account/register" class="text-muted ms-1"><b>Crea una cuenta</b></a>
-            </p>
+              </p>
+            </div>
+            <!-- end col -->
           </div>
-          <!-- end col -->
+          <!-- end row -->
         </div>
-        <!-- end row -->
+        <!-- end col -->
       </div>
-      <!-- end col -->
+      <!-- end row -->
     </div>
-    <!-- end row -->
+    <!-- end container -->
   </div>
-  <!-- end container -->
+  <!-- end page -->
 </div>
-<!-- end page -->

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

@@ -1,3 +1,47 @@
 body {
   background-color: #f2f2f2 !important;
 }
+
+$white: #fff;
+$google-blue: #4285f4;
+$button-active-blue: #1669f2;
+
+.google-btn {
+  width: 184px;
+  height: 42px;
+  background-color: $google-blue;
+  border-radius: 2px;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
+  .google-icon-wrapper {
+    position: absolute;
+    margin-top: 1px;
+    margin-left: 1px;
+    width: 40px;
+    height: 40px;
+    border-radius: 2px;
+    background-color: $white;
+  }
+  .google-icon {
+    position: absolute;
+    margin-top: 11px;
+    margin-left: 11px;
+    width: 18px;
+    height: 18px;
+  }
+  .btn-text {
+    float: right;
+    margin: 11px 11px 0 0;
+    color: $white;
+    font-size: 14px;
+    letter-spacing: 0.2px;
+    font-family: 'Roboto';
+  }
+  &:hover {
+    box-shadow: 0 0 6px $google-blue;
+  }
+  &:active {
+    background: $button-active-blue;
+  }
+}
+
+@import url(https://fonts.googleapis.com/css?family=Roboto:500);

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

@@ -91,6 +91,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
       () => {
         this.authenticationError = false;
         if (!this.router.getCurrentNavigation()) {
+          window.localStorage.setItem('IsGoogle', 'true');
           // There were no routing during login (eg from navigationToStoredUrl)
           this.router.navigate(['']);
         }

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

@@ -1,16 +0,0 @@
-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

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, ReplaySubject } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class UsuarioGoogleLogInService {
-  constructor() {}
-}

src/main/webapp/index.html

@@ -13,6 +13,9 @@
     <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>
+    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
     <!-- jhipster-needle-add-resources-to-root - JHipster will add new resources here -->
   </head>
   <body>