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
Listing 12-14. EditAccount.js
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).