From cc6590257da36bb2029284312acfe92997e0322e Mon Sep 17 00:00:00 2001
From: Andrew <mcdeweykp@gmail.com>
Date: Tue, 28 Sep 2021 17:02:15 -0400
Subject: [PATCH 1/3] Adds popover alerts to config page. Adds a button to show
 API key so it's not just out there.

---
 .../templates/panel/panel_config.html         | 48 ++++++++++++++-----
 app/translations/en_EN.json                   |  1 +
 app/translations/fi_FI.json                   |  1 +
 app/translations/fr_FR.json                   |  1 +
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/app/frontend/templates/panel/panel_config.html b/app/frontend/templates/panel/panel_config.html
index 29db621c..920a3e27 100644
--- a/app/frontend/templates/panel/panel_config.html
+++ b/app/frontend/templates/panel/panel_config.html
@@ -30,10 +30,9 @@
             <div class="col-md-12 col-lg-12 grid-margin stretch-card">
               <div class="card">
                 <div class="card-header header-sm d-flex justify-content-between align-items-center">
-                  <h4 class="card-title"><i class="fas fa-users"></i> Users</h4>
-                  <div class="d-md-none">
-                    <small>Can't see everything on mobile?<br /> Try scrolling the table sideways.</small>
-                  </div>
+                      <h4 class="card-title"><i class="fas fa-users"></i> Users</h4>
+                      <span class="too_small" title="{{ translate('dashboard', 'cannotSee') }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2') }}", data-placement="top"></span>
+                  
                   <div><a class="nav-link" href="/panel/add_user"><i class="fas fa-plus-circle"></i> &nbsp; Add New User</a></div>
                 </div>
                 <div class="card-body">
@@ -53,7 +52,7 @@
                       {% for user in data['users'] %}
                         <tr>
                           <td><i class="fas fa-user"></i> {{ user.username }}</td>
-                          <td>
+                          <td style="max-width: 30px;">
                             {% if user.enabled %}
                               <span class="text-success">
                                 <i class="fas fa-check-square"></i> Yes
@@ -66,15 +65,15 @@
                             {% end %}
 
                           </td>
-                          <td>{{ user.api_token }}</td>
+                          <td style="max-width: 30px;"><button data-toggle="tooltip" title="Show API Key" data-id="{{ user.api_token }}" type="button" class="btn btn-info show_button">Show</button></td>
                           <td class="server_list_{{user.user_id}}"><ul id="{{user.user_id}}">
                             {% for item in data['auth-servers'][user.user_id] %}
                             <li>{{item}}</li>
                             {% end %}
                           </ul></td>
-                          <td class="role_list_{{user.user_id}}"><ul>
+                          <td class="role_list_{{user.user_id}}" style="max-width: 100px; overflow: scroll;"><ul>
                             {% for item in data['user-roles'][user.user_id] %}
-                            <li>{{item}}</li>
+                            <li data-toggle="tooltip" title="{{ item }}">{{item}}</li>
                             {% end %}
 
                           <td><a href="/panel/edit_user?id={{user.user_id}}"><i class="fas fa-pencil-alt"></i></a></td>
@@ -93,9 +92,7 @@
               <div class="card">
                 <div class="card-header header-sm d-flex justify-content-between align-items-center">
                   <h4 class="card-title"><i class="fas fa-user-tag"></i> Roles</h4>
-                  <div class="d-md-none">
-                    <small>Can't see everything on mobile?<br /> Try scrolling the table sideways.</small>
-                  </div>
+                    <span class="too_small" title="{{ translate('dashboard', 'cannotSee') }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2') }}", data-placement="top"></span>
                   <div><a class="nav-link" href="/panel/add_role"><i class="fas fa-plus-circle"></i> &nbsp; Add New Role</a></div>
                 </div>
                 <div class="card-body">
@@ -146,17 +143,46 @@
 
 
 </div>
+
+<style>
+  .popover-body{
+    color: white !important;;
+}
+</style>
 <!-- content-wrapper ends -->
 
 {% end %}
 
 {% block js %}
 <script>
