feat(FOUR-32025): LOGIN SCREEN >> Review performance: DB access and queries in login can be cached into redis, images

ProcessMaker/Models/Setting.php

@@ -311,6 +311,7 @@ public static function getLogin()
     {
         // default login
         $url = asset(config('app.settings.login_logo_path'));
+        $customized = false;
 
         //custom login
         $setting = self::byKey('css-override');
@@ -320,10 +321,18 @@ public static function getLogin()
 
             foreach ($mediaFile as $media) {
                 $url = $media->getFullUrl();
+                $customized = true;
             }
         }
 
-        return $url . '?id=' . bin2hex(random_bytes(16));
+        // Use a stable cache-busting key based on the setting's last update time.
+        // This allows the browser to cache the logo long-term and only re-fetch
+        // when an admin actually changes it, instead of on every page request.
+        if ($customized && $setting) {
+            return $url . '?v=' . $setting->updated_at?->timestamp;
+        }
+
+        return $url;
     }
 
     /**
@@ -359,6 +368,8 @@ public static function getIcon()
     {
         // default icon
         $url = asset(config('app.settings.icon_path'));
+        $setting = null;
+        $customized = false;
 
         // custom icon
         if (config()->has($key = 'css-override')) {
@@ -369,11 +380,17 @@ public static function getIcon()
 
                 foreach ($mediaFile as $media) {
                     $url = $media->getFullUrl();
+                    $customized = true;
                 }
             }
         }
 
-        return $url . '?id=' . bin2hex(random_bytes(16));
+        // Use a stable cache-busting key based on the setting's last update time.
+        if ($customized && $setting) {
+            return $url . '?v=' . $setting->updated_at?->timestamp;
+        }
+
+        return $url;
     }
 
     /**
@@ -384,6 +401,8 @@ public static function getFavicon()
     {
         // default icon
         $url = asset(config('app.settings.favicon_path'));
+        $setting = null;
+        $customized = false;
 
         // custom icon
         if (config()->has($key = 'css-override')) {
@@ -394,11 +413,19 @@ public static function getFavicon()
 
                 foreach ($mediaFile as $media) {
                     $url = $media->getFullUrl();
+                    $customized = true;
                 }
             }
         }
 
-        return $url . '?id=' . bin2hex(random_bytes(16));
+        // Use a stable cache-busting key based on the setting's last update time.
+        // Eliminates the previous random_bytes() that prevented browser caching
+        // on every request, forcing a full re-download of the favicon each visit.
+        if ($customized && $setting) {
+            return $url . '?v=' . $setting->updated_at?->timestamp;
+        }
+
+        return $url;
     }
 
     /**

resources/fonts/pm-font/processmaker-font.scss

@@ -1,4 +1,5 @@
 @font-face {font-family: "processmaker-font";
+  font-display: swap;
   src: url('processmaker-font.eot?t=1770239064379'); /* IE9*/
   src: url('processmaker-font.eot?t=1770239064379#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url("processmaker-font.woff2?t=1770239064379") format("woff2"),

resources/views/auth/layouts/auth.blade.php

@@ -9,7 +9,7 @@
   <meta name="i18n-mdate" content='{!! json_encode(ProcessMaker\i18nHelper::mdates()) !!}'>
   <meta name="settings-translations-enabled" content="{{ config('translations.enabled') ? 'true' : 'false' }}">
   <title>@yield('title') - {{ __('ProcessMaker') }}</title>
-  <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+  @include('auth.partials.login-base-styles')
   @include('auth.partials.login-critical-styles')
   @include('auth.partials.auth-styles')
   <link rel="icon" href="{{ \ProcessMaker\Models\Setting::getFavicon() }}">

resources/views/auth/newLogin.blade.php

@@ -9,7 +9,7 @@
   <meta name="i18n-mdate" content='{!! json_encode(ProcessMaker\i18nHelper::mdates()) !!}'>
   <meta name="settings-translations-enabled" content="{{ config('translations.enabled') ? 'true' : 'false' }}">
   <title>{{ __('Login') }} - {{ __('ProcessMaker') }}</title>
-  <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+  @include('auth.partials.login-base-styles')
   @include('auth.partials.login-critical-styles')
   @include('auth.partials.auth-styles')
   @include('auth.partials.login-extra-styles')
@@ -59,13 +59,13 @@
                   <div class="password-field-header">
                     <label for="password">{{ __('Password') }}</label>
                     <span id="capsLockWarning" class="caps-lock-warning" hidden aria-live="polite">
-                      <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                      @include('auth.partials.icon-warning')
                       {{ __('Caps lock is on') }}
                     </span>
                   </div>
                   <div class="password-container">
                     <input id="password" type="password" class="form-control form-control-login {{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="{{__('Enter your password')}}" required>
-                    <i class="fa fa-eye" id="togglePassword"></i>
+                    @include('auth.partials.password-toggle-button', ['id' => 'togglePassword'])
                     @if ($errors->has('password'))
                     <span class="invalid-feedback" role="alert">
                       <strong>{{ $errors->first('password') }}</strong>
@@ -174,5 +174,5 @@ function updateCapsLockWarning(event) {
     });
   }
 </script>
-@include('auth.partials.auth-language-scripts')
+@include('auth.partials.auth-language-scripts-minimal')
 </html>

resources/views/auth/partials/auth-language-scripts-minimal.blade.php

@@ -5,6 +5,13 @@
 @endforeach
 <script>
   window.ProcessMaker = window.ProcessMaker || {};
+  // No-op bus for package scripts that may load before the full app shell.
+  window.ProcessMaker.EventBus = window.ProcessMaker.EventBus || {
+    $on: function () {},
+    $off: function () {},
+    $emit: function () {},
+    $once: function () {},
+  };
   window.ProcessMaker.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
 </script>
-<script src="{{ mix('js/translations/index.js') }}"></script>
+<script src="{{ mix('js/translations/index.js') }}" defer></script>

resources/views/auth/partials/auth-language-scripts.blade.php

@@ -1,4 +1,4 @@
-<script src="{{ mix('builds/login/js/manifest.js') }}"></script>
-<script src="{{ mix('builds/login/js/vendor.js') }}"></script>
-<script src="{{ mix('builds/login/js/app-login.js') }}"></script>
+<script src="{{ mix('builds/login/js/manifest.js') }}" defer></script>
+<script src="{{ mix('builds/login/js/vendor.js') }}" defer></script>
+<script src="{{ mix('builds/login/js/app-login.js') }}" defer></script>
 @include('auth.partials.auth-language-scripts-minimal')

resources/views/auth/partials/auth-styles.blade.php

@@ -51,7 +51,7 @@
   .auth-card-title {
     color: #333333;
     font-size: 1.25rem;
-    font-weight: 600;
+    font-weight: 800;
     margin-bottom: 0.5rem;
     text-align: center;
   }
@@ -90,7 +90,7 @@
   .form-group label {
     color: #333333;
     font-size: 0.875rem;
-    font-weight: 500;
+    font-weight: 400;
     margin-bottom: 0.5rem;
   }
 
@@ -111,7 +111,7 @@
     color: #C66E00;
     display: inline-flex;
     font-size: 0.75rem;
-    font-weight: 500;
+    font-weight: 400;
     gap: 0.375rem;
     line-height: 1.25rem;
     white-space: nowrap;
@@ -160,7 +160,7 @@
   .auth-link {
     color: {{ color('primary') }};
     font-size: 0.875rem;
-    font-weight: 500;
+    font-weight: 400;
     text-decoration: none;
   }
 
@@ -177,7 +177,7 @@
   .button-login {
     height: 50px;
     border-radius: 9px;
-    font-weight: 600;
+    font-weight: 800;
     font-size: 1rem;
     text-transform: none;
   }
@@ -206,7 +206,7 @@
 
   .slogan .head-text {
     text-transform: uppercase;
-    font-weight: 700;
+    font-weight: 800;
     color: #A6F252;
     margin: 0 0 1.5rem 0;
     font-size: 0.875rem;
@@ -240,7 +240,7 @@
   .slogan .subtext {
     color: #ffffff;
     font-size: 1rem;
-    font-weight: 300;
+    font-weight: 400;
     line-height: 1.75;
     max-width: 520px;
     margin-top: 0;
@@ -256,7 +256,8 @@
   }
 
   #togglePassword,
-  .toggle-password {
+  .toggle-password,
+  .password-toggle {
     position: absolute;
     top: 50%;
     right: 1rem;
@@ -303,7 +304,7 @@
     border-radius: 0 !important;
     color: #ffffff !important;
     font-size: 0.75rem !important;
-    font-weight: 500 !important;
+    font-weight: 400 !important;
     height: auto !important;
     line-height: 1 !important;
     padding: 0 !important;

resources/views/auth/partials/icon-warning.blade.php

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
+</svg>

resources/views/auth/partials/login-base-styles.blade.php

@@ -0,0 +1,51 @@
+{{--
+  Auth-page CSS without app.css.
+  Only 2 font files on the critical path (Regular + ExtraBold for LCP).
+  Icons are inline SVG — no Font Awesome download (~77 KiB).
+--}}
+<link rel="preload" href="{{ asset('fonts/OpenSans-ExtraBold.woff2') }}" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ asset('fonts/OpenSans-Regular.woff2') }}" as="font" type="font/woff2" crossorigin>
+<style>
+@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url('{{ asset('fonts/OpenSans-Regular.woff2') }}') format('woff2')}
+@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-display:swap;src:url('{{ asset('fonts/OpenSans-ExtraBold.woff2') }}') format('woff2')}
+
+*,*::before,*::after{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%;line-height:1.15}
+body{margin:0;font-family:'Open Sans',sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#212529}
+button,input{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}
+label{display:inline-block}
+a{color:{{ color('primary') }};text-decoration:none;background-color:transparent}
+a:hover{text-decoration:underline}
+img{vertical-align:middle;border-style:none}
+strong{font-weight:800}
+
+.d-flex{display:flex!important}
+.flex-column{flex-direction:column!important}
+.flex-fill{flex:1 1 auto!important}
+.d-none{display:none!important}
+@media (min-width:992px){.d-lg-flex{display:flex!important}}
+.mb-0{margin-bottom:0!important}
+.mb-3{margin-bottom:1rem!important}
+
+.btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;cursor:pointer;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}
+.btn:hover{text-decoration:none}
+.btn-primary{color:#fff;background-color:{{ color('primary') }};border-color:{{ color('primary') }}}
+.btn-block{display:block;width:100%}
+
+.form-group{margin-bottom:1rem}
+.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
+.form-control:focus{color:#495057;background-color:#fff;outline:0}
+.is-invalid{border-color:#ec5962}
+.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#ec5962}
+.is-invalid~.invalid-feedback{display:block}
+
+.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}
+.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}
+
+.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box}
+.card-body{flex:1 1 auto}
+
+.password-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:#51585E;line-height:0}
+.password-toggle svg{width:18px;height:18px;display:block}
+.caps-lock-warning svg{width:12px;height:12px;flex-shrink:0}
+</style>

resources/views/auth/partials/login-critical-styles.blade.php

@@ -1,11 +1,6 @@
 <style>
-  html,
-  body {
-    background-color: #002D59;
-  }
-
-  .login-container .btn-primary.button-login {
-    background-color: {{ color('primary') }};
-    border-color: {{ color('primary') }};
-  }
+html{background-color:#002D59}
+body{background-color:transparent}
+.login-container .btn-primary.button-login{background-color:{{ color('primary') }};border-color:{{ color('primary') }}}
+.login-logo-default{max-width:292px;width:100%;height:auto;aspect-ratio:440/80;object-fit:contain}
 </style>

resources/views/auth/partials/login-extra-styles.blade.php

@@ -79,7 +79,7 @@
   .forgot-password-link {
     color: {{ color('primary') }};
     font-size: 0.875rem;
-    font-weight: 500;
+    font-weight: 400;
     text-decoration: none;
     white-space: nowrap;
   }

resources/views/auth/partials/password-toggle-button.blade.php

@@ -0,0 +1,16 @@
+<button
+  type="button"
+  id="{{ $id }}"
+  class="password-toggle{{ !empty($class) ? ' '.$class : '' }}"
+  aria-label="{{ __('Toggle password visibility') }}"
+  aria-pressed="false">
+  <svg class="password-toggle-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+    <circle cx="12" cy="12" r="3"></circle>
+  </svg>
+  <svg class="password-toggle-eye-slash" hidden xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"></path>
+    <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"></path>
+    <line x1="1" y1="1" x2="23" y2="23"></line>
+  </svg>
+</button>

resources/views/auth/passwords/reset.blade.php

@@ -50,7 +50,7 @@ class="form-control form-control-login"
     <div class="password-field-header">
       <label for="password">{{ __('New Password') }}</label>
       <span id="capsLockWarning" class="caps-lock-warning" hidden aria-live="polite">
-        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+        @include('auth.partials.icon-warning')
         {{ __('Caps lock is on') }}
       </span>
     </div>
@@ -62,7 +62,7 @@ class="form-control form-control-login{{ $errors->has('password') ? ' is-invalid
         name="password"
         placeholder="{{ __('Enter your new password') }}"
         required>
-      <i class="fa fa-eye toggle-password" id="togglePassword" aria-hidden="true"></i>
+      @include('auth.partials.password-toggle-button', ['id' => 'togglePassword', 'class' => 'toggle-password'])
       @if ($errors->has('password'))
       <span class="invalid-feedback" role="alert">
         <strong>{{ $errors->first('password') }}</strong>
@@ -80,7 +80,7 @@ class="form-control form-control-login"
         name="password_confirmation"
         placeholder="{{ __('Confirm your new password') }}"
         required>
-      <i class="fa fa-eye toggle-password" id="togglePasswordConfirm" aria-hidden="true"></i>
+      @include('auth.partials.password-toggle-button', ['id' => 'togglePasswordConfirm', 'class' => 'toggle-password'])
     </div>
   </div>
   <div class="form-group mb-0">

resources/views/components/logo.blade.php

@@ -7,4 +7,4 @@
         $class = 'login-logo-custom';
     }
 @endphp
-<img src={{$loginLogo}} alt="{{ config('logo-alt-text', 'ProcessMaker') }}" class="{{ $class }}">
+<img src="{{ $loginLogo }}" alt="{{ config('logo-alt-text', 'ProcessMaker') }}" class="{{ $class }}" width="440" height="80" fetchpriority="high">