jQuery UI integration

jQuery UI integration

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 a Telerik RadFileExplorer control (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 integrate 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 :)

  1.         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"); }
                }

            }