update names for html classnames; update docs

Readme.md

@@ -12,4 +12,3 @@ With it you can let login people with AAI / EDUGAIN on their own university and
 ⚠️ Work in progress!
 
 ![Login screen with mode "boxes"](docs/images/login_mode_boxes.png)
-

docs/20_Features.md

 ## Features
 
-* Displays a list of allowed Identity providers
-* The list is filtered during typing in the search field. When entering multiple words all keywords must match.
+* Displays a list of allowed Identity providers without enabled javascript
+* Filter by typing: The list of IDPs reduces during typing in the search field. When entering multiple words all keywords must match.
 * The filter is stored in localstorage of the webbrowser. On reload or the next week the last filter will be activated.
 * A set of filter buttons by TLD will be generated. It is shown when minimum 2 TLDs were found.
 * An active shibboleth session will bedetected and hides the list of organisations

docs/40_Installation.md

 ## Installation
 
+### Get the software
+
+#### Git
+
+#### Manuel steps
+
 * In the webroot create a subfolder "login_aai". 
 * Extract the files there.
+
+## Bring it up
+
+This is the filestructure you get
+
+```text
+
+├── Readme.md
+├── classes
+│   :
+│
+├── config.php.dist      <<< config template
+├── docs
+│   :
+│
+├── functions.js         <<< Javascript
+├── inc_functions.php
+├── inc_mode_boxes.php   <<< View: boxes that can be filtered
+├── inc_mode_wayf.php    <<< View: WAYF javascript from Switch
+├── index.php
+├── lang                 <<< folder with translation files (Json)
+│   :
+│
+└── login_aai.css
+```
+
+* Copy **config.php.dist** to config.php and make your changes. See chapter Configuration.
 * Do NOT protect this folder with Shibboleth that it can be accessed anonymous
-* Copy config.php.dist to config.php and make your changes. See chapter Configuration.
 * Set a Link for Login to `/login_aai/` where needed
+* For local development see the pade "Development"
+
+## Notes
 
 The web ui offers just a frontend for your visitors to link multiple organisations.
 
-That the login at other IDP work you need to
+That the logins at another IDP work you need to
 
-* create a Service provider on your AAI Federation
-* configure Shibboleth and whitelist the wanted IDPs
+* Create a Service provider on your AAI Federation
+* Configure Shibboleth and whitelist the wanted IDPs
 * For access from other federations (countries):
   * You and your partner need to enablle EDUGAIN.
   * The parter IDP must enable the domain of your website

docs/90_Development.md

@@ -2,6 +2,7 @@
 
 * Requirements: local installation of php; you can use its internal webservice
 * Extract files in a local folder or use git clone
+* in functions.js set `var bShowLoginOnError = false;`to `true`
 * start `php -S localhost:9000` and open <http://localhost:9000> in your webbrowser
 * Get the files of the discofeed from a production machine running shibboleth and store it as discofeed cache file:<br> `curl https://example.com/Shibboleth.sso/DiscoFeed > discofeed.json`
 * After reachin cache TTL you can repeat the curl command or `touch discofeed.json`

functions.js

