Merge pull request #1063 from OpenConext/feature/ui-redesign

UI redesign

.github/workflows/test-integration.yml

@@ -41,8 +41,23 @@ jobs:
                 docker-compose exec -T php-fpm.vm.openconext.org bash -c '
                     SYMFONY_ENV=ci composer install --prefer-dist -n -o && \
                     ./app/console cache:clear --env=ci && \
-                    cd theme && CYPRESS_INSTALL_BINARY=0 npm ci && npm run build
+                    cd theme && CYPRESS_INSTALL_BINARY=0 npm ci && EB_THEME=skeune npm run build
                 '
+            - name: Run code quality tests
+              if: always()
+              run: |
+                  cd docker && docker-compose exec -T php-fpm.vm.openconext.org bash -c '
+                      echo -e "\nPHP Mess Detector\n" && \
+                      ./vendor/bin/phpmd src text ci/qa-config/phpmd.xml --exclude */Tests/* && \
+                      echo -e "\nPHP CodeSniffer\n" && \
+                      ./vendor/bin/phpcs --report=full --standard=ci/qa-config/phpcs.xml --warning-severity=0 --extensions=php src  && \
+                      echo -e "\nPHP CodeSniffer (legacy code)\n" && \
+                      ./vendor/bin/phpcs --standard=ci/qa-config/phpcs-legacy.xml --warning-severity=0 --extensions=php -s library  && \
+                      echo -e "\nDoc header check\n" && \
+                      ./vendor/bin/docheader check src/ tests/ library/ --exclude-dir resources --exclude-dir languages
+                  '
+              env:
+                  SYMFONY_ENV: ci
             - name: Run unit tests
               if: always()
               run: |
@@ -68,7 +83,9 @@ jobs:
                       echo -e "\nInstalling database fixtures...\n" && \
                       ./app/console doctrine:schema:drop --force --env=ci && \
                       ./app/console doctrine:schema:create --env=ci && \
-                      echo -e "\nBehat tests\n" && \
+                      echo -e "\nPreparing frontend assets\n" && \
+                      EB_THEME=skeune ./theme/scripts/prepare-test.js > /dev/null && \
+                      echo -e "\nRun the Behat tests\n" && \
                       ./vendor/bin/behat -c ./tests/behat-ci.yml --suite default -vv --format progress --strict && \
                       echo -e "\nBehat tests (with selenium and headless Chrome)\n" && \
                       ./vendor/bin/behat -c ./tests/behat-ci.yml --suite selenium -vv --format progress --strict
@@ -88,23 +105,18 @@ jobs:
             - name: Run Cypress integration tests
               if: always()
               run: |
-                  cd docker && docker-compose exec -T cypress bash -c '
-                      cypress run --browser=firefox --headless
-                  '
-              env:
-                  SYMFONY_ENV: ci
-            - name: Run code quality tests
-              if: always()
-              run: |
-                  cd docker && docker-compose exec -T php-fpm.vm.openconext.org bash -c '
-                      echo -e "\nPHP Mess Detector\n" && \
-                      ./vendor/bin/phpmd src text ci/qa-config/phpmd.xml --exclude */Tests/* && \
-                      echo -e "\nPHP CodeSniffer\n" && \
-                      ./vendor/bin/phpcs --report=full --standard=ci/qa-config/phpcs.xml --warning-severity=0 --extensions=php src  && \
-                      echo -e "\nPHP CodeSniffer (legacy code)\n" && \
-                      ./vendor/bin/phpcs --standard=ci/qa-config/phpcs-legacy.xml --warning-severity=0 --extensions=php -s library  && \
-                      echo -e "\nDoc header check\n" && \
-                      ./vendor/bin/docheader check src/ tests/ library/ --exclude-dir resources
+                  cd docker && \
+                  docker-compose exec -T php-fpm.vm.openconext.org bash -c '
+                    EB_THEME=skeune ./theme/scripts/prepare-test.js
+                  ' && \
+                  docker-compose exec -T cypress bash -c '
+                    cypress run --spec cypress/integration/skeune/**/*.spec.js,cypress/integration/shared/*.spec.js --browser=electron --headless
+                  ' && \
+                  docker-compose exec -T php-fpm.vm.openconext.org bash -c '
+                    EB_THEME=openconext ./theme/scripts/prepare-test.js
+                  ' && \
+                  docker-compose exec -T cypress bash -c '
+                    cypress run --spec cypress/integration/openconext/**/*.spec.js --browser=electron --headless
                   '
               env:
                   SYMFONY_ENV: ci

