refine the UI labeling

Author: Indemnity83

frontend/js/app/nginx/access/form.ejs

@@ -8,7 +8,7 @@
             <ul class="nav nav-tabs" role="tablist">
                 <li role="presentation" class="nav-item"><a href="#details" aria-controls="tab1" role="tab" data-toggle="tab" class="nav-link active show" aria-selected="true"><i class="fe fe-zap"></i> <%- i18n('access-lists', 'details') %></a></li>
                 <li role="presentation" class="nav-item"><a href="#auth" aria-controls="tab4" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-users"></i> <%- i18n('access-lists', 'authorization') %></a></li>
-                <li role="presentation" class="nav-item"><a href="#clients" aria-controls="tab2" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-radio"></i> <%- i18n('access-lists', 'clients') %></a></li>
+                <li role="presentation" class="nav-item"><a href="#access" aria-controls="tab2" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-radio"></i> <%- i18n('access-lists', 'access') %></a></li>
             </ul>
 
             <div class="tab-content">
@@ -42,8 +42,8 @@
                     <div class="items"><!-- items --></div>
                 </div>
 
-                <!-- Clients -->
-                <div class="tab-pane" id="clients">
+                <!-- Access -->
+                <div class="tab-pane" id="access">
                     <div class="clients"><!-- clients --></div>
                     <div class="text-muted">Note that the <code>allow</code> and <code>deny</code> directives will be applied in the order they are defined.</div>
                 </div>

frontend/js/app/nginx/access/list/item.ejs

@@ -14,6 +14,9 @@
 <td>
     <%- i18n('access-lists', 'item-count', {count: items.length || 0}) %>
 </td>
+<td>
+    <%- i18n('access-lists', 'client-count', {count: clients.length || 0}) %>
+</td>
 <td>
     <%- i18n('access-lists', 'proxy-host-count', {count: proxy_host_count}) %>
 </td>

frontend/js/app/nginx/access/list/main.ejs

@@ -1,7 +1,8 @@
 <thead>
     <th width="30">&nbsp;</th>
     <th><%- i18n('str', 'name') %></th>
-    <th><%- i18n('users', 'title') %></th>
+    <th><%- i18n('access-lists', 'authorization') %></th>
+    <th><%- i18n('access-lists', 'access') %></th>
     <th><%- i18n('proxy-hosts', 'title') %></th>
     <% if (canManage) { %>
     <th>&nbsp;</th>

frontend/js/app/nginx/proxy/access-list-item.ejs

@@ -3,7 +3,7 @@
         <div class="title">
             <i class="fe fe-lock text-teal"></i> <%- name %>
         </div>
-        <span class="description"><%- i18n('access-lists', 'item-count', {count: items.length || 0}) %> &ndash; Created: <%- formatDbDate(created_on, 'Do MMMM YYYY, h:mm a') %></span>
+        <span class="description"><%- i18n('access-lists', 'item-count', {count: items.length || 0}) %>, <%- i18n('access-lists', 'client-count', {count: clients.length || 0}) %> &ndash; Created: <%- formatDbDate(created_on, 'Do MMMM YYYY, h:mm a') %></span>
     <% } else { %>
         <div class="title">
             <i class="fe fe-unlock text-yellow"></i> <%- i18n('access-lists', 'public') %>

frontend/js/app/nginx/proxy/form.js

@@ -222,7 +222,7 @@ module.exports = Mn.View.extend({
                 }
             },
             load:             function (query, callback) {
-                App.Api.Nginx.AccessLists.getAll(['items'])
+                App.Api.Nginx.AccessLists.getAll(['items', 'clients'])
                     .then(rows => {
                         callback(rows);
                     })

frontend/js/i18n/messages.json

@@ -184,13 +184,14 @@
       "public": "Publicly Accessible",
       "public-sub": "No Access Restrictions",
       "help-title": "What is an Access List?",
-      "help-content": "Access Lists provide authentication for the Proxy Hosts via Basic HTTP Authentication.\nYou can configure multiple usernames and passwords for a single Access List and then apply that to a Proxy Host.\nThis is most useful for forwarded web services that do not have authentication mechanisms built in.",
+      "help-content": "Access Lists provide a blacklist or whitelist of specific client IP addresses along with authentication for the Proxy Hosts via Basic HTTP Authentication.\nYou can configure multiple client rules, usernames and passwords for a single Access List and then apply that to a Proxy Host.\nThis is most useful for forwarded web services that do not have authentication mechanisms built in or that you want to protect from access by unknown clients.",
       "item-count": "{count} {count, select, 1{User} other{Users}}",
+      "client-count": "{count} {count, select, 1{Rule} other{Rules}}",
       "proxy-host-count": "{count} {count, select, 1{Proxy Host} other{Proxy Hosts}}",
       "delete-has-hosts": "This Access List is associated with {count} Proxy Hosts. They will become publicly available upon deletion.",
       "details": "Details",
       "authorization": "Authorization",
-      "clients": "Clients"
+      "access": "Access"
     },
     "users": {
       "title": "Users",