Make sign-in functionality more visible (#5569)

* Introduce sign-in banner

* Show/hide sign-in banner

* Improvements

* Fixed banner for white theme.

3 files changed, 88 insertions, 2 deletions

diff --git a/web/gui/index.html b/web/gui/index.html
index 0a6ff25015..83fbd6c58b 100644
--- a/web/gui/index.html
+++ b/web/gui/index.html
@@ -13,7 +13,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="author" content="costa@tsaousis.gr">
 
-    <link rel="stylesheet" type="text/css" href="main.css?v=4">
+    <link rel="stylesheet" type="text/css" href="main.css?v=5">
 
     <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAACyklEQVRYhcWXz0sUYRjHP8+wLItImEhnEfEgEVJk+56CbCECQWezOkTQTTp6kejgKUSoEAoK/wAhaaeDBkLoIahZIWIJo0U8hHQJJBYJERGfDrOju7PjuO5u6/c0PM/7zvfzvvP+eEaoVu6wBZIA3cW82wtvY7cD1xEWSTpb1bxWjm2RtbtQxoF7iLSA7gO/UL4A74G3mBIzNz0Peg1hFmUK46zXBuDaCYQJlDFE4ke/QreAZyhPMc42rt2PyEoxt4cyDUxgnO3qAVy7C8gg0hdFHwBZA0ZIOt9w7e+I9B6mdBVhmGTlbFQCuPYFhA8g56o3P3D6CwyiDCIyFshtgqRIZnKlUStg3lW7OYC0AvPATkiuA9U3uOlEOEDWTgCZ2s3LIMbCU9ID3A8HUCZO9s2jGCRxdFIflDUF/EX3I3q1N0iq+8BZf+v6MzDeFHMAEQvoJpuOAwiu3Qr89g6ZJkm5CnoHeBwDbjTV3CPoRRhF+WQBA801B+AJiAUMWMDFptuLtBef+iygs+kAh+q0gDOnCNBmETyOmywLKJyifyEG/ATqPP+LUt0FZoAlIA6MgNyKqDo2YkAO6G+QeQrjfCyJzuHaoyCvjuiVs4q0jdBMwNyTcV6j+jm0h7BkAYuohpZLJ1TUQJYrIqo7KAtW8VaabQBA1GVWmROZwzgFfwtOoRpealevdGg0a8eAoUB0D9VJ8M8A46yDTNdlL9wmaz8MMX9RrIQOpfoS4+S9br7cdAvoCiLn6wLxFtwyQhxlKMQ8j3CJpFeml+9QN90N6iLSURfEkXD8AQwms+aHyo9hk1kHSaG6+Z/MU6XmlQAeRA7EoLraQPM83si/BlPhF5E3E1dQfY5S++5Q/9dMLwdH7uv4n1PX7gEeAXejy+0y4x2QOWASk8lHNT0e4AAk3QZ6E6+E68MrZNqK2QKwgXevLCEskHSqumX/AUXU5QBtOC5FAAAAAElFTkSuQmCC">
 
@@ -163,6 +163,17 @@
         <div id="navbar-highlight-content" class="navbar-highlight-content"></div>
     </div>
 
+    <div id="sign-in-banner" style="display: none">
+        <div class="container">
+            Like what you see? 
+            <strong><a href="#" class="__link" onclick="signInDidClick(event); return false">Sign in</a> 
+            to experience the full-range of netdata capabilities!</strong>
+            <div class="__close" onclick="closeSignInBannerDidClick(event)">
+                Close <i class="fas fa-times"></i>
+            </div>
+        </div>
+    </div>
+    
     <div id="masthead" style="display: none;">
         <div class="container">
             <div class="row">
diff --git a/web/gui/main.css b/web/gui/main.css
index b1fb94fdd5..994dbdb742 100644
--- a/web/gui/main.css
+++ b/web/gui/main.css
@@ -667,3 +667,49 @@ body.modal-open {
     font-size: 18px;
 }
 
+.sign-in-btn {
+    background-color: #1E2126;
+}
+
+.sign-in-btn.theme-white {
+    background-color: #e6e6e6;
+}
+
+.sign-in-btn.theme-white span {
+    color: #000;
+}
+
+#sign-in-banner {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    /* margin: 5px 0; */
+    background-color: #1E2126;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+}
+
+#sign-in-banner.theme-white {
+    background-color: #e6e6e6;
+}
+
+#sign-in-banner .__link {
+    color: #17CE8A;
+}
+
+#sign-in-banner .__link:hover {
+    text-decoration: underline;
+}
+
+#sign-in-banner .__close {
+    cursor: pointer;
+    float: right;
+}
+
+#sign-in-banner .__close .fa-times {
+    margin-left: 5px;
+    color: #17CE8A;
+}
diff --git a/web/gui/main.js b/web/gui/main.js
index c6a2bac135..c69f828b47 100644
--- a/web/gui/main.js
+++ b/web/gui/main.js
@@ -4044,6 +4044,14 @@ function runOnceOnDashboardWithjQuery() {
     // ------------------------------------------------------------------------
     // sidebar / affix
 
+    if (shouldShowSignInBanner()) {
+        const el = document.getElementById("sign-in-banner");
+        if (el) {
+            el.style.display = "initial";
+            el.classList.add(`theme-${netdataTheme}`);
+        }
+    }
+
     $('#sidebar')
         .affix({
             offset: {
@@ -4685,6 +4693,26 @@ function signInDidClick(e) {
     signIn();
 }
 
+function shouldShowSignInBanner() {
+    if (isSignedIn()) {
+        return false;
+    }
+
+    return localStorage.getItem("signInBannerClosed") != "true";
+}
+
+function closeSignInBanner() {
+    localStorage.setItem("signInBannerClosed", "true");
+    const el = document.getElementById("sign-in-banner");
+    if (el) {
+        el.style.display = "none";
+    }
+}
+
+function closeSignInBannerDidClick(e) {
+    closeSignInBanner();
+}
+
 function signOutDidClick(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -4779,7 +4807,7 @@ function renderAccountUI() {
         container.setAttribute("data-original-title", "sign in");
         container.setAttribute("data-placement", "bottom");
         container.innerHTML = (
-            `<a href="#" class="btn" onclick="signInDidClick(event); return false">
+            `<a href="#" class="btn sign-in-btn theme-${netdataTheme}" onclick="signInDidClick(event); return false">
                 <i class="fas fa-sign-in-alt"></i>&nbsp;<span class="hidden-sm hidden-md">Sign In</span>
             </a>`
         )
@@ -4802,6 +4830,7 @@ function handleMessage(e) {
 }
 
 function handleSignInMessage(e) {
+    closeSignInBanner();
     localStorage.setItem("cloud.baseURL", NETDATA.registry.cloudBaseURL);
 
     cloudAccountID = e.data.accountID;