Login System For A Flex Application With ColdFusion Backend Part 5 - Registration Form
Introduction to Part 5 - Registration Form
The next step in the design is to satisfy the requirements of the second use case: User visits the application and the login screen loads. User is not already a member. User clicks on the registration link. Login form changes to a registration form. User enters registration information correctly. User's information is stored in the database successfully. Registration form changes back to login form. User proceeds as in case A.
This iteration of the design required adding a new function to the MemberService CFC and changes and additions to the LoginForm.mxml component. View the working demo (right click on it to get the source code). Try registering and then logging in.
MemberService CFC
The MemberService CFC is the CFC the Flex application communicates with to get the backend to perform tasks. So I added a "createMemberService" function to this CFC. Note that if the create function in MemberDAO throws an exception, the createMemberService function rethrows it. This will enable the Flex application to respond to errors caused by the user trying to register using a username or email that already exists in the table. Handling those types of errors will be done in the next design phase.
<cffunction name="createMemberService" access="public" output="false" returntype="void"
hint="Pass Member object onto MemderDAO create function">
<cfargument name="aMember" type="Member" required="yes" />
<cfset var aMemberDAO = "" />
<cftry>
<cfscript>
aMemberDAO = createObject("component", "MemberDAO").init('GeekNews');
aMemberDAO.create(aMember);
</cfscript>
<cfcatch type="Member">
<cfthrow type="Member.create" message="#cfcatch.message#" />
</cfcatch>
</cftry>
</cffunction>
LoginForm.mxml Register State
I added a mx:LinkButton to the LoginForm that when the user clicks on it (to indicate he wants to register), the state of the login form changes to the register state. The code setting up the register states adds additional mx:TextInput components to the LoginForm, changes the text on the button, and changes what function will be executed by the button's click event. Check out the source code (see link above) for all the changes this state makes to the LoginForm. If you're not familiar with how to change the state of a Flex application read this earlier blog entry.
Validate Registration Input
I made significant changes to how user input is validated when I added the registration capability. I've created a validator component for each mx:TextInput component. Using the mx:TextInput change event, I call a function within which I have each validator validate the input field. The register button will only be enabled if all input fields contain valid user input.
Once all fields contain valid user input, the user can click on the Register button. The button's click event calls a function that does the following tasks: check to ensure the password and password confirmation match, creates a Member object using the mx:TextInput values, calls the MemberService's createMemberService function passing it the Member object.
Registration and Member Record Created
If a record is successfully created in the Member table, then the resultCreateMemberService function receives the result of calling the CFC function. In this method, I just use the Alert control to popup a message telling the user what to do next. The user will then be able to login using the username and password that was just added to the Member table.
If a record could not be created in the Member table, then the faultCreateMemberService function receives the error from the CFC function. Currently, I'm just displaying the error message. In our next iteration we will properly handle the error and provide instructions to the user (for example, "The user name you entered is already taken. Enter a different user name and try to register again.")
Notes About The Registration Process
Some registration processes require the user to receive an email and then click on a link in the email to confirm his registration. If your design needs to include this business rule, then you probably would need to modify the Member table to include a boolean column called registrationConfirmed with a default of false (no). You would also need to modify the MemberService CFC to include a function that would email the user after the registration was successfully stored in the Member table. The email would include a link to a CFM page that when loaded would change the registrationConfirmed to true. The CFM page would direct the user back to the Flex application. You would also need the MemberService to generate an error when a user tried to login and the registration was not confirmed and your Flex application would have to handle that error. Fortunately, I don't have that business rule so my registration process is simpler.
