Bug: Module CSS Not Loading Causing Login Form Input 100% of screen width (static SSR 5.0.3)

[thabaum]

Issue

Description

The login form fills 100% of the screen making potentially an unappealing visual for large screens with button for show off to the right side so far.

This is a currently known issue with selecting the Static Server Rendering hosting model in 5.0.3 dev branch. It is due to the Module CSS files not being loaded when using this Oqtane hosting model.

Possible Other Solution

.Oqtane-Modules-Admin-Login {
    max-width: 360px;
}

Possible Other Solution 2

.app-login-form {
    max-width: 360px;
}

Add app-login-form to the form element along with other attributes:<form class="app-login-form"> or put a <div> wrapper with the class.

Deprecate Oqtane-Admin-Login-Form class from inner <div> element and remove in a later determined release.

Screenshots

Additional Context

The current class "Oqtane-Admin-Login-Form" within the framework doesn't align with our goal of providing a generic and adaptable solution for login components. Its naming, including terms like "Admin" and "Oqtane," may inadvertently restrict branding flexibility and pose challenges for module developers and theme designers. To address this, I propose deprecating the existing class and replacing it with a more generic and neutral class name, such as "app-login-form."

By transitioning to a generic class name and placing it on the

element, we can facilitate easier styling and customization for different vendors and themes. This approach ensures that the login component blends seamlessly with various design aesthetics without introducing unnecessary branding elements.

To implement this change, we'll provide clear documentation and release notes, notifying developers of the deprecation and offering guidance on migrating to the new class name. Additionally, we'll schedule the removal of the deprecated class in a future release, allowing ample time for developers to update their modules and themes accordingly.

This adjustment reflects our commitment to maintaining a flexible and developer-friendly framework while fostering collaboration and ease of use within the Oqtane ecosystem.

If needed I am ready to produce a fix once this issue is reviewed for how we wish to proceed.

[sbwalker]

The login module already has a CSS file defining field widths (Oqtane.Server\wwwroot\Modules\Oqtane.Modules.Admin.Login\Module.css). However module level CSS resources are not currently being loaded on static rendering. Static rendering is a work in progress so this is a known issue. Introducing additional CSS styles are not necessary.

[thabaum]

I still would prefer to see a generic class selector but I can work around this for my own, I just see other issues outlined with current approach. Renaming this class selector I would be in favor of doing by adding the new style class and removing the current one down the road. I also think the current width is too small, tiny in fact for any real password.

[sbwalker]

Since I am not considering or merging any enhancements until the static rendering integration is completed, we can leave this open and revisit the suggestion in a future release.

[thabaum]

I will leave this open as more directed at the fact the module css not loading with static SSR currently. I can see these types of things being directed more towards 5.1.1 or even 5.1.2 since we need a stabilization release as a focus first. Once 5.1 version is fully modded, rocket boosted providing developers with more types of Oqtane, and is ready for lift off, hold-on-to-your-hats! 🚀 🛸 🌕 🌎 🌞 🌟

[thabaum]

Closing as fixed in #3843