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

[rodriquelca]

Issue & Reproduction Steps

Describe the issue this ticket solves and describe how to reproduce the issue (please attach any fixtures used to reproduce the issue).

Solution

• Remove full app.css from login/auth pages and replace it with a minimal inline stylesheet (login-base-styles) so the login page no longer downloads ~44 KiB of unused CSS.
• Load only 2 fonts on the critical path (OpenSans-Regular + OpenSans-ExtraBold) with preload + font-display: swap. Drop Light/Bold/Semibold from first paint.
• Replace Font Awesome icons with inline SVG (password eye + caps-lock warning) to avoid downloading fa-solid-900.woff2 (~77 KiB).
• Stabilize logo/favicon cache busting in Setting (?v=updated_at instead of a random token every request).
  Guest-safe ProcessMaker bootstrap on login (EventBus no-op stub + packages list) so package scripts do not throw $emit errors.

performance.mov

How to Test

1. Open /login (guest, logged out).
2. Confirm UI: navy background + pattern, slogan text readable, logo, form, Remember me, Forgot password, Login button.
3. Toggle password eye (show/hide) and Caps Lock warning.
4. Change language via language selector (still works).
5. Open /password/reset and confirm password toggles work.
6. Log in successfully and confirm authenticated app still loads Saved Search scripts (e.g. Tasks/Requests search save button present).

Related Tickets & Packages

• https://processmaker.atlassian.net/browse/FOUR-32025

Code Review Checklist

• I have pulled this code locally and tested it on my instance, along with any associated packages.
• This code adheres to ProcessMaker Coding Guidelines.
• This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
• This solution fixes the bug reported in the original ticket.
• This solution does not alter the expected output of a component in a way that would break existing Processes.
• This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
• This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
• This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
• This ticket conforms to the PRD associated with this part of ProcessMaker.

ci:deploy

[processmaker-sonarqube]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarQube

[vladyrichter]

QA server K8S was successfully deployed https://ci-cc2673d695.engk8s.processmaker.net

[gproly]

1. Password visibility toggle — JS out of sync with markup

Issue: newLogin.blade.php and passwords/reset.blade.php still toggle fa-eye-slash on the click target, but the markup now uses a <button class="password-toggle"> with two SVGs (password-toggle-eye / password-toggle-eye-slash).

Impact: Input type toggles correctly, but the icon does not update and aria-pressed stays false.

Fix: Update the inline toggle handlers to:

• Toggle visibility via the SVG hidden attribute (or a CSS class)
• Set aria-pressed to match visibility state
• Remove all Font Awesome class toggling (fa-eye-slash)

Files:

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

---

2. Language selector broken on /login after script bundle reduction

Issue: newLogin.blade.php now includes auth-language-scripts-minimal instead of auth-language-scripts. That drops app-login.js, which initializes dependencies required by package-translations' LanguageSelectorButton:

• VueCookies (this.$cookies in LanguageSelectorButton.vue)
• VueI18Next / i18next ($t() in LanguageSelectorModal.vue)
• window.bootstrap.Modal (modal lifecycle in LanguageSelectorModal.vue)

Impact: Language selector fails on the login page when translations are enabled.

Fix (choose one):

• A (safer): Restore @include('auth.partials.auth-language-scripts') on newLogin.blade.php
• B (perf-oriented): Extend the minimal bundle to explicitly load only the required deps above, preserving script order relative to GlobalScripts (webhook.js) and translations/index.js

Files:

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

---

3. Auth layout regression — Bootstrap utilities removed from non-login pages

Issue: Replacing mix('css/app.css') with login-base-styles in auth.layouts.auth affects all auth pages, not just login. login-base-styles only defines a minimal subset (e.g. .alert-danger, .mb-0, .mb-3) and omits classes used elsewhere:

Page	Missing classes
passwords/email.blade.php	.alert-success, .mb-4
passwords/change.blade.php	.alert-primary, .text-center, .pb-4, .mt-3, .h5, .text-danger, .d-block, .ml-1, .small

Impact: Forgot password, change password, and related auth screens render with broken or unstyled UI.

Fix (choose one):

• A (scoped): Apply login-base-styles only in newLogin.blade.php; keep mix('css/app.css') in auth.layouts.auth
• B (complete): Extend login-base-styles.blade.php with all required utility and alert variants used by auth views

Files:

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

---

4. Hardcoded logo dimensions applied to custom logos

Issue: components/logo.blade.php always sets width="440" height="80" fetchpriority="high", including custom logos uploaded via css-override.

Impact: Custom logos with non-default aspect ratios may distort or cause unexpected layout/CLS behavior despite CSS height: auto.

Fix: Apply fixed dimensions and fetchpriority="high" only for the default logo:

<img
  src="{{ $loginLogo }}"
  alt="{{ config('logo-alt-text', 'ProcessMaker') }}"
  class="{{ $class }}"
  @if($isDefault) width="440" height="80" fetchpriority="high" @endif
>

Files:

• resources/views/components/logo.blade.php

---

5. Cache busting key may not invalidate on media-only updates

Issue: Setting::getLogin(), getIcon(), and getFavicon() append ?v={$setting->updated_at->timestamp} when a custom asset exists. Uploading/replacing media via Spatie Media Library may not update the parent Setting record's updated_at.

Impact: Browsers may serve stale logo/favicon/icon after an admin upload until the Setting row is touched separately.

Fix: Derive the cache key from the media record instead of the Setting:

return $url . '?v=' . ($media->updated_at?->timestamp ?? $media->id);

Alternatively, explicitly touch the Setting model on media upload in CssOverrideController::uploadFile().

Files:

• ProcessMaker/Models/Setting.php
• optionally ProcessMaker/Http/Controllers/Api/CssOverrideController.php