# Example configuration for f1-register-flow

The example below makes use of 4 custom pages (3 actual pages, and 1 email template) to customize the visual appearance
of the form, and of PHP code to customize the logic.

# Custom Pages

## Registration Page - First Step (/register)

This is used for a pre-registration, we capture the user's name and email.

        <div class="register">
        [f1-registration-form-step1]
        <div class="form-group">
          <label>Work Email:</label>
          <input type="text" class="form-control" name="registration_login" required />
        </div>
        <div class="form-group">
          <label>First Name:</label>
          <input type="text" class="form-control" name="registration_first" />
        </div>
        <div class="form-group">
          <label>Last Name:</label>
          <input type="text" class="form-control" name="registration_last" required />
        </div>
        <input type="submit" class="btn btn-primary " value="Sign Up"/>

        <div class="link">
        <a href="/wp-login.php">Already Registered?  Log In Here</a>
        </div>
        [/f1-registration-form-step1]
        </div>


        [include_asset script="jquery-validate.js"]
        <script type="text/javascript">
        jQuery(document).ready(function($) {
          $("#registration_form").validate({});
        });
        </script>

## Registration Page - Step 2 (/register-complete)

If the information entered in step 1 is validated, we then prompt the user for the rest of the information.
In this particular setup we only allow users from a particular email domain to join.  We add a mobile number
and a "preferred email" field (this will be used for the actual email address, once they are registered).

        <div class="register">
        [f1-registration-form-step2]
          <p>We do indeed visit your company!  Please complete the form below to register.</p>
          <div class="form-group">
            <label>Preferred Email Address:</label>
            <input type="email" class="form-control" name="registration_email" required/>
            <span class="help-block">After you confirm your account using your work email, 
            you'll use your preferred email address as your login username.  We will also send
            your appointment confirmations and reminders to this address.</span>
          </div>
          <div class="form-group">
            <label>Mobile Number:</label>
            <input type="text" class="form-control" name="registration_mobile" required phoneUS="true"/>
          </div>
          <div class="form-group">
            <label>Password:</label>
            <input type="password" class="form-control" name="registration_password" id="registration_password" minlength="8" maxlength="20" required/>
          </div>
          <div class="form-group">
            <label>Confirm Password:</label>
            <input type="password" class="form-control" name="registration_password_confirm" 
                id="registration_password_confirm" equalTo="#registration_password"/>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" name="registration_subscribe"/>Yes, email me updates and special offers
            </label>
          </div>
          <input type="submit" class="btn btn-primary pull-right" value="Sign Up"/>
          <div class="link">
            <a href="/wp-login.php">Already Registered?  Log In Here</a>
          </div>
        [/f1-registration-form-step2]
        </div>

        [include_asset script="jquery-validate.js"]

        <script type="text/javascript">
        jQuery(document).ready(function($) {
          $("#registration_form").validate({
            rules: {
              registration_password: {
                // implement password complexity requirement?
              }
            }
          });
        });
        </script>

## Registration Confirmation (/register-checkemail)

This page will instruct the user to check their email.

        <div class="register">
        Almost there!  A confirmation message has been sent to the work email address that you provided during the Sign Up process.
        Please click the link in the email to verify your account.
        After that, you can login and book your first appointment!
        </div>
        
## Confirmation email template (/registration-confirmation-request-template)

This is used as the email template to send to the user.

        Dear {{registration_first}},
        
        Please confirm your registration by clicking the following link: {{registration_confirmation_url}}
        
        Sincerely,
        
        Wordpress
        

        
# Custom Code

In a custom plugin or theme, we can take advantage of the provided hooks to further customize the process:

        class RegistrationCustomizations {
            public function registerHooks() {
                add_filter('f1_registration_step1_validate', array(&$this, 'validateStep1'), 10, 2);
                add_filter('f1_registration_step2_validate', array(&$this, 'validateStep2'), 10, 2);
                add_filter('f1_registration_confirmation_validate', array(&$this, 'validateConfirmation'), 10, 2);
                add_filter('f1_registration_confirmation_request_email', array(&$this, 'confirmationEmailAddress'), 10, 2);
                add_action('f1_registration_confirmed', array(&$this, 'registrationConfirmed'), 10, 2);
            }
            
            // validation - step 1
            public function validateStep1($formData, $errors)
            {
                $login = $formData['registration_login'];
                $login = strtolower($login);
                $formData['registration_login'] = $login;
                $this->_validateCorporateEmail($login, $errors);
                // default "preferred email" to login
                $formData['registration_email'] = $login;
                return $formData;
            }
            
            // validation - step 2
            public function validateStep2($formData, $errors)
            {
                if (empty($formData['registration_mobile'])) {
                    $errors->add('phone_required', 'Please enter your phone number');
                }
                return $formData;
            }
            
            // Fires right before the user is created            
            public function validateConfirmation($formData, $errors) {
                // nothing to do right now, but this could be used for a last validation step
                return $formData;
            }
            
            // customize the email address used for the confirmation message
            public function confirmationEmailAddress($email, $formData) {
                // use their login as the email address for the confirmation message
                return $formData['registration_login'];
            }
            
            // final confirmation: additional user metadata to populate
            // this would be a good place to send them a confirmation email, if desired
            public function registrationConfirmed() {                
                update_user_meta($userId, 'phone', $formData['registration_mobile']);                               
            }
            
            // custom logic to make sure the email is an acceptable domain
            private function _validateCorporateEmail($email, $errors)
            {
                if (!is_email($email)) {
                    $errors->add('email_invalid', __('Invalid email'));
                } else {
                    $validEmails = Admin::getOption(SETTINGS_VALID_EMAIL_DOMAINS);
                    if ($validEmails) {
                        $parts = explode('@', $email);
                        if (strpos($validEmails, $parts[1]) === false) {
                            $errors->add('corp_error', 'Invalid email domain');
                        }
                    }
                }
            }
        }