Seccion 13 terminada

ItsasoAguirre · Feb 1, 2020 · b7b632a · b7b632a
1 parent aa3468b
commit b7b632a
Show file tree

Hide file tree

Showing 23 changed files with 513 additions and 231 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense para saber los atributos posibles.
+    // Mantenga el puntero para ver las descripciones de los existentes atributos.
+    // Para más información, visite: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,50 +1,51 @@
 {
-  "name": "adminpro",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "~8.2.14",
-    "@angular/common": "~8.2.14",
-    "@angular/compiler": "~8.2.14",
-    "@angular/core": "~8.2.14",
-    "@angular/forms": "~8.2.14",
-    "@angular/platform-browser": "~8.2.14",
-    "@angular/platform-browser-dynamic": "~8.2.14",
-    "@angular/router": "~8.2.14",
-    "chart.js": "^2.9.3",
-    "jshint": "^2.11.0",
-    "ng2-charts": "^2.3.0",
-    "rxjs": "~6.4.0",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.9.1"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.22",
-    "@angular/cli": "~8.3.22",
-    "@angular/compiler-cli": "~8.2.14",
-    "@angular/language-service": "~8.2.14",
-    "@types/node": "~8.9.4",
-    "@types/jasmine": "~3.3.8",
-    "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "^5.0.0",
-    "jasmine-core": "~3.4.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.15.0",
-    "typescript": "~3.5.3"
-  }
-}
+    "name": "adminpro",
+    "version": "0.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "~8.2.14",
+        "@angular/common": "~8.2.14",
+        "@angular/compiler": "~8.2.14",
+        "@angular/core": "~8.2.14",
+        "@angular/forms": "~8.2.14",
+        "@angular/platform-browser": "~8.2.14",
+        "@angular/platform-browser-dynamic": "~8.2.14",
+        "@angular/router": "~8.2.14",
+        "chart.js": "^2.9.3",
+        "jshint": "^2.11.0",
+        "ng2-charts": "^2.3.0",
+        "rxjs": "~6.4.0",
+        "sweetalert": "^2.1.2",
+        "tslib": "^1.10.0",
+        "zone.js": "~0.9.1"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.803.22",
+        "@angular/cli": "~8.3.22",
+        "@angular/compiler-cli": "~8.2.14",
+        "@angular/language-service": "~8.2.14",
+        "@types/jasmine": "~3.3.8",
+        "@types/jasminewd2": "~2.0.3",
+        "@types/node": "~8.9.4",
+        "codelyzer": "^5.0.0",
+        "jasmine-core": "~3.4.0",
+        "jasmine-spec-reporter": "~4.2.1",
+        "karma": "~4.1.0",
+        "karma-chrome-launcher": "~2.2.0",
+        "karma-coverage-istanbul-reporter": "~2.0.1",
+        "karma-jasmine": "~2.0.1",
+        "karma-jasmine-html-reporter": "^1.4.0",
+        "protractor": "~5.4.0",
+        "ts-node": "~7.0.0",
+        "tslint": "~5.15.0",
+        "typescript": "~3.5.3"
+    }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -7,7 +7,7 @@ import { PagesModule } from './pages/pages.module';
 import { AppRoutingModule } from './app-routing.module';
 
 // Temporal
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 // Servicios
 import { ServiceModule } from './services/service.module';
@@ -30,6 +30,7 @@ import { RegisterComponent } from './login/register.component';
     PagesModule,
     AppRoutingModule,
     FormsModule,
+    ReactiveFormsModule,
     ServiceModule
   ],
   providers: [],

diff --git a/src/app/config/config.ts b/src/app/config/config.ts
@@ -0,0 +1 @@
+export const URL_SERVICES = 'http://localhost:3000';
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
@@ -4,22 +4,22 @@
 <section id="wrapper" class="login-register login-sidebar" style="background-image:url(../assets/images/background/login-register.jpg);">
     <div class="login-box card">
         <div class="card-body">
