Previous Page
Next Page

12.8. Account-Editing Component

The account-editing component provides a similar form to the registration component, allowing the currently logged in user a way to update his or her password and email address. This page is quite simple and looks just like the registration screen, except that the username input box is disabled because the back end doesn't allow usernames to be changed. An example of the account-editing screen is shown in Figure 12-11; the HTML that generates it is shown in Listing 12-13.

Figure 12-11. Account-editing component


Listing 12-13. EditAccount.php

1 <div id="editAccount" class="section">
2
3 <form onsubmit="return updateAccount(this)"
4   id="accountForm">
5   <h3>Edit Account</h3>
6   <p class="message"></p>
7   <p><label>Username:
8   <input name="username" disabled="true">
9   </label></p>
10  <p><label>Password:

11  <input name="password" type="password">
12  </label></p>
13  <p><label>Email:
14  <input name="email">
15  </label></p>
16
17  <p><input name="submit" type="submit"
18  value="Update Account"></p>
19 </form>
20 </div>

The HTML for the account-editing component is nice and simple. It creates a form that calls the updateAccount function on submit (line 3). It contains the same fields as the registration form, except that its username field is disabled (line 8). The matching JavaScript for editAccount.js is shown in Listing 12-14.

Listing 12-14. EditAccount.js

1 app.setup.push(function() {
2 byId('editAccount').onDisplay = function() {
3   var form = byId('accountForm');
4
5   for(var i = 0; i < form.elements.length; i++) {
6     var n = form.elements[i].name;
7     if (app.profile[n]) {
8       form.elements[i].value =
9         app.profile[n];
10     }
11   }
12 }
13
14 });
15
16 var accountCallback = {
17   updateUser: function(result) {
18     updateAccountComplete(result);
19    }
20  }
21  var rAccount = new Ticket(accountCallback);
22
23  function updateAccount(form) {
24    var update = {
25    password: form.elements.password.value,
26    email: form.elements.email.value
27  }
28  form.elements.submit.value = "Updating please wait..";
29  form.elements.submit.disabled = true;

30  rAccount.updateUser(update);
31  return false;
32 }
33
34 function updateAccountComplete(result) {
35   app.profile = result;
36  setMessage(byClass('message',
37     byId('editAccount'))[0],'Account Updated');
38   var form = byId('accountForm');
39   form.elements.submit.value = "Update Account";
40   form.elements.submit.disabled = false;
41 }

EditAccount.js starts by defining setup and onDisplay functions (lines 114). The setup function is used only to register the onDisplay function (lines 212). The onDisplay function takes the account form (line 3) and loops over its elements (lines 511), setting the value of each field that has a name matching the name of a property in the user's profile. This will populate the account form with the user's account information when the account editor is selected.

On lines 1621, the AJAX class is set up. This component uses only the updateUser function, so it's the only one with a callback. The response to this method is sent to the updateAccountComplate function. The updateAccount function on lines 2332 takes the account form and performs an AJAX submission of it. This is done by creating an object containing the form's values (lines 2427) and then sending it to the server on line 30. The function also contains some basic user feedback; the Submit button's value is changed to a loading message and disabled (lines 2829). Wrapping up the file is the updateAccountComplete function (lines 3441), which takes the results from the server, updates the user's profile with them (line 35), and then turns off the loading messages set by the updateAccount function (lines 3840).


Previous Page
Next Page