A GUI selector to define connection (Simple or Full)

README

@@ -23,6 +23,17 @@ available to the administrator of the group.
 Some statistics are available under `/stats.json`, with a human-readable
 version at `/stats.html`.  This is only available to the server administrator.
 
+## GUI parameters
+
+In `statics` directory, we can create `guiconfig.json` file (`guiconfig-template.json` exists for templating.).
+This file contains parameters to modify GUI interface.
+
+### selector
+
+It's an integer with 3 values:
+ - 0: Full connexion (no selector). User must enter username, password and  enabled option.
+ - 1: Simple connexion (no selector). User must onlu enter username.
+ - 2: User can select connexion mode (simple ou full).
 
 ## Side menu
 

static/common.css

@@ -6,6 +6,12 @@ h1 {
     display: inline;
 }
 
+.inline-half {
+    width: 100px;
+    display: inline-table;
+    margin-left:10px
+}
+
 .signature {
     border-top: solid;
     padding-top: 0;
@@ -41,4 +47,4 @@ textarea {
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
-}
+}

static/galene.html

@@ -102,14 +102,19 @@ <h1 id="title" class="header-title">Galène</h1>
               <div class="login-container invisible" id="login-container">
                 <div class="login-box">
                   <form id="userform" class="userform">
+                    <label class="selector" for="connection">Connection</label>
+                    <div class="selector">
+                        <span class="inline-half"><input type="radio" name="connection" value="simple" checked>Simple</input></span>
+                        <span class="inline-half"><input type="radio" name="connection" value="full">Full</input></span>
+                    </div>
                     <label for="username">Username</label>
                     <input id="username" type="text" name="username"
                            autocomplete="username" class="form-control"/>
-                    <label for="password">Password</label>
+                    <label for="password" class="full">Password</label>
                     <input id="password" type="password" name="password"
-                           autocomplete="current-password" class="form-control"/>
-                    <label>Enable at start:</label>
-                    <div class="present-switch">
+                           autocomplete="current-password" class="full form-control"/>
+                    <label class="full">Enable at start:</label>
+                    <div class="present-switch full">
                       <p class="switch-radio">
                         <input id="presentoff" type="radio" name="presentradio" value="" checked/>
                         <label for="presentoff">Nothing</label>

static/galene.js

@@ -3550,6 +3550,66 @@ async function serverConnect() {
     }
 }
 
+async function guiConfig() {
+    let config;
+    try {
+        let r = await fetch('/guiconfig.json');
+        if(!r.ok) {
+            r = await fetch('/guiconfig-template.json');
+            if(!r.ok)
+                throw new Error(`${r.status} ${r.statusText}`);
+        }
+        config = await r.json();
+    } catch(e) {
+        console.error(e);
+        config = {};
+    }
+    return config;
+}
+
+function setVisible(items, isVisible) {
+    for(var item_index = 0; item_index < items.length; item_index++) {
+        if (isVisible === false) {
+            items[item_index].style.display = 'None';
+        } else {
+            items[item_index].style.display = null;
+        }
+    }
+}
+
+async function setConnexionOption() {
+    let config = await guiConfig()
+    if (config.selector === 2) {
+        // Connexion with selector
+        setVisible(document.getElementsByClassName('selector'), true);
+        setVisible(document.getElementsByClassName('full'), false);
+        document.getElementsByClassName('login-box')[0].style.height = '14em';
+    } else if (config.selector === 1) {
+        // Connexion Only simple
+        setVisible(document.getElementsByClassName('selector'), false);
+        setVisible(document.getElementsByClassName('full'), false);
+        document.getElementsByClassName('login-box')[0].style.height = '11em';
+    }  else {
+        // Connexion Only full
+        setVisible(document.getElementsByClassName('selector'), false);
+        setVisible(document.getElementsByClassName('full'), true);
+        document.getElementsByClassName('login-box')[0].style.height = '23em';
+    }
+
+    var connection_items = document.getElementsByName('connection');
+    for(var connection_index = 0; connection_index < connection_items.length; connection_index++) {
+        connection_items[connection_index].onchange = function() {
+            if (this.value === 'simple') {
+                setVisible(document.getElementsByClassName('full'), false);
+                document.getElementsByClassName('login-box')[0].style.height = '14em';
+            } else {
+                setVisible(document.getElementsByClassName('full'), true);
+                document.getElementsByClassName('login-box')[0].style.height = '27em';        
+            }
+      }
+    }    
+}
+
 async function start() {
     try {
         let r = await fetch(".status.json")
@@ -3579,6 +3639,7 @@ async function start() {
     addFilters();
     setMediaChoices(false).then(e => reflectSettings());
 
+    await setConnexionOption();
     if(parms.has('token')) {
         token = parms.get('token');
         await serverConnect();

static/guiconfig-template.json

@@ -0,0 +1,3 @@
+{
+	"selector": 0
+}