Modify login page appearance, run javascript/jquery when login fails

Question

I want to modify the appearance of the login page. I've added some jquery and javascript to DesktopModules/AuthenticationServices/DNN/Login.ascx so i could have a virtual keyboard which the user can use to type the username and password. The problem is that when the login fails, it seems to me that the jquery and the javascript scripts are not executed and consequently the virtual keyboard does not appear.

I've done a lot of search on this one. I'm considering making a new login module, but i'm not sure how or if this will enable me to solve the problem.

Any suggestions out there?

DNN Version: 6.1.3

Answer 1

I would advise against changing the core login directly, because it's considered a "core change" and would be overwritten in an upgrade. It would require that you merge your changes before upgrading every time.

Instead, if you require that level of access, I'd suggest creating your own login module.

In looking at your problem though, I don't think that's necessary. You could achieve this same effect by creating and implementing a skin widget. Skin widgets will allow you to manipulate the UI in nearly any way you can think of since you can use jQuery and inject jQuery plugins.

This is a much more elegant solution that can scale, is testable, safe against upgrades, and allows you to reuse it as needed across multiple sites and installations.

Examples of widgets and documentation can be found in the following two links:

DNN Widget Suite Project Skin Widget Wiki Article with many linked resources

Answer 2

Like Will said you definitely should not edit or add code to the core files as they will get overwritten in DNN upgrades. You should be able to solve this with just Javascript, but you could also look at a 3rd party login module like this one: http://www.dnnspot.com/Modules/DotNetNuke-Custom-Login Has features to customize the sign in view, logged in view, even error messages. So you should be able to inject different javascript as needed in different situations.

Disclaimer - I am affiliated with DNNspot.

Answer 3

I used this javascript On-Screen-Keyboard (OSK) which is lovely. (http://www.greywyvern.com/code/javascript/keyboard)

I am using DNN 5.6.8 so I'm not sure if my solution works for DNN 6.x .

I modify the "page.ascx" file of the "skin" I'm using, but I think you can modify the "page.ascx" of the default skin as well.

At the top of the page.ascx, below the list of "Register"'s I wrote this:

<script type="text/javascript" src="/js/keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="/js/keyboard.css">

Those 2 files (keyboard.js and keyboard.css) are the on-screen-keyboard. You may store them in other folders than "/js" of course.

At the bottom of the page.ascx, I put this script:

<script type="text/javascript">
$(document).ready(function () {
    if (document.getElementById('dnn_ctr_Login_Login_DNN_txtUsername') != null) {
        $("#dnn_ctr_Login_Login_DNN_txtUsername").attr("lang", "es");
        $("#dnn_ctr_Login_Login_DNN_txtPassword").attr("lang", "es");
        VKI_attach(document.getElementById('dnn_ctr_Login_Login_DNN_txtUsername'));
        VKI_attach(document.getElementById('dnn_ctr_Login_Login_DNN_txtPassword'));
    }
});
</script>

These names: 'dnn_ctr_Login_Login_DNN_txtUsername' and 'dnn_ctr_Login_Login_DNN_txtPassword' were the ones I saw by right-clicking and "View source code" of my DNN site running, and I think there's no reason to think they can be different in other DNN sites, but nevertheless you can check yours.

Obviously you must have jQuery active in your DNN installation. :)

That's it. It works great!!

HTH!