Our objective in this section is to implement the files necessary for enabling user registration/membership. Most of what we do here will be driven by the Login snippet which we installed when we looked at Modx Revolution Development - Part 04 - Packages.

The Login snippet is organized into 9 functional areas as can be seen under Element-->Snippets-->Login. It also uses a number of chunks to display its forms, and to format its results. Coincidentally, there are 9 Login chunks which can be reviewed under Chunks-->Login.

We will create the following resources which are all based on Base Template. It is a good opportunity to use Quick Create or the Duplicate Resource functionality for subsequent resources and only change what is necessary in order to speed up the resource creation process. The indicated Resource IDs assume that the pages are created in the order followed in Modx Revolution Development - Part 07 - Creating Resources, and in the order that newly created pages appear in this section.

  1. Name: Login
    Page Settings: tick Published
    Page Settings: untick Rich Text
    Page Settings: untick Searchable
    Resource Content field:
    <div class="content">
    [[!Login? &loginTpl=`lgnLoginTpl` &logoutTpl=`lgnLogoutTpl` &errTpl=`lgnErrTpl` &redirectToPrior=`1`]]
    <p class="forgot">
    <a href="[[~22]]">Forgot your Password?</a><br />
    <a href="[[~27]]">Register for an account</a><br /><br />
    <a href="[[~24]]">Members Page</a>
    </p>
    </div>
    
    Note: In the case above, the login script calls lgnLoginTpl to display the login form, lgnLogoutTpl for logout, and lgnErrTpl for showing any errors. We also have &redirectToPrior=`1` to return users to the page they were prior to clicking on the login link. A link has been added for 'forgot password' and also for 'register for an account' as well as a link to the members area.
  2. Name: Reset Password
    Page Settings: tick Published
    Page Settings: untick Rich Text
    Page Settings: untick Searchable
    Page Settings: tick Hide From Menu
    Resource Content field:
    [[!ResetPassword? &loginResourceId=`20`]]
    
    Note: This is a hidden page that does the actual resetting of passwords and then redirects to the Login page.
  3. Name: Forgot Password
    Page Settings: tick Published
    Page Settings: untick Rich Text
    Page Settings: untick Searchable
    Page Settings: tick Hide From Menu
    Resource Content field:
    [[!ForgotPassword? &resetResourceId=`21` &tplType=`modChunk` &tpl=`lgnForgotPassTpl`]]
    
    Note: The user is presented with a form to supply either their username or email address and is then forwarded to the Login page after clicking on Reset Password.
  4. Name: Logout
    Page Settings: tick Published
    Page Settings: untick Searchable
    Page Settings: tick Hide From Menu
    Resource Content field:
    <p>You are now logged out.<br /><a href="[[~20]]" title="login">Login again</a></p>
    
    Note: a simple page that displays a logout message.
  5. Name: Members Page
    Page Settings: tick Published
    Page Settings: tick Container
    Page Settings: untick Searchable
    Resource Content field:
    <div id="membership">
    <p class="member-home-profile-link"><a href="[[~25]]">Update Profile</a> | <a href="[[~26]]">Change password</a></p>
    </div>
    
    Note: This is a landing page that is available only to authenticated users. It is a Container to enable us create further restricted pages under it. Update Profile and Change Password can only be accessed from this page, hence the links. We will assign Access Permissions later for this to be made possible.
  6. Name: Update Profile
    Page Settings: tick Published
    Page Settings: untick Rich Text
    Page Settings: untick Searchable
    Page Settings: tick Hide From Menu
    Resource Content field:
    [[!UpdateProfile]]
    <div class="update-profile">
        <div class="updprof-error">[[+error.message]]</div>
        [[+login.update_success:if=`[[+login.update_success]]`:is=`1`:then=`[[%login.profile_updated? &namespace=`login` &topic=`updateprofile`]]`]]
     
        <form class="form" action="[[~[[*id]]]]" method="post">
            <input type="hidden" name="nospam:blank" value="" />
     
            <p><label for="fullname">[[!%login.fullname? &namespace=`login` &topic=`updateprofile`]]<span class="error">[[+error.fullname]]</span></label>
            <input type="text" name="fullname" id="fullname" value="[[+fullname]]" /></p> 
            <p><label for="email">[[!%login.email]]<span class="error">[[+error.email]]</span></label>
            <input type="text" name="email:required:email" id="email" value="[[+email]]" /></p> 
            <p><label for="phone">[[!%login.phone]]<span class="error">[[+error.phone]]</span></label><input type="text" name="phone" id="phone" value="[[+phone]]" /></p> 
            <p><label for="mobilephone">[[!%login.mobilephone]]<span class="error">[[+error.mobilephone]]</span></label><input type="text" name="mobilephone" id="mobilephone" value="[[+mobilephone]]" /></p> 
            <p><label for="fax">[[!%login.fax]]<span class="error">[[+error.fax]]</span></label><input type="text" name="fax" id="fax" value="[[+fax]]" /></p> 
            <p><label for="address">[[!%login.address]]<span class="error">[[+error.address]]</span></label><input type="text" name="address" id="address" value="[[+address]]" /></p> 
            <p><label for="country">[[!%login.country]]<span class="error">[[+error.country]]</span></label><input type="text" name="country" id="country" value="[[+country]]" /></p> 
            <p><label for="city">[[!%login.city]]<span class="error">[[+error.city]]</span></label><input type="text" name="city" id="city" value="[[+city]]" /></p> 
            <p><label for="state">[[!%login.state]]<span class="error">[[+error.state]]</span></label><input type="text" name="state" id="state" value="[[+state]]" /></p> 
            <p><label for="zip">[[!%login.zip]]<span class="error">[[+error.zip]]</span></label><input type="text" name="zip" id="zip" value="[[+zip]]" /></p> 
            <p><label for="website">[[!%login.website]]<span class="error">[[+error.website]]</span></label><input type="text" name="website" id="website" value="[[+website]]" /></p> 
            <br class="clear" /> 
            <div class="form-buttons">
             <p> <input type="submit" name="login-updprof-btn" value="[[!%login.update_profile]]" /><span class="return-to-members-home">return to <a href="[[~14]]">Members Home Page</a></span></p>
            </div>
        </form>
    </div>
    
    Note: This form uses the Update Profile to enable changes to registered user data.
  7. Name: Change Password
    Page Settings: tick Published
    Page Settings: untick Rich Text
    Page Settings: untick Searchable
    Page Settings: tick Hide From Menu
    Resource Content field:
    [[!ChangePassword? &reloadOnSuccess=`0` &successMessage=`[[!%login.change_password? &namespace=`login` &topic=`changepassword`]] - [[!%login.profile_updated? &namespace=`login` &topic=`updateprofile`]]`]]
    <div class="change-password">
     <div style="color:#66CC00">[[+logcp.successMessage]] </div>
    <br /> 
        <form class="form" action="[[~[[*id]]]]" method="post">
            <input type="hidden" name="nospam:blank" value="" /> 
            <label for="password_old">[[!%login.password_old? &namespace=`login` &topic=`changepassword`]]:
                <span class="error">[[+logcp.error.password_old]]</span></label>
            <input type="password" name="password_old" id="password_old" value="[[+logcp.password_old]]" />
      <br />
            <label for="password_new">[[!%login.password_new? &namespace=`login` &topic=`changepassword`]]:
                <span class="error">[[+logcp.error.password_new]]</span></label>
            <input type="password" name="password_new" id="password_new" value="[[+logcp.password_new]]" />
      <br />
            <label for="password_new_confirm">[[!%login.password_new_confirm? &namespace=`login` &topic=`changepassword`]]:
                <span class="error">[[+logcp.error.password_new_confirm]]</span></label>
            <input type="password" name="password_new_confirm" id="password_new_confirm" value="[[+logcp.password_new_confirm]]" />
      <br /> 
            <br class="clear" /> 
            <div class="form-buttons">
                <input type="submit" name="logcp-submit" value="[[!%login.change_password]]" />
            </div>
        </form>
    </div> 
    
  8. Name: Membership Registration
    Page Settings: tick Published
    Page Settings: untick Rich Text
    Page Settings: untick Searchable
    Page Settings: tick Hide From Menu
    Resource Content field:
    [[!Register?
        &submitVar=`registerbtn`
        &activationResourceId=`29`
        &activationEmailTpl=`lgnActivateEmailTpl`
        &activationEmailSubject=`Thanks for Registering!`
        &submittedResourceId=`28`
        &usergroups=`myrevo:Member`
    ]]  
    <div class="register">
        <div class="registerMessage">[[+error.message]]</div>
          
        <form class="form" action="[[~[[*id]]]]" method="post">
           <p><input type="hidden" name="nospam:blank" value="" /></p>          
            <p><label for="username">[[%register.username? &namespace=`login` &topic=`register`]]
                <span class="error">[[+error.username]]</span>        </label></p>
           <p><input type="text" name="username:required:minLength=6" id="username" value="[[+username]]" /></p>          
          <p><label for="password">[[%register.password]]
                <span class="error">[[+error.password]]</span>        </label></p>
            <p><input type="password" name="password:required:minLength=6" id="password" value="[[+password]]" /></p>          
            <p><label for="password_confirm">[[%register.password_confirm]]
                <span class="error">[[+error.password_confirm]]</span>        </label></p>
             <p><input type="password" name="password_confirm:password_confirm=`password`" id="password_confirm" value="[[+password_confirm]]" /></p>          
             <p><label for="fullname">[[%register.fullname]]
                <span class="error">[[+error.fullname]]</span>        </label></p>
             <p><input type="text" name="fullname:required" id="fullname" value="[[+fullname]]" /></p>          
             <p><label for="email">[[%register.email]]
                <span class="error">[[+error.email]]</span>        </label></p>
             <p><input type="text" name="email:email" id="email" value="[[+email]]" /></p>          
            <p><br class="clear" /></p>          
            <div class="form-buttons">
                <p><input type="submit" name="registerbtn" value="Register" /></p>
            </div>
        </form>
    </div>
    
    Note: When users submit the registration form, they are redirected to Request Pending with ID of 28, informing them to check their email for activation link. When the email link is clicked, activation is accomplished in the resource, Membership Confirmation Handler (ID 29). Registered users will be assigned to the Members user group which we will be create in Modx Revolution Development - Part 09 - Security.
  9. Name: Request Pending
    Page Settings: tick Published
    Page Settings: untick Searchable
    Page Settings: tick Hide From Menu
    Resource Content field:
    Thank you for your interest in our site! Please check your email for an activation link.  You will need to click this link before you can log into the site.
    
    Note: Also see Membership Registration.
  10. Name: Membership Confirmation Handler
    Page Settings: tick Published
    Page Settings: untick Rich Text
    Page Settings: untick Searchable
    Page Settings: tick Hide From Menu
    Resource Content field:
    [[ConfirmRegister? &redirectTo=`24`]]
    
    Note: Also see Membership Registration. After confirmation, the user is redirected to the Members Page (ID 24).

