From 0128660d406f6f92e31d500515f60bcf1877efa0 Mon Sep 17 00:00:00 2001
From: nucleogenic <nr@nucleogenic.com>
Date: Sun, 11 Dec 2022 03:31:37 +0000
Subject: [PATCH] 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 | 4 +-
python/web/src/static/themes/modern/style.css | 82 +++++++++++++------
python/web/src/templates/base.html | 6 +-
python/web/src/web.py | 14 +++-
4 files changed, 75 insertions(+), 31 deletions(-)
diff --git a/docker/web/Dockerfile b/docker/web/Dockerfile
index 73cc1383..7af5e3b7 100644
--- a/docker/web/Dockerfile
+++ b/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
-RUN sed -i 's/^Defaults\tsecure_path/#Defaults\tsecure_path./' /etc/sudoers
+# Make mock commands available when executing sudo
+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 \
diff --git a/python/web/src/static/themes/modern/style.css b/python/web/src/static/themes/modern/style.css
index 3a7d9453..3ec11463 100644
--- a/python/web/src/static/themes/modern/style.css
+++ b/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 {
- background: var(--danger);
- border-radius: var(--border-radius);
- padding: 0 0.5rem;
+div.header div.authentication-disabled span.separator {
+ display: none;
+}
+
+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;
diff --git a/python/web/src/templates/base.html b/python/web/src/templates/base.html
index 9ce1e234..4aed9d99 100644
--- a/python/web/src/templates/base.html
+++ b/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 %}
diff --git a/python/web/src/web.py b/python/web/src/web.py
index c18d5868..bb05c63b 100644
--- a/python/web/src/web.py
+++ b/python/web/src/web.py
@@ -151,8 +151,18 @@ def response(
else:
theme = TEMPLATE_THEME_LEGACY
- kwargs["env"] = get_env_info()
- kwargs["body_class"] = f"page-{PurePath(template).stem.lower()}"
+ body_classes = [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