RFC: Mobile Friendly Login, Enhance Existing or New Module

[jeremy-farrance]

The existing login module's HTML/CSS output is not mobile friendly through 9.2.2

There are probably a few ways to approach this. One would be a new module. Another would be to enhance the existing module. An even better approach would be to separate and make the emitted UI a template with at least 2 or 3 solid default options for different, popular scenarios.

Description of alternatives considered

While we are here, some thought should probably be given to implementing or at least providing a hook for an easy 2FA workflows or options?

Screenshots

Affected version

[x] 9.2.2 and all previous versions.

Affected browser

[x] Chrome on Android

Note that this issue was originally raised by Torsten Weggen on a Facebook discussion from 11/10/2018

[mitchelsellers]

One simple fix for this is to get rid of a fixed CSS style on the Login form that sets the width of the login control.

We do this with all of our skins, it helps quite a bit with layout issues.

[donker]

This is something of a pet peeve for me as well. I hate the login experience with a passion and it seems like one of the single most overlooked aspects of our UX.

So I am all for improving anything and ensuring it's mobile accessible.

I'm going to add another RFC to improve the overall experience though so we keep this thread simple.

[valadas]

One simple fix for this is to get rid of a fixed CSS style on the Login form that sets the width of the login control.

I saw there was a new bootstrap 4 release of Xcillion, should we update it in the platform and adjust that and call it a day? The default skin would be fine and for custom skins, they can also restyle that as needed...

[kurtwilbies]

Can these UI issues fixed in 9.3.

[mitchelsellers]

We will need to look at the changes needed. This could be a breaking change that isn’t easy to override, so making a 9.3 release could be hard. (But that needs research still)

[jeremy-farrance]

Can these UI issues fixed in 9.3.

I disagree, we've lived with this for years. Mark it for 9.4 and stay focused on getting 9.3 out the door. Just an opinion, thanks!

[kurtwilbies]

Well actually I assume there is a good fix for this issue. Its here for year. For some scary reason nobody did or want to fix this issue. If you want to offer dnn to clients and then get a shity login screen, thats very good marketing. Amazing!

[mitchelsellers]

@kurtwilbies It is quite easy to implement a customized UI for the login experience if needed, we do this a lot for complex customers.

But I agree this should be fixed. However, due to the breaking nature of it, it will most likely not be 9.3

[valadas]

For some scary reason nobody did or want to fix this issue

It is not that nobody wants to fix this, the login control has been there for a long time unchanged (maybe even before most of us had to login to Dnn with a cellphone) and many designers/developers have probably built workarounds in their skins for that over the years, so making this breaking change unannounced on a minor release is pulling the rug under those who took care of that issue their own way.

As for any breaking change, we need to discuss and agree on and acceptable solution as a group to prevent having to make breaking changes too often. That is the main purpose of RFC issues (requests for comments), to get a pulse of the community opinions and weight in the pros and cons of the proposed solutions to try and make the majority happy with the final decision. Obviously, there is no way to satisfy everybody on every decision.

If you want to offer dnn to clients and then get a shity login screen, thats very good marketing. Amazing!

Keep in mind that there are way more very old or upgraded installations of Dnn around than new ones, making it nice for new users while ignoring all the old ones is something we strive to avoid. Since the first screenshot shows that it is on a custom skin, just changing the default skin may not solve the issue, hence why properly fixing this may be a breaking change.

[kurtwilbies]

Actually, what I want is a WebAPI call login ea. En then I build my own module with react redux material-ui. That the goal I think. And for the platform a simple login ea screen/page.

[kurtwilbies]

In summary, the existense of an auth api (web api) is enough. Then everybody can build their own module or even module builders can extent the functionality. This has a number of advantages. Furthermore, the present login can stay as is.

[david-poindexter]

In summary, the existense of an auth api (web api) is enough. Then everybody can build their own module or even module builders can extent the functionality. This has a number of advantages. Furthermore, the present login can stay as is.

@kurtwilbies JWT has been an option in DNN since 08.00.03. All you have to do is enable it. This documentation should help you out with that.

However, most 3rd-party login modules and/or form modules that support login do this via the server-side DNN API (not DNN Web API). This too can be done today in multiple ways. In a WebForms module, you can just make a server-side API call to login. Via SPA or MVC module, you can incorporate your own Service API endpoint to call from client-side.

[kurtwilbies]

Thanks. For mobile apps I already use JWT. For web apps I tried to write a clean web api login action, but thats almost impossible. More people has to look into this issue and I hope somebody has a clean solution that I can use now. So, post a solution if yoy have one.

[david-poindexter]

For web apps I tried to write a clean web api login action, but thats almost impossible.

@kurtwilbies I am unclear as to why you think it's almost impossible to write a clean Web API login action. Just write your endpoints against the DNN API.
DotNetNuke.Entities.Users.UserController.UserLogin is your primary login method, but there is of course more to it than a single method call. Take a look at the core login code-behind for more insight.

My apologies to @Accuraty for somewhat hijacking your thread with support. 😄

[jeremy-farrance]

My apologies to @Accuraty for somewhat hijacking your thread with support. 😄

It is ALL good. :)

[kurtwilbies]

Well nvisionative I am confused. There is more than using the api. Maybe not but can you write sone code or give some guidance. Maybe dhr Donker has a solution and I know for sure that dhr Sellers has one. Please share.

[mitchelsellers]

Regarding @kurtwilbies request, there is a bit of a difference in the context & behavior between regular web-requests and API responses, however, it shouldn't be more difficult than mimicking the same behaviors as the Login module. (I have not yet tested this though.)

It would be important for anyone exposing DNN Login via an API however, to ensure that all built-in protections are followed with regards to throttling, lockout, and the detailed returned. Additionally, support for verification should be supported. (This might be its own RFC)

With regards to @Accuraty's initial request here. I agree that this should be a priority, but done so in a manner to not further box-in a solution to any one UI/UX framework.

[kurtwilbies]

I saw that the dates in rhe roadmap are changed. So I would like to see an improvement in the login ui and the implementation of a 2-part authentication system.

[mitchelsellers]

@kurtwilbies we are for sure accepting pull requests. The nature of the date change is keeping the team fully committed for this release.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed automatically due to the aforementioned detection of activity. Feel free to re-open the issue if you believe it should not be closed.

[jeremy-farrance]

I definitely feel like this one needs to stay open until fixed or a solution is in progress.

[valadas]

I do not disagree but this has been here for a year without any PR submitted. Is anybody planning to submit a PR for it? Just trying to keep the backlog fresh, I know for me this is not a major thing since I never use the default skin. Would still be nice but if nobody in 1 year even indicated they would eventually submit the change, then this issue just clutters the backlog...

[Timo-Breumelhof]

@Accuraty

FYI, you can use this CSS to make your login control (more) responsive:

.LoginPanel {
width: auto;
padding-right: 0;
float: none;
}

.LoginPanel .dnnLabel, .LoginPanel .dnnFormLabel{
float:none;
text-align:left;
margin:0;
width:auto;
}

.LoginPanel .dnnFormItem > label.dnnFormLabel, .LoginPanel .dnnFormItem > span.dnnFormLabel{
display:none;
}

.LoginPanel .dnnActions {
padding-left: 0;
}