Now that we membership, we can amend our Personalize chunks as follows:

  • header_for_guest:
    • Revised Chunk (html):
      <span id="logged_in_status"><a href="[[~20]]">Login</a>/<a href="[[~27]]">Register</a></span>
      
  • header_for_members:
    • Revised Chunk (html):
      <span id="logged_in_status"><a style="color:#690" href="[[~24]]">Members Page</a> | <a href="[[~20? &service=`logout`]]">Logout</a></span>
      

Local Testing of Membership Registration/Activation and Contact Form

We need a way of sending out email from our development machine in order to test that our contact form and membership exchanges will work as expected. The default installation of Modx Revolution uses the mail function in php but this does not work through localhost. We can overcome such limitation by setting up smtp. To do this, we go into System-->Settings and filter for Mail.

Google's suggested approach for gmail is as follow:

  • SMTP Authentication: Yes
  • SMTP Hosts:smtp.gmail.com
  • SMTP Password:supply your email pasword here
  • SMTP Port: leave as 587 for tls or 465 for ssl
  • SMTP Connection Prefix: either tls or ssl
  • SMTP User:your gmail address
  • Use SMTP: Yes

Above settings probably works on some machines but it did not work for me. I made the changes below to get it to work:

  • SMTP Port: 25
  • SMTP Connection Prefix: leave as blank

In the next instalment, Modx Revolution Development - Part 09 - Security, we examine how to set up groups, and implement users' restriction according to their access rights.


Comments (0)



Add a new comment:

This thread has been closed from taking new comments.
  • twitter
  • linkedin
  • facebook
  • email
  • buzz
  • ping
  • stumbleupon
  • google
  • delicious
  • digg
  • newsvine
  • technorati
  • reddit
  • rss