+$(document).ready(function(){ 
+  $('[data-toggle="popover"]').popover();
+    $('.too_small').popover("show");
+  
+  
+});
+ $(window).ready(function(){
+        $('body').click(function(){
+            $('.too_small').popover("hide");
+    });
+});
+</script>
+<script>
 
 $( document ).ready(function() {
   console.log('ready for JS!')
 
 });
+
+  $( ".show_button" ).click(function() {
+    console.log("showing key");
+   api_key = $(this).attr("data-id");
+    bootbox.alert({
+      backdrop: true,
+      title: '',
+      message: api_key,
+    });
+  });
 </script>
 
 {% end %}
\ No newline at end of file
diff --git a/app/translations/en_EN.json b/app/translations/en_EN.json
index 2d9e8001..368cde3a 100644
--- a/app/translations/en_EN.json
+++ b/app/translations/en_EN.json
@@ -82,6 +82,7 @@
         "nextBackup": "Next:",
         "servers": "Servers",
         "cannotSeeOnMobile": "Not seeing everything on mobile?",
+        "cannotSee": "Not seeing everything?",
         "cannotSeeOnMobile2": "Try scrolling the table sideways.",
         "max": "Max",
         "avg": "Avg",
diff --git a/app/translations/fi_FI.json b/app/translations/fi_FI.json
index 5d01e14b..24eebb9d 100644
--- a/app/translations/fi_FI.json
+++ b/app/translations/fi_FI.json
@@ -82,6 +82,7 @@
         "nextBackup": "Seuraava:",
         "servers": "Palvelimet",
         "cannotSeeOnMobile": "Etkö näe kaikkea mobiililaitteella?",
+        "cannotSee": "Not seeing everything?",
         "cannotSeeOnMobile2": "Yritä vierittää taulukkoa sivuttain.",
         "max": "maks.",
         "avg": "ka.",
diff --git a/app/translations/fr_FR.json b/app/translations/fr_FR.json
index 439574b1..7ab93802 100644
--- a/app/translations/fr_FR.json
+++ b/app/translations/fr_FR.json
@@ -82,6 +82,7 @@
         "nextBackup": "Prochain:",
         "servers": "Serveurs",
         "cannotSeeOnMobile": "Impossible de tout voir sur mobile ?",
+        "cannotSee": "Not seeing everything?",
         "cannotSeeOnMobile2": "Essaie de déplacer le tableau sur le côté.",
         "max": "Max",
         "avg": "Moy",

From 9b089bc8492e2e7287a65736d10c60771c678a0a Mon Sep 17 00:00:00 2001
From: Andrew <mcdeweykp@gmail.com>
Date: Tue, 28 Sep 2021 17:03:32 -0400
Subject: [PATCH 2/3] Fixes translations

---
 app/translations/fi_FI.json | 2 +-
 app/translations/fr_FR.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/translations/fi_FI.json b/app/translations/fi_FI.json
index 24eebb9d..79b1ca07 100644
--- a/app/translations/fi_FI.json
+++ b/app/translations/fi_FI.json
@@ -82,7 +82,7 @@
         "nextBackup": "Seuraava:",
         "servers": "Palvelimet",
         "cannotSeeOnMobile": "Etkö näe kaikkea mobiililaitteella?",
-        "cannotSee": "Not seeing everything?",
+        "cannotSee": "Etkö näe kaikkea?",
         "cannotSeeOnMobile2": "Yritä vierittää taulukkoa sivuttain.",
         "max": "maks.",
         "avg": "ka.",
diff --git a/app/translations/fr_FR.json b/app/translations/fr_FR.json
index 7ab93802..f201bd57 100644
--- a/app/translations/fr_FR.json
+++ b/app/translations/fr_FR.json
@@ -82,7 +82,7 @@
         "nextBackup": "Prochain:",
         "servers": "Serveurs",
         "cannotSeeOnMobile": "Impossible de tout voir sur mobile ?",
