Vista index (Sección nav-bar)
Esta Sección cuenta con un menu nav donde disponemos de algunas funciones, como ver el plantel del equipo, noticias, registrarse o iniciar sesión. Tambien la web inicia con un video de presentacion de 1 min
Sección noticias y tabla de posiciones (index)
En esta sección se encuentran las ultimas 3 noticias relacionadas al club, donde al tocar el boton leer mas, podemos ampliar y seguir leyendo. Tambien se integro un tabla de posiciones por equipo de la liga profesional.
Noticia ampliada (Vista noticias)
Redirigido desde index al tocar el boton "leer más" en la sección noticias y tabla de posiciones. Tambien podemos acceder al portal donde se encuentran todas las noticias, a través del Menu Nav -> Noticias
Sección tienda productos (index)
En esta sección podemos ver los productos principales de la tienda, al tocar en algunos de ellos nos redirigirá a la categoria del producto, donde tambien podemos explorar toda la tienda.
Vista tienda productos
La tienda cuenta con 4 categorias de indumentaria y accesorios, donde podemos seleccionar los modelos disponibles, tambien se puede observar dos tipos de precios, dependiendo del rol del usuario va a ser el valor del producto
Vista Api MP (confirmar)
Al tocar boton comprar nos redirigirá a la api de MP para poder escoger el talle del producto y la la cantidad, tambien podemos observar el precio por unidad y el total a pagar.
Vista Api MP (pagar)
Aqui tendremos un detalle de producto solicitado, y un formulario para proceder a realizar el pago mediante tarjetas de debito/credito.
Sección Patrocinadores y footer
Aqui podemos observar todos los patrocinadores del club, los mismos tienen su web oficial linkeada a su logo. En el footer, podemos descargar la App, suscribirse para recibir noticias y acceder a las redes sociales del club.
Vista formulario de Registro
En este form podemos registrar un usuario, el mismo cuenta con validaciones tanto en el HTML como asi tambien en el Back End, lanzando un mensaje a la vista con el tipo de error
Vista formulario de Registro (validaciones)
Aqui se puede observar el error lanzado a la vista al hacer una validacion en el Back End, a través del metodo save, al verificar que la condicion no se cumple, se lanza una excepcion con el mensaje seteado dentro del mismo metodo.
Vista Registro exitoso
Una vez completado el registro y realizadas todas las validaciones, el usuario es creado con éxito donde se devuelve una vista anunciando su registro correcto, y un par de accesos directos, para ir a la pagina principal o iniciar sesión.
Vista login
Este form es para iniciar Sesion para un usuario registrado, el mismo cuenta con un metodo para verificar que el usuario y la contraseña pertenezcan a la persona registrada, caso contrario lanzara un error a la vista.
Vista Login (validaciones)
Como se puede observar, se ha realizado un intento de iniciar Sesion introduciendo mal la contraseña y al enviar los datos al servidor, nos devuelve un mensaje de error a la vista.
Vista usuario logueado
Con clase de Spring Security (.defaultSuccessUrl("/bienvenidos")redirigimos a los usuarios despues de hacer login, pero al Existir diferentes ROLES utilizamos sec:authorize para dar un mensaje personalizado
Vista registrar socio
Una vez que un usuario se loguea, aparecera la opcion para asociarse, haciendo clic en el boton lo redirigirá al formulario de registro para socio, donde solo debera cargar un foto para el carnet Digital y escoger el tipo de membrecia.
Vista registrar socio
Al registrarse un socio, se setean todos los atributos del usuario al nuevo objeto socio, eliminando de la base de datos al objeto usuario, es por esta razon, que de ahora en mas, cada vez que realice un login, sera reconocido como socio.
Vista Carnet Digital
Una vez logueado un socio podra ver su carnet digital con sus datos personales y su foto, los mismos son traidos a la vista a través de querys creados en los repositorios perteneciente al objeto.
Vista Panel de control (administradores)
La Web cuenta con un usuario de rol administrador donde se podra gestionar el sitio para distintos fines, como realizar un CRUD en todos los objetos, (Usuarios, socios, jugadores, productos de la tienda, etc).
Vista Base de datos AWS
En esta vista podemos observar la lista de los usuarios registrados, tambien podemos realizar busquedas dentro de la BD con una query configurada para que nos devuelva como resultado el valor mas exacto a la consulta realizada
Vista Equipo
Dentro del panel de control podemos crear objetos para convertir las vistas de tienda y equipo en vistas dinamicas. configurando el HTML con el tipo de datos que querramos mostrar incluida la foto