Improve password reset form usability
[working/Evergreen.git] / Open-ILS / web / opac / skin / default / js / password_reset.js
1 dojo.require('dojo.parser');
2 dojo.require('dijit.Dialog');
3 dojo.require('dijit.form.Button');
4 dojo.require('dijit.form.TextBox');
5
6 dojo.requireLocalization("openils.opac", "opac");
7 opac_strings = dojo.i18n.getLocalization("openils.opac", "opac");
8
9 dojo.addOnLoad(function() {
10
11     // Create the password reset dialog
12     var pwResetFormDlg = createResetDialog();
13     dojo.parser.parse();
14
15     // Connect the buttons to submit / cancel events that override
16     // the default actions associated with the buttons to do
17     // pleasing Ajax things
18     dojo.connect(dijit.byId("pwCancel"), "onClick", function(event) {
19         event.preventDefault();
20         event.stopPropagation();
21         pwResetFormDlg.hide();
22         dijit.byId('pwUsername').attr('value', null);
23         dijit.byId('pwBarcode').attr('value', null);
24     });
25     dojo.connect(dijit.byId("pwSubmit"), "onClick", function(event) {
26         event.preventDefault();
27         event.stopPropagation();
28         var xhrArgs = {
29             form: dojo.byId("requestReset"),
30             handleAs: "text",
31             load: function(data) {
32                 pwResetFormDlg.hide();
33                 passwordSubmission(opac_strings.PWD_RESET_SUBMIT_SUCCESS);
34                 dijit.byId('pwUsername').attr('value', null);
35                 dijit.byId('pwBarcode').attr('value', null);
36             },
37             error: function(error) {
38                 pwResetFormDlg.hide();
39                 passwordSubmission(opac_strings.PWD_RESET_SUBMIT_ERROR);
40             }
41         }
42         var deferred = dojo.xhrPost(xhrArgs);
43     });
44     dojo.place("<tr><td colspan='2' align='center'><a class='classic_link' id='pwResetLink' onClick='dijit.byId(\"pwResetFormDlg\").show();'</a></td></tr>", "login_tbody");
45     dojo.query("#pwResetLink").attr("innerHTML", opac_strings.PWD_RESET_FORGOT_PROMPT);
46
47 });
48
49 function passwordSubmission( msg ) {
50     var responseDialog = new dijit.Dialog({
51         title: opac_strings.PWD_RESET_RESPONSE_TITLE,
52         style: "width: 35em"
53     });
54     responseDialog.startup();
55     var requestStatusDiv = dojo.create("div", { style: "width: 30em" });
56     var requestStatusMsg = dojo.create("div", { innerHTML: msg }, requestStatusDiv);
57     var okButton = new dijit.form.Button({
58         id: "okButton",
59         type: "submit",
60         label: opac_strings.OK
61     }).placeAt(requestStatusDiv);
62     responseDialog.attr("content", requestStatusDiv);
63     responseDialog.show();
64     dojo.connect(dijit.byId("okButton"), "onClick", responseDialog, "hide");
65 }
66
67 function createResetDialog() {
68     var pwResetFormDlg = new dijit.Dialog({
69         id: "pwResetFormDlg",
70         title: opac_strings.PWD_RESET_FORM_TITLE,
71         style: "width: 35em"
72     });
73     pwResetFormDlg.startup();
74
75     // Instantiate the form
76     var pwResetFormDiv = dojo.create("form", { id: "requestReset", style: "width: 30em", method: "post", action: "/opac/password/en-US" });
77     dojo.create("p", { innerHTML: opac_strings.PWD_RESET_SUBMIT_PROMPT }, pwResetFormDiv);
78     var pwResetFormTable = dojo.create("table", null, pwResetFormDiv);
79     var pwResetFormTbody = dojo.create("tbody", null, pwResetFormTable);
80     var pwResetFormRow = dojo.create("tr", null, pwResetFormTbody);
81     var pwResetFormCell = dojo.create("td", null, pwResetFormRow);
82     var pwResetFormLabel = dojo.create("label", null, pwResetFormCell);
83     dojo.attr(pwResetFormCell, { innerHTML: opac_strings.BARCODE_PROMPT });
84     pwResetFormCell = dojo.create("td", null, pwResetFormRow);
85     var barcodeText = new dijit.form.TextBox({
86         id: "pwBarcode",
87         name: "barcode"
88     }).placeAt(pwResetFormCell);
89     pwResetFormRow = dojo.create("tr", {}, pwResetFormTbody);
90     pwResetFormCell = dojo.create("td", {}, pwResetFormRow);
91     dojo.attr(pwResetFormCell, { innerHTML: opac_strings.USERNAME_PROMPT });
92     pwResetFormCell = dojo.create("td", {}, pwResetFormRow);
93     var usernameText = new dijit.form.TextBox({
94         id: "pwUsername",
95         name: "username"
96     }).placeAt(pwResetFormCell);
97     dojo.create("br", null, pwResetFormDiv);
98     var submitButton = new dijit.form.Button({
99         id: "pwSubmit",
100         type: "submit",
101         label: opac_strings.SUBMIT_BUTTON_LABEL
102     }).placeAt(pwResetFormDiv);
103     var cancelButton = new dijit.form.Button({
104         id: "pwCancel",
105         type: "cancel",
106         label: opac_strings.CANCEL_BUTTON_LABEL
107     }).placeAt(pwResetFormDiv);
108
109     // Set the content of the Dialog to the pwResetForm
110     pwResetFormDlg.attr("content", pwResetFormDiv);
111     return pwResetFormDlg;
112 }
113