12.7. User-Registration Component
The user-registration component provides a way for people to register themselves as users of the ticket manager application. It's a simple component, providing a form and the code needed to process that form using AJAX. An example of the form is shown in Figure 12-10, with the HTML that builds the UI shown in Listing 12-11.
Listing 12-11. Register.php
1 <div id="register" class="section">
2 <form onsubmit="return register(this)"
3 id="registerForm">
4 <h3>Register</h3>
5 <p class="message"></p>
6 <p><label>Username:
7 <input name="username">
8 </label></p>
9 <p><label>Password:
10 <input name="password" type="password">
11 </label></p>
12 <p><label>Email:
13 <input name="email">
14 </label></p>
15
16 <p><input name="submit" type="submit"
17 value="Register">
18 </p>
19 </form>
20 </div>
|
Register.php provides the basic form. It calls the register function when submitted (line 2) and has an ID so that it can be easily accessed from JavaScript. All the other form elements can be accessed through the form's elements array, so they need only a name attribute. This access method allows form elements to look just like non-AJAX forms. The form also contains a message target (line 4), which is used to display validation messages. The HTML is powered by the JavaScript added by register.js, which is shown in Listing 12-12.
Listing 12-12. Register.js
1 var callback = {
2 addUser: function(result) {
3 registerComplete(result);
4 }
5 }
6 var rReg = new Ticket(callback);
7
8 function register(form) {
9 var u = form.elements.username.value;
10 var p = form.elements.password.value;
11 var e = form.elements.email.value;
12
13 if (u == '' || p == '' || e == '') {
14 setMessage(byClass('message',form)[0],
15 'All fields are required');
16 new Effect.Highlight(form);
17 return false;
18 }
19
20 rReg.addUser(u,p,e);
21 var els = byClass('loggedOut',byId('login'));
22 els[0].elements.username.value = u;
23 els[0].elements.password.value = p;
24
25 form.elements.submit.value =
26 'Registering Please Wait';
27 form.elements.submit.disabled = true;
28 return false;
29 }
30
31 function registerComplete(result) {
32 selectSection('front');
33 new Effect.Highlight('login');
34 var form = byId('registerForm');
35 form.elements.submit.value = 'Register';
36 form.elements.submit.disabled = false;
37 }
|
The register component doesn't need a setup function, so it starts by setting up its AJAX instance (line 6). It defines a single callback, addUser (lines 24), which calls the registerComplete function. Next we define the register function (lines 829), which is called when the registration form is submitted. The function grabs the values of the fields it will be submitting (lines 911) and then does some basic validation. If the validation fails, we use the setMessage function (lines 1415) to display a warning to the user and stop the form submission by returning false. Remember that validation is also enforced on the server, so we're not using this code to protect our back end, just to provide a good user experience. If the validation succeeds, we make an AJAX call to addUser, passing in the username, password, and email address (line 20). This call is followed by code that prepopulates the login form with the new username and password (lines 2223). The next step is to display the loading status, which is done by disabling the submission button of the registration form (lines 2527).
When the server has returned a response, the registerComplete function (lines 3137) is run by the callback function. This function selects the front page of the application (line 34), highlights the login form (line 33) to show the user that he or she should log in, and then re-enables the registration form (lines 3536) in case we want to register another user.
|
