Skip to content

update login and logout #742

Open
FransVanEk wants to merge 22 commits intomainfrom
feature/remove-rendering-before--login
Open

update login and logout #742
FransVanEk wants to merge 22 commits intomainfrom
feature/remove-rendering-before--login

Conversation

@FransVanEk
Copy link
Contributor

PR Classification

Design and UX improvement for application loading and authentication states.

PR Summary

This pull request enhances the loading and authentication experience for both Blazor Server and WASM hosting modes, updates branding, and adds a logout button to the app bar.

  • _Host.cshtml and index.html: Replaced basic loading message with a full-page spinner overlay and added JavaScript to control its visibility.
  • App.razor: Injected IJSRuntime and updated authentication "Authorizing" state to use a spinner overlay; calls JS to hide loading screens after initialization.
  • MainLayout.razor.cs and LogoutButton.razor: Added LogoutButton to app bar with navigation to login.
  • Updated branding and title text to "Elsa Studio" in _Host.cshtml and index.html.
  • Minor markup and attribute cleanups, including [AllowAnonymous] and base href updates.

- Introduce a custom authentication loading overlay with spinner for improved user experience during auth checks. (server not wasm)
- Add LogoutButton component to app bar, linking to /login.
- Refactor App.razor to use AuthenticationWrapper and custom loading UI. (server not wasm)
- Inject IJSRuntime to hide loading overlay after auth completes. (server not wasm)
- Update _Host.cshtml: add [AllowAnonymous], switch to Server render mode, and implement JS/CSS for loading overlay. (server not wasm)
- Add new LogoutButton.razor component.
- Add AuthenticationWrapper.razor (contents not shown).
Refactored initial loading splash in index.html to use a new #wasm-loading div with spinner and status text, managed via JavaScript. Added robust JS functions to hide the loading screen and update status, exposed to Blazor for both server and WASM scenarios. Removed <AuthenticationWrapper> from App.razor and updated router logic for clarity. Loading screen is now reliably hidden after authentication. Also updated app title and cleaned up formatting. These changes enhance the user experience during app initialization and authentication.
Replaced basic loading splash with a styled spinner and status message. Added JS functions for controlling loading state and exposed them to Blazor components. Refactored Blazor startup script for better error handling and status updates, including a safety timeout. Updated page title to "Elsa Studio".
Modified the CSS animation declaration for "spin" from @Keyframes to @@Keyframes in _Host.cshtml. Note that @@Keyframes is not valid in standard CSS and may cause issues unless processed by a specific tool.
j03y-nxxbz
j03y-nxxbz previously approved these changes Jan 21, 2026
Copy link
Contributor

@j03y-nxxbz j03y-nxxbz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approvved

Copy link
Member

@sfmskywalker sfmskywalker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a lot of repetitive code that is not transferrable to any other Elsa Studio host application out there. These updated host applications are workbench projects, which are not used anywhere, not even by the Docker images being built (which are built from elsa-apps).

The only way to carry this over, as it stands, is for integrators to copy and paste all of this work.

Is there any way we can package the JS plumbing in html files and cshtml files such that it is reusable? Perhaps from Elsa.Studio.Login for Elsa 3.6, and Elsa.Authentication.Identity as of Elsa 3.7 (main branch atm).

Copilot AI and others added 9 commits January 22, 2026 06:51
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
…hared JS

Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Co-authored-by: FransVanEk <9162886+FransVanEk@users.noreply.github.com>
Standardize loading message to "Starting..." across WASM and Server. Enhance Blazor Server loader with robust readiness detection using DOM observation, console monitoring, and render stability checks. Reduce fallback timeout to 8s and expose new ElsaStudio API methods for manual loading control. Improves accuracy and responsiveness of loading screen removal.
sfmskywalker
sfmskywalker previously approved these changes Jan 27, 2026
@sfmskywalker
Copy link
Member

@FransVanEk Did you want to split this PR into two separate ones, or can we merge this as-is?

Refactored the script loading sequence to guarantee that the Monaco Editor is fully loaded and initialized before other scripts and before the loading screen is hidden. Introduced a monacoReady flag and updated readiness checks and fallback logic accordingly. Removed the unused updateLoadingText function. Increased the fallback timeout to 10 seconds to accommodate Monaco's loading time. These changes improve the reliability and sequencing of script dependencies during application startup.
Refactor loader scripts to use a shared core for consistent loading, progress, and error handling across Blazor Server, WASM, and Hosted WASM. Load critical CSS and JS earlier for faster, more reliable startup. Enhance readiness detection and loading screen logic, especially for authentication and MudBlazor JS. Improve backend HTTP client resilience with Polly, better timeouts, and logging. Tune SignalR and Blazor Server options for stability and performance. Update HTML and Razor files to use the new modular loader approach. These changes improve reliability, performance, and maintainability of Elsa Studio initialization.
Improve unauthorized UI: show error for logged-in users instead of login modal, add "Refresh Page" button, and track authentication state changes for better user experience. Unsubscribe events on disposal to prevent memory leaks.
Introduced ILogoutService for provider-specific logout logic, ensuring proper cleanup of authentication state before redirecting. Updated LogoutButton to use the new service. Service registrations now inject the correct logout implementation per authentication module. Optimized App.razor and _Host.cshtml to conditionally load heavy assets/scripts only for non-login routes, improving login page load times. Program.cs updated for lazy module loading on non-login routes.
Refactor login page to load app name, tagline, logo, and version info from a new Branding section in appsettings.json, supporting environment-specific customization. Add LoginBrandingOptions model for config structure and defaults. Update UI and logic to use config values, removing magic constants and heavy pre-auth dependencies. Add LOGIN_CONFIGURATION.md for usage and migration guidance.
Refactored logout services to use configuration for navigation routes and authentication storage keys, replacing hardcoded strings. Added strongly-typed options models for routes and storage keys. Updated appsettings files with new sections for environment-specific customization. Improved branding configuration and made LoginBrandingOptions overrideable via IBrandingProvider. Login page now resolves branding values and logo paths more intelligently.
@FransVanEk
Copy link
Contributor Author

@copilot do a pr review

Copy link
Contributor

Copilot AI commented Feb 3, 2026

@FransVanEk I've opened a new pull request, #749, to work on those changes. Once the pull request is ready, I'll request review from you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants