{* Lets turn our API vars into POST vars, if we had an API call *}

<section class="mdl-login">
  <header class="mdl-login__header">
    {if intval($hubbub->joined.obj_hubbub_logofile->data.file_id) ne 0}
      <div class="mdl-login__image">
        {include file=Template::get('showImageCloudinary.html') alt=$hubbub->data.hubbub_name showFile=$hubbub->joined.obj_hubbub_logofile xSize=300 ySize=60 loadType='c_fit'}
      </div>
    {/if}
    <h2 class="mdl-login__title type-style-headerM">{"Register with"|gettext} {if isset($hubbub) && $hubbub ne false}{$hubbub->data.hubbub_name}{else}Crowdicity{/if}</h2>
  </header>
  <form action="https://{$base}/user/registerform" method="POST" id="register_form" onsubmit="verifyRegisterForm(); return false;">

    <h3 class="type-style-headerS">{"Create an account"|gettext}</h3>
    {if $hubbub->data.hubbub_closed eq 1}
      <p>{"If you have been <strong>invited to join</strong> this community <u>or</u> would like to <strong>request access</strong> and haven't already got a Crowdicity account then create yours here."|gettext}</p>
    {else}
      <p>{"If you haven't already got a Crowdicity account then create yours here."|gettext}</p>
    {/if}

    {if isset($errors.registerError)}<div class="mdl-alert -error">{$errors.registerError}</div>{/if}

    <div class="">
      <div>

        <ul class="mdl-form__group">
          <li class="mdl-form__item -required">
            <label class="mdl-form__label" for="user_screenname">{"Display name"|gettext}</label>
            <input type="text" class="mdl-form__input {if isset($errors.user_screenname)}-error{/if}" name="user_screenname" id="user_screenname" value="{$smarty.request.user_screenname|escapeonce}">
            {if isset($errors.user_screenname)}<span class="mdl-form__error">{$errors.user_screenname}</span>{/if}
            <p class="mdl-form__info">{"This is how you will be known within this community and across Crowdicity"|gettext|escape}</p>
          </li>
          <li class="mdl-form__item -required">
            <label class="mdl-form__label" for="user_email">{"Email address"|gettext}</label>
            <input type="email" class="mdl-form__input {if isset($errors.user_email)}-error{/if}" name="user_email" id="user_email" value="{$smarty.request.user_email|escapeonce}">
            {if isset($errors.user_email)}<span class="mdl-form__error">{$errors.user_email}</span>{/if}
            <p class="mdl-form__info">
              {if $hubbub->data.hubbub_closed eq 1}
                {"Important: Please use the same email address as your invite email was sent to"|gettext|escape}. {"You may be asked to confirm this address after registering"|gettext}
              {else}
                {"You will be asked to confirm this address after registering"|gettext|escape}
              {/if}
            </p>
          </li>
          <li class="mdl-form__item -required">
            <label class="mdl-form__label" for="user_password">
              {"Password"|gettext}
            </label>
            <input type="password" class="mdl-form__input {if isset($errors.user_password)}-error{/if}" autocomplete="off" name="user_password" id="user_password">
            {if isset($errors.user_password)}<span class="mdl-form__error">{$errors.user_password}</span>{/if}
            <p class="mdl-form__info">{"Passwords need to be at least %d characters long"|gettext|sprintf:"8"|escape}</p>
          </li>
          <li class="mdl-form__item -required">
            <label class="mdl-form__label" for="user_passwordConfirm">
              {"Password confirm"|gettext}
            </label>
            <input type="password" class="mdl-form__input {if isset($errors.user_password)}-error{/if}" autocomplete="off" name="user_passwordConfirm" id="user_passwordConfirm">
            {if isset($errors.user_passwordConfirm)}<span class="mdl-form__error">{$errors.user_passwordConfirm}</span>{/if}
            <p class="mdl-form__info">{"Repeat password to ensure it was typed in correctly"|gettext|sprintf:"8"|escape}</p>
          </li>
          
          <li class="mdl-form__item">
            <label class="mdl-form__label -inline">
              <input type="checkbox" class="mdl-form__input -checkbox" name="user_agreeterms" id="user_agreeterms" value="1" {if isset($smarty.request.user_agreeterms)}checked="checked"{/if}>
              {if $hubbub->hubbub_arrOptions['useCommunityPoliciesAsMain'] == 0}
                {'I agree to the Crowdicity %1$sTerms of Use%2$s'|gettext|sprintf:'<a href="/hubbub/termsofuse" target="_blank">':'</a>'}
              {else}
                {if strlen($hubbub->hubbub_arrOptions['communityPolicyName']) == 0}
                  {'I agree to the community %1$sTerms of Use%2$s'|gettext|sprintf:'<a href="/hubbub/termsofuse" target="_blank">':'</a>'}
                {else}
                  {'I agree to the %1$s %2$sTerms of Use%3$s'|gettext|sprintf:$hubbub->hubbub_arrOptions['communityPolicyName']:'<a href="/hubbub/termsofuse" target="_blank">':'</a>'}
                {/if}
              {/if}
            </label>
            {if isset($errors.user_agreeterms)}<div class="mdl-form__error">{$errors.user_agreeterms}</div>{/if}
          </li>
          <li class="mdl-form__item">
            <input type="hidden" name="user_agreeprivacyPolicy" id="user_agreeprivacyPolicy" value="1">
            {if $hubbub->hubbub_arrOptions['useCommunityPoliciesAsMain'] == 0}
              {'Your personal data will be processed in accordance with our %1$sPrivacy Policy%2$s'|gettext|sprintf:'<a href="/hubbub/privacypolicy" target="_blank">':'</a>'}
            {else}
              {if strlen($hubbub->hubbub_arrOptions['communityPolicyName']) == 0}
                {'Your personal data will be processed in accordance with our %1$sPrivacy Policy%2$s'|gettext|sprintf:'<a href="/hubbub/privacypolicy" target="_blank">':'</a>'}
              {else}
                {'Your personal data will be processed in accordance with the %1$s %2$sPrivacy Policy%3$s'|gettext|sprintf:$hubbub->hubbub_arrOptions['communityPolicyName']:'<a href="/hubbub/privacypolicy" target="_blank">':'</a>'}
              {/if}
            {/if}
          </li>
          {if $hubbub->hubbub_arrOptions.enableRegistrationCaptcha eq 1}
            <li class="mdl-form__item">
              <input type="hidden" name="id" value="{$captchaId}" />
              {{$captchaHTML}}
              {if isset($errors.captcha)}
                <div class="mdl-form__error">{$errors.captcha}</div>
              {/if}
            </li>
          {/if}
        </ul>

      </div>
    </div>
    <div class="mdl-form__button-row">
      <a href="/" class="mdl-button -tertiary">{"Cancel"|gettext}</a>
      <input type="submit" class="mdl-button -primary" value="{"Register"|gettext}">
    </div>
    <input type="hidden" name="action" value="registerMe">
    <input type="hidden" name="useraccess_pendingkey" value="{$smarty.request.useraccess_pendingkey|escapeonce}">
    {if isset($smarty.request.returnTo)}
      <input type="hidden" name="returnTo" value="{$smarty.request.returnTo}" />
    {/if}
  </form>