-        "cannotSee": "Not seeing everything?",
+        "cannotSee": "Ne pas tout voir?",
         "cannotSeeOnMobile2": "Essaie de déplacer le tableau sur le côté.",
         "max": "Max",
         "avg": "Moy",

From 97c74a873f830bd35e43880bfa1c2ca3d591f5c5 Mon Sep 17 00:00:00 2001
From: Andrew <mcdeweykp@gmail.com>
Date: Tue, 28 Sep 2021 20:15:29 -0400
Subject: [PATCH 3/3] Fixes show/hide for popovers on dash and on config

---
 app/frontend/templates/panel/dashboard.html   | 15 ++++++++++---
 .../templates/panel/panel_config.html         | 22 +++++++++++++++++--
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/app/frontend/templates/panel/dashboard.html b/app/frontend/templates/panel/dashboard.html
index 68265057..5c8a22b1 100644
--- a/app/frontend/templates/panel/dashboard.html
+++ b/app/frontend/templates/panel/dashboard.html
@@ -81,9 +81,7 @@
         <div class="card-header header-sm d-flex justify-content-between align-items-center">
           <h4 class="card-title"><i class="fas fa-server"></i> &nbsp;{{ translate('dashboard', 'allServers') }}</h4>
           {% if len(data['servers']) > 0 %}
-          <div class="d-md-none">
           <span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile') }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2') }}", data-placement="top"></span>
-          </div>
           {% end %}
           <div><a class="nav-link" href="/server/step1"><i class="fas fa-plus-circle"></i> &nbsp; {{ translate('dashboard', 'newServer') }}</a></div>
         </div>
@@ -226,7 +224,9 @@
 <script>
 $(document).ready(function(){ 
   $('[data-toggle="popover"]').popover();
-  $('.too_small').popover("show");
+    if($(window).width() < 1000){
+    $('.too_small').popover("show");
+  }
   
 });
  $(window).ready(function(){
@@ -234,6 +234,15 @@ $(document).ready(function(){
             $('.too_small').popover("hide");
     });
 });
+$(window).resize(function() {
+  // This will execute whenever the window is resized
+  if($(window).width() < 1000){
+    $('.too_small').popover("show");
+  }
+  else{
+    $('.too_small').popover("hide");
+  } // New width
+});
 </script>
 <script>
 
diff --git a/app/frontend/templates/panel/panel_config.html b/app/frontend/templates/panel/panel_config.html
index 920a3e27..55c6ef0c 100644
--- a/app/frontend/templates/panel/panel_config.html
+++ b/app/frontend/templates/panel/panel_config.html
@@ -92,7 +92,7 @@
               <div class="card">
                 <div class="card-header header-sm d-flex justify-content-between align-items-center">
                   <h4 class="card-title"><i class="fas fa-user-tag"></i> Roles</h4>
-                    <span class="too_small" title="{{ translate('dashboard', 'cannotSee') }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2') }}", data-placement="top"></span>
+                    <span class="too_small2" title="{{ translate('dashboard', 'cannotSee') }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2') }}", data-placement="top"></span>
                   <div><a class="nav-link" href="/panel/add_role"><i class="fas fa-plus-circle"></i> &nbsp; Add New Role</a></div>
                 </div>
                 <div class="card-body">
@@ -157,15 +157,33 @@
 <script>
 $(document).ready(function(){ 
   $('[data-toggle="popover"]').popover();
+    if($(window).width() < 1000){
     $('.too_small').popover("show");
-  
+    $('.too_small2').popover("show");
+  }
   
 });
  $(window).ready(function(){
         $('body').click(function(){
             $('.too_small').popover("hide");
+            $('.too_small2').popover("hide");
     });
 });
+$(window).resize(function() {
+  // This will execute whenever the window is resized
+  if($(window).width() < 1000){
+    $('.too_small').popover("show");
+  }
+  else{
+    $('.too_small').popover("hide");
+  } // New width
+    if($(window).width() < 1000){
+    $('.too_small2').popover("show");
+  }
+  else{
+    $('.too_small2').popover("hide");
+  } // New width
+});
 </script>
 <script>