Disabled auth improvements (#1029)

* Improve styling support when web authentication disabled, fix issue #1017

* Fix sudo PATH issue in Docker web container (allows easyinstall.sh to call commands in sbin)

* Fix logout button icon flicker/reload on resize

docker/web/Dockerfile

@@ -13,8 +13,8 @@ RUN groupadd pi \
     && echo "pi ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers \
     && echo "pi:piscsi" | chpasswd
 
-# Allows custom PATH for mock commands to work when executing with sudo
+# Make mock commands available when executing sudo
-RUN sed -i 's/^Defaults\tsecure_path/#Defaults\tsecure_path./' /etc/sudoers
+RUN sed -i 's/^Defaults\tsecure_path="\/usr/Defaults\tsecure_path="\/home\/pi\/piscsi\/python\/web\/mock\/bin:\/usr/' /etc/sudoers
 
 RUN mkdir -p /home/pi/shared_files \
     && mkdir /home/pi/images \

python/web/src/static/themes/modern/style.css

@@ -262,10 +262,16 @@ div.header div.login-form-title {
   display: none;
 }
 
-div.header div.authentication-disabled {
+div.header div.authentication-disabled span.separator {
-  background: var(--danger);
+  display: none;
-  border-radius: var(--border-radius);
+}
-  padding: 0 0.5rem;
+
+div.header div.authentication-disabled span.wiki-help-text {
+  display: block;
+}
+
+div.header div.authentication-disabled a {
+  color: #fff;
 }
 
 @media (max-width: 900px) {
@@ -274,11 +280,16 @@ div.header div.authentication-disabled {
     background: var(--dark);
   }
 
-  body:not(.logged-in) div.header {
+  body.auth-enabled:not(.logged-in) div.header {
     flex-wrap: wrap;
     min-height: 8.875rem; /* Safari 14 iOS and iPad OS */
   }
 
+  body.auth-disabled div.header {
+    flex-wrap: wrap;
+    min-height: 7rem;
+  }
+
   div.header div.title span.subtitle {
     display: none;
   }
@@ -340,6 +351,14 @@ div.header div.authentication-disabled {
     color: var(--secondary);
     text-decoration: none;
   }
+
+  div.header div.authentication-disabled {
+    flex: 0 0 100%;
+    align-items: end;
+    padding: 0.5rem;
+    background: var(--danger);
+    color: #fff;
+  }
 }
 
 @media (min-width: 901px) {
@@ -402,7 +421,8 @@ div.header div.authentication-disabled {
   }
 
   div.header div.login-status.logged-in a {
-    background: var(--danger) url("icons/log-out.svg") no-repeat right 0.5rem center;
+    background: var(--danger) no-repeat right 0.5rem center;
+    background-image: url("icons/log-out.svg");
     background-size: var(--icon-size);
     border-radius: var(--border-radius);
     padding: 0.25rem 2.25rem 0.25rem 0.75rem;
@@ -418,6 +438,13 @@ div.header div.authentication-disabled {
   div.header div.login-status.logged-in span.separator {
     display: none;
   }
+
+  div.header div.authentication-disabled {
+    background: var(--danger);
+    border-radius: var(--border-radius);
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+  }
 }
 
 /*
@@ -531,30 +558,35 @@ section > details ul {
   }
 }
 
+/*
+ ------------------------------------------------------------------------------
+ Index > Hide sections requiring auth
+ ------------------------------------------------------------------------------
+ */
+body.auth-enabled:not(.logged-in) section:not(#current-config, #manual) {
+  display: none;
+}
+
+body.auth-enabled:not(.logged-in) section#current-config form#config-actions,
+body.auth-enabled:not(.logged-in) section#current-config form#config-save {
+  display: none;
+}
+
+body.auth-enabled:not(.logged-in) section#current-config table#attached-devices th.actions,
+body.auth-enabled:not(.logged-in) section#current-config table#attached-devices td.actions,
+body.auth-enabled:not(.logged-in) section#current-config table#attached-devices form {
+  display: none;
+}
+
+body.auth-enabled:not(.logged-in) section#current-config form#detach-all-devices {
+  display: none;
+}
+
 /*
  ------------------------------------------------------------------------------
  Index > Section: Current PiSCSI configuration
  ------------------------------------------------------------------------------
  */
-body:not(.logged-in) section:not(#current-config, #manual) {
-  display: none;
-}
-
-body:not(.logged-in) section#current-config form#config-actions,
-body:not(.logged-in) section#current-config form#config-save {
-  display: none;
-}
-
-body:not(.logged-in) section#current-config table#attached-devices th.actions,
-body:not(.logged-in) section#current-config table#attached-devices td.actions,
-body:not(.logged-in) section#current-config table#attached-devices form {
-  display: none;
-}
-
-body:not(.logged-in) section#current-config form#detach-all-devices {
-  display: none;
-}
-
 section#current-config form#config-actions select,
 section#current-config form#config-save input[type="text"] {
   max-width: 10rem;

python/web/src/templates/base.html

@@ -39,7 +39,7 @@
     <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
 </head>
 
-<body class="{{ body_class }}{% if env["logged_in"] %} logged-in{% endif %}">
+<body class="{{ body_classes|join(' ') }}">
     <div class="header">
         {% if env["auth_active"] %}
             {% if env["logged_in"] %}
@@ -66,7 +66,9 @@
             {% endif %}
         {% else %}
             <div align="center" class="login-status authentication-disabled">
-                {{ _("Web Interface Authentication Disabled") }} - {{ _("See <a href=\"%(url)s\" target=\"_blank\">Wiki</a> for more information", url="https://github.com/PiSCSI/piscsi/wiki/Web-Interface#enable-authentication") }}
+                <span class="authentication-disabled-text">{{ _("Web Interface Authentication Disabled") }}</span>
+                <span class="separator">-</span>
+                <span class="wiki-help-text">{{ _("See <a href=\"%(url)s\" target=\"_blank\">Wiki</a> for more information", url="https://github.com/PiSCSI/piscsi/wiki/Web-Interface#enable-authentication") }}</span>
             </div>
         {% endif %}
 

python/web/src/web.py

@@ -151,8 +151,18 @@ def response(
         else:
             theme = TEMPLATE_THEME_LEGACY
 
-        kwargs["env"] = get_env_info()
+        body_classes = [f"page-{PurePath(template).stem.lower()}"]
-        kwargs["body_class"] = f"page-{PurePath(template).stem.lower()}"
+
+        env_info = get_env_info()
+        if env_info["auth_active"]:
+            body_classes.append("auth-enabled")
+            if env_info["logged_in"]:
+                body_classes.append("logged-in")
+        else:
+            body_classes.append("auth-disabled")
+
+        kwargs["env"] = env_info
+        kwargs["body_classes"] = body_classes
         kwargs["current_theme_stylesheet"] = f"themes/{theme}/style.css"
         kwargs["current_theme"] = theme
         kwargs["available_themes"] = TEMPLATE_THEMES