SIU-Arai/usuarios/templates

Templates para páginas de login

Existe un paquete para desarrollar los templates de la pantalla de login de Araí-Usuarios. Es este.

Creación de un nuevo template

Crear un proyecto vacío en algún repo GIT. Para este tutorial se asume Github, pero puede ser cualquiera. Ejecutar el siguiente comando para descargar el template vacío

composer create-project siu-toba/inline-template CARPETA-DESTINO

Entrar al directorio descargado y ejecutar los siguiente pasos para sincronizar el template vacío con el proyecto creado

git init
git remote add origin https://github.com/usuario/<NOMBRE PROYECTO>.git
git add .
git commit -m "commit inicial"
git push -u origin master

Ya está listo para desarrollar!

Testeando

Se puede ver el template generado ejecutando el comando:

bin/server.sh
# acceder a http://localhost:8080

La idea es que todo el css, js e imágenes se acumule en los directorios correspondientes (css, img y js).

Modificando el template

El html del template es generado a través del archivo twig que está en templates/index.twig. Para utilizar los recursos cargados en las carpetas css, img y js se debe hacer uso de estas tres funciones de twig:

inline_img('NOMBRE_IMG')
inline_js('NOMBRE_JS')
inline_css('NOMBRE_CSS')

Se puede ver, a modo de ejemplo, este repo donde está armado el template que utilizamos dentro del SIU.

Contexto

Para armar estos templates es necesario contar con datos del contexto. Araí-Usuarios deja disponible dentro del twig un arreglo con las siguientes entradas:

[ 'arai_usuarios' => [
    'sigla_institucion' => 'SIU',
    'url_institucion' => 'https://siu.edu.ar',
    'error_login' => '',
    'nombre_usuario' => '',
    'state_params' => [
        'AuthState' => 'algun token'
    ],
    'url_recuperar_pass' => 'https://siu.edu.ar/recuperar',
    'email_soporte' => 'soporte@siu.edu.ar'
 ]]

Para ir probando meter ese arreglo en el index.php, de nuevo pueden utilizar el template del SIU como guía.

Publicando el template

Una vez terminado el trabajo comitear todos los cambios (incluyendo los assets) y pushearlos.

git add -A
git commit -m "un mensaje significativo"
git push