-            <form class="form-horizontal form-material" (ngSubmit)="ingresar()">
+            <form ngNativeValidate #f="ngForm" class="form-horizontal form-material" (ngSubmit)="ingresar(f)">
                 <a href="javascript:void(0)" class="text-center db"><img src="../assets/images/logo-icon.png" alt="Home" /><br/><img src="../assets/images/logo-text.png" alt="Home" /></a>
                 <div class="form-group m-t-40">
                     <div class="col-xs-12">
-                        <input class="form-control" type="text" required="" placeholder="Usuario">
+                        <input [ngModel]="email" name="email" class="form-control" type="email" required placeholder="Email del usuario">
                     </div>
                 </div>
                 <div class="form-group">
                     <div class="col-xs-12">
-                        <input class="form-control" type="password" required="" placeholder="Contraseña">
+                        <input ngModel name="password" class="form-control" type="password" required placeholder="Contraseña">
                     </div>
                 </div>
                 <div class="form-group row">
                     <div class="col-md-12">
                         <div class="checkbox checkbox-primary pull-left p-t-0">
-                            <input id="checkbox-signup" type="checkbox" class="filled-in chk-col-light-blue">
+                            <input [ngModel]="recuerdame" name="recuerdame" id="checkbox-signup" type="checkbox" class="filled-in chk-col-light-blue">
                             <label for="checkbox-signup"> Recuérdame </label>
                         </div>
                         <a href="javascript:void(0)" id="to-recover" class="text-dark pull-right"><i class="fa fa-lock m-r-5"></i> ¿Olvidaste la contraseña?</a> </div>
@@ -32,14 +32,13 @@
                 <div class="row">
                     <div class="col-xs-12 col-sm-12 col-md-12 m-t-10 text-center">
                         <div class="social">
-                            <a href="javascript:void(0)" class="btn  btn-facebook" data-toggle="tooltip" title="Login with Facebook"> <i aria-hidden="true" class="fa fa-facebook"></i> </a>
-                            <a href="javascript:void(0)" class="btn btn-googleplus" data-toggle="tooltip" title="Login with Google"> <i aria-hidden="true" class="fa fa-google-plus"></i> </a>
+                            <button type="button" id="btnGoogle" class="btn btn-googleplus" data-toggle="tooltip" title="Iniciar sesión con Google"> <i aria-hidden="true" class="fa fa-google"></i> </button>
                         </div>
                     </div>
                 </div>
                 <div class="form-group m-b-0">
                     <div class="col-sm-12 text-center">
-                        ¿No tienes cuenta? <a href="pages-register2.html" class="text-primary m-l-5"><b>Registrate</b></a>
+                        ¿No tienes cuenta? <a routerLink="/register" class="text-primary m-l-5"><b>Registrate</b></a>
                     </div>
                 </div>
             </form>

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -1,7 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { NgForm } from '@angular/forms';
+import { UsuarioService } from '../services/usuario/usuario.service';
+import { Usuario } from '../models/usuario.model';
 
 declare function init_plugins();
