‫Instructor: En
‫este video, crearemos la página de la cuenta
‫de usuario principalmente utilizando conceptos que ya conocemos
‫y que ya usamos antes.
‫Y comencemos por echar un vistazo a
‫lo que realmente quiero decir con la página de la cuenta de
‫usuario en nuestro sitio web de referencia, aquí en natours. dev.
‫Entonces, ya mostramos este menú aquí en
‫nuestro sitio web,
‫pero cuando hacemos clic en este usuario, obtenemos acceso
‫a la página de la cuenta de usuario.
‫Y aquí, podemos cambiar algunas configuraciones básicas, también
‫subir una nueva foto, pero esta
‫la vamos a hacer
‫en la siguiente
‫sección, y el usuario también puede actualizar su contraseña en esta página.
‫Luego, en el lado izquierdo hay algunos elementos
‫del menú, que realmente no
‫implementaremos, por lo que solo implementaremos
‫el menú, pero no realmente las páginas a
‫las que apuntan, y luego, si el usuario
‫es un administrador, también representaremos esta parte. aquí.
‫Bien, esto es lo que construiremos en esta conferencia,
‫y en las próximas
‫conferencias nos encargaremos de actualizar realmente la configuración.
‫Entonces, básicamente, hacer que estos botones funcionen aquí.
‫¿Está bien?
‫Pero por ahora, solo está renderizando esta página aquí
‫en esto. mi URL.
‫¿Okey?
‫Entonces, comencemos con la plantilla de pug.
‫Muy bien, y como
‫siempre, ya tengo esta plantilla de cuenta aquí.
‫Así que tomemos eso, copiemos y
‫luego creemos una nueva vista aquí, a
‫la que llamo cuenta.
‫Y ahora queremos ampliar
‫la base y queremos crear un bloque llamado contenido como siempre.
‫Y luego aquí es donde realmente pegamos nuestro contenido.
‫¿Está bien?
‫Ahora necesitamos sangrar
‫todo esto para que quede dentro del bloque.
‫Genial, entonces aquí primero tenemos nuestra navegación, ¿verdad?
‫Entonces, la configuración, las reservas, las reseñas y la
‫facturación que vimos allí en el
‫lado izquierdo de la página, y luego también tenemos la navegación del administrador, ¿verdad?
‫Y ya ven mucho código duplicado aquí.
‫Básicamente, los elementos de este elemento de la
‫lista aquí, aparecen en realidad ocho veces.
‫Así que cuatro veces aquí arriba y cuatro veces aquí abajo, así
‫que creemos rápidamente un mixin para que nuestro
‫código se vea un poco más limpio.
‫Muy bien, voy a seguir
‫adelante y copiar uno de estos.
‫Y luego crea un nuevo mixin llamado navItem.
‫Bien, lo hicimos antes.
‫Entonces esto es muy similar.
‫Entonces, ¿qué necesitamos pasar a
‫este mixin para personalizar básicamente cada uno de estos elementos?
‫Bueno, lo que va a cambiar es el enlace.
‫También el texto, la configuración, las reservas, etcétera.
‫Eso es texto.
‫Entonces también el ícono va a cambiar,
‫y finalmente ves que este primero
‫aquí tiene la navegación lateral - clase activa, ¿verdad?
‫Y entonces también especificaremos un activo como aquí básicamente.
‫Y luego, cuando queramos marcar un elemento
‫como activo, simplemente pasaremos por aquí.
‫¿Okey?
‫Así que ahora tenemos que arreglar la sangría aquí.
‫Y luego pasar nuestros datos.
‫El siguiente es el texto.
‫Así que esto, por supuesto, en
‫este punto, no es nada nuevo, así que lo estoy haciendo bastante rápido aquí, ¿verdad?
‫Entonces icono y luego el nombre del icono que pasamos.
‫Así como lo hicimos antes,
‫y finalmente este
‫activo aquí, recuerde, será verdadero o falso.
‫Y si es cierto, queremos agregar esta clase.
‫Copiémoslo.
‫Y luego aquí especifiquemos el atributo de clase.
‫Y luego, como hicimos
‫nosotros, hagamos una declaración de cambio aquí.
‫Entonces, si está activo, básicamente, aquí queremos
‫tener la navegación lateral: activa.
‫Y si no, no queremos nada.
‫Entonces, un nombre de clase vacío, básicamente.
‫Está bien.
‫Y ahora podemos reemplazar esto con nuestro mixin.
‫Eso se llama navItem, y recuerde,
‫escribimos + y luego navItem.
‫Entonces aquí el enlace es un enlace vacío.
‫Y de hecho para todos ellos por ahora.
‫Luego
‫Configuración, luego el
‫nombre del icono que también es Configuración,
‫pero en minúsculas.
‫Y luego, finalmente, este está realmente activo, por lo
‫que pasamos verdadero.
‫Muy bien, duplicémoslo.
‫Ten un maletín y tenemos Mis Reservas.
‫Hagamos eso en minúsculas.
‫Muy bien, duplícalo dos veces más.
‫Así que aquí
‫tenemos la estrella y luego
‫aquí la tarjeta de crédito para la facturación.
‫Está bien.
‫Y ahora tenemos la navegación de administrador.
‫Y este solo será
‫visible si el usuario actual es un administrador.
‫Así que definamos eso usando una declaración if.
‫Entonces, aquí tenemos que probar si el rol del usuario
‫es igual al de administrador, ¿verdad?
‫Y esa
‫es, nuevamente, una de estas declaraciones if más
‫complejas, por lo que tenemos que usar JavaScript para eso.
‫Entonces estoy usando aquí código sin búfer nuevamente.
‫Y luego, si
‫es así, tendremos acceso a la variable de usuario aquí.
‫Así como hicimos en otras plantillas.
‫Así que básicamente lo vamos a pasar aquí.
‫Y luego, por supuesto, el usuario tiene el atributo de rol,
‫por lo que probamos si es administrador.
‫Y si es así, queremos mostrar todo esto.
‫Por lo tanto, ahora debe tener una sangría de un nivel.
‫¿Okey?
‫Y, por supuesto, ahora queremos reemplazar
‫todos estos aquí con nuestro mixin también.
‫Entonces cuatro veces.
‫Este se llama mapa.
‫Gestionar recorridos.
‫Éste es Administrar usuarios.
‫Gestionar reseñas.
‫Y luego finalmente tenemos uno con el maletín.
‫Y este no tiene el texto aquí,
‫pero es Gestionar reservas.
‫Está bien.
‫Así que deshagámonos de eso y continuemos nuestro trabajo aquí.
‫Así que este será el
‫formulario para cambiar la configuración del usuario.
‫Y entonces los datos personales estarán aquí en estos valores, ¿de acuerdo?
‫Básicamente, en un elemento de entrada HTML, el valor es
‫una especie de texto predefinido que
‫podemos poner dentro de un elemento de entrada.
‫Y entonces, por lo general, lo
‫que ponemos allí es el valor actual de esa entrada,
‫es decir, de ese campo.
‫Y ahora mismo, ese es, por supuesto, el nombre del usuario.
‫Y pongamos eso aquí.
‫Usuario. nombre.
‫Y luego aquí abajo está, por
‫supuesto, el correo electrónico.
‫Y aquí también tenemos la imagen del usuario.
‫Por lo tanto, los usuarios de la barra de imágenes cortan el nombre de la imagen en sí.
‫Bueno.
‫Entonces aquí abajo no hay nada que hacer.
‫¿Está bien?
‫Y de hecho eso es todo.
‫Entonces, esos son realmente todos los datos
‫que provienen del objeto de usuario que
‫tenemos que ingresar.
‫Bien, esa es la plantilla.
‫Ahora sigamos adelante y agreguemos la ruta al viewRouter.
‫Así que aquí mismo, y este se llamará yo.
‫Y entonces tendremos un controlador llamado getAccount.
‫Ahora bien, esta de
‫aquí, por supuesto, va a ser una ruta protegida, ¿verdad?
‫Porque solo si estamos realmente
‫conectados tendremos acceso a esta página.
‫Y, por lo tanto, necesitamos usar nuestro middleware de protección aquí.
‫Entonces eso es un authController. proteger.
‫¿Okey?
‫Así como hicimos con todas o con otras rutas protegidas.
‫Ahora, un problema que veo con
‫esto es que este middleware
‫de protección aquí es muy similar al isLoggedIn.
‫Y entonces haremos algunas operaciones duplicadas allí, lo cual
‫no es ideal.
‫Porque recuerde que este isLoggedIn
‫se ejecutará para todas las solicitudes, ¿verdad?
‫Así que echemos un vistazo rápido a estos para
‫que pueda hacer mi punto.
‫Entonces, en Proteger, tenemos al usuario actual aquí.
‫Entonces tenemos este findById aquí.
‫Pero nosotros hacemos lo
‫mismo aquí abajo con la sesión iniciada, ¿de acuerdo?
‫Y así, al usar isLoggedIn y protect al mismo tiempo, haremos
‫esta consulta dos veces.
‫Y eso no es ideal, por supuesto.
‫Así que pongamos esto isLoggedIn aquí solo en
‫rutas que no están protegidas, ¿de acuerdo?
‫Porque en
‫la ruta protegida, esta verificación
‫si el usuario está conectado también ocurrirá, ¿verdad?
‫Pero no en este middleware,
‫sino en el
‫middleware de protección porque básicamente también lo comprueba, ¿verdad?
‫Así que cortémoslo desde aquí y simplemente pegámoslo en
‫otras rutas que no estén protegidas.
‫Vale, ¿tiene sentido?
‫Y así, no tenemos el problema de
‫básicamente hacer exactamente la misma consulta dos veces
‫en todos los middlewares protegidos.
‫Y eso es un poco mejor para nuestro desempeño.
‫Ahora bien, esta única cosa que hacemos en
‫isLoggedIn y que actualmente
‫no hacemos en protect es esto aquí.
‫Así que ponemos un usuario actual en la respuesta. lugareños.
‫Entonces, hagamos lo
‫mismo ahora en currentUser.
‫Entonces hagamos lo mismo aquí en el middleware de protección.
‫Así que pones el currentUser a pedido. usuario y en
‫respuesta. lugareños, ¿de acuerdo?
‫Para que podamos usarlo
‫automáticamente en todas las plantillas posteriores.
‫Entonces, en este caso, en nuestra plantilla de cuenta, ¿de acuerdo?
‫Así que dale una oportunidad.
‫Y ahora necesitamos agregar este controlador getAccount para,
‫por supuesto, corregir este error que
‫tenemos actualmente.
‫Eso es en viewsController. solicitud y respuesta getAccount.
‫Y verá en un segundo por qué solo necesitamos estos dos.
‫Entonces, para obtener la página de la cuenta, todo lo que realmente necesitamos
‫hacer es simplemente renderizar esa página.
‫Ni siquiera necesitamos consultar al usuario actual porque eso
‫ya se ha hecho en el
‫middleware de protección, ¿verdad?
‫Entonces, realmente todo lo que necesitamos hacer
‫es hacer algo como esto.
‫Así que copie este código y
‫luego aquí la cuenta.
‫Y démosle un título de Tu cuenta.
‫Muy bien, eso hace que ese error desaparezca.
‫Y ahora, como pieza final del rompecabezas, agreguemos el enlace correcto,
‫de hecho, en el encabezado.
‫Entonces, aquí en nuestro encabezado en este momento, el enlace
‫no apunta a esta página de cuenta, ¿verdad?
‫Entonces apunta a ninguna parte.
‫Y ahora debería apuntar a / me.
‫Está bien, y esa debería
‫ser la pieza final para que funcione.
‫Así que iniciemos sesión aquí
‫ahora con la prueba uno, dos, tres, cuatro.
‫Hemos iniciado sesión correctamente.
‫Y ahora al hacer clic aquí obtenemos nuestra página.
‫Fantástico.
‫Ahora hay un error aquí con la foto del usuario.
‫Así que arreglemos eso.
‫Pero además de eso, en realidad todo está funcionando bien.
‫También obtenemos este menú aquí porque actualmente estamos en administración,
‫así que probemos eso también en un segundo para ver
‫si desaparece para otros usuarios.
‫Y, de hecho, también recibimos este error
‫aquí porque tenemos una solicitud fallida para la imagen.
‫Y entonces ya vemos que probablemente estamos haciendo
‫algo mal allí.
‫Y aquí en
‫la imagen, por supuesto, no es el usuario. nombre, es usuario. Foto.
‫Así que dale un guardado, vuelve a cargar aquí.
‫Y ahora, de hecho, ahí vamos.
‫¿Está bien?
‫Así que ahora cierre la sesión, veamos qué pasa entonces.
‫Y luego obtenemos este tipo de error.
‫Y eso es básicamente porque estamos
‫intentando acceder a esta ruta protegida sin estar conectados.
‫¿Está bien?
‫Intentémoslo de nuevo ahora.
‫Entonces, si intentamos iniciar sesión con
‫/ me, obtenemos que no ha iniciado sesión, ¿de acuerdo?
‫Y antes de que obtuviéramos ese error de aspecto extraño
‫porque en este momento estamos en desarrollo.
‫Pero en producción, por supuesto, no veríamos ese extraño
‫error que vimos antes.
‫¿Derecha?
‫Pero lo que
‫vemos ahora es que, por supuesto, nuestra ruta realmente está protegida.
‫Por lo tanto, no podemos acceder a él si no estamos conectados.
‫Ahora, para terminar, inicie sesión con otra cuenta solo
‫para ver
‫si la parte del administrador también funciona.
‫Así que, de nuevo, usemos a Laura aquí.
‫Y ves que ella es solo una usuaria habitual.
‫Está bien.
‫Y ahora obtenemos
‫su cuenta de usuario, sin por supuesto, el menú de administración.
‫De acuerdo, perfecto.
‫Eso es construir la página de la cuenta.
‫Y como dije antes, en el
‫siguiente video, nos encargaremos de actualizar realmente
‫la configuración de esta cuenta.