Crea los componentes necesarios para crear el layout que se describe a continuación. Tendrás componentes de layout (cabecera pública, cabecera privada, pie, menú público, menú privado…) y componentes enrutados (la página home, la página login, la página acerca de, la página galería…)
Esta aplicación tendrá 2 menús. Un menú público que se mostrará cuando el usuario todavía no haya hecho login y un menú privado que se mostrará cuando el usuario haya hecho login.
- Home => Te lleva a la página de bienvenida de la aplicación
- Login => Te lleva a un formulario de login
- Acerca de => Te lleva a la página “Acerca de”
- Dashboard
- Galería
- CRUD
- Profile
Configura el routing para asignar una url a cada una de las 7 páginas de los menús. Puedes enseñar (de momentos) los dos menús simultáneamente en la pantalla para comprobar que funcionan.
Crea un formulario de login con 2 campos: username y password. Pon validaciones y mensajes de error. Al hacer submit del formulario, el componente invocará al método login() del servicio descrito en el siguiente punto.
Crea un servicio Auth que gestione el estado relacionado con la autenticación del usuario. Este servicio debe ofrecer cuatro métodos:
- login({username: string, password: string}): boolean
- logout(): void
- isLogged(): boolean
- getUsername(): string
El método de login devolverá true para la combinación válida username = ‘master@lemoncode.net’ y password: ‘12345678’. Para el resto de combinaciones devolverá false. (Un simple if es suficiente para esta simulación de login). Si la combinación válida que os sugiero no cumpliera las validaciones de vuestro formulario de login, podéis utilizar cualquier otra combinación válida que se adapte a vuestro caso.
Modifica el componente de login para que si al invocar al servicio de login, éste último devuelve true, el componente redirija al usuario al dashboard.
Haz que solamente se muestre el menú público si el usuario no está logueado y el menú privado si el usuario sí está logueado.
Añade un botón de salir en la cabecera de la web que solamente se muestre si el usuario está logueado.
También en la cabecera, y solamente cuando el usuario esté logueado, muestra el username del usuario.
- { id: number => id de la foto src: string => nombre o path de la imagen title => title de la imagen }
- Imagen seleccionada: Una parte con la lista de todas las imágenes (en pequeño) de la galería.
- Listado de imágenes: Una parte en la que se muestre en grande una de las fotos
- Botonera: Una parte con una botonera con 6 botones: anterior, siguiente, aumentar, disminuir, play, stop.
- Al empezar, se mostrará una de las imágenes en la parte de Imagen seleccionada.
- Al hacer click en una imagen de la lista, la imagen correspondiente se mostrará en la parte de imagen seleccionada.
- Al hacer click en el botón siguiente, se cambiará la imagen seleccionada por la siguiente de la lista.
- Se pondrá “disabled” el botón siguiente cuando la imagen seleccionada sea la última de la lista.
- Al hacer click en el botón anterior, se cambiará la imagen seleccionada por la anterior de la lista.
- Se pondrá “disabled” el botón anterior cuando la imagen seleccionada sea la primera de la lista.
- Al hacer click en el botón Aumentar, se agrandará el tamaño de la imagen seleccionada.
- Al hacer click en el botón Disminuir, se reducirá el tamaño de la imagen seleccionada.
- Al hacer click en el botón Play, se “pondrá en marcha el reproductor”, es decir, la imagen seleccionada empezará a cambiar cada 2 segundos. Cuando el reproductor llegue a la última imagen volverá a empezar por la primera.
- Al hacer click en el botón Stop, se detendrá el reproductor, es decir, la imagen seleccionada dejará de cambiar cada 2 segundos.
- El botón de Stop solamente se mostrará cuando esté en marcha el reproductor.
- El botón de Play solamente se mostrará cuando el reproductor esté detenido.
Remarcar con estilos css la imagen de la lista que corresponda con la imagen actualmente seleccionada.
Paginar el listado de imágenes. En vez de mostrar todas las imágenes de golpe, mostrarlas de 3 en 3. Añadir un botón Anterior y otro siguiente para avanzar o retroceder de “página” en el listado.
- Al hacer click en una imagen que tenga el atributo rotate, la imagen deberá rotar los grados indicados en el atributo step.
- Por defecto rotará en pasos de 10 grados
- Se le podrá indicar una rotación inicial en el propio atributo rotate
- Si se hace click en la imagen con la tecla mayúsculas pulsada, la imagen rotará hacia el lado contrario.
RETO: Prueba esta directiva en elementos que no sean imágenes (un h1, un div un p…), verás que también pueden ser rotados con esta directiva. Modifica el selector de la directiva para que solamente afecte a elementos img.
Modifica el método login() del servicio del primer ejercicio para que devuelva la respuesta de forma asíncrona en un observable. El servicio quedaría así:
- login({username: string, password: string}): Observable
- logout(): void
- isLogged(): boolean
- getUsername(): string