@@ -92,6 +92,7 @@ function resetFilter() {
  * and apllies this filter
  */
 function showFilterBox() {
+    displayClass('showForLogin', true);
     if (oFilter) {
         var q = localStorage.getItem(sLsvar);
         if (!q) {
@@ -140,6 +141,19 @@ function showError($sMessage){
     document.getElementById('errorbox').style.display = 'block';
 }
 
+
+/**
+ * Show or hide a group of objects by given class name
+ * @param {string} sClass2Show  Classname to show or hide
+ * @param {string} $bShow       true= show; false = hide
+ */
+function displayClass(sClass, bShow){
+    aObjects = document.getElementsByClassName(sClass);
+    for (var i = 0; i < aObjects.length; i++) {
+        aObjects[i].style.display = (bShow ? 'block' : 'none');
+    }
+}
+
 /**
  * Check if user is logged in in Shibboleth.
  * It shows an error, ib shibboleth is not available.
@@ -150,6 +164,8 @@ async function checkSession() {
     try {
         const response = await fetch(url);
         if (!response.ok) {
+
+            // No Shibboleth ... no response or 404 or other error
             showError(
                 t('shib-check-failed') + " " + response.status + '<br>' 
                 + t('shib-hide-login')
@@ -157,11 +173,12 @@ async function checkSession() {
             if(bShowLoginOnError) {
                 showFilterBox();
             } else {
-                document.getElementById('shib-select-idp').style.display = 'none';
+                displayClass('showForLogin', false);
             }
             throw new Error(`Response status: ${response.status}`);
         }
 
+        // Shibboleth found - check if logged in
         const body = await response.text();
         if (body.indexOf("was not found") > 0) {
             // console.log("Not logged in");
@@ -169,13 +186,11 @@ async function checkSession() {
             showFilterBox();
         } else {
             // console.log("Logged in already");
-            document.getElementById('shib-check-logged-in').style.display = 'block';
+            displayClass('showIfLoggedIn', true);
             if(!bShowLoginOnError) {
-                document.getElementById('shib-select-idp').style.display = 'none';
+                displayClass('showForLogin', false);
             }
         }
-
-        // ...
     } catch (error) {
         console.error(error.message);
     }

inc_mode_boxes.php

@@ -37,12 +37,12 @@ if (is_array($aIdplist) && count($aIdplist)) {
             $sId='filterbtn-dot-'.str_replace('.', '', $sTld);
             $sDomainFilter.='<a href="#" id="'.$sId.'" class="filterbutton" onclick="setFilter(\'#'.$sTld.' \'); return false;">.'.$sTld.'</a> ';
         }
-        $sDomainFilter = '<div id="filterByDomain">'. $sDomainFilter . '</div>';
+        $sDomainFilter = '<div id="filterByDomain" class="hidden showForLogin">'. $sDomainFilter . '</div>';
     }
 
-    echo '<div id="filterbox"></div>'
+    echo '<div id="filterbox" class="hidden showForLogin"></div>'
         . $sDomainFilter
-        .'<div class="boxes">
+        .'<div class="boxes showForLogin">
             '.$sOut.'
             </div><div style="clear:both"></div>';
     

index.php

@@ -9,6 +9,7 @@
     Institute for Medical Education; University of Bern
     License: GNU GPL 3.0
     Source: https://git-repo.iml.unibe.ch/iml-open-source/login-aai
+    Docs: https://os-docs.iml.unibe.ch/login-aai/
     ----------------------------------------------------------------------
     2024-09-13    Initial version
     ======================================================================
@@ -20,8 +21,9 @@
         'title' => 'AAI Login',
         'author' => 'Axel Hahn, Institute for Medical Education, University of Bern',
         'source' => 'https://git-repo.iml.unibe.ch/iml-open-source/login-aai',
+        'docs' => 'https://os-docs.iml.unibe.ch/login-aai/',
         'license' => 'GNU GPL 3.0',
-        'version' => '0.3',
+        'version' => '0.4',
     ];
 
 ?><!DOCTYPE html>
@@ -59,7 +61,7 @@
             echo '<div id="errorbox" class="msg error hidden"></div>';
 
             // --- text block if the user is logged in already
-            echo '<div id="shib-check-logged-in" class="hidden">
+            echo '<div id="shib-check-logged-in" class="hidden showIfLoggedIn">
             <h2>'.$L->t('logged-in-already-title').'</h2>
             <p>
                 '.$L->t('logged-in-already-text').'<br>
@@ -67,12 +69,12 @@
             </p>
             </div>';
 
-            echo '<div id="shib-select-idp">';
+            echo '<div id="shib-select-idp" class="showForLogin">';
 
                 // --- Text before
                 echo $aConfig['text-before'] ?? '' ; 
 
-                // --- show possible logins
+                // --- show Organizations / IDPs with defined view
                 include "inc_mode_".$aConfig['mode'].".php";
 
             echo '</div>';
@@ -88,7 +90,7 @@
     <footer>
         <strong><?php echo $aConfig['title'] ?? 'AAI Login'; ?></strong><br>
         <?php echo $aAbout['title'].' v' .$aAbout['version']; ?> - 
-        <a href="<?php echo $aAbout['source']; ?>">Source</a>
+        <a href="<?php echo $aAbout['docs']; ?>">Docs</a>
     </footer>
 </body>
 

lang/de.json

@@ -8,8 +8,6 @@
 
     "resetfilter-title": "Filter zurücksetzen und alle Organisationen anzeigen",
 
-    "discolang": "de",
-
     "shib-check-failed": "FEHLER: Shibboleth wurde nicht am Server gefunden. Fehlercode: ",
     "shib-check-logged-in": "Sie sind bereits eingeloggt.",
 

lang/en.json

@@ -8,8 +8,6 @@
 
     "resetfilter-title": "Reset filter and show all IDPs",
 
-    "discolang": "en",
-
     "shib-check-failed": "ERROR: Shibboleth is not available on this server. Errorcode: ",
     "shib-check-logged-in": "You are already logged in.",