Merge pull request 'inputs_fix' (#13) from inputs_fix into master

Reviewed-on: #13

shopping_app/routes_main.py

@@ -207,11 +207,9 @@ def main_page():
 
 @app.route("/system-auth", methods=["GET", "POST"])
 def system_auth():
-    if (
-        current_user.is_authenticated
-        or request.cookies.get("authorized") == AUTHORIZED_COOKIE_VALUE
-    ):
-        flash("Jesteś już zalogowany lub autoryzowany.", "info")
+    
+    if request.cookies.get("authorized") == AUTHORIZED_COOKIE_VALUE:
+        flash("Jesteś już autoryzowany.", "info")
         return redirect(url_for("main_page"))
 
     ip = request.access_route[0]

shopping_app/static/css/style.css

@@ -1571,15 +1571,15 @@ hr {
     min-height: 46px;
   }
 
-  .input-group {
+  .input-group:not(.ui-password-group) {
     flex-wrap: wrap;
     gap: 0.55rem;
   }
 
-  .input-group > .form-control,
-  .input-group > .form-select,
-  .input-group > .btn,
-  .input-group > .input-group-text {
+  .input-group:not(.ui-password-group) > .form-control,
+  .input-group:not(.ui-password-group) > .form-select,
+  .input-group:not(.ui-password-group) > .btn,
+  .input-group:not(.ui-password-group) > .input-group-text {
     width: 100% !important;
     flex: 1 1 100% !important;
     border-radius: 14px !important;
@@ -4767,6 +4767,18 @@ body:not(.sorting-active) .drag-handle {
   flex-wrap: nowrap !important;
   align-items: stretch !important;
   width: 100% !important;
+  gap: 0 !important;
+  overflow: hidden !important;
+  border: 1px solid var(--ui-border-strong) !important;
+  border-radius: var(--ui-control-radius) !important;
+  background: rgba(255,255,255,0.04) !important;
+  background-image: none !important;
+  box-shadow: none !important;
+}
+
+.ui-password-group:focus-within {
+  border-color: rgba(25, 135, 84, 0.6) !important;
+  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.16) !important;
 }
 
 .ui-password-group > .form-control {
@@ -4774,11 +4786,19 @@ body:not(.sorting-active) .drag-handle {
   width: 1% !important;
   min-width: 0 !important;
   min-height: var(--ui-control-height) !important;
-  border-top-left-radius: var(--ui-control-radius) !important;
-  border-bottom-left-radius: var(--ui-control-radius) !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  border-right: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  background-clip: padding-box !important;
+}
+
+.ui-password-group > .form-control:focus {
+  box-shadow: none !important;
+  background: transparent !important;
+  background-color: transparent !important;
 }
 
 .ui-password-group > .ui-password-toggle {
@@ -4794,15 +4814,13 @@ body:not(.sorting-active) .drag-handle {
   padding: 0 !important;
   margin: 0 !important;
   cursor: pointer !important;
-  background-color: var(--dark-700) !important;
+  background: transparent !important;
+  background-color: transparent !important;
   background-image: none !important;
-  color: var(--text-strong) !important;
-  border: 1px solid var(--dark-300) !important;
-  border-left: 0 !important;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  border-top-right-radius: var(--ui-control-radius) !important;
-  border-bottom-right-radius: var(--ui-control-radius) !important;
+  color: rgba(255,255,255,0.72) !important;
+  border: 0 !important;
+  border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
+  border-radius: 0 !important;
   box-shadow: none !important;
   line-height: 1 !important;
 }
@@ -4810,15 +4828,17 @@ body:not(.sorting-active) .drag-handle {
 .ui-password-group > .ui-password-toggle:hover,
 .ui-password-group > .ui-password-toggle:focus,
 .ui-password-group > .ui-password-toggle:focus-visible {
-  background-color: var(--dark-800) !important;
+  background: rgba(255,255,255,0.03) !important;
+  background-color: rgba(255,255,255,0.03) !important;
   color: #fff !important;
-  border-color: var(--primary) !important;
-  box-shadow: var(--ui-control-focus-ring) !important;
+  border-left-color: rgba(255,255,255,0.16) !important;
+  box-shadow: none !important;
   outline: none !important;
 }
 
 .ui-password-group > .ui-password-toggle.is-active {
-  background-color: var(--dark-800) !important;
+  background: rgba(255,255,255,0.05) !important;
+  background-color: rgba(255,255,255,0.05) !important;
   color: #fff !important;
 }
 
@@ -4848,38 +4868,20 @@ body:not(.sorting-active) .drag-handle {
   border-radius: var(--ui-control-radius) !important;
 }
 
+/*
+  Password fields use only the generic ui-password-group rules above.
+  Keep endpoint-specific overrides out of login/system_auth/admin screens,
+  otherwise future changes start fighting through selector specificity.
+*/
+.ui-password-group > .form-control.ui-consistent-input {
+  border-radius: 0 !important;
+}
+
 .endpoint-edit_my_list .access-editor .access-input,
-.endpoint-edit_list .input-group.input-group-sm .form-control,
-.endpoint-user_management .row .ui-password-group > .form-control,
-.endpoint-user_management .modal .ui-password-group > .form-control {
+.endpoint-edit_list .input-group.input-group-sm .form-control {
   min-height: var(--ui-control-height) !important;
 }
 
-.endpoint-login .ui-password-group > .ui-password-toggle,
-.endpoint-system_auth .ui-password-group > .ui-password-toggle,
-.endpoint-user_management .ui-password-group > .ui-password-toggle,
-.endpoint-user_management .modal .ui-password-group > .ui-password-toggle {
-  background-color: var(--dark-700) !important;
-  color: var(--text-strong) !important;
-  border-color: var(--dark-300) !important;
-}
-
-.endpoint-login .ui-password-group > .ui-password-toggle:hover,
-.endpoint-login .ui-password-group > .ui-password-toggle:focus,
-.endpoint-login .ui-password-group > .ui-password-toggle:focus-visible,
-.endpoint-system_auth .ui-password-group > .ui-password-toggle:hover,
-.endpoint-system_auth .ui-password-group > .ui-password-toggle:focus,
-.endpoint-system_auth .ui-password-group > .ui-password-toggle:focus-visible,
-.endpoint-user_management .ui-password-group > .ui-password-toggle:hover,
-.endpoint-user_management .ui-password-group > .ui-password-toggle:focus,
-.endpoint-user_management .ui-password-group > .ui-password-toggle:focus-visible,
-.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:hover,
-.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:focus,
-.endpoint-user_management .modal .ui-password-group > .ui-password-toggle:focus-visible {
-  background-color: var(--dark-800) !important;
-  border-color: var(--primary) !important;
-}
-
 @media (max-width: 575.98px) {
   .ui-password-group > .ui-password-toggle {
     flex-basis: 44px !important;

shopping_app/templates/base.html

@@ -12,6 +12,8 @@
   <link href="{{ static_asset_url('static_bp.serve_css_lib', 'bootstrap.min.css') }}" rel="stylesheet">
   <link href="{{ static_asset_url('static_bp.serve_css', 'style.css') }}" rel="stylesheet">
 
+  {% set hide_login_ui = request.path == '/system-auth' %}
+
   {% set exclude_paths = ['/system-auth'] %}
   {% if (exclude_paths | select("in", request.path) | list | length == 0)
   and has_authorized_cookie
@@ -82,7 +84,7 @@
             <span class="navbar-toggler-icon"></span>
           </button>
           <div class="dropdown-menu dropdown-menu-end app-mobile-menu__panel">
-            {% if not is_blocked and request.endpoint and request.endpoint != 'system_auth' %}
+            {% if not is_blocked and not hide_login_ui %}
               {% if current_user.is_authenticated %}
                 {% if current_user.is_admin %}
                 <a href="{{ url_for('admin_panel') }}" class="dropdown-item app-mobile-menu__item">⚙️ <span>Panel</span></a>
@@ -99,7 +101,7 @@
 
         <div class="d-none d-lg-flex justify-content-end order-lg-3" id="appNavbarMenu">
           <div class="app-navbar__actions">
-            {% if not is_blocked and request.endpoint and request.endpoint != 'system_auth' %}
+            {% if not is_blocked and not hide_login_ui %}
               {% if current_user.is_authenticated %}
                 {% if current_user.is_admin %}
                 <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-light btn-sm app-nav-action">⚙️ <span>Panel</span></a>
@@ -194,4 +196,4 @@
 
   {% block scripts %}{% endblock %}
 </body>
-</html>
+</html>

shopping_app/web.py

@@ -71,7 +71,7 @@ def require_system_password():
     if is_ip_blocked(ip):
         abort(403)
 
-    if "authorized" not in request.cookies and not endpoint.startswith("login"):
+    if "authorized" not in request.cookies:
         if request.path == "/":
             return redirect(url_for("system_auth"))