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
This commit is contained in:
nucleogenic 2022-12-11 03:31:37 +00:00 committed by GitHub
parent 2354b62f43
commit 0128660d40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 75 additions and 31 deletions

View File

@ -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 \

View File

@ -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;

View File

@ -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 %}

View File

@ -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