+declare const gapi: any;
 
 @Component({
   selector: 'app-login',
@@ -10,14 +14,54 @@ declare function init_plugins();
 })
 export class LoginComponent implements OnInit {
 
-  constructor( public router: Router) { }
+  recuerdame: boolean = false;
+  email: string;
 
+  auth2: any;
+
+  constructor( private router: Router, private usuarioService: UsuarioService) { }
   ngOnInit() {
     init_plugins();
+    this.googleInit();
+    this.email = localStorage.getItem('email') || '';
+    if ( this.email.length > 1) {
+      this.recuerdame = true;
+    }
+  }
+
+  googleInit() {
+    gapi.load('auth2', () => {
+      this.auth2 = gapi.auth2.init({
+        client_id: '846842414251-88i1kk6ca8jnesnm85ahmkn06b56jvkk.apps.googleusercontent.com',
+        cookiepolicy: 'single_host_origin',
+        scope: 'profile email'
+      });
+      this.attachSignIn( document.getElementById('btnGoogle'));
+    });
   }
 
-  ingresar() {
-    this.router.navigate(['/dashboard']);
+  attachSignIn( element) {
+    this.auth2.attachClickHandler ( element, {}, (googleUser) => {
+
+      const profile = googleUser.getBasicProfile();
+
+      const token = googleUser.getAuthResponse().id_token;
+
+      this.usuarioService.loginGoogle(token)
+      .subscribe( correcto => window.location.href = '#/dashboard');
+    } );
+  }
+
+  ingresar( formulario: NgForm) {
+
+    if ( formulario.invalid) {
+      return;
+    }
 
+    const usuario = new Usuario(
+        null, formulario.value.email, formulario.value.password
+    );
+    this.usuarioService.login(usuario, formulario.value.recuerdame)
+    .subscribe( correcto => this.router.navigate(['dashboard']));
   }
 }
diff --git a/src/app/login/register.component.html b/src/app/login/register.component.html
@@ -13,33 +13,36 @@
 <section id="wrapper" class="login-register login-sidebar" style="background-image:url(../assets/images/background/login-register.jpg);">
     <div class="login-box card">
         <div class="card-body">
-            <form class="form-horizontal form-material" id="loginform" action="index.html">
+            <form [formGroup]="registerForm" (ngSubmit)="registrarUsuario()" class="form-horizontal form-material" id="loginform">
                 <a href="javascript:void(0)" class="text-center db"><img src="../assets/images/logo-icon.png" alt="Home" /><br/><img src="../assets/images/logo-text.png" alt="Home" /></a>
                 <h3 class="box-title m-t-40 m-b-0">Registrarse ahora</h3><small>Crea tu cuenta y disfruta</small>
                 <div class="form-group m-t-20">
                     <div class="col-xs-12">
-                        <input class="form-control" type="text" required="" placeholder="Nombre">
+                        <input formControlName="nombre" name="nombre" required class="form-control" type="text" placeholder="Nombre">
                     </div>
                 </div>
                 <div class="form-group ">
                     <div class="col-xs-12">
-                        <input class="form-control" type="text" required="" placeholder="Email">
+                        <input formControlName="correo" name="correo" required class="form-control" type="email" placeholder="Email">
                     </div>
                 </div>
                 <div class="form-group ">
                     <div class="col-xs-12">
-                        <input class="form-control" type="password" required="" placeholder="Contraseña">
+                        <input formControlName="password" name="password" required class="form-control" type="password" placeholder="Contraseña">
                     </div>
                 </div>
                 <div class="form-group">
                     <div class="col-xs-12">
-                        <input class="form-control" type="password" required="" placeholder="Confirmar contraseña">
+                        <input formControlName="password2" name="password2" class="form-control" type="password" required placeholder="Confirmar contraseña">
                     </div>
                 </div>
+                <div class="form-group" *ngIf="registerForm.errors && registerForm.errors?.sonIguales && !registerForm.pristine">
+                    <p class="text-danger">Las contraseñas deben ser iguales</p>
+                </div>
                 <div class="form-group row">
                     <div class="col-md-12">
                         <div class="checkbox checkbox-primary p-t-0">
-                            <input id="checkbox-signup" type="checkbox">
+                            <input formControlName="condiciones" name="condiciones" id="checkbox-signup" type="checkbox">
                             <label for="checkbox-signup"> Estoy de acuerdo con los <a href="#">terminos</a></label>
                         </div>
                     </div>
@@ -51,7 +54,7 @@ <h3 class="box-title m-t-40 m-b-0">Registrarse ahora</h3><small>Crea tu cuenta y
                 </div>
                 <div class="form-group m-b-0">
                     <div class="col-sm-12 text-center">
-                        <p>Tienes una cuenta? <a href="pages-login-2.html" class="text-info m-l-5"><b>Ingresar</b></a></p>
+                        <p>Tienes una cuenta? <a routerLink="/login" class="text-info m-l-5"><b>Ingresar</b></a></p>
                     </div>
                 </div>
             </form>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const URL_SERVICES = 'http://localhost:3000';