[Solved] Intergrating jquery ui

[Jeff]

Hi All,

I'll put my hand up now and say I am a javascript n00b so I don't even know if my question is possible. The long and the short of it is that my client wants to have to enter a password whenever they open a file from the RadFileExplorer (they are a little paranoid about security). Now I've managed to figure out how to do this using a mixture of page methods and javascript but the problem is the password dialog that is displayed is just a javascript prompt box and as such the password they are entering isn't masked like a normal password box would be. After some research I discovered that the only way to make it a masked password box was to use something like jquery ui to create a modal popup that contains a password masked textbox - my problem - how the &*^@ do I intergrate that into my solution? You will see in my code that I call a 'prompt' box and this is obviously where the jquery ui box needs to be but I just have no clue about how to do this.

Any help or direction would be greatly appreciated.

Oh....here's my code :)

function OnClientFileOpen(sender, args) {
    args.set_cancel(true);
    var password = prompt("Enter Password");
    PageMethods.MyAuthorisationMethod(password, onSuccess, onerror);
    function onSuccess(response) {
        if (response == true) {
            var item = args.get_item();
            var fileExtension = item.get_extension();

            var fileDownloadMode = true;
            if ((fileDownloadMode == true) && (fileExtension == "jpg" || fileExtension == "gif" || fileExtension == "doc" || fileExtension == "mp3" || fileExtension == "txt")) {// Download the file
                // File is an image document or a word document, do not open a new window
                args.set_cancel(true);

                // Tell browser to open file directly
                var requestImage = "Handler.ashx?path=" + item.get_url();
                document.location = requestImage;
            }
        }
        else { alert("The password entered is incorrect"); }
    }

}

[Vessy]

Hi Jeff,

The desired behavior could not be achieved with the default prompt, but you could use the RadPrompt, which template could be customized to use <input type="password">. Detailed information on the subject is available in the following online resources:
Change the templates of the predefined dialogs (radalert, radconfirm and radprompt)
Window - Alert, Confirm and Prompt

In order to prevent the PageMethod to be executed before the password is entered, you have to move it to the RadPrompt's Callback function:

function OnClientFileOpen(sender, args) {
    args.set_cancel(true);
    radprompt("Enter Password", promptCallback, 300, 190);

    function promptCallback(arg) {
        PageMethods.MyAuthorisationMethod(arg, onSuccess, onerror);
    }

    function onSuccess(response) {
        if (response == true) {
            var item = args.get_item();
            var fileExtension = item.get_extension();

            var fileDownloadMode = true;
            if ((fileDownloadMode == true) && (fileExtension == "jpg" || fileExtension == "gif" || fileExtension == "doc" || fileExtension == "mp3" || fileExtension == "txt")) {// Download the file
                // File is an image document or a word document, do not open a new window
                args.set_cancel(true);

                // Tell browser to open file directly
                var requestImage = "Handler.ashx?path=" + item.get_url();
                document.location = requestImage;
            }
        }
        else { alert("The password entered is incorrect"); }
    }
}

For your convenience I am attaching a sample project, demonstrating the approach.

Regards,
Veselina Raykova
the Telerik team