Merge branch 'release-2.0.0'

Author: athinab

README.md

@@ -1,78 +1,79 @@
-# simplesamlphp-module-themevanilla
+<h1 align="center">Vanilla theme for SimpleSAMLphp</h1>
+
+![discopower](/screenshots/disco_buttons_bottom.png)
 
 A customisable theme for SimpleSAMLphp based on Bootstrap.
+See more screens in the directory [screenshots](screenshots/).
+
 
 ## Installation
 
 You can install the theme using any of the methods below.
 
 ### Composer
 
-Add the following lines in the `composer.json` file that is located in your
-SimpleSAMLphp installation:
-
 If you want to use [composer](https://getcomposer.org/) to install this theme
-you need to edit `composer.json` file that is located in your SimpleSAMLphp
+you need to edit `composer.json`. The file is located in your SimpleSAMLphp
 installation. Check the following example, that includes all the necessary
-additions for the installation of the **simplesamlphp-module-themevanilla v1.0.0**.
+additions for the installation of the **simplesamlphp-module-themevanilla
+v1.0.0**.
 
 ```
 "require": {
 
-    ...
+  ...
 
-    "rciam/simplesamlphp-module-themevanilla": "1.0.0",
-    "rciam/css": "1.0.0",
-    "rciam/js": "1.0.0"
+  "rciam/simplesamlphp-module-themevanilla": "1.0.0",
+  "rciam/css": "1.0.0",
+  "rciam/js": "1.0.0"
 },
 "repositories": [
 
-    ...
-
-    {
-        "type": "vcs",
-        "url": "https://github.com/rciam/simplesamlphp-module-themevanilla"
-    },
-    {
-      "type": "package",
-      "package": {
-        "name": "rciam/css",
-        "version": "1.0.0",
-     :w
-   "dist": {
-          "type": "zip",
-          "url": "https://github.com/rciam/simplesamlphp-module-themevanilla/releases/download/v1.0.0/css.zip"
-        }
+  ...
+
+  {
+    "type": "vcs",
+    "url": "https://github.com/rciam/simplesamlphp-module-themevanilla"
+  },
+  {
+    "type": "package",
+    "package": {
+      "name": "rciam/css",
+      "version": "1.0.0",
+      "dist": {
+        "type": "zip",
+        "url": "https://github.com/rciam/simplesamlphp-module-themevanilla/releases/download/v1.0.0/css.zip"
       }
-    },
-    {
-      "type": "package",
-      "package": {
-        "name": "rciam/js",
-        "version": "1.0.0",
-        "dist": {
-          "type": "zip",
-          "url": "https://github.com/rciam/simplesamlphp-module-themevanilla/releases/download/v1.0.0/js.zip"
-        }
+    }
+  },
+  {
+    "type": "package",
+    "package": {
+      "name": "rciam/js",
+      "version": "1.0.0",
+      "dist": {
+        "type": "zip",
+        "url": "https://github.com/rciam/simplesamlphp-module-themevanilla/releases/download/v1.0.0/js.zip"
       }
     }
-    ],
-    "scripts": {
+  }
+],
+"scripts": {
 
-      ...
+  ...
 
-      "post-update-cmd": [
-        "cp -r 'vendor/rciam/css' 'modules/themevanilla/www/resources'",
-        "cp -r 'vendor/rciam/js' 'modules/themevanilla/www/resources'"
-      ]
-    },
+  "post-update-cmd": [
+    "cp -r 'vendor/rciam/css' 'modules/themevanilla/www/resources'",
+    "cp -r 'vendor/rciam/js' 'modules/themevanilla/www/resources'"
+  ]
+},
 ```
 
 With the above configuration composer will do several operations:
-- It will put the module `themevanilla` in the `modules` directory.
-- It will download and extract the compressed `css` and `js` directories that
+* It will put the module `themevanilla` in the `modules` directory.
+* It will download and extract the compressed `css` and `js` directories that
   include the minified css and javascript files.
-- It will copy the `css` and `js` directories from the `vendor/rciam` directory
+* It will copy the `css` and `js` directories from the `vendor/rciam` directory
   in the `themevanilla/www/resources` directory, where the static files of the
   theme should be placed.
 
@@ -107,13 +108,27 @@ In order to use this module as theme you need to set in the
 
 ### Using IdP login buttons with icons
 
-The theme splits the discopower IdP discovery page into 2 sections.
-The first section contains all IdPs in a simple list of links, while the second
-one contains login buttons for a selected subset of the IdPs.
+The theme splits the discopower IdP discovery page into 2 sections, depending on
+the tags of the included IdPs:
+* The section that its IdPs have the tag `idps_in_searchable_list` contains all
+  the IdPs in a list of links with a search box.
+* The section that its IdPs have the tag `idps_with_logos` contains login
+  buttons with specified style rules for each IdP. Each button may have a logo
+  icon, too.
+
+Also, you need to define the order of the 2 sections. You can set this in the
+file `config/module_discopower.php` from the variable `taborder`.
+For example:
+```
+'taborder' => array(
+  'idps_in_searchable_list',
+  'idps_with_logos'
+)
+```
 
-If you want to include an IdP in the second section, you need to attach the
-`idps_with_logos` tag to that IdP. The css class name, icon and label of the IdP login
-button can then be specified using the `login_button` configuration as follows:
+Especially for the of the `idps_with_logos`, you need to specify the css class
+name, icon and label of the IdP login button using the `login_button`
+configuration as follows:
 ```
 'tags' => array(
   'idps_with_logos',
@@ -124,8 +139,18 @@ button can then be specified using the `login_button` configuration as follows:
   'label' => 'ORCID',
 )
 ```
-To set style rules for the button, the configured css_classname value must be
-defined in the `idps_buttons.scss` file. See more information bellow.
+To set style rules for the each button, the configured css_classname value must
+be defined in the `idps_buttons.scss` file. See more information bellow.
+
+At the moment there are style rules for the IdPs:
+* B2ACCESS
+* DARIAH
+* Elixir
+* Facebook
+* Google
+* IGTF
+* LinkedIn
+* ORCID
 
 
 ## Customization
@@ -151,9 +176,9 @@ If you want to make any changes in the footer you need to modify the template
 ### CSS
 
 To produce the css files for this theme follow these steps:
-- Install sass ([installation guide](http://sass-lang.com/install))
-- Go to the directory `themevanilla/www/resources`
-- Run the cli sass: `sass --update sass:css`
+* Install sass ([installation guide](http://sass-lang.com/install))
+* Go to the directory `themevanilla/www/resources`
+* Run the cli sass: `sass --update sass:css`
 
 After these steps the css files will be in the directory
 `themevanilla/www/resources/css`

dictionaries/userid_error.definition.json

@@ -1,23 +1,20 @@
 {
   "friendly_title": {
-    "en": "Missing data from"
+    "en": "Sorry, we were not able to log you in"
   },
   "friendly_description": {
-    "en": "Friendly description: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s."
+    "en": "<strong>What is the problem?</strong> %IDP% does not return a persistent identifier to help us uniquely identify you."
+  },
+  "resolution_description": {
+    "en": "<strong>What can you do?</strong> At the moment, the only way to log in is to <a href=\"%RETRY_URL%\">use a different account</a>. For future use, you may ask your institution administrator to release the required information, by sending them a print screen of this error, or asking them to contact our support at <a href=\"mailto:support@example.org\">support@example.org</a>."
   },
   "details_title": {
     "en": "Error details"
   },
   "details_description": {
-    "en": "Details description: It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English."
-  },
-  "contact_title": {
-    "en": "How to get help"
-  },
-  "contact_description": {
-    "en": "Contact description: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard."
+    "en": "Your identity provider needs to release any of the following user identifiers to help us uniquely identify you:"
   },
   "go2disco": {
-    "en": "Choose another provider"
+    "en": "Log in with a different account"
   }
 }

screenshots/consent_displayed_hidden.png

@@ -38,7 +38,7 @@
   $(document).ready(function() {';
     $i = 0;
     foreach ($this->data['idplist'] AS $tab => $slist) {
-  if ($tab == 'all') {
+  if ($tab == 'idps_in_searchable_list') {
       $this->data['head'] .= "\n" . '$("#query_' . $tab . '").liveUpdate("#list_' . $tab . '")' .
         (($i++ == 0) && (empty($faventry)) ? '.focus()' : '') . ';';
   }
@@ -84,7 +84,7 @@ function showEntry($t, $metadata, $favourite = FALSE, $withIcon = FALSE) {
   }
   else {
     $html = '<a class="metaentry " href="' . $basequerystring . urlencode($metadata['entityid']) . '">';
-    $html .= htmlspecialchars($metadata['UIInfo']['DisplayName']['en']) . '';
+    $html .= htmlspecialchars(getTranslatedName($t, $metadata)) . '';
 
     if(array_key_exists('icon', $metadata) && $metadata['icon'] !== NULL) {
       $iconUrl = \SimpleSAML\Utils\HTTP::resolveURL($metadata['icon']);
@@ -159,10 +159,12 @@ function getTranslatedName($t, $metadata) {
   ');
 }
 
-
+$idps_in_searchable_list_index;
+$idps_with_logos_index;
 foreach( $this->data['idplist'] AS $tab => $slist) {
   if (!empty($slist)) {
-    if($tab == 'all') {
+    if($tab == 'idps_in_searchable_list') {
+      $idps_in_searchable_list_index = array_search($tab, array_keys($this->data['idplist']));
       $top = '<div class="row ssp-content-group js-spread">
                 <div class="col-sm-12 js-spread">';
       $search_name = 'query_' . $tab;
@@ -173,7 +175,7 @@ function getTranslatedName($t, $metadata) {
                     . $search_name . '" id="' . $search_name . '" />'
                 . '</form>'
                 . '</div>';
-      $list_open = '<div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--all js-spread" id="list_' . $tab . '">';
+      $list_open = '<div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--idps_in_searchable_list js-spread" id="list_' . $tab . '">';
       $list_items = '';
       $close = '</div></div></div>'; // /metalist /ssp-content-group /row
 
@@ -190,12 +192,13 @@ function getTranslatedName($t, $metadata) {
       echo($top . $search . $list_open . $list_items . $close);
     }
     else if($tab == "idps_with_logos") {
-      $top = '<div class="row ssp-content-group">
-            <div class="col-sm-12">';
-      $or = '<div class="text-center ssp-line-or-line"><span class="ssp-line-or-line__or">' . $this->t('{themevanilla:discopower:or}') . '</span></div>';
-      $list_open = '<div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--other">';
+      $idps_with_logos_index = array_search($tab, array_keys($this->data['idplist']));
+      $top = '<div class="row ssp-content-group"><div class="col-sm-12">
+            ';
+      $list_open = '<div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--other js-idps">';
       $list_items = '';
-      $close = '</div></div></div>'; // /metalist /ssp-content-group /row
+      $close_list = '</div>'; // /metalist
+      $close = '</div></div>'; // /ssp-content-group /col-sm-12
       if (!empty($this->data['preferredidp']) && array_key_exists($this->data['preferredidp'], $slist)) {
         $idpentry = $slist[$this->data['preferredidp']];
         $list_items .=  (showEntry($this, $idpentry, TRUE, TRUE));
@@ -206,7 +209,14 @@ function getTranslatedName($t, $metadata) {
           $list_items .= (showEntry($this, $idpentry, FALSE, TRUE));
         }
       }
-      echo $top . $or . $list_open . $list_items . $close;
+      if($idps_in_searchable_list_index < $idps_with_logos_index) {
+        $or = '<div class="text-center ssp-line-or-line ssp-line-or-line--top"><span class="ssp-line-or-line__or">' . $this->t('{themevanilla:discopower:or}') . '</span></div>';
+        echo $top . $or . $list_open . $list_items . $close_list . $close;
+      }
+      else {
+        $or = '<div class="text-center ssp-line-or-line ssp-line-or-line--bottom"><span class="ssp-line-or-line__or">' . $this->t('{themevanilla:discopower:or}') . '</span></div>';
+        echo $top . $list_open . $list_items . $close_list . $or . $close;
+      }
     }
   }
 }