</section>

<script type="text/javascript">
    input_hasValue(['.cwd-form-group__input']);

    function getOrCreateErrorDiv(name, afterDiv) {
        var errorField = jQuery('#' + name + '_error');
        if (!errorField.length){
            var after;
            if (typeof afterDiv !== 'undefined'){
                after = afterDiv;
            } else {
                after = name;
            }
            jQuery('#' + after).parent().append(jQuery('<div>', { class: 'mdl-form__error' , id : name + '_error' } ));
            errorField = jQuery('#' + name + '_error');
        }
        return errorField;
    }

    function clearPasswordErrors(){
        jQuery('#user_password_error').remove();
        jQuery('#user_password2_error').remove();
        jQuery('#user_password3_error').remove();
    }

    function checkPasswordComplexity() {
        if(jQuery("#user_password_error").hasClass('mdl-alert -success green') && jQuery("#user_password2_error").hasClass('mdl-alert -success green')) {
            jQuery.ajax("user/validatepassword",{
                data: jQuery("#register_form").serialize(),
                type: "post",
                success: function(data) {
                    var strengthErrorDiv = getOrCreateErrorDiv("user_password3", "user_password2_error");

                    if (data ==="true") {
                        strengthErrorDiv.html( "{"Password is strong."|gettext}" );
                        strengthErrorDiv.addClass('mdl-alert -success green');
                        strengthErrorDiv.removeClass('mdl-form__error');
                    } else {
                        strengthErrorDiv.html( "{"Please choose a stronger password. Try a mix of letters, numbers, and symbols."|gettext}" );
                        strengthErrorDiv.addClass('mdl-form__error');
                        strengthErrorDiv.removeClass('mdl-alert -success green');
                    }
                }
            })
        } else {
            jQuery('#user_password3_error').remove();
        }
    }

    function verifyRegisterForm() {

        var sendForm = true;
        var formError = false;
        var focusOrder = ["user_screenname", "user_email", "user_password", "user_passwordConfirm", "captcha"];

        var screennameInputField = jQuery('#user_screenname');
        var emailInputField = jQuery('#user_email');
        var passwordInputField = jQuery('#user_password');
        var confirmPasswordInputField = jQuery('#user_passwordConfirm');
        {if $hubbub->hubbub_arrOptions.enableRegistrationCaptcha eq 1}
        var captchaInputField = jQuery("#captcha_code");
        {/if}

        if (screennameInputField.val().length < {$vars['screennameMinLength']} || screennameInputField.val().length > {$vars['screennameMaxLength']}) {
            if(screennameInputField.val().length < {$vars['screennameMinLength']}) {
                getOrCreateErrorDiv("user_screenname").html( "{"Display name must be at least %d characters."|gettext|sprintf:$vars['screennameMinLength']}" );
            } else {
                getOrCreateErrorDiv("user_screenname").html( "{"Display name must be no more than %d characters."|gettext|sprintf:$vars['screennameMaxLength']}" );
            }

            screennameInputField.focus();
            formError = true;
            sendForm = false;
        } else {
            jQuery('#user_screenname_error').remove();
        }

        if (passwordInputField.val().length === 0) {
            getOrCreateErrorDiv("user_password").html( "{"Enter a password."|gettext}" );

            confirmPasswordInputField.val("");
            confirmPasswordInputField.removeClass('has-value');
            if(!formError) {
                passwordInputField.focus();
            }
            formError = true;
            sendForm = false;
        } else {
            if (jQuery('#user_password_error').hasClass('mdl-form__error') || jQuery('#user_password2_error').hasClass('mdl-form__error') || jQuery('#user_password3_error').hasClass('mdl-form__error')) {
                if (!formError){
                    passwordInputField.focus();
                }
                confirmPasswordInputField.val("");
                confirmPasswordInputField.removeClass('has-value');
                sendForm = false;
            }
        }

        if ((confirmPasswordInputField.val().length === 0 || passwordInputField.val() !== confirmPasswordInputField.val())) {
            if (jQuery('#user_password_error').hasClass('mdl-alert -success green') &&
                jQuery('#user_password2_error').hasClass('mdl-alert -success green') &&
                jQuery('#user_password3_error').hasClass('mdl-alert -success green')) {

                if (confirmPasswordInputField.val().length === 0) {
                    getOrCreateErrorDiv("user_passwordConfirm").html( "{"Confirm your password."|gettext}" );
                } else {
                    getOrCreateErrorDiv("user_passwordConfirm").html( "{"Those passwords didn't match. Try again."|gettext}" );
                }

                confirmPasswordInputField.val("");
                confirmPasswordInputField.removeClass('has-value');

                if(!formError) {
                    confirmPasswordInputField.focus();
                }
            } else {
                jQuery('#user_passwordConfirm_error').remove();
            }

            formError = true;
            sendForm = false;

        } else {
            jQuery('#user_passwordConfirm_error').remove();
        }

        if (!jQuery("#user_agreeterms").is(':checked')) {
            getOrCreateErrorDiv("user_agreeterms").html( "{"You must confirm your agreement to continue."|gettext}" );

            sendForm = false;
        } else {
            jQuery('#user_agreeterms_error').remove();
        }

        {if $hubbub->hubbub_arrOptions.enableRegistrationCaptcha eq 1}
        if (!captchaInputField.val().length) {
            getOrCreateErrorDiv("captcha").html( "{"Enter captcha."|gettext}" );

            if(!formError) {
                captchaInputField.focus();
            }
            sendForm = false;
        } else {
            jQuery('#captcha_error').remove();
        }
        {/if}

        if(sendForm) {
            jQuery.ajax("/user/registerform", {
                data: jQuery("#register_form").serialize() + "&responseMode=json",
                type: "post",
                success: function(data) {
                        if (typeof data.message === 'object'){
                            if (Object.keys(data.message).length){
                                if(data.message.hasOwnProperty('user_password')) {
                                    passwordInputField.val("");
                                    passwordInputField.removeClass('has-value');
                                    confirmPasswordInputField.val("");
                                    confirmPasswordInputField.removeClass('has-value');
                                    clearPasswordErrors();
                                }
                                for (var key in data.message){
                                    if (data.message.hasOwnProperty(key)) {
                                        getOrCreateErrorDiv(key).html( data.message[key] )
                                    }
                                }

                                for (var i = 0; i< focusOrder.length; i++) {
                                    if (data.message.hasOwnProperty(focusOrder[i])){
                                        if (focusOrder[i] === 'captcha') {
                                            jQuery('#captcha_code').focus();
                                        } else {
                                            jQuery('#' + focusOrder[i]).focus();
                                        }
                                        break;
                                    }
                                }
                                {if $hubbub->hubbub_arrOptions.enableRegistrationCaptcha eq 1}
                                captchaInputField.val("");
                                securimageRefreshCaptcha('captcha_image', 'captcha_image_audioObj');
                                {/if}
                            }
                        } else {
                            jQuery('.mdl-login').html(data);
                        }
                }
            });
        }
    }

    function verifyPasswordStrength(password) {
        if (password.length === 0) {
            clearPasswordErrors();
            getOrCreateErrorDiv("user_password").html( "{"Enter a password."|gettext}" );
            return;
        }

        var lengthErrorDiv = getOrCreateErrorDiv("user_password");
        if(password.length < {$vars['passwordMinLength']} || password.length > {$vars['passwordMaxLength']}){
            lengthErrorDiv.addClass('mdl-form__error');
            lengthErrorDiv.removeClass('green');

            if (password.length < {$vars['passwordMinLength']}) {
                lengthErrorDiv.html( "{"Passwords must contain a minimum of %d characters."|gettext|sprintf:$vars['passwordMinLength']}" );
            } else {
                lengthErrorDiv.html( "{"Passwords must not be longer than %d characters."|gettext|sprintf:$vars['passwordMaxLength']}" );
            }
        } else {
            lengthErrorDiv.html( "{"Password length correct."|gettext}" );
            lengthErrorDiv.removeClass('mdl-form__error');
            lengthErrorDiv.addClass('mdl-alert -success green');
        }

        var uppercase = /[A-Z]/.test(password)?1:0;
        var lowercase = /[a-z]/.test(password)?1:0;
        var number = /[0-9]/.test(password)?1:0;
        var symbol = /[^\w]/.test(password)?1:0;

        var charactersErrorDiv = getOrCreateErrorDiv("user_password2", "user_password_error");
        if (uppercase + lowercase + number + symbol < 3){
            charactersErrorDiv.html( "{"Password must contain 3 of the following characters types: uppercase, lowercase, number, symbol."|gettext}" );
            charactersErrorDiv.removeClass('mdl-alert -success green');
            charactersErrorDiv.addClass('mdl-form__error');
        } else {
            charactersErrorDiv.html( "{"Password contains at least 3 character types."|gettext}" );
            charactersErrorDiv.removeClass('mdl-form__error');
            charactersErrorDiv.addClass('mdl-alert -success green');
        }
        checkPasswordComplexity();
    }

    jQuery(function() {
        var search_timeout = undefined;

        jQuery('#user_password').bind('input propertychange', function (e) {
            var password = jQuery(this).val();

            if (search_timeout != undefined) {
                clearTimeout(search_timeout);
            }

            search_timeout = setTimeout(function () {
                search_timeout = undefined;
                verifyPasswordStrength(password);
            }, 200);
        });

        jQuery('#user_screenname').blur(function(){
            if (jQuery('#user_password3_error').length) {
                checkPasswordComplexity();
            }
        });

        jQuery('#user_screenname').bind('input propertychange', function (e) {
            if (jQuery('#user_password3_error').length) {
                checkPasswordComplexity();
            }
        });

        jQuery('#user_email').blur(function(){
            if (jQuery('#user_password3_error').length) {
                checkPasswordComplexity();
            }
        });

        jQuery('#user_email').bind('input propertychange', function (e) {
            if (jQuery('#user_password3_error').length) {
                checkPasswordComplexity();
            }
        });
    });
</script>