.gitignore

@@ -7,6 +7,8 @@ bin/ignore_me.php
 /web/javascripts/*
 /web/stylesheets/*
 /web/images/*
+/web/fonts/*
+!/web/fonts/.gitkeep
 /app/cache
 /app/logs
 /app/SymfonyRequirements.php

CHANGELOG.md

@@ -5,6 +5,22 @@ We will continue to post relevant release notes on the GitHub release page. More
 
 More information about our release strategy can be found in the [Development Guidelines](https://github.com/OpenConext/OpenConext-engineblock/wiki/Development-Guidelines#release-notes) on the EngineBlock wiki.
 
+## 6.4.0 (RC 1)
+This release consists of the UI redesign of the WAYF, Consent and other user facing screens.
+The complete list of changes is excessive. Details can be found on GitHub under the `ui-redesign` tag. Some highlights
+include:
+
+**Features**
+- Complete redesign of the WAYF
+    - The WAYF now includes an optional default IdP banner, making advertising a default IdP possible (eduId)
+    - The WAYF is optimized for keyboard navigation
+- Redesigned the consent screen
+    - The previously optional minimal consent screen is now the default
+    - Tooltips are now pure HTML/CSS, no eternal JS libraries are used
+    - Keyboard navigation was improved greatly
+- Both the WAYF and the consent screen are optimized for the optically or visually impaired. The interface is not yet
+  auditted, but a WCAG 2.1 AA is to be expected.
+
 ## 6.3.6
 After some testing, @tvdijen opened issue #920, identifying several issues with the 3.6.x releases. Those issues
 have been addressed in this release.

README.md

@@ -21,10 +21,27 @@ See the [UPGRADING.md][upgrading] file
 
 Please see the [wiki][eb-wiki-theme-development] for information on how to get started with developing themes for OpenConext EngineBlock
 In short, themes require front-end resource compilation which can be done by running the following commands:
+
+First set the desired theme name in the parameters.yml. This will load the correct Twig templates as they are a part of the Symfony config.
+
+```
+parameters:
+    # Other parameters have been left out for brevity
+    theme.name: skeune
+```
+
+Next build the front-end assets for the selected theme.
+
 ```
     (cd theme && npm ci && npm run build)
 ```
 
+Finally, when not in an environment with the debug flag enabled, you need to clear the cache. This will ensure the translations and templates are swapped out for the ones found in the new theme.
+
+```
+$ php72 ./app/console cache:clear --env=prod
+```
+
 To setup the required tooling on the VM, the following steps might be useful:
 
     cd /opt/openconext/OpenConext-engineblock/theme

app/config/config.yml

@@ -33,6 +33,8 @@ framework:
         fallbacks: ["%locale%"]
         paths:
           - '%kernel.root_dir%/../languages'
+          - '%kernel.root_dir%/../theme/base/translations'
+          - '%kernel.root_dir%/../theme/%theme.name%/translations'
     secret:          "%secret%"
     router:
         resource: "%kernel.root_dir%/config/routing.yml"
@@ -56,8 +58,12 @@ twig:
     debug: '%kernel.debug%'
     strict_variables: '%kernel.debug%'
     paths:
-        "%kernel.root_dir%/../theme/material/templates/modules": theme
-        "%kernel.root_dir%/../theme/material/templates/layouts": themeLayouts
+        "%kernel.root_dir%/../theme/%theme.name%/templates/modules": theme
+        "%kernel.root_dir%/../theme/%theme.name%/templates/layouts": themeLayouts
+        "%kernel.root_dir%/../theme/%theme.name%/images": images
+        "%kernel.root_dir%/../theme/base/templates/modules": theme
+        "%kernel.root_dir%/../theme/base/templates/layouts": themeLayouts
+        "%kernel.root_dir%/../theme/base/images": images
     globals:
         assetsVersion: "%asset_version%"
         defaultTitle: "%view_default_title%"

app/config/config_dev.yml

@@ -8,6 +8,13 @@ parameters:
     asset_version: "dev"
 
 framework:
+    translator:
+        enabled: true
+        fallbacks: [ "%locale%" ]
+        paths:
+            - '%kernel.root_dir%/../languages'
+            - '%kernel.root_dir%/../theme/base/translations'
+            - '%kernel.root_dir%/../theme/%theme.name%/translations'
     router:
         resource: "%kernel.root_dir%/config/routing_dev.yml"
         strict_requirements: true
@@ -19,3 +26,13 @@ web_profiler:
 
 twig:
     cache: false
+    auto_reload: true
+    debug: true
+    strict_variables: false
+    paths:
+        "%kernel.root_dir%/../theme/%theme.name%/templates/modules": theme
+        "%kernel.root_dir%/../theme/%theme.name%/templates/layouts": themeLayouts
+        "%kernel.root_dir%/../theme/%theme.name%/images": images
+        "%kernel.root_dir%/../theme/base/templates/modules": theme
+        "%kernel.root_dir%/../theme/base/templates/layouts": themeLayouts
+        "%kernel.root_dir%/../theme/base/images": images

app/config/config_test.yml

@@ -10,6 +10,13 @@ services:
 
 framework:
     test: ~
+    translator:
+        fallbacks: ["%locale%"]
+        paths:
+            - '%kernel.root_dir%/../languages'
+            - '%kernel.root_dir%/../theme/base/translations'
+            - '%kernel.root_dir%/../theme/%theme.name%/translations'
+            - '%kernel.root_dir%/../src/OpenConext/EngineBlockFunctionalTestingBundle/Resources/languages'
     session:
         storage_id: session.storage.mock_file
         name: MOCKSESSION

app/config/parameters.yml.dist

@@ -61,7 +61,7 @@ parameters:
     ## /etc, but EngineBlock supports runtime modification of PHP
     ## settings.
     php_settings:
-        memory_limit: 128M
+        memory_limit: 256M
         display_errors: '1'
         error_reporting: '6135'
         date.timezone: Europe/Amsterdam
@@ -166,6 +166,10 @@ parameters:
     ## Allow users to save their selected IdP and then auto-select it on returning visits.
     wayf.remember_choice: false
 
+    ## Toggle the default IdP quick link banner on the WAYF.
+    wayf.display_default_idp_banner_on_wayf: true
+    wayf.default_idp_entity_id: https://default-idp.vm.openconext.org
+
     ## Settings for detecting whether the user is stuck in a authentication loop within his session
     time_frame_for_authentication_loop_in_seconds: 60
     maximum_authentication_procedures_allowed: 5
@@ -231,3 +235,11 @@ parameters:
     stepup.gateway.sfo.sso_location: 'https://gateway.stepup.vm.openconext.org/second-factor-only/single-sign-on'
     ## The public key from the Stepup Gateway IdP
     stepup.gateway.sfo.key_file: /etc/openconext/engineblock.crt
+
+##########################################################################################
+    ## THEME SETTINGS
+    ##########################################################################################
+    # When changing the default theme name, be aware that the CI build will no longer be able to select our default
+    # test suite for js e2e tests. This because a SED command is in place to rewrite the parameters.yml.
+    # See the SED command in Gitlab Actions runner: 'Run Cypress integration tests'
+    theme.name: skeune

build.xml

@@ -126,7 +126,7 @@
 
     <target name="doc-header" description="Check if the copyright header is valid">
         <exec executable="vendor/bin/docheader" failonerror="true">
-            <arg line="check src/ tests/ library/ --exclude-dir resources" />
+            <arg line="check src/ tests/ library/  --exclude-dir resources --exclude-dir languages" />
         </exec>
     </target>
 

composer.json

@@ -16,6 +16,7 @@
         "ext-json": "*",
         "ext-mbstring": "*",
         "beberlei/assert": "^2.6",
+        "composer/package-versions-deprecated": "^1.11",
         "doctrine/doctrine-bundle": "^1.11",
         "doctrine/doctrine-migrations-bundle": "^1.3",
         "doctrine/orm": "~2.6",