Finalizada gestion de usuarios con google.

Backend/start.ts

@@ -10,9 +10,9 @@ const validator = require('./google_validation.js').validator;
 
 const crearUsuario = (con:any, data:object) => {
     return new Promise((resolve, reject) => {
-        con.query (`INSERT INTO clientes (nombre, email, img, carritoActual, historial)\ 
+        con.query (`INSERT INTO usuarios (nombre, email, img, carritoActual, GOOGLE_ID)\ 
                     VALUES ( '${(data as any)["nombreUsuario"]}', '${(data as any)["emailUsuario"]}',
-                    '${(data as any)["imagenUsuario"]}', '{}', '{}')`,
+                    '${(data as any)["imagenUsuario"]}', '{}', '${(data as any)["googleID"]}')`,
             (err:any, res:string) => {
                 if (err) {
                     reject("Error al ejecutar query SQL (start.ts fila 18))...\n" + err);
@@ -23,7 +23,7 @@ const crearUsuario = (con:any, data:object) => {
     });
 };
 
-const revisarUsuarioBD = (usuario:object) => {
+const revisarUsuarioG = (usuario:object) => {
     return new Promise((resolve, reject) => {
         const mysql = require('mysql');
 
@@ -42,24 +42,26 @@ const revisarUsuarioBD = (usuario:object) => {
             const nombreUsuario:string = (usuario as any)["name"];
             const emailUsuario:string = (usuario as any)["email"];
             const imagenUsuario:string = (usuario as any)["picture"];
+            const googleID:number = (usuario as any)["sub"];
 
-            con.query (`SELECT nombre, email, img, carritoActual, historial FROM clientes WHERE nombre='${nombreUsuario}'`,
+            con.query (`SELECT nombre, email, img, carritoActual, USER_ID FROM usuarios WHERE GOOGLE_ID='${googleID}'`,
                 (err:any, response:any) => {
                     if (err) {
                         reject("Error al ejecutar query SQL");
                     }
                     const respuestaBD:string = JSON.stringify(response);
                     if (respuestaBD === '[]') {
-                        crearUsuario(con, {nombreUsuario, emailUsuario, imagenUsuario})
+                        crearUsuario(con, {nombreUsuario, emailUsuario, imagenUsuario, googleID})
                             .then( () => {
                                 resolve(`{ "nombre": "${nombreUsuario}", "email": "${emailUsuario}", "img": "${imagenUsuario}",
-                                "carrito": {}, "historial": {}}`);
+                                "carrito": {}`);
                             })
                             .catch((msg:string) => {
                                 reject("Error al crear el usuario...\n" + msg);
                             })
                     } else {
-                        resolve(respuestaBD);
+                        console.log(`Respuesta servidor:\n${respuestaBD}`);
+                        resolve(JSON.stringify(response[0]));
                     }
                 });
         });
@@ -67,7 +69,7 @@ const revisarUsuarioBD = (usuario:object) => {
     });
 };
 
-app.post('/log-in',(req:any, res:any) => {
+app.post('/log-inG',(req:any, res:any) => {
     res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
     res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
     res.header('Access-Control-Allow-Headers', 'Content-Type');
@@ -75,11 +77,12 @@ app.post('/log-in',(req:any, res:any) => {
     const token:string = req.body.idtoken;
 
     validator(token)
-        .then( (usuario:object) =>
+        .then( (usuario:object) => {
-            revisarUsuarioBD(usuario)
+            revisarUsuarioG(usuario)
                 .then(response => res.send(response.toString()))
                 .catch(err => res.send(err))
-        )
+
+        })
         .catch(console.error);
 
 });

src/views/Administracion/Inicio.vue

@@ -0,0 +1,13 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: "Inicio"
+    }
+</script>
+
+<style scoped lang="sass">
+
+</style>

src/views/Login-Registro.vue

@@ -68,6 +68,10 @@
 
     const procesarUsuario = data => {
         const obj = JSON.parse(data);
+        obj["logged"] = true;
+        console.log(JSON.stringify(obj));
+        window.usuarioActual.pop();
+        window.usuarioActual.push(obj);
         window.elRouter.push('/platos/');
     };
 
@@ -75,10 +79,10 @@
         let id_token = googleUser.getAuthResponse().id_token;
 
         let xhr = new XMLHttpRequest();
-        xhr.open('POST', 'http://localhost:3000/log-in');
+        xhr.open('POST', 'http://localhost:3000/log-inG');
         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xhr.onload = function() {
-            console.log('Sesión iniciada.');
+            console.log('Sesión iniciada. Servidor:\n' + xhr.responseText);
             procesarUsuario(xhr.responseText);
         };
         xhr.send('idtoken=' + id_token);

src/views/MiCuenta.vue

@@ -27,11 +27,25 @@
                 </div>
                 <div v-else class="row">
                     <div class="col l6 m6">
-                        Hola {{ usuario[0].nombre }}, esta es toda la información que guardamos de ti: <br/>
+                        <div class="datos-usuario">
+                            <img :src="usuario.img" alt="Imagen del Usuario" class="left datos-usuario--imagen">
+                            <div class="datos-usuario--descr">
+                                {{ usuario.nombre }}, desde aquí puedes acceder a todos tus datos, y modificarlos
+                                si deseas.
+                            </div>
+                            <div style="clear: left;"></div>
+                        </div>
                         <br>
-                        Tu nombre: {{ usuario[0].nombre }}<br>
+                        <div class="datos-editar">
-                        Tu email: {{ usuario[0].email }}<br>
+                            <form action="">
-
+                                <label for="nombre-usuario">Tu nombre</label>
+                                <input id="nombre-usuario" placeholder="Tu nombre" :value="usuario.nombre"/><br>
+                                <label for="email-usuario">Tu email</label>
+                                <input id="email-usuario" placeholder="Tu email" :value="usuario.email"/><br>
+                                <label for="id-usuario">Tu ID de usuario</label>
+                                <input id="id-usuario" disabled :value="(99999999999 - parseInt(usuario['USER_ID'])).toString(16).toUpperCase()">
+                            </form>
+                        </div>
                     </div>
                     <div class="col l6 m6">
                         Tu historial de Compras <br>
@@ -40,7 +54,7 @@
                             Tu historial de compras está vacio. ¡Compra algo y lo verás aquí!
                         </div>
                         <div v-else>
-                            <template v-for="(plato, key) in usuario[0].historial">
+                            <template v-for="(plato, key) in usuario.historial">
 
                             </template>
                         </div>
@@ -69,23 +83,32 @@
         },
         data: function () {
             return {
-                usuario: window.usuarioActual
+                usuario: window.usuarioActual[0]
             }
         },
         computed: {
             historialVacio: function () {
-                for (i in this.usuario[0].historial) {
+                for (let i in this.usuario.historial) {
                     return false
                 }
                 return true
             },
             usuarioNoLogeado: function () {
-                return !window.usuarioActual[0].logged;
+                return !this.usuario.logged;
             }
         }
     }
 </script>
 
-<style scoped>
+<style scoped lang="sass">
+.datos-usuario--imagen
+    margin: 10px
+
+.datos-usuario--descr
+    padding: 5px
+
+.datos-editar
+
+
 
 </style>

src/views/carrito.vue

@@ -10,7 +10,7 @@
                     Carrito de compras
                 </div>
                 <br/>
-                <router-link id="carrito--boton--seguircomprando" to="/tienda/" class="hoverable">Seguir comprando</router-link>
+                <router-link id="carrito--boton--seguircomprando" to="/platos/" class="hoverable">Seguir comprando</router-link>
                 <br/>
                 <br/>
                 <div id="carrito" class="row carrito">