Cambios de estilo boton Google 2.0

This commit is contained in:
Paola 2021-07-09 19:10:24 -06:00
commit 3ab2c123f1
7 changed files with 83 additions and 70 deletions

30
package-lock.json generated
View File

@ -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,
"requires": {
"bindings": "^1.5.0",
"nan": "^2.12.1"
}
"optional": true
},
"glob-parent": {
"version": "3.1.0",

View File

@ -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 -->
</div>
<!-- end card -->
<!-- end card -->
<div class="row mt-3">
<div class="col-12 text-center">
<p class="text-muted">
¿Listo para explorar?
<a routerLink="/account/register" class="text-muted ms-1"><b>Crea una cuenta</b></a>
</p>
<div class="row mt-3">
<div class="col-12 text-center">
<p class="text-muted">
¿Listo para explorar?
<a routerLink="/account/register" class="text-muted ms-1"><b>Crea una cuenta</b></a>
</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 -->

View File

@ -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);

View File

@ -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(['']);
}

View File

@ -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();
});
});

View File

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

View File

@ -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>