Add explanatory texts in GUI Settings sections

Sections affected: Cloud, What to sync

agkyra/resources/nwgui/settings.html

@@ -93,11 +93,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             var logout_win = null;
             var got_cookie = false;
             var show_creds = true;
+
+            function creds_on() {
+                $('#get_creds').removeClass("off");
+                $('#get_creds').addClass("on");
+
+            }
+
+            function creds_off() {
+                $('#get_creds').removeClass("on");
+                $('#get_creds').addClass("off");
+            }
+
             function get_credentials() {
                 var cookie_name = '_pithos2_a';
                 var lurl = get_account_ui() + '/logout?next=' + get_pithos_ui()
                 show_creds = false;
-                $('#get_creds').hide();
+                creds_off();
                 got_cookie = false;
                 cred_win = gui.Window.open(lurl, {
                     focus: true, width: 820, height: 580, toolbar: false
@@ -131,6 +143,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 if(!url) {
                     $('#cloud-error small').text(errors.cloud_url_empty);
                     $('#cloud-error').addClass('error');
+                    creds_off();
                     return false;
                 } else {
                     refresh_endpoints(url);
@@ -229,6 +242,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 document.getElementById('directory_label').innerHTML = SETTINGS.DIRECTORY || "Directory";
                 document.getElementById('dirdialogue_label').innerHTML = SETTINGS.DIRDIALOGUE || "Select directory";
                 document.getElementById('sync_button').innerHTML = SETTINGS.SAVE;
+                document.getElementById('explain_cloud').innerHTML = SETTINGS["EXPLAIN CLOUD"] || "Go to the cloud site, login, click API ACCESS and copy the Authentication URL in the first box.";
+                document.getElementById('explain_sync').innerHTML = SETTINGS["EXPLAIN SYNC"] || "Pair a remote Pithos+ container with a local directory";
 
                 var cloud_placeholder = SETTINGS["CLOUD URL PLACEHOLDER"] || "Authentication URL";
                 $('#cloud-url').attr('placeholder', cloud_placeholder);
@@ -256,9 +271,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             window.setInterval(function() {
                 // Refresh get_creds visibility, until refresh_endpoints
                 // changes are in effect
-                if (get_pithos_ui() && show_creds) {
-                    $('#get_creds').show();
-                } else {$('#get_creds').hide();}
+                if (get_pithos_ui() && show_creds) creds_on();
+                else creds_off();
                 check_cloud_url();
                 check_token();
             }, 500);
@@ -291,6 +305,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                 </fieldset>
                 <fieldset>
                     <legend id="cloud_label">Cloud</legend>
+                    <div id="explain_cloud" class="row clearfix explain"> &nbsp; </div>
                     <div class="clearfix">
                         <div class="small-3 columns">
                             <label id="url_label" for="cloud-url" class="right inline">Cloud URL</label>
@@ -318,15 +333,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                      </div>
 
                     <div class="clearfix">
-                        <div class="small-8 columns"></div>
+                        <div class="small-9 columns"></div>
                        <a id="get_creds"
-                            class="small-4 columns button right" style="display: none;"
+                            class="small-3 columns button right off"
                             onclick="get_credentials();">Login to retrieve token</a>
                     </div>
 
                 </fieldset>
                 <fieldset>
                     <legend id="sync_label">What to sync</legend>
+                    <div id="explain_sync" class="row clearfix explain"> &nbsp; </div>
                     <div class="row clearfix">
                         <div class="small-3 columns">
                             <label id="container_label" for="container" class="right inline">Remote container</label>
@@ -348,11 +364,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                             Select</div>
                     </div>
                     <div class="row clearfix">
-                        <div class="small-3 columns">&nbsp;</div>
                         <div id="directory-error" class="small-6 columns">
                             <small>Invalid entry</small>
                         </div>
-                        <div class="small-3 columns">&nbsp;</div>
                     </div>
 
                     <input type="file" id="choose-dir" nwdirectory

agkyra/resources/nwgui/static/stylesheets/main.css

@@ -154,6 +154,14 @@ button, .button, .pickdir {
     transition: background-color 300ms ease-out;
 }
 
+a.on {
+    background-color: #008CBA;
+}
+a.off {
+    background-color: #cccccc;
+    pointer-events: none;
+}
+
 input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"],  textarea {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -214,6 +222,17 @@ textarea {
     height: 150px;
     max-height: 150px;
 }
+div.explain {
+    padding: 0.2rem 0.2rem;
+    margin: 0 0.85rem 0.35rem;
+    font-size: 65%;
+    font-weight: 100;
+    font-style: italic;
+    color: #a0a0a0;
+    border-color: #a0a0a0;
+    border-style: dashed;
+    border-width: 0.1rem;
+}
 
 #directory {
     padding-top: 0.35rem;

agkyra/resources/ui_data/common_el.json

@@ -66,15 +66,17 @@
         "DIRECTORY": "Τοπικός φάκελος",
         "DIRDIALOGUE": "Επιλογή φακέλου",
         "SAVE": "Αποθήκευση",
-        "CLOUD URL PLACEHOLDER": "Διεύθυνση (URL) εξουσιοδότησης",
-        "TOKEN PLACEHOLDER": "Κλειδί (token) πρόσβασης",
-        "CONTAINER PLACEHOLDER": "Απομακρυσμένος περιέκτης Pithos+",
+        "CLOUD URL PLACEHOLDER": "https://accounts.example.com/identity/v2.0",
+        "TOKEN PLACEHOLDER": "Αντιγράψτέ εδώ το κλειδί (token) πρόσβασης",
+        "CONTAINER PLACEHOLDER": "Πληκτρολογήστε τον περιέκτη (container)",
         "CLOUD URL IS EMPTY": "Δώστε τη Διεύθυνση (URL) εξουσιοδότησης του νέφους",
         "CLOUD URL UNEXPECTED RESPONSE": "Η απόκριση του νέφους δεν ήταν η αναμενόμενη",
         "TOKEN IS EMPTY": "Δώστε το κλειδί πρόσβασης (token) ή επιλέξτε είσοδο με όνομα χρήστη/κωδικό",
         "AUTHENTICATION FAILED": "Η εξουσιοδότηση απέτυχε",
         "TOKEN WITHOUT CLOUD": "Δεν έχετε δώσει διεύθυνση νέφους",
         "PROVIDE CONTAINER": "Δώστε το όνομα του περιέκτη (container) Pithos+",
-        "SELECT DIRECTORY": "Επιλέξτε ένα τοπικό φάκελο"
+        "SELECT DIRECTORY": "Επιλέξτε ένα τοπικό φάκελο",
+        "EXPLAIN CLOUD": "Για να ρυθμίσετε την πρόσβαση, επισκευθείτε τη σελίδα του νέφους και μετά την είσοδο επιλέξτε <u>API Access</u>. Βρείτε το URL και το κλειδί (token) και αντιγράψτε τα παρακάτω, είτε αντιγράψτε μόνο το URL και εισέλθετε με όνομα χρήστη/κωδικό.",
+        "EXPLAIN SYNC": "Για να θέσετε ένα ζεύγος περιέκτη (container) - τοπικού φακέλου, πληκτρολογήστε τον περιέκτη και χρησιμοποιήστε το κουμπί <u>Επιλογή φακέλου</u>. Αν ο περιέκτης δεν υπάρχει στο απομακρυσμένο σύστημα, θα δημιουργηθεί αυτόματα."
     }
 }

agkyra/resources/ui_data/common_en.json

@@ -66,15 +66,17 @@
         "DIRECTORY": "Local directory",
         "DIRDIALOGUE": "Select directory",
         "SAVE": "Save",
-        "CLOUD URL PLACEHOLDER": "Authentication URL",
-        "TOKEN PLACEHOLDER": "User token",
-        "CONTAINER PLACEHOLDER": "Pithos+ container",
+        "CLOUD URL PLACEHOLDER": "https://accounts.example.com/identity/v2.0",
+        "TOKEN PLACEHOLDER": "Copy your token here",
+        "CONTAINER PLACEHOLDER": "Type a Pithos+ container here",
         "CLOUD URL IS EMPTY": "Provide a Cloud Authentication URL",
         "CLOUD URL UNEXPECTED RESPONSE": "Cloud URL did not respond as expected",
         "TOKEN IS EMPTY": "Provide a user token or login with user name/password",
         "AUTHENTICATION FAILED": "Failed to authenticate",
         "TOKEN WITHOUT CLOUD": "The cloud URL is missing",
         "PROVIDE CONTAINER": "Provide the name of the Pithos+ container",
-        "SELECT DIRECTORY": "Select the local directory"
+        "SELECT DIRECTORY": "Select the local directory",
+        "EXPLAIN CLOUD": "To get the cloud credentials, browse to your cloud website, log in and click on <u>API Access</u>. Find the URL and token and copy them bellow, or copy the URL and click the button to login with username/password.",
+        "EXPLAIN SYNC": "To pair a container with a directory, type the container and click on <u>Select directory</u>. If the container does not exist on the remote site, it will be created."
     }
 }